Ah yes welcome back! Yes it's been two weeks already, and a day over too. Sorry about that. But all that aside, let's begin with part five (wow!) of Getting the Most out of your CSS Journals. If you want to read the rest of the series before you look here, make sure to read: Getting the most out of your CSS Journals!

Side menus

^guruubii suggested this, and I thought I'd give it a shot. It's the standard Side menu. Nothing flashy about it, it's just a menu at the side that holds your links, stamps and whatever. This code can easily be adapted to hold your other information, or whatever you like:

CSS:

.menu {
width:20%;
right:0px;
position:absolute;
background-color:#FFFFFF;
text-align:center;
}

HTML:


<div class="menu">
Put your information in here
</div>


It's really that simple! Just make sure to pretty it up with some background images (background-image:url(whatever.gif); ) and position it wherever you like. I hope you all get some use out of that

Custom bulleted lists

This can really add some nice effects to your journal. It lets you take lists, and change the bullet to a little picture. This saves using . Here is all you need to make your lists pretty:

CSS:


li {
list-style-image: url(yourfilehere.gif);
}


HTML:

[ul]
[li]Item[/li]
[li]Item[/li]
[/ul]


And whenever you use the LI tag, you'll see your lovely little bullet images instead of the generic black dot. Much nicer

Remember to change the [ to < and ] to > for the HTML example to work

First-letter fun

The first letter pseudo-element for CSS can be very useful to add a little bit of shine to your journal. Mozilla Firefox seems to support the first-letter element for most tags. You can do cool things like making the first letter of a paragraph bigger, a different colour, and more. You can also use the first-line to make the whole first line stylable. It all goes a little something like this:

CSS:

.mytext:first-letter {
color:#FFFFFF;
}

.myline:first-line {
font-weight:bolder;
}


HTML:


<f class="mytext">This is some text. Notice how the first letter is white?</f>
<f class="myline">This is some more text.
This text is on another line. Notice how the first line is bold
But none of the other lines are bold?
</f>


Just change <f to < p and /f to /p to make the above example work (Damn dA's parsing system )

And there we go. As the text explains, one paragraph will have the first letter white, and the second will have the whole first line bold. You can use this to style the header of your journal, by using something like:

CSS:


h2:first-letter {
font-size:larger;
}


to make the first letter of your journal title a shade larger.

Journal features!

Yessir! More journal featuring goodness! This week we showcase some nice designs that will no doubt make you salivate!

=csjwcr

Best viewed at it's full ([link]), csjwcr's journal features a nice bold header that draws you in, the content is laid out VERY well, and it's easy on the eyes. All this makes for a wonderful and pleasing journal to read. Make sure you check him out. You won't regret it!

=NickCreevy

I might have mentioned this deviant before, but their journal needs another mention ;D

Nick has created a nice and easy on the eye journal, integrating a modern look with photography and a basic scheme that looks damn good. His website work is incredible too. A must see!

The CSS Gallery

Don't forget the Journal CSS Gallery. You can find heaps of exciting journals in there, some you can even use as your own journals. Check it out!
[link]



And that's it for this week. Hopefully in two weeks time I'll have something totally awesome and mind-blowing for you. Feel free to note me your ideas, and journals to be featured. Make sure you do! I'm counting on you!

Comments and questions are welcome, like always! Good luck, and make sure to note me with your tweaks so I can see them in action ;D