xwacky (xwacky) wrote,

  • Mood:

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: geek rant
  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.