Getting the most out of your CSS Journals Six

4 min read

Deviation Actions

Grayda's avatar
By
Published:
1.3K Views
Welcome to part six of Getting the most out of your CSS Journals! I can't believe how far these articles have gone, and the support and questions I've been receiving about CSS and such. I'm actually on time with the article this week, and we have some great journals to showcase, as well as a few neat gadgets to showcase, such as adding an official-looking stamps box to your page, displaying CD covers when you hover over a link, and much more. You still reading this intro? Get moving onto the first section!

Official-looking stamp boxes in your journals!

A LOT of people on dA use stamps. And why not? It's the best way to show your support for a club, person or something totally random. But sometimes you don't want to shove them all at the bottom. It's just too much of a pain, and can sometimes break your layout. So what to do?

Surely you know of dancewiththesky 's deviantEXPERIENCE, which not so long ago won a DD? This guy just doesn't know when to stop with the awesome ideas. He's come up with a (still in production) CSS Generator that lets you create official-looking boxes on your userpage, that are actually CSS. He, in conjunction with BoffinBrain and janvanlysebettens, have come together to bring you: deviantBOX. Click the link, and see for yourself just how it looks. No word on the release date yet, but keep an eye on dancewiththesky for more details, and more mind-blowing EXPERIENCES ;D

CD covers on Link hover

Some people like to put CD and DVD info in their journals. A little link to Amazon or another DVD / CD retailer. But wouldn't it be cool if you could show a picture of the CD or something when you hover over the link? With CSS, it's more than possible! Copy this into your journal:

CSS:
.CD1 img {
display:none;

}

.CD1:hover img {
display:block;
position:absolute;
}


HTML:
[a href="#" class="CD1"]Hover here for stuff[/a]

Don't forget to replace the [ with < and ] with > (because of dA's parsing system), and replace yourimagehere.jpg with the location to your image. Now when you hover over your image, the IMG tag will be displayed magically, showing our cover art! Just make sure the image goes AFTER the link text (ie. Hover here for stuff) or else it will break. To add more CDs, just copy .CD1 and change it to CD2 etc., then do the same with the HTML tags. Enjoy!

How to use the CSS snippets

A few people have noted me saying that their CSS journals don't work after trying to put in my codes. Just a friendly reminder that the part marked CSS and is Bolded and in italics goes in the box marked "CSS (beta)" in the "Your Journal" page, and the part marked HTML and is also Bolded and in italics goes in either the "Header", "Journal Entry" or "Footer" part. HTML is the walls of your journal, and CSS is the wallpaper, the paint and the decorations. I hope this clears some stuff up, because I don't think I've been too clear on the matter :)

Journal features

Uh huh, it's that time again. More featured goodness! Let's start out with a man who is doing a LOT for the CSS community. No doubt you've seen his name around dA, and wherever CSS is mentioned, and it's ipholio. This person has created menus for CSS journal use, given ideas for CSS, and just done so much for the community in terms of CSS. Check him out would you? ipholio.deviantart.com.

Next up (and the final one for this edition) is StealThisCSS. StealThisCSS is a club formed by the big names of CSS around on dA, and aims to create high-quality, free to use journal layouts for everyone. The world is a much better place with a team like StealThisCSS going!


Yeah that's all for this week. I hope you get some ideas out of this, and I look forward to seeing you all again in two weeks time! Take care and keep coding!
© 2006 - 2024 Grayda
Comments107
Join the community to add your comment. Already a deviant? Log In
bakerjake's avatar
I can't make the CD cover thing work.

I have:

.CD1 img {
display:none;

}

.CD1:hover img {
display:block;
position:absolute;
}

________________________

and:

I just bought their album "
[a href="http://www.amazon.com/Harsh-Light-Day-Fastball/dp/B00004YMNR/sr=8-10/qid=1166643933/ref=sr_1_10/103-2735608-2811023?ie=UTF8&s=music" class="CD1"]The Harsh Light Of Day[img src="https://upload.wikimedia.org/wikipedia/en/0/04/Hlod_artistdirect.jpg"/][/a]"





Of course with the [ and ] replaced.