Deviation Actions

ClaireJones's avatar

Deviant Modernity CSS v.1.3

By ClaireJones
GIMP | Notepad++

mo·der·ni·ty [mŏ-dûr'nĭ-tē, mō-]
1. the quality of being current or of the present


User Level: Advanced
Compatibility: Works in FF and mostly in IE7

Live Preview - One Column: [link]
Live Preview - Two Columns: [link]


Journal CSS FAQ: [link]
Read this first before noting questions.

More CSS Layouts: [link]


:new: Display issues have been fixed. The journal layout will now work properly.

This was originally a preview for the full Modernity Candy CSS pack.

An adaptation of the earlier Halloween CSS Layout. This layout has evolved more than any of my earlier designs. Overall, I am very pleased with the final look, though it is quite different from the initial sketch.

  • Available in single and two column layouts, both of which are included along with preview images in the ZIP
  • Designed for a 1024x768 resolution
  • Designed for both Firefox and Explorer with minimal loss of aesthetics in IE
  • Many customization options
  • Menu links feature mouse-over descriptions (Removed in v.1.3)
  • Static left sidebar
  • Sleek and modern design
  • Colours coordinate well with the default dA scheme
  • Features Fella, the dA mascot
  • A Fella-less header and PSD/XCF files are also included


10/30/08: v.1.3
  • Fixed the CSS to work correctly in dA v6 by removing the top menu.
  • Background image restored to Explorer versions.
  • Moved the sidebar code in the two column layout to the Header section.
  • Assorted tweaks to the code to streamline design.
  • New readme.
  • Updated the Photobucket screenshot and directions (Photobucket changed their uploading system).

dA members who have used this CSS:
~goucha | =Kazeyoubi | *LeonaWindrider | ~Mich2211 | =Voracious-Vixen | =wildhysteria | *WyrdWolf
Join the community to add your comment. Already a deviant? Log In
TexasDreamer01's avatar
I like how the stamps are on the side. It's very unique. :D
crumblecoochiie's avatar
lovely, sleek and with a bit mood. I'll definately use this :D thank you so much :huggle:
Cruz-no-Jutsu's avatar
I am using it. Thank you very much. (:
JamesSnaith's avatar
This is very nice... even if I am using a modified version of it ;-)
Kataang-furuba's avatar
I love looking at the codes you make because it gives me some hints on CSS and it really helps. Thanks and great job. *o*
Are-ka's avatar
I admit someone helped me make it work, but i did it in the end : [link] :), i should have started with simpler one but this one was so pretty ^^;. Thank you for wonderful CSS :heart:
Mistress-Jaeden's avatar
may i modify this to fit my needs as long as I leave your link in the credits area?
ClaireJones's avatar
Definitely! :nod: All of my CSS layouts can be customized as needed, as they are under a CC license. There's more information in the readme, too.
Mistress-Jaeden's avatar
sorry for leaving the message as apposed to downloading and reading the read me, I was headed out the door for work,

TY for the reply!
Jskra's avatar
Also, now it isn't working with the new layout. :(
hsvhead's avatar
Nice Work! I Luv This CSS! Only thing I want the WWhite color one but I cant find it and I cant find the Css Code!
Backseat-Instigator's avatar
Wow, I like this design a lot better than the Simple and Clean one I'm currently using...I might use this after I get some more experience with CSS. The simple and clean was the first one I used, and it was fairly easy to understand once I got the time to wrap my head around it. This one might take longer though. XD
ClaireJones's avatar
I'm pleased you like this one. :aww: Actually, my primary motivation for the Modernity series was to do something as different as possible from the Simple & Clean series, which was becoming synonymous with my name. But after the ton of hours spent bug fixing the Modernity series, I'm looking forward to doing something different again! :rofl:

And yes, this CSS is quite tricky. :D If you try it in the future, I would recommend starting with the one column version. The two column layout is different than the CSS you're using now and has caused many a lot of problems.
Backseat-Instigator's avatar
Will do. Thanks for the tip. :D
LanyLan's avatar
i would like to use this! ^^
LunarChloress's avatar
this is cool... i might use it :D
Melanophrionsa's avatar
After a tidbit of tweaking, I'm totally going to use this one.

I love your work!

Also, by the by, did you realise that you duplicated a bunch of coding in the 2 column journal file?
ellegabri's avatar
oooohhhh that's why it's not working for me! I really love this css and want to use it, but I don't know what's been duplicated and what's supposed to be there :(
Melanophrionsa's avatar
You're going for the two columned design, right?

Check near the bottom of the journal development bit- You'll see that the image box, scroll box, and one of the other boxes are in twice (I'm guessing if you tried to preview the CSS you saw what looked like boxes overlapping boxes, right?)

What you'll want to do is get rid of the overlapping by deleting one of the duplicates.

You'll probably notice if you preview it now that it looks a bit, well, messy. It'll look kind of like everything has been crushed against the top of the screen, so take the bit that says

<div class="columnclear"></div>

And place it right at the top of the journal bit, before everything else. (Not in the header, just in the journal bit).

For extra cleanness (and getting the comment/previous journal bit in the right place), place another copy of this bit of code right at the bottom of the journal.

After that everything'll be shiny.
ellegabri's avatar
omg you are awesome, it's working!! yayyyyy, now my page looks so cool :love: thanks so so soo much for your help! :boogie: :glomp:
Melanophrionsa's avatar
Don't thank me, thank Claire for her god-like creations :p.
JACT2012's avatar
Love this one!!!
ellegabri's avatar
I love this CSS!! :love:
4ndr3z's avatar
Great work, I've used in my journal :)
Join the community to add your comment. Already a deviant? Log In