SC: NG CSS LayoutClaireJones on DeviantArthttp://creativecommons.org/licenses/by-nc/3.0/https://www.deviantart.com/clairejones/art/SC-NG-CSS-Layout-81010259ClaireJones

Deviation Actions

ClaireJones's avatar

SC: NG CSS Layout

By
Published:
58.7K Views

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. :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.
Comments140
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In

Great thanks very much 👍 😀 ❤️