Shop Mobile More Submit  Join Login
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
:iconboffinbrain:
BoffinbraiN Featured By Owner Dec 13, 2006  Professional Interface Designer
Good stuff. Of course, you don't need a separate class name CD1, CD2 etc for each CD cover, since it is only the image that changes each time. =p

Glad to see deviantBOX up and running. 8-)
Reply
:icongrayda:
Grayda Featured By Owner Dec 14, 2006  Professional Photographer
I realised that mistake after I submitted it. I also realised that the code I provided doesn't work. It should be something more like:

a img {

and

a:hover img {

and that should work just fine. I'll point out that mistake next issue.

And I'm glad too. I haven't used it yet, or had a chance to play around with it, but it's looking awesome ;D
Reply
:iconradink:
radink Featured By Owner Dec 13, 2006
are there tutorials for making your journal use css?
Reply
:icongrayda:
Grayda Featured By Owner Dec 13, 2006  Professional Photographer
These are tutorials on improving your CSS Journals. They contain little "gadgets" or "tweaks" and stuff that make your journal do stuff it can't normally do. Like the one on my page for example. When you hover over song titles, it shows up the album cover and you can click on it to take you to the appropriate Amazon.com page to buy the album. That's not something dA offers in journals, but something you can make your journal do. I hope that straighten things out :)
Reply
:iconsavagebinn:
savagebinn Featured By Owner Dec 12, 2006   General Artist
Thank you for sharing. :)
Reply
:icongrayda:
Grayda Featured By Owner Dec 13, 2006  Professional Photographer
You're welcome, and again I hope you find something useful in here :)
Reply
:iconjeriweaver:
jeriweaver Featured By Owner Dec 12, 2006  Professional Traditional Artist
Awesome, thanks for bringing this to my attention. It was exactly what I needed to unclutter my journal =D
Deviantboxes ahoy!
Reply
:icongrayda:
Grayda Featured By Owner Dec 13, 2006  Professional Photographer
Also good for tricking people into thinking you have won a deviousness award or something ;P

And you're welcome. Make sure you visit the three involved with the project and share some thanks with them :XD:
Reply
:iconboffinbrain:
BoffinbraiN Featured By Owner Dec 13, 2006  Professional Interface Designer
:shh:
Reply
:iconjeriweaver:
jeriweaver Featured By Owner Dec 13, 2006  Professional Traditional Artist
Yes, I visited them all =>

My god, thats an deviously evil Idea.. HAHA
Reply
:icongrayda:
Grayda Featured By Owner Dec 13, 2006  Professional Photographer
Not exactly something the admins would love, but still hillarious. Makes me wonder why I didn't think of this before :XD:
Reply
Hidden by Admin
:iconzeroremix:
zeroremix Featured By Owner Dec 12, 2006
???????
Reply
:iconxxbcxx:
xxbcxx Featured By Owner Dec 12, 2006  Professional Artisan Crafter
sa-weeet :D
Reply
:icongrayda:
Grayda Featured By Owner Dec 13, 2006  Professional Photographer
Thanks! I hope you got something useful out of these, and if anything doesn't work, note me, because I know for a fact the CD art thing doesn't exactly work on dA without some tweaking :P
Reply
:iconaimeelikestotakepics:
aimeelikestotakepics Featured By Owner Dec 11, 2006  Hobbyist Photographer
I love these articles XD I recently redid my CSS and it's rockin' now :D
Reply
:icongrayda:
Grayda Featured By Owner Dec 11, 2006  Professional Photographer
It looks wonderful! I redid mine today and last night, and I love it. It uses the CD-cover hover technique, and I love it :D

Next up is displaying album info in DIVs ;D
Reply
:iconnisso:
Nisso Featured By Owner Dec 11, 2006   Interface Designer
If only non-subs can use css in their journals
Reply
:icongrayda:
Grayda Featured By Owner Dec 11, 2006  Professional Photographer
If only.. but there's always competitions going on that offer subscriptions for prizes, and they're only $7 for 3 months anyway.. I'm certainly getting my money's worth :D

