Shop Mobile More Submit  Join Login
×

:icongrayda: More from Grayda


More from DeviantArt



Details

Submitted on
November 13, 2006
Link
Thumb

Stats

Views
540
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
:iconholymonk:
holymonk Featured By Owner Nov 19, 2006
Thanks for including me there :D !!

:hug:
Reply
:icongrayda:
Grayda Featured By Owner Nov 20, 2006  Professional Photographer
You're very welcome! Thanks for being a supporter of the CSS Journal articles :)
Reply
:iconryokogirle:
ryokogirle Featured By Owner Nov 18, 2006  Hobbyist General Artist
is there a way to use that "cover up the mood" feature to.... make the mood disappear. for some reason DA won't let me take the mood OFF my page and i don't really want it there.... ;__;
Reply
:icongrayda:
Grayda Featured By Owner Nov 18, 2006  Professional Photographer
To just disable the mood image, try

.list img {
display:none;
}

or to remove the whole mood box, try

.list {
display:none;
}

There you go!
Reply
:iconryokogirle:
ryokogirle Featured By Owner Nov 18, 2006  Hobbyist General Artist
thank you so much!
Reply
:icongrayda:
Grayda Featured By Owner Nov 18, 2006  Professional Photographer
You're welcome :)
Reply
:iconmaleda:
Maleda Featured By Owner Nov 17, 2006  Hobbyist Artist
Just wondering, been playing around wth css and a novice, but love it. Is it possible to add java to it ? Been trying but somehow fail at the attempt. :)
Reply
:icongrayda:
Grayda Featured By Owner Nov 17, 2006  Professional Photographer
Short answer is yes, long answer is yes with a few buts inbetween

If you're using CSS OUTSIDE of dA, then you can have something like this:

<div class="addjava"></div>

.addjava {
content: <tags and stuff to add a java applet goes here>
}

If you're using it INSIDE of dA, then no. Java is seen as too much of a security risk to let users add in to their journals, or anywhere else for that matter.

There are some "Games" you can add into your journal, such as a PHP Naughts and Crosses game, which uses a basic set of 9 squares, with 3 different states. Blank, Naughts, Crosses. When you click on a square, it writes to a database, your move. Then it reloads the 9 pictures, reflecting your move. When one person wins, the squares are reset to blank, and the process starts again.

This process can be expanded vastly, to make signature games (that for example let you explore a virtual world from inside an image file), let users interactively pick songs for your playlist, and much more. You might want to have a look at [link] and [link] as well as [link] if you are interested in using GD for games, or trying to do whatever you were trying to do, in Java.

Sorry for the long reply, but I have a lot to say. I should be sleeping, as it's almost 4am, but that's how life is ;P
Reply
:iconmaleda:
Maleda Featured By Owner Nov 17, 2006  Hobbyist Artist
Ow my.........I kept you awake ain't I. Sorry.............but thanks for the reply. It's an applet, so I have a go at it. Now get your ass into bed. ;P
Reply
:icongrayda:
Grayda Featured By Owner Nov 17, 2006  Professional Photographer
Well I did get home at 2am after going to Melbourne with my dad and his band.. so you didn't really keep me up.. and if you did, only for a minute or two :P

The applet definitely won't work on dA, but if you have the source, then you could somehow try porting it to PHP, and display the "window" through an image file that dA will let you use..

Best of luck!
Reply
:iconmaleda:
Maleda Featured By Owner Nov 18, 2006  Hobbyist Artist
Great minds do think alike. :) But not today.........have a terrible hangover, so no css and tricks on this end. Thanks again.
Reply
:icongrayda:
Grayda Featured By Owner Nov 18, 2006  Professional Photographer
Definitely! And I know what you mean. I don't have a hangover, but I'm tired and got lots on my mind. That's much on the same level as a hangover :XD:
Reply
:iconmaleda:
Maleda Featured By Owner Nov 19, 2006  Hobbyist Artist
'Kay no more hangover, so back to the drawingboard. Have a great day. :)
Reply
:icongrayda:
Grayda Featured By Owner Nov 22, 2006  Professional Photographer
Thanks! You as well! (And sorry for the late replies.. Laziness is kicking in..)
Reply
(1 Reply)
:iconartificernlk:
artificerNLK Featured By Owner Nov 15, 2006
What is a CSS Journal? I must be code illiterate.
Reply
:icongrayda:
Grayda Featured By Owner Nov 15, 2006  Professional Photographer
CSS stands for "Cascading Style Sheet". It's basically a "presentation language", which means that you can take HTML (the stuff that makes up a website), and define how that looks. So I can make links turn different colours, make blocks of text have images behind them, even go so far as to redesign an entire website, and do stuff just standard HTML can't do. Check out [link] for a bit more information on WHAT CSS is, and [link] for a tutorial on how to do CSS. My personal website [link] has "interchangeable style sheets", which means with a small bit of HTML, I can make "CSS pages" that can change the whole look of the site. I suggest having a look at all three links to see just what it's all about :)
Reply
:iconartificernlk:
artificerNLK Featured By Owner Nov 15, 2006
I will check out the three links you sent me on CSS. I am taking some programming classes in a few weeks for the my next quarter. Maybe I can learn something, eh? LOL.
Reply
:icongrayda:
Grayda Featured By Owner Nov 17, 2006  Professional Photographer
Programming usually includes HTML, so you'll be in luck there ;D Hopefully it'll include a bit of CSS too! Best of luck with that!
Reply
:iconleaf-lover:
leaf-lover Featured By Owner Nov 15, 2006
Fantabbyhooby as always, great installment. :aww:
Reply
:icongrayda:
Grayda Featured By Owner Nov 15, 2006  Professional Photographer
:XD: Thankyou! Hope you got some use out of it :)
Reply
:iconleaf-lover:
leaf-lover Featured By Owner Nov 17, 2006
Welcomes :aww:
Reply
:iconessui:
essui Featured By Owner Nov 15, 2006
Great stuff! I'm sure it helps a lot of people who aren't hardcore design experts. :)

I've got my subscription only because of the CSS feature, by the way (a bit obsessed, I know :lol:) - even though I'm sad now because IE6 keeps on tearing my li'l journal's CSS cloth, and I have no idea what should I do with the code to stop the total collapsing under that evil browser, augh. :dead:
Reply
:icongrayda:
Grayda Featured By Owner Nov 15, 2006  Professional Photographer
I got a sub to get the CSS journals too.. but then I had =wazabees purchase one for me too, so I wound up with 6 months. So I bought one for my friend =photographygrl and she loved it.

And I've just given up on IE6. I know it's still a widely used browser, but frankly with all the security issues, the broken code and the lack of standards, it doesn't make sense not to upgrade to Firefox, or even support it in CSS code. All my sites are tested in Firefox, and if they work in IE6, fantastic that's an added bonus. If not, oh well I just place a "Get Firefox" notice at the bottom and be done with it ;P
Reply
:iconessui:
essui Featured By Owner Nov 17, 2006
Well, but still more percent of people use IE6, so it's your own favour to make your site being able to be viewed under that browser as well. Sadly. :dead: Nevetheless, I hope the users get onto the IE7 bandwagon as soon as possible, it would be a bless not to stress about the IE6 compatiblity anymore. Even though IE7 is not perfect either, but at least it has a more reliable CSS support.
Reply
:icongrayda:
Grayda Featured By Owner Nov 17, 2006  Professional Photographer
I reckon if I persist with the FF-only thing, then that might just persuade more people to try alternative browsers.. maybe.. IE7 won't be the savior of the browser world I reckon. the IE7 team need to stop looking for what people want, and start working with what people NEED. From what I've heard, CSS support will only be marginally better (with no true standards support), PNG support will be basic (like before, but maybe they'll fix up that damn alpha bug).. but that's what I've read. I haven't tried the software out yet (Might try that today actually) so yeah..
Reply
:iconneostitch:
neostitch Featured By Owner Nov 14, 2006
i like the Css when i Had the Free week

And that make what to get a Subscprition
when i get the Money are the Frist of the year

CSS ROCK
Reply
:icongrayda:
Grayda Featured By Owner Nov 14, 2006  Professional Photographer
There's still some competitions out there that have subscriptions as prizes. Maybe you could check them out and go for longer than a week ;D

Best of luck!
Reply
:iconneostitch:
neostitch Featured By Owner Nov 14, 2006
I will Check them Out
and thank you
Reply
:icongrayda:
Grayda Featured By Owner Nov 17, 2006  Professional Photographer
You're welcome!
Reply
:iconneostitch:
neostitch Featured By Owner Nov 18, 2006
XD
Reply
:iconj-ro-20:
J-Ro-20 Featured By Owner Nov 14, 2006  Professional Digital Artist
:jawdrop:
Reply
:icongrayda:
Grayda Featured By Owner Nov 14, 2006  Professional Photographer
hehe thanks? :XD:
Reply
:iconoceansky:
oceansky Featured By Owner Nov 14, 2006
lol thx for another article of this...this is really helpful ;)
Reply
:icongrayda:
Grayda Featured By Owner Nov 14, 2006  Professional Photographer
You're very welcome! Hope this gives you inspiration or at least some ideas :)
Reply
:iconmonkeyshack:
Monkeyshack Featured By Owner Nov 14, 2006
Thanks for the mention. If anyone is interested, i've got other corner types. I can re-code them for DA (not hard) if anyone wants them.
Reply
:icongrayda:
Grayda Featured By Owner Nov 14, 2006  Professional Photographer
I'm sure they'd love that. Just convert 'em over, note me and I'll feature them and link to the deviations and your page.

Thanks again for letting me feature the corners code :)
Reply
:iconmonkeyshack:
Monkeyshack Featured By Owner Nov 14, 2006
Anytime. I'll convert them and provide examples. It'll take me a few days though. I'm gearing up for a vacation, and it's a bit hectic while i'm packing and whatnot.
Reply
:icongrayda:
Grayda Featured By Owner Nov 14, 2006  Professional Photographer
Absolutely :) Take your time.. whenever you can get them done is perfectly alright :)
Reply
:iconalteru:
Alteru Featured By Owner Nov 14, 2006
Cools stuff! I'll have to come back for looking more closely later. :D
Reply
:icongrayda:
Grayda Featured By Owner Nov 14, 2006  Professional Photographer
Thanks! Hope you get some use out of this :)
Reply
Add a Comment: