If you're a subscriber, then no doubt you know all too well what you can now do with your journals. The possibilities are almost endless, limited only by your imagination. And there are some great designs popping up, =NickCreevy, =Nameless-Designer, ^depthskins to name a few. But surely there's more to CSS than just images and such? That's where this guide comes in.

Over a series of weeks, you'll see just what you can do with your CSS journal, from minor tweaks to full-blown redesigns. And you can help too! Just note your tweaks to *Grayda and you can have your tweak included!

Let's begin!

Deviations Box

This is a commonly requested one. This snippet of code will let you display a column to the side of your journal, with some thumbs in there. Much like the little scrolling boxes you see on some people's eBay listing pages. It can display vertical scroll-bars if needed, or hide them completely. Here's the code:

HTML:

<div class="deviationsbox">
Insert your thumb codes in here!
</div>


CSS:

.deviationsbox {
height:400px;
width:200px;
overflow:auto;
}

To hide the scrollbars, change the height to auto (ie. height:auto and change the overflow to visible (ie. overflow:visible. You'll need to manually position it to the right of your journal, or wherever you want it. This code is just the foundation.

Hiding the date and time of your journal

Sometimes the date / time of your journal isn't necessary, or gets in the way of your awesome design. Because the date is contained within a DIV you can't hide (or else it hides the WHOLE journal title and icon and such), we need to make it *almost* invisible. We do this by this little bit of code:

.journalbox .journaltop {
font-size: 0px;
}

Note: This isn't totally perfect. In Internet Explorer, it displays the text, but it's VERY small

Menus

You can now have rollover menus in your journal without too much effort, and all without Javascript too!

HTML:

<div class="links">
Hover here for menu!
[Insert your links here]
[Insert your links here]
[Insert your links here]
</div>

CSS:

div.links {
height:10px;
}

div.links a {
display:none;
background:none;
}

div.links:hover a {
display:block;
background-color:#0099FF;
}

div.links:hover {
display:block;
background-color:#FFFFFF;
height:auto;

}

Please note that this is a VERY simple way to do it. Expansion for this is a must!


That's it for this issue. I hope this is useful for some, and I hope to see more awesome CSS Journals in the future.

Remember, if you have a tip / tweak, note it to *Grayda for inclusion next time.

So until next time, keep on themeing!