This coding index will help you with a layout on Live Journal. It was originally created by cartonage but was taken down after leaving LJ. This was found on the Wayback Machine and re-posted here for reference.
.sbarbody

Defines: The basic look of the contents of all your sidebar boxes except for the blurb box and the box with your default usericon in it.

Location Sidebar
.sbarbody2

Defines: The basic look of the content of the blurb box

Location Sidebar
.sbarcalendar

Defines: The look of all the little boxes in the calendar that contain dates except for the dates on which a post has been made.

Location: Sidebar

.sbarcalendarposts

Defines: The look of the little boxes in the calendar on the dates posts have been made

Location: Sidebar
.sbarheader

Defines: Consider me clueless. I think there was once an option to define a title for your sidebar, and this is what defined it. I could be wrong though :P

Location: Sidebar, I guess

.sbarlist*

Defines: The look of the linklist in your sidebar

Location: sidebar

Attention! While this defines the look of the whole linklist, the look of the single listet items can be defined through li.sbaritem, and the look of the whole sidebarbox containing the linklist is defined through .sbarbody.
.separator

Defines: The look of a divider you can place between your entries

Location: Between your entries

A divider aka separator is usually an image, maybe a little flower, a swung line or something. You can do amazing things with them, like here for example. (wait, this is not meant to sound arrogant, I just meant that the possibilities are amazing =)). The separator is the lower end of the entry boxes, like this.
#sidebar

Defines: The look of the sidebar!

NOTE: For information on how to change the width of the sidebar, check #maincontent!

There are so many things you can do with your sidebar:

a, Keep it the way it is and just play around with colors/borders and so on...

b, hide it, like xhan104 from apricot_13 has done in this amazing layout. How? Just set the whole sidebar to no display and delete the margin from #maincontent like this:

#sidebar { display:none; }

#maincontent { margin-right:0px; }

c, add a background image for #content that has background for both sidebar and maincontent in it like here..

d, and so on and so on...so many possibilities!!
.skiplinks

Defines: The look of the words " prev | edit tags | mem | next

Location: On the comments pages at the top of your entry

If you want to change the color of the vertical lines, you can do so here; but the color of the actual links can only be changed through skiplinks a.
.subcontent

Defines: The look of the whole entry with subject, comments, entry text...

Location: Entry pages

This is very closely related to .entry and .entry_text. The first one defines the look of the entry without subject and comments, while .subcontent includes all.
.subject

Defines: The look of your subject line (font, color, background...)

Location: In every entry at the top

.subject a, .subject a:link, .subject a:visited and .subject a:hover

Defines: If you use a link in your title or a username, this defines the color. (E.g. "Icons for irinafan")

Location: In every entry at the top

.subtitle

Defines: The look of your subtitle (font, size, color..)

Location: At the top of your layout under the title

Personally, I like to either make the subtitle smaller than the title (like this), or just erase it all together by setting it to display:none;
table.calendar

Defines: The little table that contains the calendar

Location: In your sidebar

Attention: The look of the whole sidebarbox that contains the calendartable is defined through sbarbody and the little boxes around the dates are defined by .sbarcalendar and .sbarcalendarposts.
table.yeartable

Defines: The look of a full month

Location: On the archive pages

table.yeartable td.yeardate

Defines: The look of all the little boxes that stand for a day in the calendar (define font size and so on here)

Location: On the archive pages

If you want to change the color of the font size for just the numbered links that lead to posts, use table.yeartable td.yeardate a
table.yeartable td.yearday

Defines: The look of the day boxes (Mon - Sunday)

Location: On the archive pages

td.yearmonth

Defines: The look of "April - View Subjects" on top of the monthly calendar

Location: On the archive pages

Be careful not to use a fixed width that is too high here, since "April" and "View Subjects" are divided into two table cells and everything you change here doesn't affect them both together, but each on it's own.
.title

Defines: The look of your journal title

Location: at the top of your layout

ul.navfooter

Defines: This looks very much like .footer, but is a subclass of it and can come in handy when you define a background image for the footer and need to adjust "viewing most recent entries" and so on.

Location: at the bottom of your layout in the footer
ul.navfooter li

Defines:While ul.navfooter defines the look of the whole line in the footer, this can be used to define the single elements - background color, font size....

Location: at the bottom of your layout in the footer

An example how you can use the footer classes together: Here, the grey boxes around the single elements were defined through ul.navfooter li, as well as font color/size/weight...while the whole line that contains the boxes is defined through ul.navfooter (see here), and the whole white area (height, padding) is defined through #footer. Like this.
ul.navheader

Defines: The navigation at the top! Or more precisely, the line that contains the navigation links.

Location: at the top of your layout in the header
ul.navheader li

Defines: The look of the single elements in the navigation at the top!

Location: at the top of your layout in the header

An example of how to use this with the other header classes: Click! The white region is defined through #header, the line that contains the boxes is ul.navheader (See here), and the grey boxes are defined through ul.navheader li.

There is also an extra class called li.view that defines the look of only the word on which's page you're currently on. As you can see, the font color of "Recent Entries" is different from the others because we're currently on the Entry page. You could of course expand this by adding a different background color to the box or a bigger font...for more see li.view.

If you want to change the color of the actual words, it is normally defined through div.header a.
ul.sbarlist

Defines: Sub element of .sbarlist, see there for reference.

Location: Sidebar
ul.year

Defines: The look of the line that contains the years (2005 2006..)

Location: Archive pages
ul.year li

Defines: The look of the single elements in line that contains the years (2005 2006.., your place to change font, size..)

Location: Archive pages
.userpic

Defines: The look of the box around your userpics displayed on the entry and the comments pages

Location: In every entry, as long as you don't hide it

Be careful that this only changes the look of the box around the picture, so if you want to add a border to the usericon itself, you will need to use .userpic img. And example: You'd like a white box around your userpics and in that box a grey border around the icon. (Like this). The codes I used look like this:

.userpic {
position: relative;
float: left;
background-color: #ffffff;
padding: 14px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #4eb7b1;
border-style: dashed;
}

.userpic img { border:5px solid #e6e5e5; }

I added padding to the box, a 1px wide dashed border and white background color, then added the grey border to the icon with .userpic img.

ATTENTION: If you are using Flexible Squares in a community, the look of the userpic box on the entry page is defined through .userpicfriends.(Thanks to babyelefant
.userpiccomment

Defines: The look of the box that contains the userpic of the people that comment

Location: comments pages

Again, if you want a border around the icon itself, use userpiccomment img
.userpicfriends

Defines: The look of the box around the icons on your friends list

Location: Friend's Entry pages

ATTENTION! The background color of the box is only changeable with an !important tag:

.userpicfriends { background-color:#ffae02 !important; }

Replace the color with whatever you want, but the !important needs to be there or the code will not apply. However, if you redefine the color using this here, you will loose all your friends colors you may have defined through the customization wizard. So, if you want both, change this here through the wizard as well. (thanks to cyrnelle

Attention: If you're using FS in a community, this here defines also the look of the boxes around the userpics on the entry page.
.userpicfriends a font*

Defines: The look of the usernames under the usericons (change color, size and so on here)

Location: Friend's Entry pages

If you want to change the color/look of the usernames when the mouse hovers over them, use userpicfriends a:hover font
Maintained and designed by Jill By Design. No infringement intended.
© 2014-2019 Jill By Design.