?

Log in

No account? Create an account

Previous Entry | Next Entry

Poe woes... - SOLVED!

  • Dec. 27th, 2006 at 7:20 PM


    Hi all! I was defeated by a layout attempt about 5 months ago, but the reactivation of my Paid Account spurred me on to make a new layout! So, using the Poe theme, I went about using the tips and tricks I found on this wonderful community to build a simple, yet unique layout. Anyway, here are some of the issues I'm having and I would really, really appreciate any help you clever folks can offer. Please forgive me if any of this is newbie mistakes... I am new to this and I've thoroughly searched this community! Oh, my layout was made with 1280×1024, if that makes a difference..


Here's my Layer code.. http://www.livejournal.com/customize/advanced/layersource.bml?id=7277563 . And here is my CSS...

#header { height: 350px; }
#header-inner { height: 350px; }

#header-name { display: none; }
#header-description { display: none; }
#header-content-inner {margin: 310px -190px;}
.nav { display:}

#page-inner {
background-color: #000000;
}

.layout-tw #content-inner {
background-position: top left;
background-image: url(http://i27.photobucket.com/albums/c174/bleakharvest/2_leftbgcopy2.gif);
background-color:#000000;
}

.layout-tw #beta .widget-header{
background-image:
url(http://i27.photobucket.com/albums/c174/bleakharvest/2_leftwidget2.gif);
background-repeat:no-repeat;
color: #CCCCCC;
}

.layout-tw #gamma .widget-header {
background-image:
url(http://i27.photobucket.com/albums/c174/bleakharvest/2_leftwidget2.gif);
background-repeat:no-repeat;
color: #CCCCCC;
}

body {
font-family:Palatino, Palatino Linotype, Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color:#FFFFFF;
background: url(http://i27.photobucket.com/albums/c174/bleakharvest/2_bK2.gif)
center top repeat-y #000000;
}

.layout-tw #header-inner {
background-image: url(http://i27.photobucket.com/albums/c174/bleakharvest/newbanner.jpg);
}

.comments-header {
color : #968B74;
}
.comment-even {
border-color : #abb67e;
background-color : #968B74;
}
.asset-body blockquote {
border-left-color : #ffffff;
}

.layout-tw #content-inner,
.layout-wt #content-inner,
.layout-wtt #content-inner,
.layout-twt #content-inner {
background-position: top left;
background-repeat: repeat-y;
background-color:#22201D;
color:#BCB6B1;
}

div#header-name a
{
color:#5C5D5C;
font-variant:small-caps;
font-style:italic;
}

div.hr
{
border-top: thin dashed black;
width: 33%;
margin-bottom: .5em;
}


h2.asset-name {
margin-bottom: 0px;
}
div.asset-meta {
margin-bottom: 0px;
}
div.asset-header {
margin-bottom: 0px;
}

div.user-icon
{
border: 1px solid #000000;
padding: 3px;
}

div.user-pic
{
border: 1px solid #000000;
padding: 3px;
margin-bottom: 3px;
}


____________________________________________________________


Okay, now onto the issues themselves..

    1. The colour of the font is pretty much spoiling the entire layout. If you press Ctrl+A you'll see a bunch of text that you couldn't see or could barely make out. Particually in my sidebars... I'd love to make it a slightly lighter font.

    2. Again, a font problem. I managed to move the navigation bar into the spot that I desires, but the font colour is white... against a white background.

    3. The image in the sidebars ( click ) is being cut off.. is there a way to fix this?

    4. In light of that, can I reposition the text on that sidebar image so that it doesn't cover the image?

    5. Is there a way to make the background colours on my friends page transparent? It's super fugly....

    6. This might be my biggest problem: my comments. Here is how it looks now, compared to how I'm trying to make it. As you can probably tell, the text is almost invisible! I tried the code on inabear's request, but it wouldn't work! Please, help me =___=;;

I think that might be it.. if there is anything that's wrong with my code, please point it out! Much thanks in advance!

Comments

( 7 comments — Leave a comment )
av8rmike
Dec. 28th, 2006 03:45 am (UTC)
Whew, lots of stuff to cover. OK, here goes. For #1, these are the lines controlling the sidebar colors:
#beta .archive-widget ul.widget-list .item,
#beta .widget a { color: #242424; }

