Updated on 29th of Jan, 2009 - to tidy up the HTML a tiny bit, and incorporate some of the new journal CSS goodies since this was first published in 2007.
Old version can still be found here.I've set up a demo journal
here so you can see how a normal journal might look, without all the red instructions and junk.
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.
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 right. Some of them have already been incorporated into this version, but 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) <strong>Barnaby The BearBarnaby 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<small>`thespook in his journal 'simple journal style'</blockquote>
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.
- Give it what you think.
- You dont want you to reach down.
- Dont be gone in a clutter on the other side?
- You dont wake me. till someone cares.
- You dont want to be where the dead ones, we are all she gets bombers in the 1980s.
- For too much I stole.
- Its a dirty little secret.
- Cause we like it hurts to be told.
- No forgiveness no mercy.
- Listen up! any second glance?
- Never. again never again but since I felt the same.
- You dont see progress just repetition same old song.
THUMBS!
Everyone likes to share/feature thumbs in their journals, and I've provided a number of special ways to do so. You can still just dump down thumbs any way you like, but using the following divs+class names will spice things up a bit.
The only HTML you need to use is the div tag around your thumb codes.
In the case of the mini-thumbs, if you find yourself using the clear version more often, change the CSS to remove the background/border from the normal version.
<div class="minigal clear">

<div class="minigal clear" align="center">

CSS:.journaltop {background:#fff}
.journaltop img {display:none}
.journaltop {
margin-bottom:70px;
font-size:10px;
color:#333}
.journaltop h2 {
color:#222!important;
font-size:28px}
.journalbox {
border:1px solid #999;
max-width:600px;
margin:0 auto 20px auto;
background:#fff;
padding:100px 50px 0 50px;
position:relative}
.journaltext {text-align:justify}
.journaltext strong {font-size:18px}
blockquote {
font-style:italic;
font-size:20px;
text-align:left;
background:#eee;
padding:5px 58px 10px 58px;
margin:0 -58px;
}
blockquote small{
display:block;
font-size:13px;
text-align:right;
}
.note {
padding:10px 58px;
border:solid #FFFF8B;
border-width:2px 0;
background:#FFFFA2;
margin:0 -58px;
}
a {
color:#00f;
text-decoration:none!important}
a:hover {color:#f00}
.thumbs {
background:#eee;
border:solid #ddd;
border-width:1px 0;
padding:5px 58px;
margin:0 -58px;
text-align:center}
.thumbs .shadow{
background:none!important;
display: inline-block;
height: 150px;
text-align: center !important}
.thumbs .shadow img{
vertical-align: middle !important;
background:#999;
padding:2px}
.thumbs .shadow img:hover{background:#f00}
.minigal{
margin:0 -58px;
padding:5px 58px;
background:#eee;
display:block;
border:solid #ddd;
border-width:1px 0;}
.minigal.clear{background:none;border:0}
.minigal .shadow{background-image: none!important}
.minigal a{
display: inline-block;
width: 50px!important;
height: 50px!important;
overflow: hidden;
border: solid #fff;
border-width: 10px 5px 5px 5px;
outline: 1px solid #ccc}
.minigal img{margin:-20px -50px}
.minigal a:hover{
border-color: #000!important;
outline: 1px solid transparent!important}
.minigal a:hover img{
z-index: 999;
position: absolute;
margin: 0 0 0 -5px;
border: 10px solid #000}
.scroll {
height:200px;
overflow:auto}
hr {display:block}
.journaltext li {margin-bottom:5px}
ul.list {
margin:0 -51px 50px -51px;
padding:20px 50px;
background:#CCD9C8;
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;}
.journalbottom {
margin:20px 0;
padding-bottom:50px;}
.journaltext ul {padding:0 50px}
.journaltext ul br {display:none}
.journaltext ul li br {display:inline}
.journaltext ol {padding:0 50px}
.journaltext ol br {display:none}
.journaltext ol li br {display:inline}
.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:#CCD9C8;
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:
<div class="aboutJournal"> <b>journal css</b> <i>The base code for this journal was written by :devthespook: and can be found <a href="http://thespook.deviantart.com/journal/22892453/">here</a> - it's part of his <a href="http://devart.spq.me/tutorials/journalcss/">Creative Journal CSS</a> tutorial, and is free for anyone to use and modify.</i></div>
It will create 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. The CSS to make it work is included in the main CSS above.
Okie. That's it! You're welcome to leave comments/questions
...more?See my sidebar for an up-to-date list of Journal CSS: tutorials (
sidebars and
hover menus anyone?), and don't be forgetting there's
more CSS tutorials in the Tutorial gallery!REMEMBEЯ!You should think of this as the starting point for your journal theme, change colours, move things around, go nuts. You're welcome to re-publish your efforts, so long as you include the 'aboutJournal' message.
journal cssThe base code for this journal was written by `thespook and can be found here (you're looking at it!) - it's part of his Creative Journal CSS tutorial, and is free for anyone to use and modify.
Devious Comments
--
shell
My Career-Pottershands [link]
My Son-Ruben[link]
My School-AAU [link]
--
--
Dancing is the vertical expression of a horizontal desire!
--
._;
USED it! thank you very much
Hope you enjoy using it, and if you need a hand customising it let me know
--
Michael
The ultimate source of wisdom and happiness. :-]
How do I center a journal that's not "full-width" of whatever vertical space it has? "margin: auto;" will do the trick for FF and Opera, but I was wondering how to do that for IE.
I'm a Foxer myself but I know a lot of people use IE (damn them all!
Or else I know I end up making another CSS design just because this one didn't work out. :< I'm a perfectionist like that.
--
In the case of your journal, you should actually drop the _width property because on lower resolutions, or if people don't have their window maximised, it'll force it to be wider than will fit in the journal area. I'd just leave it spanning the full width.
Previous Page1234Next Page