Deviant Login Shop  Join deviantART for FREE Take the Tour

:iconthespook: More from thespook


Submitted on
August 18, 2007


16 (who?)

Journal CSS: simple skin. - update.

Journal Entry: Sat Aug 18, 2007, 12:22 AM
  • Mood: Peaceful
  • Playing: Gitaroo Man Lives (PSP)
This is an old version. Get the new edition, with enhanced fancy pants!

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 :thumbsup:

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.

<div class="note">The CSS can be found at the bottom.

The HTML is found in red inside the elements in question. I haven't shown the closing tags because they should be obvious, but in case you're a HTML noob, closing tags are the same as the opening tags, with the addition of a / - ie <div> ... </div>

The image header is an optional addition - an example of how you can customise the base code I'm offering. The default CSS will not include it, but I have included the code you could use to customise it - keep in mind though that to get the random header image you'll need access to a webserver with php enabled and this script

<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">thespook 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.

<div class="thumbs">wallflower by cleavage :thumb61771229: Summertime Destruction by czavelle The Lifted Brow 2 by BenjaminCee The new begin by phoenix-feng winter and construction by mutsy

<div class="thumbs scroll">wallflower by cleavage :thumb61771229: Summertime Destruction by czavelle The Lifted Brow 2 by BenjaminCee The new begin by phoenix-feng winter and construction by mutsy

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

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}

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}

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

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! :blushes: ).

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

<div class="aboutJournal"> <b>journal css</b> <i>The base code for this journal was written by :devthespook: and can be found <a href="…:">here</a> - it's part of his <a href="">Creative Journal CSS</a> tutorial, and is free for anyone to use and modify.</i></div>

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 :thumbsup:

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

(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!

journal cssThe base code for this journal was written by thespook and can be found here - it's part of his Creative Journal CSS tutorial, and is free for anyone to use and modify.
Add a Comment:
WilhelmPaul Feb 28, 2012  Hobbyist General Artist
so helpful ,, Thanx for that ^^
captkiro Jan 30, 2010  Professional Digital Artist
thank you and i did add the code to my footer. I know css but I'm only a beginner. This really helps me to understand it more.
OMG!!This was sooo much help!:glomp:Thanks so much!!
You're welcome :)

...but, don't you like the new version? You seem to be using the old one.
Oh I havent seen the new version yet..^^;
I'm still confused...How do you add a picture into the background...or where...
Hendrugs46 Jun 22, 2008  Student Traditional Artist
How to create friends Column???
I have another tutorial for adding columns - [link] :thumbsup:
Hendrugs46 Jun 23, 2008  Student Traditional Artist
Thank You
Add a Comment: