Journal CSS: simple skin. - update.

This is a nameless journal skin I'm offering to anyone who wishes to use it, as part of my Creative Journal CSS guide/tutorial (WIP). I guess if you need to refer to it by name somewhere, you can call it "thespook's simple journal skin".

Content is king in my world, so it's about as simple looking as it gets. It's also simple to use because of this, with a minimal amount of custom elements (ie special div tags) to remember for daily use. Oh, and the moods list works top or bottom

Nothing fancy here, but that's the point - this isn't a 'locked' skin that you must use as-is, I encourage people to toy around with it and make it their own. Hopefully it is easy enough to figure out, but if you have any problems feel free to leave a comment here, or note me.

For extra features and special effects see my sidebar on the left. Check back from time to time (or watch me would be easier I guess) because now and then I write a new journal with CSS goodies.

---

<hr /> (horizontal breaker - is self closing, so you only need to write '<hr />' for it to work)

<b><b>Barnaby The Bear
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.

<blockquote> la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name

<div class="cite">nichtgraveyet in his journal 'simple journal style'

There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.

<b><b><b>BIG HEADING

• Give it what you think.
• You don’t want you to reach down.
• Don’t be gone in a clutter on the other side?
• You don’t wake me. till someone cares.
• You don’t want to be where the dead ones, we are all she gets bombers in the 1980s’.
• For too much I stole.

1. It’s a dirty little secret.
2. Cause we like it hurts to be told.
3. No forgiveness no mercy.
4. Listen up! any second glance?
5. Never. again never again but since I felt the same.
6. You don’t see progress just repetition same old song.

CSS:
.journalbox{
border: 1px solid #999;
max-width: 500px;
margin: 0 auto 20px auto;
background: #fff;
padding: 100px 50px 0 50px;
position: relative
}

.journaltop{
background: #fff;
margin-bottom: 70px;
font-size: 10px;
color: #333
}
.journaltop img{display: none}
.journaltop h2{color: #222!important; font-size: 28px}

.journaltext{text-align: justify}

b b{font-size: 18px}
b b b{font-size: 24px}

hr{display: block}

blockquote{
font-style: italic;
font-size: 20px;
text-align: left;
background: #eee;
padding: 5px 58px 10px 58px;
margin: 0 -58px
}
.cite{font-size: 13px; text-align: right; background: inherit}

a{color: #00f; text-decoration: none!important}
a:hover{color: #f00}

.note{
padding: 10px 58px;
border: solid #FFFF8B;
border-width: 2px 0;
background: #FFFFA2;
margin: 0 -58px
}
.thumbs{
background: #eee;
border: solid #ddd;
border-width: 1px 0;
padding: 5px 58px;
margin: 0 -58px;
text-align: center
}
.scroll{height: 200px; overflow: auto}

ul.list{
margin: 0 -51px 50px -51px;
padding: 20px 50px;
background: #BAC5BA;
border: solid #999;
border-width: 1px 0
}
ul.list img{display: none}
ul.list strong{font-weight: normal; color: #666}
ul.list li {font-weight: bold}
ul.list .a{background: transparent}

.journaltext li{margin-bottom: 5px}
.journaltext ul{padding: 0 50px}
.journaltext ul br{display: none}
.journaltext ul li br{display: block}
.journaltext ol{padding: 0 50px}

.journaltext ol br{display: none}
.journaltext ol li br{display: block}

.journalbottom{margin: 20px 0; padding-bottom: 50px}

.aboutJournal{position: absolute; bottom: -1px; right: -1px; width: 200px; font-size: 10px}
.aboutJournal br{display: none}
.aboutJournal b{display: block; font-weight: normal; text-align: right; padding: 5px; color: #aaa}
.aboutJournal i{display: none; padding: 10px; text-align: left; font-style: normal}
.aboutJournal:hover{background: #BAC5BA; border: solid #999; border-width: 1px 0 0 1px}
.aboutJournal:hover i{display: block}
.aboutJournal:hover b{display: none}

The CSS above will give you the base code for the skin, minus the graphic heading. The code for the optional heading image is the following:

.journalbox{background: url( ... ) #fff no-repeat!important}

.journaltop{background: url( ... )!important}

Note that using a graphical heading will require tweaking of some values if at first things don't look right or overlap. If you don't have the confidence to do that, or don't wish to learn by trial and error, you might want to read 'The Cool Stuff: Sexy headers / advanced backgrounds' from Creative Journal CSS (I haven't written it yet though! ).

Finally, it'd be nice if you could include the following code in your footer:


The CSS above will turn it into a little hover button for those interested in getting the template too (just like you can see here @ the bottom right of this journal). You don't have to include it, but it would be nice for everyone if you did. You're welcome to add a line saying you've made modifications to it, or that the header graphic is your property etc.

Okie. That's it! You're welcome to leave comments/questions

For more journal CSS fun, check out my other journals:

• Journal CSS: Buttons
• Journal CSS: Image list
• Journal CSS: Snazzy borders

(see my sidebar for an up-to-date list of Journal CSS: tutorials)

And don't be forgetting there's more CSS tutorials in the Tutorial gallery!