HOME | DD

ClaireJones — SC: NG CSS Layout by-nc

Published: 2008-03-25 21:14:03 +0000 UTC; Views: 58438; Favourites: 648; Downloads: 4523
Redirect to original
Description 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.

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: 140

erikaaah [2008-09-20 16:15:33 +0000 UTC]

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

iamtequila [2008-09-16 19:35:20 +0000 UTC]

Thank you for the simple journal. It's so elegant. + use.

👍: 0 ⏩: 0

noukka [2008-09-06 15:21:40 +0000 UTC]

Simple & Clean, the way we all want it
Thank you, it's very nice to use,
and just mess around with the features.

👍: 0 ⏩: 0

Flaming-Fury [2008-09-06 11:32:45 +0000 UTC]

This is an awesome CSS. Simple and really effective! Thankyou so much for making it!

👍: 0 ⏩: 0

CapnFlynn [2008-08-21 22:58:09 +0000 UTC]

I used this in my journal! Thanks!

👍: 0 ⏩: 0

Luv4Corky2 [2008-08-18 00:59:06 +0000 UTC]

Great CSS. I'm going to use it as my current CSS [=

👍: 0 ⏩: 0

Lineith [2008-08-11 00:55:24 +0000 UTC]

Amazing.

👍: 0 ⏩: 0

ThimbleBostitch [2008-08-10 17:33:13 +0000 UTC]

Cute, I like it!

👍: 0 ⏩: 0

MeisterDesZirkuss [2008-08-09 20:03:34 +0000 UTC]

using it from now on




thank you!

👍: 0 ⏩: 0

Mouyra [2008-08-07 07:08:24 +0000 UTC]

I really like this format, it is now up for my current journal. ^^

👍: 0 ⏩: 0

Schizophrenic-mage [2008-08-04 22:29:29 +0000 UTC]

Great job on the cssin', I've downloaded and am currently using it. c:

👍: 0 ⏩: 0

necrocerberus [2008-08-04 13:22:12 +0000 UTC]

Nice. I think I'll use it, but how do I install it?

👍: 0 ⏩: 0

pansyface [2008-08-03 07:14:42 +0000 UTC]

this is lovely! if you don't mind, i'll use it

👍: 0 ⏩: 0

stillnotsorry [2008-07-27 21:38:40 +0000 UTC]

Feature here: click!

👍: 0 ⏩: 0

KyokuikiRyu [2008-07-22 04:30:24 +0000 UTC]

;w; OMG it's wonderful.

👍: 0 ⏩: 0

whisperpntr [2008-07-22 02:36:52 +0000 UTC]

This is so beautiful that it should be offered as the standard layout. It would improve the overall look and feel of deviantart so much and then the developers could work on something special for the subscribers.

Thanks for providing this and giving me some ideas for my own design.

👍: 0 ⏩: 0

KeremGo [2008-07-15 23:35:24 +0000 UTC]

sorry I just requested a print of it - instead of clicking download...

damn mouse gestures

👍: 0 ⏩: 0

cl0uder [2008-07-12 22:42:48 +0000 UTC]

Really nice. I wish I knew how to code CSS as I have a commission for a website/webshop and all I know how to do is use Dreamweaver to skin a website.

Is it hard to learn CSS?

👍: 0 ⏩: 1

oktoberskind In reply to cl0uder [2008-07-14 15:53:31 +0000 UTC]

No. The best thing is to download some complete CSS Designs (html AND css Code) and put it in there:[link]
and play around with the settings. They explain themselves pretty good, trust me if you have no idea how you might change anything use google (display css, background-postion css, somehow like this) and I'm sure you'll find something useful!
And for some basic help:
[link]
It is not that hard as it looks like. Take your time, play around and try new things and you may learn it within a week. At least the basics

👍: 0 ⏩: 0

magaly [2008-07-08 07:39:58 +0000 UTC]

Thanks for this. Unfortunately, after DA's last update this layout stopped working for me. All the journal text shows up on the right hand bar even when I try and preview the older entires I have using this layout [which worked before the update]. It's so sad bc I can't find a layout as good as this on DA. This is my total fav. If anyone out there was having the same problem and found a fix please let me know!

👍: 0 ⏩: 0

seven7h-door [2008-07-06 06:51:53 +0000 UTC]

