CSS has to be one of my favorite languages for coding on the computer. The way it works is essentially coding design. As a recent project for my web design class I created an American flag, without the use of any graphics at all. Even the stars were generated with code. You can
view it here, and feel free to view the source code to see how I created it.
holds no exceptions and takes full use of CSS in the design of their site as well. As a premium member we also have the ability to implement it in our profiles. If you have a basic free account (with a ~ in front of your username) then you might want to consider breaking out that credit card, otherwise this tutorial won't help you at all.
I am going to cover the essentials that anyone should be able to recreate on their profile. Look for the bold red text in these examples, that's where you want to include your content.
These examples are simply recalling the CSS that deviantART uses elsewhere on the site. They are not my design and several other users have their own variations of the exact same thing. $
DEVlANT and =
somrat are some of my favorites and partly inspired me to do the same.
<div class="gr-body"><div class="gr"><div class="grf-indent pp">
Paste your text here.</div></div></div>
<i class="gr1"><i></i></i> <i class="gr2"><i></i></i> <i class="gr3"><i></i></i><div class="gr-body"><div class="gr"><div class="grf-indent pp">
Paste your text here.</div></div></div><i class="gr3 gb"></i><i class="gr2 gb"></i><i class="gr1 gb gb1"></i>
Quick note: The differences between the green and purple boxes is a marked in purple.
<div class="gr-body"><div class="gr"><div class="grf-indent subscription_pitch
has_subscription"><div class="pp">
Paste your text here.</div></div></div></div> </div>
<div class="gr-body"><div class="gr"><div class="grf-indent subscription_pitch
no_subscription"><div class="pp">
Paste your text here.</div></div></div></div> </div>
The following boxes have a small icon in the top left corner in the title bar which you can change by using the key in these deviations by `
LostKitten. Replace the code in red with the icon i code you wish to use.
<i class="gr1"><i></i></i> <i class="gr2"><i></i></i> <i class="gr3"><i></i></i><div class="gr-top"><div class="gr"><b><i class="tri"></i><i class="icon
i26"></i>
Type the Title Here</b><br />
</div></div><div class="gr-body"><div class="gr"><div class="grf-indent pp">
Paste your text here.</div></div></div><i class="gr3 gb"></i><i class="gr2 gb"></i><i class="gr1 gb gb1"></i>
<div class="gr-box gr-configbox"><i class="gr1"><i></i></i> <i class="gr2"><i></i></i> <i class="gr3"><i></i></i><div class="gr-top"><div class="gr"><b><i class="tri"></i><i class="icon
i26"></i>
Type the Title Here <br />
</b></div></div><div class="gr-body"><div class="gr"><div class="grf-indent subscription_pitch
has_subscription">
Paste your text here.</div></div></div>
Those are the basics using what deviantART already gives you. You aren't limited to just those 6 though. I try to implement as much as possible, like the backgrounds for example. These can be a little trickier and the image you want to include must be hosted somewhere, but your scratch folder is probably a good enough place as any.
<table class="f"><tbody><tr><td class="f grf-mirror" style="width: 386px; font-size: 9pt;"><div class="popup2-moremenu">
<div class="floaty-boat"><img src="
URL to your background image" align="right"></div></div><div class="popup2-moremenu"><div class="floaty-boat"></div></div>
Paste one of the box codes above here</td></tr></tbody></table>
Use this to help organize and to add some flair to your profile. Just remember... this isn't MySpace! The object here is to make your page a little more colorful, not make everyones eyes bleed. Keep it simple and subtle. If you use any of this, just leave a comment here so I can take a look and see what you did with it. I intend to add more things like this in the future, so keep an eye on this post. I hope you enjoy! And as always... Have fun!
Special thanks to `
electricjonny in working out some last minute kinks!
`TimberClipse's dedication to our community is without question. From developing helpful tutorials, to being a community leader in groups such as #fella and #deviant365, you can always find Zev connecting with all areas of our community in order to spread his infectious enthusiasm and inspiring positivity. We are delighted to bestow the Deviousness Award for May 2012 to `TimberClipse, congratulations! Read More
Sta.sh
--
potato.
--
icon commissions open 40
--
Everyone can produce art, but only some will actually try.
~
Animals are the key to life <3
~
MONEY COMMISSIONS OPEN [link]
--
“I am only strange, because I am not like you.” - Will & Willow
Join my VOCALOID fan group.
[link]
Before joining, please read the rules.
It's BRAND NEW and in NEED of members!
So join, and invite friends with you!
--
icon commissions open 40
--
“I am only strange, because I am not like you.” - Will & Willow
Join my VOCALOID fan group.
[link]
Before joining, please read the rules.
It's BRAND NEW and in NEED of members!
So join, and invite friends with you!
--
icon commissions open 40
--
“We are each our own devil, and we make this world our hell”
There's only two types of guys out there,
Ones that can hang with me and ones that are scared.
--
I'm Exveemon. I Love to Anger!!!
--