HOME | DD
ClaireJones — SC: NG CSS Layout
by-nc
Published: 2008-03-25 21:14:03 +0000 UTC; Views: 58180; Favourites: 648; Downloads: 4522
Redirect to original
Description
GIMP | 1st PageSimple & 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.
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.
Related content
Comments: 139
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.
👍: 0 ⏩: 0
Using
Still need to go through all of it more carefully though... but thanks for the CCS and the great how-to!
👍: 0 ⏩: 0
thanks so much for this. i was looking for something easy to help me figure out DA css!
👍: 0 ⏩: 0
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
👍: 0 ⏩: 0
Very nice and simple design. I will try using it.
👍: 0 ⏩: 0
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
👍: 0 ⏩: 0
I'm using this ( [link] )
The text is buggering up but I think I can fix that.
Great CSS
👍: 0 ⏩: 0
I love it, it's so simple but also blissful!
I'm gonna have to use it! ^_^
👍: 0 ⏩: 0
What about Internet Explorer 8? I really wanna use this skin!
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 0
thank you so much for your CSS! love it love it love it 
however, the bullet pic for "stamps" really isn't displaying - i think it's deleted from photobucket! 
👍: 0 ⏩: 0
COOL.
I think this is really neat!
I think I'm gonna use it...
👍: 0 ⏩: 0
this is sooo beautiful
me using it now
thank you!
👍: 0 ⏩: 0
Okay I am having one little issue o__o and I ain't good with CSS coding. I am only good with HTML so I need help!
Click the link below o__o it explains my issue with photos
[link]
👍: 0 ⏩: 1
Hmm. I tried to reproduce the same effect in my journal, but couldn't. Without seeing any actual code, I can only give you a few pointers. My guess is that there is an unclosed
Did you try putting the complete original sample code back in to see if it makes a difference?
👍: 0 ⏩: 1
I ended up fixing it. It was the top 3 links that was messing it up. I don't know why they were messing up but they did. But, it is okay I can live without the top three links. I did try to redo the original code and I put it into dreamweaver to see if I could fix it there but it just gave me an error and wouldn't read the coding. But thanks for your reply ^-^ when I get home I will look at the code again and see if I might of cut off the end code because I know I had problems copying it because it kept copying to much or to less. But, anyways great design ^-^ it works like a charm besides that one little mistake!
👍: 0 ⏩: 0
Beautiful! I'm gonna try to get it up and working.
👍: 0 ⏩: 0
HELLO!
i used your ellegant layout css on my journal!
thank you
[link]
👍: 0 ⏩: 0
nice work. I'm probably going to fiddle around with this and maybe use it.
👍: 0 ⏩: 0
Beautiful *O* I like it very much, I think that I'll use this for my journal, thank you!
👍: 0 ⏩: 0
Hello there ! Just to tell you that I use your CSS design, with some modifications, there : [link] Thak you for keeping it that simple, it was my first try and it works
👍: 0 ⏩: 0
Which stamp icon doesn't work?
👍: 0 ⏩: 1
The icon (h1_stamps) doesn't appear. And not only that. Also h1_gallery...
They just don't appear.
👍: 0 ⏩: 0
I loved your design and I had just used it in my journal
[link]
👍: 0 ⏩: 1
Thanks for letting me know! I appreciate it. 
That's the first time I've seen modifications to this particular journal. It's very different and looks good!
👍: 0 ⏩: 1
Because everybody´s might be using the same, I tried to show something different.
👍: 0 ⏩: 0
Thank you for the layout! It was my first time using CSS and i found your readme extremely patient and helpful, with precise directions.
👍: 0 ⏩: 0
hi!
i've used this journal layout
it's awesome and made my day ..
thanks for sharing
👍: 0 ⏩: 0
Pretty cool. I'm gonna use it once I figure out how to.
👍: 0 ⏩: 0
I really like this layout. I use it on my journal, but it doesn't quite look the same.
👍: 0 ⏩: 0
A wonderful pristine design. For one who is simply delving into the realm of CSS, it appears that your layout template serves well for the beginner.
Good work.
👍: 0 ⏩: 0
I have to say the way you spent so much time and energy, not just on the css layout itself, but on the display image here in the dev, shows your devotion and care. Very impressive.
Now I might just have to use this css sometime soon. It's just what I've been looking for.
Thank you.
👍: 0 ⏩: 0
This really is elegant! I'm just learning about CSS and I've been interested in something clean and elegant like this. Thanks for sharing!
👍: 0 ⏩: 0
Awesome design - I customized it a bit to my own color scheme and am using it in my journal. Thanks so much for sharing your creative mind with us!
👍: 0 ⏩: 0
I hope I don't turn into the annoying kid that has everyone else's CSS, but my current one is far too image-heavy for my tastes. I'll see if going simple will work for me this time. 
👍: 0 ⏩: 0
Great layout, and even greater documentation. Using it in my journal.
I donate 5$, Buy yourself a drink for your time.
👍: 0 ⏩: 0
Love it & using it. (:
I don't know if it's suppose to be like that but I have a scroll bar on the side for the entire thing. I sort of want to get rid of it, but I don't know how.
👍: 0 ⏩: 0
| Next =>