Another LJ Makeover!

[xwacky]

This post is made for keeping a record on what I did.

My LJ received another face-lift, from moi!

I was getting a bit tired of the old look and feel, even if the header banner had two pictures of Jamie! ;)

Yesterday, I saw a banner made with Anne Geddes' famous baby photograph on iGoogle.  I decided to adopt it for my own use.  And while I was at it, I made some significant changes.

The changes mentioned here should be applicable to any Expressive themed layouts at Livejournal.

I find for Expressive themed layouts, the header picture's optimal size should be 940 x 208.  In the past, I've hosted my banners at Photobucket.  However, the site has a size restriction -- a picture is automatically resized (proportionally) to 800 px in width if it gets too big!  So I switched to ImageShack instead (Flickr didn't work for me either).

To specify my customized header picture, I added the following css codes:

#header {
    background: #fff url(http://img291.imageshack.us/img291/3864/annegeddesblack940x208sp3.jpg) no-repeat bottom right;
    padding: 0;
    border-bottom: 1px solid #666;
}

The border-bottom: specification draws a thin gray line at the bottom of the header, separating the picture from the main body.

I then decided to adopt a darker look for the LJ.  So I changed the main body's background to black:

#page { 
    background-color: #000;
}

Now, I had to change the text to a whitish color, otherwise nothing would've shown!  The following css codes did the trick:

body {
    background: #08252f url(http://img237.imageshack.us/img237/6889/bodyrw7.gif) repeat-y  top center;
    color: #dddddd;
}

The background: specification changes the overall background (not the main content which stays black) to a dark teal color, and puts a "shadowy" outline around the main body, thus creating a 3-D like effect.  The latter is done by adding the specified image (a 962x4 solid dark gray "box") to the background.  The repeat-y specification is very important since I only want the dark gray "box" to be repeated vertically.

Now that I've changed the main body's background to black, I have to change the background color of the even numbered comments (If I don't, they'd be about the same color as the foreground text).  Here's what I did:

.comment-even {
    background-color: #222;
    border: 1px solid #222;
}

Now, I'm coming to my "big achievement" of the day -- I finally figured out a way to hide the "Designed by" section!  By now, I've made so many changes to the theme that I feel it's not appropriate anymore to list the person who made the original "Chopstick" as the designer here.

I admit my solution to the problem is a kludge.  I changed background and foreground (including link text) colors to black, so the section is no longer visible:

.asset-name-hover, .asset-name-hover a {
    background-color: #000;
    color: #000;
}

The following css codes were added awhile ago.  I'm listing them here for the record:

Remove the thin white border around the main content (I changed the line thickness to 0px instead of 1px so nothing is drawn):

#container-inner {
    border-left: 0px solid #fff;
    border-right: 0px solid #fff;
}

Change the font of the LJ title:

#header-name a {
    font-family: "brush script mt italic", "brush script mt", Delphine, "Vivaldi Italic", georgia, "times new roman", times, "hiraminpro-w3", "ms mincho", serif;
    font-weight: bold;
    font-size: 48px;
    color: #669;
}

Change the font of the LJ subtitle:

#header-description {
    font-family: "rage italic", "brush script mt", Delphine, "Rage Italic LET Plain:1.0", georgia, "times new roman", times, "hiraminpro-w3", "ms mincho", serif;
    font-size: 24px;
    font-weight: bold;
    color: #669;
}

Change the font of top navigation bar ("Recent Entries | Archive | Friends | User Info | Memories"):

#header .nav .item {
    border-left: 1px solid #809aab;
    font-family: "brush script mt italic", "brush script mt", Delphine, Pristina, georgia, "times new roman", times, "hiraminpro-w3", "ms mincho", serif;
    font-size: 20px;
}

Change the color of top navigation bar ("Recent Entries | Archive | Friends | User Info | Memories"):

#header .nav a {
    font-weight: normal;
    color: #809aab;
}

Change the font of the entry titles:

.asset-name a,
.asset-name,
.asset-stream-list .post-asset .asset-name a {
    font-family: "rage italic", "brush script mt", Delphine, "Rage Italic LET Plain:1.0", georgia, "times new roman", times, "hiraminpro-w3", "ms mincho", serif;
    color: #afc2c9;
}

Change the size of the entry titles:

.page-header2,
.page-header2 a {
    font-size: 36px;
    color: #afc2c9;
}

Move the userpic in individual entry to the right and add a border around the userpic:

.user-icon {
    float: right;
    margin-left: 5px;
    border: 1px solid #666;
    padding: 5px;
}

Draws a line between the main body and the sidebar on the left:

#alpha-inner {
    margin: 0 19px 0 0;
    border-left: 1px solid #666 !important;
}
#beta-inner {
    border-right: 1px solid #666 !important;
    margin-right: -1px !important;
}

Add a left margin to the journal entries:

.asset-name a,
.asset-name,
.asset-stream-list .post-asset .asset-name a {
    margin-left: 5px;
}
.asset-body,
.asset-meta-list,
.asset-tags,
.lj-currents,
.comment,
.prevnext {
    margin-left: 10px;
}

Change the double lines between the sections in the sidebar to a darker color:

.powered-by-widget .widget-content,
.widget-header {
    margin-bottom: 8px;
    border-top: 3.04px double #999;
}

Change the color of the section titles:

.widget-header,
.widget .widget-header a,
.widget-header .edit a {
    color: #afc2c9;
}

Get rid of the open quotation mark image for blockquote:

.post-asset .asset-body blockquote {
    background: #000;
    margin-top: 5px;
}

And finally, get rid of the extra spaces at the bottom of the page (Chopstick theme used 60px margin at the bottom):

#content {
    margin-bottom: 10px;
}

That's all!  Phew, I'm such a dork.  ;)

 

Comments

[eternal-vows.livejournal.com]

...You have no idea how thankful I am of this long geekout. (No offense intended. I go on nerdouts all the time, mostly because my computer skills are limited to getting down on my knees and begging, "Please, OpenOffice, please DO NOT CRASH!" The method does not regularly work.)

Anyway, I have been avoiding Expressive because parts of the layout gave me headaches. Then I Googled for a few codes (without much hope, truth be told), and I found this entry. I had no idea what the codes meant, but with your Titles That Tell What Each Code Does, I copied and pasted, fiddled with numbers and directions, and through trial and error, have made Expressive un-headachey! (Wow, long sentence there.) So thank you a bunch. :D