?

Log in

No account? Create an account

Previous Entry | Next Entry

More Layout Tweaking...

I didn't quite like the "Comments" part of the LJ layout.

In particular, I didn't like the two-toned look. So I made the following change:

.comment-even {
    background-color: #000;
    border: 1px solid #555;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}


While I was at it, I also specified a margin for the comments header. It bothered me for a while that the word "Comments" was right against the separator on the left:

.comments-header {
    margin-left: 10px;
}


 
ETA:  With Lee appearing so few and far in between this season, I'm feeling nostalgic for the earlier story lines.  So I made this new banner and changed my LJ header once again.  For now, Anne Geddes' baby has to go...  to make room for more Lee:

/* Lee's jail pictures */
#header {
    background: #000 url(http://img337.imageshack.us/img337/7382/apollobloodyhands3dy0.jpg) no-repeat bottom right;
    padding: 0;
    border-bottom: 1px solid #666;
}


In my previous post, I've stated the optimal banner width for the Expressive layout is 208px.  Well, I found a way to over-write that:

#header-inner {
    height: 294px;
}


And I need to move the header text around so that they can stand out more:

#header-text {
    margin-top: -20px;
}
#header-name {
    margin-top: 150px;
}
#header-description {
    margin-top: -5px;
}


ETA2: On second thought, I've always bothered by the fact I don't really have control over how the journal title and subtitle would appear.  Often the fancier fonts I choose on my system are not available on other systems.  As such, the font-family lists ended up being a mile long.  Nonetheless, they don't cover ALL types of platforms.

After much internal debate over the pro and con's, I've finally decided to make the title and subtitle text as a part of the banner picture.  This way I have more control over how they would appear across different platforms.  One thing I give up in doing so is the ability to click on the journal title, which functions the same as clicking on the "Recent Entries" link.  Also my "Friends" page has a different title ("Wacky Cohorts").  But now, when that page is displayed, the title doesn't get updated in the header.  Still, not too bad a sacrifice for a steady look & feel...

#header {
    background: #000 url(http://img505.imageshack.us/img505/3205/apollobloodyhands3titlefn5.jpg) no-repeat bottom right;
    padding: 0;
    border-bottom: 1px solid #666;
}


Then, I pushed the top navigation bar ("Recent Entries | Archives | Friends | User Info | Memories") to the bottom of the header:

#header-text {
    margin-top: 255px;
}


The neat thing is I don't need to do anything to #header-name (journal title) and #header-description (journal subtitle) anymore.  The title and subtitle are "invisible" now since they are pushed below header's visible "viewport".  But they are still there.  So for mini browsers used on mobile phones, where the banner picture don't get loaded, they would appear instead!

Finally, these are the last things I did:  I took out the "fancy" font of the navigation bar, got rid of the vertical separator in between, and reversed the text-decoration between the normal and hover modes:

/* change the L&F of top navigation bar */
#header .nav .item {
    border-left: 0px solid #000;
}
#header .nav a {
    font-weight: normal;
    text-decoration: none;
    color: #006666;
}
#header .nav a:hover {
    text-decoration: underline;
}


ETA 3: Okay, I lied.  One more thing I changed:  I moved the userpics in the "Comments" section to the left:

.comment-meta .user-icon {
    float: left;
    margin-left: 0px;
}


Viola!  I'm done now...for real.
 

Tags:

Comments

( 6 comments — Leave a comment )
asta77
May. 12th, 2008 04:44 pm (UTC)
You know coding. Good to know! :)
xwacky
May. 12th, 2008 04:47 pm (UTC)
Know is a very strong word. ;)

But thanks!
helen_c
May. 13th, 2008 03:33 pm (UTC)
Oh, my, that's a pretty banner.

::off to drool some more at it::
xwacky
May. 13th, 2008 05:39 pm (UTC)
Thanks! :)

I needed to get more Lee whichever way I could... ;)
(Deleted comment)
xwacky
May. 14th, 2008 06:31 pm (UTC)
Thanks!

You know, in part, you are responsible for this. You renewed my interest in playing with Photoshop when you pointed out the way to bstg_icontest! *g*
( 6 comments — Leave a comment )

Latest Month

November 2012
S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 
Powered by LiveJournal.com
Designed by chasethestars