Another LJ Makeover!
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. ;)
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. ;)