So we're coming quite a way for creating journals and customization. But still, there are more you can do, possibilities are almost endless. In this part, we will be doing some extra bits you can add into your journal. But unfortunately, half of these do not work in IE.

About this journal
The "About this journal" is to have a section on your journal that says a quick words about your journal, this includes the design, what it's about, etc. When on mouse hover, another big expands saying about it. Useful for a vary of things. Here is how you do that.

.expand sup{
display:none;
}
.expand:hover sup{
display:block;
width: 200px;
background: #FCFCFC;
border: 1px solid #333333;
padding: 5px;
text-align: justify;
}

<div class="expand">About this Journal
<sup>Text goes between this these sup tags.</sup></div>

It's simple as that, so the CSS code says to hide the text in the sup tags, and when the div (About this journal) has the mouse hovering it, show the text in the sup tag.

Edit Journal
Its quite annoying when you notice a mistake in your journal, and you have to click on Update Journals then Edit. Make this a lot easier with this little nifty CSS style.

.editjournal{
position: absolute;
top: 10px;
right: 10px;
}

<div class="editjournal"><a href="urlhere">Edit Journal</a></div>

Just make sure you first post the journal then use the edit so you have the journal number.

Drop Down Menu
This one can be a bit confusing, but here we go.

.expandmenu ul li{
display: none;
}
.expandmenu:hover ul li{
display: block;
width: 200px;
}
ul{
background: #333333;
color: #FCFCFC;
padding: 2px;
margin: 0;
height: 15px;
}
ul .a{
background: #2e2e2e;
height: 15px;
}
.expandmore li ul{
display: none;
}
.expandmore:hover li ul{
display: block;
margin-left: 200px;
width: 200px;
padding: 2px;
margin-top: -15px;
height: 15px;
}

Ok, explanation first.

So what we do here, we got expand menu li ul. We are using a list and unordered list tags to show out menu. The expandmenu is our div class that holds it all in. We hide the list, just like we had hidden the sup tag in the about journal.

When they hover over the menu, we then show the lists with a set width. Then we set background colour, padding, etc. anything you want. on the listings.

If you see on mine, I have used a different row colour, I achieved this by making a div inside the ul for the second row. So it knows we actually mean this one, we say that the div with class name a inside a ul tag, do this.

As you can see on my example, I've gone a bit further and introduced on how to add another menu onto this menu which will show up on the right side of this menu. We set this to display: none; - and when the user hovers it, we show it off, now the margin left is very important, so we get it to the right of the menu. And also we want it faily equal to the menu we're on right? So we want to use margin-top and using a - number in order to move it up.

Pretty long and kind of confusing stuff at first. But just wait till you see the code.

<div class="expandmenu">Menu
<li><ul>Send me a note</ul><ul><div class="a"><div class="expandmore">More<li><ul>Watch me</ul></li></div></div></ul><ul>Done</ul>
</li>
</div>

Yea... confusing right? Here is it broken down into lines. Because the journals do automatic line breaks, it pretty much all has to be on one line.

<div class="expandmenu">Menu
<li>
<ul>Send me a note</ul>
<ul><div class="a">
<div class="expandmore">More
<li>
<ul>Watch me</ul>
</li></div> //End div of expandmore
</div> //End div of a
</ul>
<ul>Done</ul>
</li>
</div< // End div of expandmenu

Hope that bit clears it up a bit more.

Get rid of the Journal Entry: text
This isn't actually getting rid of the time and date, but the actual Journal Entry: text. Do you seriously always want to have that bit of text on your journal? Because I don't.

So how do we get rid of that? Simple...

Add

font-size: 0px;

in your .journaltop css code.

Use

.journaltop span{
font-size: 8px;
}

The date and time is surrounded in a span tag, but the Journal Entry: text isn't. by Using font-size: 0px; means there can't be any text there. So we hide the journal entry, and set the span tag (date and time) to 8px.

Alternatively, you don't even have to put in the span one and just not have any date and time showing.

That's it for this part. The next one, #6 will show you how you can create your journal in Dreamweaver, so you can make yours absolutely perfect even before you start it on deviantart. It's very useful, very helpful to design your journal first.

Features
So I thought that today, I would concentrate more on the colours of the journals instead of the actual journal look.

=ipholio - This is just one that would have had to be put in sooner or later. The simplicity of it is great, while it still looks so attractive.

~Zionxxx - Yea, it's a not a CSS one, but the design and colours are ones that I really like in this.

~jaj43123 - This was another I was impressed with, I love the look, and the colours are so organic. Just the menu at the top that turns it down