HOME | DD

ClaireJonesSimple + Clean v1.2 CSS Layout by-nc

Published: 2007-03-16 20:13:09 +0000 UTC; Views: 137606; Favourites: 1781; Downloads: 12400
Redirect to original
Description User Level: Beginner to Intermediate
Compatibility: Should work in both Firefox and IE.

View the live version here: [link]

Warning! This layout is currently being edited to fix some problems caused by the new dA userpages.

I've seen a lot of CSS layouts here on dA, some good and others not so good, but I haven't seen a lot of utterly simplistic dA colorscheme layouts. That's where I come in. It's not the best design out there, but it was what I had wanted for my own journal.

Be sure to go over the readme before attempting to apply the CSS to a journal.

Thanks so much for all the usage and ! I really appreciate it. I never thought Simple + Clean would be so popular.

Features:
  • Minimalist design to compliment the dA layout
  • Scroll box to contain images (if desired)
  • Right-hand Links sidebar
  • Two main header styles
  • An additional smaller header that can be used more or less like a caption
  • Only one graphical element (could be good or bad, depending on one's preference)
  • Many of the elements are moderately easy to customize (link colors, etc.)

Mood Box:
Make the Mood Box visible by removing "display: none;" from .list { }. The new code allows it to be placed either at the top or bottom of the journal. Nothing fancy here, but at least it's not all fugly like before.

Columns:
Be sure to have more content in the main (left) column. Otherwise, the links will spill into the sections below. This was fixed in later Simple + Clean versions by using a different CSS method.

More CSS Layouts: [link]

Change Log:
8-26-07:
Argh. I think dA didn't recognize the new ZIP file I uploaded (not the first time the phenomenon has occurred). Should be the correct version now.

8-24-07:
  • Removed "Journal Entry" text leaving date still visible.
  • Fixed code so that the "Journal Entry" text will not display in IE (displays as 1px text).
  • Added correct Mood Box code so that it will not be visible by default.
  • Fixed Mood Box code so that it displays correctly when visible.
  • The new headers are now .header1 (old header), .header2 (same as .header1, but in small-caps) and .header3 (centered small text header with expanded font).
  • Scooted the "No Comments/Prev. Journal" links over to align with the rest of the journal layout.

5-26-07:
After some careful consideration on the Creative Commons License, I have removed the Share Alike attribution. I think the general Non-Commercial license works best for everyone.

Origin:
Simple + Clean's name originates from Kingdom Heart's main theme, Simple and Clean (the English version of Hikari) by Utada Hikaru.

dA members who have used this CSS:
~1ofthefew | ~870 | ~Adaae | ~allsoulsnight | *angelsashes | =Anoya | =Anupthra | *Ashley425 | *AStarAboveU | =babylon6 | ~BluefootedCrow | `budgie | =cameraoscura | =CandyStriped | *CB-Stock | =charlie140588 | =Chicken-monster | *cloudliqueur | =createbyweek | ~CursedBlackwings | ~DA-Freja | =damouse | *dana-martinez | ~dbl-A | =Digital-Kisses | ~Dreamer-lupe | ~engelszorn | =ersi | ~Fabulae | *faestock | ~fanficbug | ~Fenetre-sur-Cour | ~FeverantObsession | ~flamingarrow | ~flightless-angel | *flowers-are-forever | =fluffyvolkswagen | ~ForeignSin | =forevergeek | `GeorgeHarrison | ~gigiptex | ~gold-chocobo | =Green-najotake | =GreenBushido | ~hagarun | ~hannaelly | =Hantenshi | ~hartofgold | =helly7307-stock | ~hengie | ~imbecile-anthem | ~imxanxillusion | ~inkshed | ~jessandpencil | =Jezhawk | ~Katherine--Elizabeth | ~kazugfx | =khimaereus | *KirlianCamera | ~KittyKittyMeow | =KoolGal14 | =Kycha | =LadyAmdis | ~Lilyse | ~loki-mcdamage | =lone-momo | ~lowapproach | =Lucky101 | ~LuPY | `lyastri | ~maf8 | *markskywalker | *Mazoku85 | ~mcboyde | ~Minolta | ~missbecca | *MissKeira | `mom-the-bomb | =MsRebelDoll | ~mwirsig | ~MysteryRealm | ~nativa | ~NijiHana | ~Nilala | ~oniNON | ~onpaperwings | `parliamentFunk | ~pencil-ninja | `pendlestock | ~PekGuo | ~Phoenix13x5 | ~pr0jectz | ~RainDropSoup | ~RaquelCree | =Rebecca-Parker | ~redbuffalo2001 | ~redhead-2008 | =robinism | =Ronnen | ~sakura0104 | ~sandemonic | ~Sarto-San | =sayra | =Saysamia | ~scarabee | ~seorangprempuan | ~sergiofx | =ShadeGlass | `SheTakesPics | ~Shia-Izumono | *Sklarvv | ~SleepySh | *slumberdoll | =snapr | *soheir | *SojiOkage | ~Sokyu | ^StJoan | =stormyblueyz | ~SubwoofaCS | ~summersilhouette | ~tangledseaweed | ~technosplat | ~THFM | ~the-ace-chef | =TheOnlyLordRequiem | =tragic-saturn | *Transcripts | =TrixyPixie | ~Tiuni | ~VenomMistress | ~victoriastar | ~WiccaJaz | =wildheartfreesoul | ~wpe2006 | =xldstudios | ~Xx-Black-Soul-xX | =xxchange | ~fullmetalkittn | ~Yokou-chan | *zombiemeena

Edited Versions:
~afiqqq | =alucinogenos | ~arciel | *ArtistUnwanted | *asteroid--blues | ~Aukon | ~biting-bullets | =BlindWorld | =BlueStef | ~Canides | ~cbsmoonlight | ~chesterblover | =ChiChiRoma | *christel-b | =Cristian-M | *cocacolagirlie | =cougars | =CrazyLadiee | ~crirox | *cyKoe | ~davesteele | ~DeadlyDonna | ~dELOdePote | =Docali | ~DraggyGirl | =DuckTape-Productions | ~eeron | =elithespork | ~ethereal-dreams | =Fixedys | ~fizster | =Freakshow6 | ~fullmetalkittn | =Furiousxr | =greymoccasin | *Hedfones | ~henica | ~Hinderence | *hortensie | ~i-be-c | ~ilona | *ILTBY | !imaboneheadtoo | ~itsMoochan | ~jaderose43 | *jakikukeko | =joannastar-stock | =jocarra | `juuhanna | =Karbo | =Kherrigan | =known-secret | =Kuru-da-Bunbun | *ladysage1999 | *lavabeast | *LazyMary | =leeroi1 | *leAlmighty | =lil-twilight-wolf | =Lillymon | =Lune-Tutorials | ~lutrasilvereye | =M-PlayC3ll | *magnublaze | =MaureenOlder | =MissyStock | =Mithgariel-stock | ~mulduan | ~nadiard | ~Naruto-Couples-fc | ~neonfishy | =NightsongWS | =nintendo-goddess | ~Noushie | =onixa | =OnPix-artist | ~paintingwords | =pen-mage | *pencilenvy | ~perilous-dreamer | =PhoenixKnght86 | ~philosophyoftime | ~Polinadiab | `Princess-of-Shadows | *PrisonerofConvention | =ProSI | ~purplesunfire01 | =quiet-krys | ~rafemccawley | =rheall | =ribcage-menagerie | =robinism | *Ryushay | =SeaMist | =Seventh-Seal | =sfpup | =Shaelynn | ~ShayLee | ~SkyesFantasyStock | ~Somnilocus | ~starflower135 | *strangelight | =super-fly-rules | =sweetfire-05 | =thali-n | =TheDEviLDweLLeR | ~thenamelessone | =TwilightMoon | ~Unpleasable | ~Vamediah | =veryangelic | ~vickygraphy | ~Waltz-With-Me | *WhiteGaby | :devWofkaJ: | =xSYNNcere | *XxCrimsonFuryxX | ~Ze6 | *ZeppTokyoASK | =Zhampip


Edit:
Wow! A DD? I'm so surprised and honoured. Thanks so much to =robinism for the suggestion and `maxwell-heza for the feature!
Related content
Comments: 852

imaboneheadtoo [2007-09-05 19:56:07 +0000 UTC]

oh wow. ive been searching for a layout that works for months. thanx!

👍: 0 ⏩: 1

ClaireJones In reply to imaboneheadtoo [2007-09-06 18:13:27 +0000 UTC]

Thanks! I'm glad you like it.

👍: 0 ⏩: 0

OlgaDrebas In reply to ??? [2007-09-05 13:12:52 +0000 UTC]

great layout, going to use it too
thanks!

👍: 0 ⏩: 1

ClaireJones In reply to OlgaDrebas [2007-09-06 18:16:26 +0000 UTC]

Thanks! I'm glad you like it.

👍: 0 ⏩: 0

zombiemeena In reply to ??? [2007-09-04 20:05:05 +0000 UTC]

great css going to use it for my journal, thanks.

👍: 0 ⏩: 1

ClaireJones In reply to zombiemeena [2007-09-06 18:17:32 +0000 UTC]

Thanks for using! I appreciate it.

👍: 0 ⏩: 1

zombiemeena In reply to ClaireJones [2007-09-06 19:39:25 +0000 UTC]

no problem!

👍: 0 ⏩: 0

mulduan In reply to ??? [2007-09-04 13:31:42 +0000 UTC]

Thank you for helping me improve my page. I am started so I have to experiment more to get the grip on this.

👍: 0 ⏩: 1

ClaireJones In reply to mulduan [2007-09-06 18:19:25 +0000 UTC]

Thanks for using my CSS layout! I really appreciate it.

👍: 0 ⏩: 0

hannaelly [2007-09-04 12:06:53 +0000 UTC]

This is lovely i hope you dont mind me using it for my journal ! <3 x

👍: 0 ⏩: 1

ClaireJones In reply to hannaelly [2007-09-06 18:22:19 +0000 UTC]

Not at all! Thanks for using.

👍: 0 ⏩: 0

asteroid--blues In reply to ??? [2007-09-03 18:03:40 +0000 UTC]

Just to let you know, I am using this journal layout.
It is beautiful. Thankyou

👍: 0 ⏩: 1

ClaireJones In reply to asteroid--blues [2007-09-06 18:23:45 +0000 UTC]

Thanks for letting me know! I appreciate it.

👍: 0 ⏩: 0

pr0jectz In reply to ??? [2007-09-02 00:29:43 +0000 UTC]

I'm using this design. thanks

👍: 0 ⏩: 1

ClaireJones In reply to pr0jectz [2007-09-06 18:26:08 +0000 UTC]

Thanks for letting me know! I appreciate it.

👍: 0 ⏩: 0

cookiemonstah In reply to ??? [2007-08-31 18:17:48 +0000 UTC]

i'm looking for css for a scroll box, can you send me just that? if not, then where can i find the code for one?

👍: 0 ⏩: 1

ClaireJones In reply to cookiemonstah [2007-09-03 22:45:26 +0000 UTC]

I actually got the scrollbox code from this dA news article: [link]

Hope that helps!

👍: 0 ⏩: 1

cookiemonstah In reply to ClaireJones [2007-09-03 22:53:13 +0000 UTC]

thanks!

👍: 0 ⏩: 0

lutrasilvereye In reply to ??? [2007-08-31 15:03:29 +0000 UTC]

Thank you so much, it looks absolutely beautiful! I tweaked the colours and fonts mostly, if you want a look

👍: 0 ⏩: 1

ClaireJones In reply to lutrasilvereye [2007-09-07 04:57:12 +0000 UTC]

Thanks for letting me know! I like the tweaks.

By the way, if you want to change the color of the underline for the "Headers" element, you can easily change the hex code. I bolded the line that controls the underline:

.headers {
color:#FF9900;
font-family:trebuchet ms, tahoma, verdana, arial, helvetica;
font-size:18px;
font-weight:lighter;
text-align:justify;
letter-spacing:7px;
line-height:20px;
border-bottom:1px solid #92a399;
}

Just a tip!

👍: 0 ⏩: 1

lutrasilvereye In reply to ClaireJones [2007-09-07 10:34:48 +0000 UTC]

Cool thanks!!

👍: 0 ⏩: 0

Naruto-Couples-fc In reply to ??? [2007-08-31 02:03:43 +0000 UTC]

did i say that i was using this??

👍: 0 ⏩: 1

Naruto-Couples-fc In reply to Naruto-Couples-fc [2007-08-31 02:04:30 +0000 UTC]

hehe. opps.

sorry about that.

👍: 0 ⏩: 0

Naruto-Couples-fc In reply to ??? [2007-08-31 02:02:16 +0000 UTC]

did i say that i was using this?

👍: 0 ⏩: 0

Naruto-Couples-fc In reply to ??? [2007-08-30 23:52:56 +0000 UTC]

using it!

👍: 0 ⏩: 1

ClaireJones In reply to Naruto-Couples-fc [2007-09-07 05:02:22 +0000 UTC]

Thanks for letting me know! I appreciate it.

👍: 0 ⏩: 1

Naruto-Couples-fc In reply to ClaireJones [2007-09-07 21:34:35 +0000 UTC]

np. and sorry for the double post.

👍: 0 ⏩: 1

ClaireJones In reply to Naruto-Couples-fc [2007-09-08 01:18:28 +0000 UTC]

No worries!

👍: 0 ⏩: 0

ChiChiRoma [2007-08-28 23:48:13 +0000 UTC]

This is so useful! Thank you very much for making it. c:

I'm using the code, but I am attempting to re-modify it to my liking. ^^

Thanks again.

👍: 0 ⏩: 1

ClaireJones In reply to ChiChiRoma [2007-09-08 01:46:51 +0000 UTC]

Thanks for using!

👍: 0 ⏩: 0

Xx-Black-Soul-xX In reply to ??? [2007-08-25 21:47:40 +0000 UTC]

Great one.. I'm using it

👍: 0 ⏩: 1

ClaireJones In reply to Xx-Black-Soul-xX [2007-08-26 21:08:44 +0000 UTC]

Thanks!

Just to let you know, dA didn't recognize the revised file upload the first time around, so you might consider redownloading the CSS to get the newer S+C.

👍: 0 ⏩: 0

Aukon [2007-08-25 17:37:34 +0000 UTC]

Do I have permission to not add the credit in the footer, but instead write a whole journal entry about it?

👍: 0 ⏩: 0

Anniepopokios In reply to ??? [2007-08-25 14:17:01 +0000 UTC]

This is really great! But I was wondering if you might be able to answer a few questions for me? In the links box, where do you put in your links in the code? What section and do you just use url links? Sorry I'm really bad with css, also where can you change the bg color? (if you can at all) How do I get it so its not just gray?

👍: 0 ⏩: 0

ViraA In reply to ??? [2007-08-25 06:20:49 +0000 UTC]

Claire

This is really nice, I think I'll use this - is it easy to use, i.e. to replace placeholder copy with my own...

👍: 0 ⏩: 1

ClaireJones In reply to ViraA [2007-08-25 07:42:37 +0000 UTC]

Well, I won't complain if you use it.

👍: 0 ⏩: 0

Gfx-Team In reply to ??? [2007-08-24 18:15:43 +0000 UTC]

Great CSS. Thanks U. And



PZDR

👍: 0 ⏩: 1

ClaireJones In reply to Gfx-Team [2007-08-25 06:12:50 +0000 UTC]

Thanks! I'm glad you like it.

👍: 0 ⏩: 0

GreenBushido In reply to ??? [2007-08-24 16:08:09 +0000 UTC]

Thank you for posting this. It looks great, is easy to use, and the FAQ is very helpful. I've used it for my journal.

👍: 0 ⏩: 1

ClaireJones In reply to GreenBushido [2007-08-25 06:15:25 +0000 UTC]

Thanks so much!

👍: 0 ⏩: 0

FoxDesigns In reply to ??? [2007-08-24 15:34:40 +0000 UTC]

Nice! I'll use it to help explain dA CSS to myself! Cuz I don't listen too well...

👍: 0 ⏩: 1

ClaireJones In reply to FoxDesigns [2007-08-25 06:17:41 +0000 UTC]

Ha ha! Hope it helps.

👍: 0 ⏩: 0

fizster In reply to ??? [2007-08-21 14:33:01 +0000 UTC]

hey, im using this css for my journal... i like it alot, hope its ok for you... nice work btw...

👍: 0 ⏩: 0

Rebecca-Parker In reply to ??? [2007-08-20 17:50:39 +0000 UTC]

Thanks Claire. Im using it

👍: 0 ⏩: 1

ClaireJones In reply to Rebecca-Parker [2007-08-20 18:49:38 +0000 UTC]

Thanks for letting me know. I appreciate it!

👍: 0 ⏩: 0

neonfishy In reply to ??? [2007-08-18 16:50:38 +0000 UTC]

This is exactly what I was looking for! It's simple, elegant, and nifty beyond belief.

If only I could figure out how to put my feesh in...

👍: 0 ⏩: 1

ClaireJones In reply to neonfishy [2007-08-20 20:59:18 +0000 UTC]

Thanks so much for letting me know! I'm glad you like it.

Erm, what is your feesh?

👍: 0 ⏩: 1

neonfishy In reply to ClaireJones [2007-08-20 23:56:31 +0000 UTC]

My feesh is a fish brush I made in photoshop. I wanted to put it in the top left and bottom right corner of the journal but it kinda failed.

👍: 0 ⏩: 0

mylsbunagan In reply to ??? [2007-08-18 12:31:04 +0000 UTC]

heya i really like this and i'm definitely going to use it very nice

👍: 0 ⏩: 0

redhead-2008 In reply to ??? [2007-08-15 20:07:52 +0000 UTC]

Totally using this layout, it's perfectly simple.

👍: 0 ⏩: 1


<= Prev | | Next =>