You rock~! Your CSS layouts, all of them, are just awesome. And this one is also lovely, I will be using it. ~(:

Thanx~!

👍: 0 ⏩: 0

kintsy [2008-07-01 22:05:10 +0000 UTC]

Wow, awesome CSS, and thanks a lot for the user-friendly readme! I think I'll use this right now I agree, this beats v1 !

👍: 0 ⏩: 0

Cyberbirdy [2008-06-29 14:04:57 +0000 UTC]

Thats so nice, I couldn't resist to use it
very good job

👍: 0 ⏩: 0

HotArt-Club [2008-06-25 07:15:20 +0000 UTC]

Thank you for this! I am using it on our club, its just what I was looking for

👍: 0 ⏩: 0

kleinbildformat [2008-06-22 13:28:36 +0000 UTC]

Used it here: [link]

^______________^
Your explanations are very helpful! Thank you!

👍: 0 ⏩: 0

kleinbildformat In reply to ??? [2008-06-21 13:42:46 +0000 UTC]

I really like this one. Never could do something on my own because I'm new to CSS. But this will be a big help I think.

So thank you very much for posting this!

👍: 0 ⏩: 0

bonhwaJP In reply to ??? [2008-06-20 10:59:56 +0000 UTC]

you're a legend! I've been looking for a layout like this since forever ~

👍: 0 ⏩: 0

PhotographedTuesday [2008-06-19 09:03:05 +0000 UTC]

Thank you. Thank you, thank you, thank you, thank you. Used and I think I rather love the way it turned out.

It's great.

👍: 0 ⏩: 0

macaoo [2008-06-18 17:00:21 +0000 UTC]

simple great, I will use this.

👍: 0 ⏩: 0

paintspills [2008-06-16 02:37:44 +0000 UTC]

i love it!
your designs are always so simple and beautiful.

👍: 0 ⏩: 0

darkstar2093 [2008-06-16 00:27:55 +0000 UTC]

Nice! I always love simplicity, so that's why I'm going to use this. Thanks!

👍: 0 ⏩: 0

SIADarkDrop [2008-06-09 19:12:00 +0000 UTC]

nice work

👍: 0 ⏩: 0

janvanlysebettens [2008-06-03 09:52:59 +0000 UTC]

I just though of something..

It might be nice to include anchor elements..so you can have a menu of all the sections in your journal..

I'm not 100% sure.. but I think dA supports anchors..

👍: 0 ⏩: 0

NativeTexanZach [2008-05-26 07:13:24 +0000 UTC]

I'm using it (and I love it), I modified it a little to suit my needs.

Thanks for providing it and spending a large chunk of your time to make it!

👍: 0 ⏩: 0

herr-grinch [2008-05-24 19:27:24 +0000 UTC]

I'm using

👍: 0 ⏩: 0

Merraton In reply to ??? [2008-05-12 21:12:25 +0000 UTC]


I used your awesone layout in my journal: [link]

👍: 0 ⏩: 0

NegaZero In reply to ??? [2008-05-12 15:00:01 +0000 UTC]

Beautiful!

👍: 0 ⏩: 0

Nokadota [2008-05-11 01:44:48 +0000 UTC]

ooh, prettiful. im gonna use this now.

👍: 0 ⏩: 0

Sindakri In reply to ??? [2008-05-09 06:55:21 +0000 UTC]

Do you know if it works well with Safari?

👍: 0 ⏩: 0

Mythos721 In reply to ??? [2008-05-08 03:21:43 +0000 UTC]

did you write in Latin for the deviation image?

👍: 0 ⏩: 0

pritcee [2008-05-04 18:22:23 +0000 UTC]

hi, this deviation has been featured on my journal

👍: 0 ⏩: 0

tanabatablossom [2008-05-02 19:22:11 +0000 UTC]

Sorry, I accidentally hit the "Print request" instead of "Download". I love the clean look of this. I might use it once I have a sub again.

👍: 0 ⏩: 0

PhyraxDesigns [2008-05-02 18:04:26 +0000 UTC]

Omg, you even have a great tutorial in the files, great job. I'm really loving this, not to say I don't know xHTML but I'm surprised you actually took the time to make this a very great readme file. Great job

👍: 0 ⏩: 0

PhyraxDesigns [2008-05-02 18:01:34 +0000 UTC]

Wow claire I love this layout, I gotta use it

👍: 0 ⏩: 0

silentseaa [2008-04-29 03:53:23 +0000 UTC]

i might try this out, if that's okay? it's a beautiful css.

👍: 0 ⏩: 0

Bethany33 [2008-04-28 16:16:36 +0000 UTC]

uhm...i have a question....how would you set this up?

👍: 0 ⏩: 0

toslayadragon [2008-04-14 13:46:00 +0000 UTC]

Used it. Very easy to setup even for people with little code experience. Great CSS

👍: 0 ⏩: 0

hikarushirou [2008-04-13 23:57:55 +0000 UTC]

Very nice and simple, just the way I like it. I think I'll be using this. :3

👍: 0 ⏩: 0

lovelyart2104 [2008-04-11 09:13:25 +0000 UTC]

thanks thanks thanks thanks

👍: 0 ⏩: 0

alfajr [2008-04-11 06:44:33 +0000 UTC]

Yeah, so simple and beautiful CSS design.

Only to add kinda offwhite backfround can give it some more pleasnet feel, more organized.
Over all cute the top header and whole designs are so cool ;]
Wonderfully done!




*alfajr

👍: 0 ⏩: 0


| Next =>