A simple template.
Creative Journal CSS is all about creating your own beautiful journal skins, but I figured I'd share one of my journal skins with you guys as a starting point for your own skins.
For a live preview of the journal skin, the CSS, and other instructions you'll need to make it work see my journal here. It doesn't require much custom HTML other than what you've been using already, so all you need is to drop in the CSS and it will just work.
It is simple on purpose - the idea is that people can take the base CSS and exapand upon it to make it their own personal journal design.
Customising Colours
The simplest way to do that is to change the colours - in the CSS, look for three or six digit hexadecimal numbers after a hash (eg. #fff or #BAC5BA). These colour values can be changed to anything you like, and you don't have to stick to hexadecimal - if you drop the hash you can use colour keywords like 'black' or 'lime' (see Web Colours on wikipedia for more info on colour keywords, and for an online colour picker see the 4096 Color Wheel)
It might be confusing as to which colour value controls what, so here's a quick explination:
You'll notice the CSS looks like .something{property: value} - the stuff inside the curly braces are insructions that change the 'something' at the beginning. So in .journalbox{background: #fff} the background is being made white in the element 'journalbox' - which happens to be the box that holds your journal. For more info on the elements of your journal see my visual guide, Journal Structure: a reference. Other properties aside from background that you'll find colour values in are color - which changes the text colour, and border (or border-color) - which applies to borders. a{...} changes the link colours, and a:hover{...} changes links when the cursor is over them.
Adding a header image
There are a handful of ways you can add header images to your journals (and I'll be covering these in the guide), but because of the way I've written this template you'll have to use a specific method.
Find .journalbox{...} and change the background property to background: url(http://www.example.com/your_image.jpg) #fff no-repeat!important} - if you've changed the background colour change #fff to your new colour.
The width of the journal is restricted, so you don't have to make your background images too wide - I make mine 600 pixels wide and 276 pixels high. If you want yours to be taller, you'll find the journal text will overlap it - change margin-bottom in .journaltop{...} to a higher value to fix that.
...you want to learn how to make your own skins though, right? Well, check out the rest of Creative Journal CSS, where I'll teach you everything you need to know... and probably a little bit more.