Deviation Actions

ClaireJones's avatar

SC: NG CSS Layout

By ClaireJones
GIMP | 1st Page

Simple & Clean: Next Generation

User Level: Beginner to Intermediate
Compatibility: Firefox, IE6 & IE7

View the live version of the Intermediate version here: clairejones.deviantart.com/jou…

View the live version of the Basic version: clairejones.deviantart.com/jou…

Update 5/3/2014:
I noticed a couple of design errors that have popped up, the most noticeable being the ordered and ordered lists.  I'm not sure when (if) I'm going to be updating the files,  so I'm giving you the code here. Find the .journaltext ol, .journaltext ol li, .journaltext ul, and .journaltext ul li in your CSS and replace those four with the following:


.journaltext ol {
    margin: 15px 0 0 50px;
    padding: 0px;
    list-style-type: decimal-leading-zero;
    _list-style-type: lower-roman;
}

.journaltext ol li {
    margin: 0;
    padding: 0 0 5px 20px
}

.journaltext ul {
    margin: 15px 0 0 20px;
    padding: 0;
    list-style-type: none;
}

.journaltext ul li {
    background: transparent url('http : //i13.photobucket.com/albums/a252/clairejone/dA%20CSS/Simple%20and%20Clean/bullet_star.png') no-repeat 0px 2px;
    margin: 0;
    padding: 0 0 5px 20px;
}

Please remove spaces in the image web address for the star bullets in the .journaltext ul li. Otherwise you will have broken images.


This CSS is a modified version of the original Simple + Clean CSS Layout for deviantART journals. I won't go into much detail here about the journal since I have spent way too much time on the Readme.

Features:
▹ ZIP file contains the basic CSS files and icons, as well as layout screenshots.
▹ Designed for a minimum 1024x768 resolution
▹ Designed for both Firefox and Explorer with minimal loss of aesthetics in IE
▹ Many customizable features
▹ Featuring Silk Icons by famfamfam (more info in readme)
▹ Sidebar useful for links and displaying thumbs
▹ Many different icons featured for headings, lists, boxes, etc.
▹ Horizontal navigation at top of journal
▹ Pull quotes if desired
▹ Default modified lists blend with the layout
▹ Minimalistic design
▹ Comes complete with a (sorta) interactive readme
▹ CSS is available under a Creative Commons Attribution-Noncommercial 3.0 License and may be altered as desired

Please go over the readme before doing anything else! Almost all of your questions should be answered there.

Edit 3/25/08:
It's never a good sign when I have to correct mistakes on the first day. :bleh:

If you have had trouble with the side bar, it is because part of the example code was not updated. Re-download the file to get the fixed XHTML code.
Published:
Comments139
Join the community to add your comment. Already a deviant? Log In
Sleyf's avatar
Wonderful, I've always been a fan of the simple clean journal skin designs
asterbunny's avatar
I love all of your css. I love their simplicity and how nice and "clean" they are. It really centers the attention straight to the content. I love that.
dwuff's avatar
thank you so much!
Zenk01's avatar
Might be useful. Thank you :D
bees-and-honey's avatar
maria-mar's avatar
Using ;)
Still need to go through all of it more carefully though... but thanks for the CCS and the great how-to!
lledra's avatar
ooh this is awesome <3 I love how it looks.
Capture-Everything's avatar
love it! gonna try it out =]
AprilElizabeth's avatar
i'm using this now. thank you =)
benihme-chan's avatar
thanks so much for this. i was looking for something easy to help me figure out DA css!
JamesSnaith's avatar
Clean and simple. Sold!

Love using it.
chi-u's avatar
This is great! So simplistic yet complex :)

Would you mind coding a simple CSS for me if I create the graphics etc?

If this is possible, would you mind telling me the best dimensions for a CSS :)
bokuSatchi's avatar
Very nice and simple design. I will try using it.
w-melon's avatar
thank you so much :iconflowerplz:

.
.
~(^_^)~
masked-racoon's avatar
Nevermind, I fixed it
masked-racoon's avatar
ok, it's been too long since I last tried to use CSS, anyone know how to fix up my journal ( [link] )?
The text seems to be too high but I'm struggling to find out how to lower it
masked-racoon's avatar
I'm using this ( [link] )
The text is buggering up but I think I can fix that.

Great CSS :thumbsup:
tehsummychan's avatar
I love it, it's so simple but also blissful!

I'm gonna have to use it! ^_^
RougeRoks's avatar
What about Internet Explorer 8? I really wanna use this skin! :eager:
Obinice's avatar
This is a beautiful skin that fits so perfectly with the rest of deviantART's style. I'm a new premium user and it's the first Journal Skin I've used.

But let's be honest, why would I ever need another now that I've found this? :D
OliverMa's avatar
thank you so much for your CSS! love it love it love it :love:

however, the bullet pic for "stamps" really isn't displaying - i think it's deleted from photobucket! :fear: could you fix that pretty please :innocent:
Ice-Nile's avatar
COOL.
I think this is really neat! :D
I think I'm gonna use it...
my-dark-desire's avatar
this is sooo beautiful
me using it now :giggle:
thank you! :heart:
Saywill's avatar
Thank you for this layout :)
Join the community to add your comment. Already a deviant? Log In