Shop More Submit  Join Login
×

:icongrayda: More from Grayda


More from deviantART



Details

Submitted on
December 11, 2006
Link
Thumb

Stats

Views
567
Favourites
182 (who?)
Comments
110
×
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!
Add a Comment:
 
:iconbakerjake:
bakerjake Featured By Owner Dec 20, 2006  Hobbyist Photographer
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="http://upload.wikimedia.org/wikipedia/en/0/04/Hlod_artistdirect.jpg"/][/a]"





Of course with the [ and ] replaced.
Reply
:icongrayda:
Grayda Featured By Owner Dec 20, 2006  Professional Photographer
Yeah that's my bad. I tried out the code OUTSIDE of dA, and it worked fine there, and it looked dA-compatible, but it wasn't. Here's the new code that works perfectly:

[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"]Have a cigar<div><img src="http://upload.wikimedia.org/wikipedia/en/0/04/Hlod_artistdirect.jpg" /></div>[/a]


And the CSS:

a div img {
display:none;

}

a:hover div img {
display:block;
position:absolute;
}

Hope that works for you :)
Reply
:iconrainbird:
RAINBIRD Featured By Owner Jan 6, 2007   Filmographer
*grabs code and runs*
cheers grayda XD was wodering why the article code didnt work...i love giveing your code a try out and experimenting ^_^
Reply
:icongrayda:
Grayda Featured By Owner Jan 7, 2007  Professional Photographer
One article I'll correct all the mistakes, coz there are quite a few of them.. now I just gotta get Issue 7 written and released ;P
Reply
:iconrainbird:
RAINBIRD Featured By Owner Jan 7, 2007   Filmographer
well if your looking for ideas/suggestions ive been wondering how to make say an indevidual line in the main section of the journal have a different colour backround/text...hmm...maybe highlighting a section of text would be a better discription..my actual CSS languge/knolage is limited
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
Done! Check out [link] to find out how! Thanks for the suggestion! It's people like you who keep this article going :)
Reply
:iconrainbird:
RAINBIRD Featured By Owner Jan 8, 2007   Filmographer
YAY! change colour to black,add center alignment and wala...cheap temp banners :D thanks for takeing my suggestion...:headbang: can't wait for future articles ^_^
Reply
:icongrayda:
Grayda Featured By Owner Jan 11, 2007  Professional Photographer
You're welcome ;D
Reply
(1 Reply)
:iconpsychopulse:
Psychopulse Featured By Owner Dec 15, 2006  Professional Photographer
Thanks a lot - I'll try to use it ;)
Reply
:icongrayda:
Grayda Featured By Owner Dec 16, 2006  Professional Photographer
Sorry, but you need to be a subscriber to access CSS stuff in journals. However you can use these in any web-page (with some expansions for some things), or there are many competitions out there on dA that offer subscriptions as prizes. Best of luck ;)
Reply
Add a Comment: