tekitsune | deviantART Journal CSS
 
Roll over the different areas on the Journal example below
for an explanation of which piece of the CSS code that section relates to.
 
.journaltop

This is where the Title and the header images will go.

.journalbox .journaltop {
       padding:10px 10px 10px 10px;
       height:85px;
       background:#9c0001 url(http://www.atomicfoxtail.com/da/tail_horiz.jpg) no-repeat top right;
       border:0px solid #FFF;
       color:#E9FFBB;
       font:normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
}

.journaltop
Background Image

Inside the main .journaltop section, this is where you can add a piece to be a header graphic. I have mine, the foxtail there, set to not repeat and to align on the right. The file I'm using there is called tail_horiz.jpg.

.journalbox .journaltop {
       padding:10px 10px 10px 10px;
       height:85px;
       background:#9c0001 url(http://www.atomicfoxtail.com/da/tail_horiz.jpg) no-repeat top right;
       border:0px solid #FFF;
       color:#E9FFBB;
       font:normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
}

.journaltext

This is the part where your actual entry text will end up. I have mine set up with a background image called journal_bg.jpg. It's set so that it'll repeat just horizontally and then fill the rest of the table cell with the dark red color at the bottom of the graphic.

.journalbox .journaltext {
       padding:0 25px 0 35px;
       line-height:1.4;
       font-family: Arial, Helvetica;
       font-size:13px;
       color:#FFFFFF;
       background:#220000 url(http://www.atomicfoxtail.com/da/journal_bg.jpg) repeat-x;
}

.journalbottom

Here's where the Comments and the Previous Entries links go.

.journalbox .journalbottom {
       background-color:#630000;
       padding:10px 0px 10px 0px;
       font-family: Arial, Helvetica;
       font-size:12px;
       text-align: center;
       font-variant: normal;
       font-weight: normal;
}

.list

.list is used for the items there at the bottom (like the Mood, Listening to, Watching, etc.). Since the list lines have colors that alternate, .list is the first set of specs for list items.

.journalbox .list {
       background-color:#630000;
       color:#FFFFFF;
       font-family: Arial, Helvetica;
       font-size:12px;
       text-align: left;
       font-variant: normal;
       font-weight: normal;
}

.list .a

This is the specs for the alternate colors of the list items.

.journalbox .list .a {
       background-color:#220000;
       color:#FFFFFF;
       font-family: Arial, Helvetica;
       font-size:12px;
       text-align: left;
       font-variant: normal;
       font-weight: normal;
}

 
The Code
 
Here's the code that I've used on the example above.
If you'd like to copy the code from the text box and play around with
your own tweaks to the design, feel free to use it on your own journal.
 
 
Tim Georgi | AtomicFoxtail Studios | deviantART: tekitsune