.widget-content {
    color:#000000;
}
Change the colors to whatever suits your scheme. For #2:
.nav,
.nav a {
    color: #cccccc;
}
.nav .item {
    border-color: #cccccc;
}
(First one is text, second is the vertical lines.) #3 & 4 are a little trickier. Look for the section in your CSS with .layout-tw #beta .widget-header and add the padding and height properties. I got good results with:
padding: 10px 0px 0px 50px; /* top, right, bottom, left */
height: 50px;
but you'll have to alter those to get the positioning right. For #5, check the setting of "Show friends colors on friends page" in the Customize Journal->Colors page, or put set opt_friends_colors = false; into your theme layer source. Finally, for the comment boxes, you were pretty close. This is the right CSS class: #comments .comment-odd {} for one set and #comments .comment-even {} for the other.
bleakharvest
Dec. 28th, 2006 01:53 pm (UTC)
Thank you!
Holy crap! Everything worked a charm!! The only thing I'm having issues with is the last part (the comment section). Am I doing this right, because the "odd" part remains the same.. and whenever I switch the position of the even and odd, the entire layout reverts to its original look o__O


#header { height: 350px; }
#header-inner { height: 350px; }

#header-name { display: none; }
#header-description { display: none; }
#header-content-inner {margin: 312px -188px;}
.nav { display:}

#page-inner {
background-color: #000000;

}
.comments-header {
color : #968B74;
}
#comments .comment-even {
border-color : #34302D;
background-color : #34302D;
}
#comments .comment-odd (
border-color : #34302D;
background-color : #321201C;
)
.asset-body blockquote {
border-left-color : #34302D;
}

.nav,
.nav a {
color: #000000;
}
.nav .item {
border-color: #000000;
}

.layout-tw #content-inner {
background-position: top left;
background-image: url(http://i27.photobucket.com/albums/c174/bleakharvest/2_leftbgcopy2.gif);
background-color:#000000;
}

.layout-tw #beta .widget-header{
background-image:
url(http://i27.photobucket.com/albums/c174/bleakharvest/2_leftwidget2.gif);
background-repeat:no-repeat;
padding: 10px 0px 0px 40px;
height: 50px;
color: #CCCCCC;
}

.layout-tw #gamma .widget-header {
background-image:
url(http://i27.photobucket.com/albums/c174/bleakharvest/2_leftwidget2.gif);
background-repeat:no-repeat;
padding: 10px 0px 0px 40px;
height: 50px;
color: #CCCCCC;
}

#beta .archive-widget ul.widget-list .item,
#beta .widget a { color: #6D6863; }

.widget-content {
color:#555555;
}

body {
font-family:Palatino, Palatino Linotype, Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color:#FFFFFF;
background: url(http://i27.photobucket.com/albums/c174/bleakharvest/2_bK2.gif)
center top repeat-y #000000;
}

.layout-tw #header-inner {
background-image: url(http://i27.photobucket.com/albums/c174/bleakharvest/newbanner.jpg);
}

.layout-tw #content-inner,
.layout-wt #content-inner,
.layout-wtt #content-inner,
.layout-twt #content-inner {
background-position: top left;
background-repeat: repeat-y;
background-color:#22201D;
color:#BCB6B1;
}

div#header-name a
{
color:#5C5D5C;
font-variant:small-caps;
font-style:italic;
}

div.hr
{
border-top: thin dashed black;
width: 33%;
margin-bottom: .5em;
}


h2.asset-name {
margin-bottom: 0px;
}
div.asset-meta {
margin-bottom: 0px;
}
div.asset-header {
margin-bottom: 0px;
}

div.user-icon
{
border: 1px solid #000000;
padding: 3px;
}

div.user-pic
{
border: 1px solid #000000;
padding: 3px;
margin-bottom: 3px;
}

av8rmike
Dec. 28th, 2006 02:27 pm (UTC)
Re: Thank you!
The "odd" part should tip you off...
#comments .comment-odd (
border-color : #34302D;
background-color : #321201C;
)
The ()s should be {}s. ;)
bleakharvest
Dec. 28th, 2006 02:56 pm (UTC)
Grah..
Stupid mistake, sorry for wasting your time with that ~__~;

One last question, I promise: How can I alter/replace this on my comment page... I didn't even notice it before. Here's a link if you need to see the fiend in its natural habitat =P
av8rmike
Dec. 28th, 2006 03:22 pm (UTC)
Re: Grah..
Try adding background-image: none; to #comments .comment-even.
bleakharvest
Dec. 29th, 2006 02:38 pm (UTC)
Winrar is you!
    Aye, that worked a charm. I actually managed to do something else by tinkering with it slightly. By alterting it to background-image: url(http://i27.photobucket.com/albums/c174/bleakharvest/even.jpg); it replaced the image, instead of just erasing it!

I can't thank you enough for your help. Do you mind if I friend you? You've been more helpful than my entire friends list combined ¬__¬
av8rmike
Jan. 2nd, 2007 03:11 pm (UTC)
Re: Winrar is you!
You can friend me if you like, but I don't post much and most of the time it's only stuff of interest to me. Like my boring life. ;)
( 7 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars