Getting the most out of your CSS Journals Part Two

Welcome back! If you haven't done so already, have a read of Getting the most out of your CSS Journals Part One. Part two deals with Dressing up your mood boxes, adding extra lines to your Journal title, and will touch upon dynamic images in your journal, amongst other things. So without further delay, let's begin!

Mood boxes

"Mood boxes", or the little box that shows what you're listening to etc, is now available to everyone. Subscribers and non subscribers alike. It would seem that there's not a whole lot you can do with these, asides from change the colours and such. But something a few people don't know, is that you can move your mood box anywhere you like, and do so much more than just colourising it. In this example, we'll show you how to shift your mood box to the right, just like in This example.

CSS:

.journalbox .list {
position:absolute;
right:0px;
bottom:0px;
width:25%;
}

And that's all you need! When you look at your mood box, it will be 25% wide, and sitting on the bottom-right hand corner of your journal! Please note that this will look shocking on smaller journal entries, or some journal views (ie. on the userpage, full-view etc.). Now you can stretch out your box to wherever you wish, put half on one side, half on the other, hide bits of your mood box. It's all up to your imagination!

(A tip: If you find you can't rid of the mood box, because there is no "remove mood" feature, try this code:

.journalbox .list {
display:none;
}

to rid of the mood box altogether)

Journal Taglines

Ever wish you could add a small bit of text underneath your journal title, like you can on the major blogging systems out there (Think Wordpress and such)? It's really easy with CSS. Just add the following to your "Header" section of your journal, and your CSS section:

HTML:

It's all in a day's work!

CSS:

.journal-subtext {
top:30px;
position:absolute;
}

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

Just remember to tweak "30" to whatever value you wish, depending on where your .journaltop h2 header is placed, and if you want to keep the date / time, leave out the font-size:0px; And there you have it! It'll now show your sub-text (or personal message) below your journal title. This can be done with images, CSS menus (as per last week's example) or anything else dA supports. It's only limited by your imagination!

Dynamic Images

Imagine if you could use your dA journal to tell people what TV show you were watching at that very second, or if you could display your computer's uptime, temperature and the last program you ran, or even display news headlines, images from your gallery, new posts on your forums, or so much more. Impossible you say? No way! Thanks to the magic of GD

For those in the know, or people who have used Last.fm, AudioScrobbler, or any other services like that, GD / Dynamic Images should be nothing new. For the rest of you, GD is a PHP library that lets us draw text on a picture, or draw a completely new picture from scratch. The output, can be a standard JPG, GIF or PNG file, which dA is more than happy to support. The trick comes from writing a PHP script that returns an image instead of text. Now I won't go into PHP and GD and the like. That's wayyyy beyond the scope of our article. Instead I'll give you an example. Check out my Userpage, and look at my webcam. That is a dynamically created image. Every time it's viewed, it grabs my base image (the green), adds text to it, depending on what's in the database, and shoots it off as a JPG picture. Our browser sees the JPG data, and displays it as such.

With a bit of manipulation, you can write a script that reads your computer's uptime, shows off some images, even parse a website to get images for displaying. It's limited by PHP's engine, and your imagination!

Have a read of PHPFreak's GD Tutorial for a starter on GD. Some PHP knowledge is required here ;D


That's all for this week. Remember, if you have any suggestions, note them to Grayda for inclusion in the next part of Getting the most out of your CSS Journals. Thanks for reading, if you get some use out of this, and keep watching the skies!

Previous Weeks
Getting the most out of your CSS Journals Part One