Welcome back! If you're wondering what happened the last two weeks, I decided to give the series a two-week break. Mostly to build up the ideas, but also to give your eyes a break. I doubt either worked, but on we shall press! If you want to read the other articles, check out Getting the most out of your CSS Journals! which has the list of the previous week's articles. With that out of the way, on we shall go!

Custom mood images
With dAv5 came a whole heap of new "Mood" icons, little animated dudes that you could set as your journal mood. However these weren't enough for most. If you could do your own custom emotes in journals (ie. using the :thumb: notation), or using :icon: to display 50x50 avatars, why could you not do your own custom mood images? With this simple CSS / HTML hack, you can! This simply involves laying our image over the top of our mood image. Here's the code:

HTML:


<img class="moodimage" />

CSS:

.moodimage{
position:absolute;
background-image:url(http:// ic3.deviantart .com/fs10/i/2006/127/a/5/_cityjump__by_Chimpantalones.gif);
background-repeat:no-repeat;
bottom:150px;
left:60px;

width:70px;
height:40px;
}

.list img {
position:relative;
left:-1000px;

height:40px;
width:70px;
}

There you have it! This is an extremely dirty hack.. because dA doesn't allow you to modify objects that are within another parent, there is no easy way to do this on dA. Just remember to tweak the values for your layout. It's best to use a fixed position (and width) layout for your mood box, so you get a consistent looking display of your custom layout. And don't forget to remove the spaces in the URLs to check out the demo, using "City Jump" by the Chimpantalones.

Always on top

Ever wanted a menu that will appear over all elements, and will remain in the same spot on the screen, even after you've scrolled down? Why not try the position:fixed; CSS attribute? This can be used to position an image over your journal, that will follow no matter where you scroll. Try this simple example:

HTML:

<div class="ontop">This is a slab of text that is always on top</div>

CSS:

.ontop {
height:auto;
width:100px;
background-color:#FFFFFF;
position:fixed;
top:0px;
left:0px;
padding:2%;
}


Remember this can be used for quite a few things. Menus, reminders, advertisements, fading of pages. Just be warned that if you abuse this service, and use it to cover advertisements, your entire page or whatever, you could be banned, and this feature removed. Use it sparingly, or preferably, not at all unless the situation warrants it. dA and it's millions of deviants will thank you.

Rounded corners for your journals

I keep forgetting to add this here, so please forgive me =Monkeyshack it's here now.. and thankyou so much!

If you want to have rounded corners in your journal's divs, then this is the code for you! Just click the link below, and check out this nifty CSS hack. Thanks so much to dev:Monkeyshack: for creating it, and =silverspider2005 for also suggesting it. Keep up the good work guys!

Check out Rounded CSS Corners by =Monkeyshack

CSS Journal features

Here we go again. More journal features. This time I'd like to start off with one I've missed:

*holymonk

Sporting a nice clean and uncluttered layout, *holymonk's journal is a good example of simplicity. The header adds a nice touch.

=Zikes

This journal is chock full of gadgets and features that makes this journal a pleasure to use (yes that's right, use, not just read ). It has 4 selectable colour schemes (the inner workings of this is far beyond my knowledge), and menus, for added fun. Visit this journal, and marvel at how it was done. Do so before I work it out and release the idea here ;D

Get Yourself a CSS Journal (The Winners)

I know this isn't a proper journal per se, but this is rather a collection of winners and runners up from =duhcoolies's Get Yourself a CSS Journal contest. Need I say more?



And that concludes this week's article. If I have the time and stuff together, you can expect to see one next week. If not, then it will be back the week after that. And as always, if you have hacks and tips