Welcome to the "Make you CSS Journal" - this is part one of a series of tutorials/articles on making your own completely journal.

In this part we will cover of what is what for the CSS and a very basic style of changing colours and text.

So before we can even start with the CSS, you first need to know what part of the journal you can style and the name of it. Well you're in luck since our lovely ^thespook has done an image showing the different blocks (or divs) that the journal uses.



So we'll do this in order of how it's shown from that image. So first one is .journalbox. As you can see, this will style the box that holds the whole journal inside. Within all of these CSS Codes, you can change the hex colours (shown as #------) and borders and fonts.

.journalbox{
background: #561420;
border: 2px solid #C59A6F;
padding: 0px;
}


Then we move onto .journaltop, this is the top bit of the journal that shows the journal icon, date, time and subject. We can't style the subject from this bit, but we can at least do something with the data and time.

.journaltop{
background: #333333;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 9px;
color: #CCCCCC;
}


If you previewed this then only our date and time are styled. Do we all like the journal icon? no? Well let's get rid of it. You are not able to change this but we can get rid of it easily.

.journaltop img{
display: none;
}


And now to style the Journal Subject.

.journaltop h2{
color: #FCFCFC;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 17px;
}


So we have the top bit done, what about the text of the journal? This is where our header, body and footer text will be.

.journaltext{
color: #FCFCFC;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
}


We need to carry this one a bit further with the links, so we can have our links styled too.

.journaltext a{
color: #821122;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
}
.journaltext a:hover{
color: #C59A6F;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
}

This will style the links, and also the links when the mouse is hovering over them.

Now we move onto the bottom bit of the journal.

.journalbottom{
background: #333333;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 9px;
color: #CCCCCC;
}


Hang on, this doesn't do anything for our links? We have to style those two, looking at thespooks image, you can see that there is the prevlink and also the commentslink.

.prevlink{
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
color: #CCCCCC;
}
.commentslink{
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
color: #CCCCCC;
}


There is one more bit you need to know to complete our very basic CSS Journal. Styling the list boxes.

.list{
color: #FCFCFC;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
background: #821122;
}
.list .a{
background: #561420;
}

The .list will style it as a whole, but we still have the .list .a which is the alternate row colour. So we just need to change our background. It is also possible to keep the same background as .list so we don't have alternate row colouring.

Well that's it for now. All the CSS Code on this journal is being used on this journal for an example of how it will turn out. It's not the best colours used. There are a lot of places you can go to get different colours. Below are some colour picker sites.

Hyper Solution
Colour Schemer
Waffle Software Hex Picker