But yeah have a look around, see what you can find in the way of spare cash or competitions, and I hope to see your journal soon ;D
Reply
:iconnisso:
Nisso Featured By Owner Dec 12, 2006   Interface Designer
so do i, man
so do i.
Reply
:icondancewiththesky:
dancewiththesky Featured By Owner Dec 11, 2006
Hello guys! Actually mindfuckx is who suggested I write the generator (and he wrote the CSS code) so pay him some love ; ) .. It will be released it as soon as I finish experimenting with a script for fixing skin/custom journal css issues.. stayed tuned!
Reply
:icongrayda:
Grayda Featured By Owner Dec 11, 2006  Professional Photographer
:#1: You know we'll all be on the edge of our seats until then! Keep it up :D
Reply
:icondancewiththesky:
dancewiththesky Featured By Owner Dec 11, 2006
Now released! [link] :D
Reply
:icongrayda:
Grayda Featured By Owner Dec 11, 2006  Professional Photographer
Faved, commented and much loved! Thanks for your hard work, and of course to everyone else who came up with this idea :D
Reply
:icondancewiththesky:
dancewiththesky Featured By Owner Dec 12, 2006
You're welcome :D
Reply
:iconsynthetic-delirium:
Synthetic-Delirium Featured By Owner Dec 11, 2006
This is neat!
Reply
:icongrayda:
Grayda Featured By Owner Dec 11, 2006  Professional Photographer
Thanks! Now if only you had a sub to try these out on eh? ;P

But these can be applied to your average website too. They're so versatile :D
Reply
:icondevouredex:
devouredex Featured By Owner Dec 11, 2006
Very interesting :D
Reply
:icongrayda:
Grayda Featured By Owner Dec 11, 2006  Professional Photographer
Thanks! The only hard part is thinking up more stuff to add next time ;D (hmm Deja Vu :XD: )
Reply
:icondevouredex:
devouredex Featured By Owner Dec 12, 2006
yea i know exactly what you mean
Reply
:icongrayda:
Grayda Featured By Owner Dec 12, 2006  Professional Photographer
I think next issue I should rectify some mistakes I've made with the articles (For example, the CD cover code doesn't work, because I've used the wrong code.. I'll add a fix next issue ;D
Reply
:icondevouredex:
devouredex Featured By Owner Dec 13, 2006
yea i know what you mean, im glad some of the articles i have submitted have shed some light on how to improve the next one
Reply
:icongrayda:
Grayda Featured By Owner Dec 13, 2006  Professional Photographer
If only we could edit the articles.. but alas we can't, so no use whining about it :XD:
Reply
:icondevouredex:
devouredex Featured By Owner Dec 14, 2006
true true
Reply
:iconlilyas:
Lilyas Featured By Owner Dec 11, 2006  Professional General Artist
Your tips for CSS always have been very useful for me. Thank you!
Reply
:icongrayda:
Grayda Featured By Owner Dec 11, 2006  Professional Photographer
So I can see! Looking good, keep up the great work :D

And I'm glad I helped. My articles haven't gone to waste then ;P
Reply
:iconlilyas:
Lilyas Featured By Owner Dec 11, 2006  Professional General Artist
Believe me, they haven't!!! A lot of people will agree. You are doing a much appreciated community work of a huge amount. Keep it up! :thumbsup: :D
Reply
:icongrayda:
Grayda Featured By Owner Dec 14, 2006  Professional Photographer
haha excellent, thanks so much! :D
Reply
Add a Comment:
 
×

:icongrayda: More from Grayda


More from DeviantArt



Details

Submitted on
December 11, 2006
Link
Thumb

Stats

Views
623 (1 today)
Favourites
181 (who?)
Comments
110
×