Shop More Submit  Join Login
×

:icongrayda: More from Grayda


More from deviantART



Details

Submitted on
November 13, 2006
Link
Thumb

Stats

Views
515 (2 today)
Favourites
198 (who?)
Comments
91
×
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:




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:

This is a slab of text that is always on top


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 GillsDigitalWorld 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? :D



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
Add a Comment:
 
:iconswordbunny4486:
swordbunny4486 Featured By Owner Aug 24, 2007
cool
Reply
:iconreafu-fu:
reafu-fu Featured By Owner Dec 7, 2006  Student Digital Artist
Good thing I came across this , I was looking for a rounded corner css tutorial for a while :shakefist:.
Reply
:icongrayda:
Grayda Featured By Owner Dec 8, 2006  Professional Photographer
And now you have one! Hope it's of use to you! :D
Reply
:iconreafu-fu:
reafu-fu Featured By Owner Dec 8, 2006  Student Digital Artist
Oh it definitely was :D!
Reply
:iconchimpantalones:
Chimpantalones Featured By Owner Nov 22, 2006   Interface Designer
I wonder what currently available mood my cityjump could portray... perhaps "exhilirated?" :ninjaplot:

Nice article man, and I like how you refered to me as "the Chimpantalones." :slow:
Reply
:icongrayda:
Grayda Featured By Owner Nov 23, 2006  Professional Photographer
I think that was a typo. It should have been just "Chimpantalones", or "THE Chimpantalones" :XD:

If dA had enabled the "Content:" property, it could be whatever you like! You could even make it a proper emote with no dirty hacks required.. but alas, dA have disabled the fabled Content: property, so it's back to the drawing bored (or board, depending on how I feel). Thanks again for permission!
Reply
:iconchimpantalones:
Chimpantalones Featured By Owner Nov 23, 2006   Interface Designer
Heh, no problem. :P

By the way, what would I go about changing to make it so that I could do this same little trick with the mood displayed at the top of my journal?
Reply
:icongrayda:
Grayda Featured By Owner Nov 23, 2006  Professional Photographer
You'd need to change in .moodimage, the following lines:

bottom:150px;
left:60px;

to

top:50px;
right:60px;

However you'll want to mess with the numbers to get it sitting just right. A bit of experimentation will get it looking just right

Best of luck!
Reply
:iconchimpantalones:
Chimpantalones Featured By Owner Nov 23, 2006   Interface Designer
Ah, cool. I got it figured out. Thanks!
Reply
:icongrayda:
Grayda Featured By Owner Nov 23, 2006  Professional Photographer
No worries! It looks really really good!
Reply
Add a Comment: