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

[silwyna.livejournal.com]

It looks great, X :)

I want to make lj more personal for some time now, but I simply have no idea of all the things you wrote up there. You're awesome!!! :)

[xwacky.livejournal.com]

Thank you, Sil!

Your lj is beautiful! But I know what you mean by wanting to personalize it. :b

Some other more basic layouts allows users to supply customized banners easily. However the rest of setups are too basic.

So I chose to modify a ready made theme instead. The codes I specified here should be suitable for any theme under the Expressive styled layout at LiveJournal. The one I used is called "Chopstick".

If you like another theme under the Expressive layout, but want to use your own banner, you can add the following css code in the "Custom Stylesheet" field under the "Custom CSS" link (provided on the left of the page when you select the "Customize your theme" option):

#header {
   background: url(...replace your image url here...) no-repeat bottom right;
   padding: 0;
   border-bottom: 1px solid #666;
}

Just remember you don't want to host your banner image at Photobucket because it automatically reduces image sizes if it gets too wide/tall. ImageShack is a great alternative...

On the other hand, if you just want to add a banner picture to your current pretty layout (you are using the Bloggish style called "Beckett" right?), you may want to specify the following code instead:

#banner
{
   width: 760px; /* necessary for ie win */
   background: #600 url(...replace your image url here...) no-repeat;
}

For "Beckett" or other Bloggish styled layout, the optimal banner size should be 760 pixel in width. But I think you can make the height bigger though.

Also you don't really need the #600 color specification here if your banner is going to fill up the entire header area. By the way #600 is the maroon-ish color that fills up your header.

Hopefully this helps!

[silwyna.livejournal.com]

Thank you! :)

[xwacky.livejournal.com]

You are welcome!

Hopefully I made sense, and Good luck! :)

[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

[reidluver.livejournal.com]

I apologize for taking your time, but how do you change the navigation bar from the top to the bottom? I tried float but apparently that only works from left to right only on the top and position didn't help either. I've tried looking at how your page is formatted using CTRL U but nothing seemed to work. How did you do it?