Layout: Wildflowers/Clover

[revolutions]

Layout: Transmogrified
Tested on: IE7, Firefox 3, Safari for Windows, Google Chrome
Custom comment pages: Yes
Account levels: All



Notes:

• this was very much inspired by fiddling around with boo's code
  
• again, I'm still a bit of a n00b but if anything breaks let me know and I'll try really really hard to fix it
  
• also, the CSS is hideously horribly messy, and I'm sorry
  
• banner images are hosted on tinypic, uploading them to your own server isn't required
  
• however, customizing this layout is very much allowed and encouraged. to replace the header with an image of your own, search for background: url and replace the url that follows with the url for your own image. to change link hover colours, do a find and replace on #5da0dd (for Wildflowers) or #f55ea8 (for Clover)
  
• header size is set to 750x200 by default, this can be changed by fiddling around with the css if so desired
  
• remember NOT to un-tick the "use layout's stylesheets" box
  
• credit is nice but not required, just don't claim it as your own
  
  
  
  Previews:
  
  Wildflowers screenshot | Clover screenshot | Live preview (Wildflowers)
  
  
  
  
  
  Instructions:
  
  1. Set your journal theme to "Transmogrified"
  2. Click on Custom CSS
  3. DO NOT un-tick the "Use layout's stylesheet" box; leave it ticked (this layout works by using a whole load of overrides rather than rewriting the CSS from scratch. I have no idea why I did it this way, but I did)
  4. Paste in the text from one of the boxes below, depending on which colour scheme you want to use
  5. Click on Save Changes
  6. that's it!
  
  
  
  Wildflowers:
  /* TRANSMOGRIFIED - DREAMWIDTH */ /* Wildflowers */ body {background: #eff6fe; color: #222; font-family: arial; font-size: 10pt; line-height: 16px; margin-top: 30px;} a, a:link, a:active, a:visited {color: #000; text-decoration: none;} a:hover {color: #5da0dd; text-decoration: none;} #container {width: 750px; margin: auto; border: 1px solid #ddd;} #wrap {padding-right: 230px; padding-top: 25px; padding-left: 20px;} #header {background: url(http://i44.tinypic.com/2rxv6zl.png) center center no-repeat; height: 200px; margin-bottom: 0px;} #header h1, #header h2 {display: none;} #content {width:100%} .page-tags #content h2, .page-tags #wrap h2 {text-transform: lowercase; font-family: arial; font-size: 13.5pt; font-weight: normal; color: #666; margin: 10px; background: #fff; border: none;} .page-tags #content {border: 0px solid #fff; background: #fff;} .page-tags #wrap {background: #FFF; border: 0px solid #EEE; padding: 0px; margin: 0px 0; width: 70%;} .ljtaglist {margin: 10px; padding: 0; text-align: left;} .ljtaglist li {margin-left: 10px; padding: 0;} .page-tags .module-section-two {display: none;} .month-wrapper {background: #FFF; border: 0px solid #fff; padding: 10px; margin: 20px 0;} .month {border: 0px solid #EEE; background: #fff; padding: 10px;} .month-wrapper #h2, .month-wrapper #h3, .month-wrapper caption, .month h3, .inner h3 {text-transform: lowercase; font-family: arial; font-size: 14px; font-weight: normal; color: #666; margin: 10px; background: #fff; border: none;} .navigation {border: 0px;} .month-wrapper, #archive-month dl {border: 0px;} .navigation .page-back a:before {content: " "; font-size: 0.5em; letter-spacing: 0px; vertical-align: 40%; padding-right: 1px; text-decoration: none;} .navigation .page-forward a:after {content: " "; font-size: 0.5em; letter-spacing: 0px; vertical-align: 40%; padding-left: 1px;} .entry-wrapper {background: #FFF; border: none; padding: 0px; clear: both; margin: 0px 0; margin-left: -20px;} .module-userprofile .userpic img {border: none; margin: 20px;} .module-userprofile .userpic {text-align: center;} .module-userprofile ul {margin: 0px; padding: 0px; text-align: center; margin-top: 5px;} .module-userprofile p {margin-top: 0px; margin-bottom: 1px #ddd;} .module-userprofile li {display: inline; padding: 5px; list-style: none;} .module-calendar {text-align: center;} .module-calendar table {margin-left: auto; margin-right: auto;} .module-section-two {position: relative; width: 210px; float: left; margin-left: 20px; margin-top: -20px; padding-bottom: 0px; background-color: #fff; /* this must stay at the bottom of this code as in some circumstances it closes one declaration and opens another one */ margin-right: -240px;;} .module-section-one ul, .navigation ul {background: #fff; border-top: 0px solid #DDD; border-bottom: 0px solid #DDD; border-left: none; border-right: none; line-height: 28px; font-size: 10px; text-transform: lowercase; text-align: center; margin: 0 0 0px 0; text-align: center;} .module-section-one li, .navigation li {display: inline; list-style: none;} .module-section-one li a, .navigation li a {padding: 10px 10px; background: #fff; color: #000;} .module-section-one ul li a:hover, .navigation li a:hover {background: #dce5ed; color: #000; z-index:1} .module-section-two .module {color: #000; background-color: #fff; padding: 10px; margin: 0px 0px 0px 0px; text-align: center; border-right: none; border-top: none; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; font-size: 10px;} .module-section-two a {color: #333;} .module-section-two a:hover {color: #5da0dd;} .module-section-two .module-header a {text-decoration: none; background: #fff;} .module-section-two h2 {margin: 0; margin-bottom: 0px; padding: 5px; border: none; border-bottom: 1px #ddd; #ffffff; font-family: arial; font-weight: normal; text-transform: lowercase; text-align: center; font-size: 10px; color: #333; background: #fff;} .module-section-two h2 a {color:#333;} .module-section-two ul {list-style-type: none; margin-left: 0.5em; padding: 0; text-align: left; font-size: 10px;} .module-section-two ul ul {list-style-type: none; margin-left: 0.5em; padding: 0.5em; font-size: 10px;} .module-section-three {display: none;} .entry-title, .entry-title a {font-family: trebuchet ms; font-size: 15px; font-weight: bold; color: #666; background: #fff; margin: 0 0 5px 0; width: 355px; line-height: 118%;} .entry .userpic a, .comment .userpic a {float: right; padding: 10px; margin: 33px 0 10px 10px; background: #FFF; border: 1px solid #ddd;} .entry .userpic img, .comment .userpic img {border: 1px solid #EEE;} .time, .date {display: inline; font-size: 9px; text-transform: uppercase;} .entry-content {text-align: left; margin: 20px 10px;} .entry, .comment, .text_noentries_day { padding: 10px; margin-top: 40px;} .entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #ddd; background-color: #ffffff; color: #666666; font-size: 11px; } .entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a { background-color: #fff; border: none; } .entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title { border: none; color: #333; background-color: #fff; } .entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a { color: #333; } .entry-wrapper-odd .entry-title a:hover, .comment-wrapper-odd .comment-title a:hover { color: #5da0dd; } a, .entry-wrapper-odd a, .comment-wrapper-odd a { color: #333; } a:hover, .entry-wrapper-odd a:hover, .comment-wrapper-odd a:hover { color: #5da0dd; } a, .entry-wrapper-even a, .comment-wrapper-even a { color: #333; } a:hover, .entry-wrapper-even a:hover, .comment-wrapper-even a:hover { color: #5da0dd; } .entry-wrapper-even .entry, .comment-wrapper-even .comment { background-color: #ffffff; color: #666666; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #ddd; font-size: 11px; } .entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a { background-color: #fff; border: none; } .entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title { border: none; color: #333; background-color: #fff; } .entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a { color: #333; border: none; } .entry-wrapper-even .entry-title a:hover, .comment-wrapper-even .comment-title a:hover { color: #5da0dd; } .entry-wrapper-even a, .comment-wrapper-even a { color: #333; } .entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {margin: 0; padding: 0; display: inline; font-size: 9px; text-transform: lowercase; color: #bbb;} .entry-management-links li, .entry-interaction-links li, .comment-management-links li, .comment-interaction-links li {display: inline; list-style: none; margin: 0; padding-left: 10px; padding-top: 10px;} .entry .metadata ul { margin: 0px; padding: 0px; font-size: 10px; } .entry .metadata li { list-style: none; } .tag {text-transform: lowercase; margin-bottom: 20px; text-align: left; font-size: 10px;} .tag ul, .tag li {list-style: none; display: inline; padding: 0; margin: 0;} .tag li:before {content: ", ";} .tag li:first-child:before {content: " ";} *+html .tag li {padding: 0 5px;} .entry-management-links .edit_entry a, .comment-management-links .delete_comment a, .comment-management-links .edit_comment a { background-image: url(none); text-align: left; } .entry-management-links .edit_tags a, .comment-interaction-links .parent a { background-image: url(none); } .entry-management-links .mem_add a, .entry-management-links .watch_comments a, .comment-management-links .watch_thread a { background-image: url(none); } .entry-management-links .link_prev a { background-image: url(none); } .entry-management-links .link_next a { background-image: url(none); } .entry-interaction-links li a, .entry-management-links .tell_friend a, .comment-interaction-links li a { background-image: url(none); background-repeat: no-repeat; background-position: 0% 20%; padding-left: 4px; display: inline; } .comment-management-links .delete_comment a { background-image: url(none); } .entry-management-links li a, .comment-management-links li a, .comment-interaction-links .thread a { background-image: url(none); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 14px; } #entries {margin-top: -25px;} hr.below-reply-container, hr.above-entry-interaction-links {display: none;} option, select, input {font-family: arial; font-size: 9pt; color: #222; background: #FFF; border: 1px solid #ddd;} textarea {font-family: arial; font-size: 9pt; color: #222; background: #FFF; border: 1px solid #ddd; padding: 5px;} button {font-family: arial font-size: 9pt; color: #222; background: #FFF; text-transform: uppercase; font-weight: bold; border: 1px solid #ddd;} .comment {border: 1px solid #ddd; background: #fff; padding: 10px;} .comment-wrapper {background: #FFF; border: 1px solid #ddd; padding: 10px; clear: both; margin: 20px 20px;} .comment-content {text-align: justify; margin: 20px 20px;} .comment-title, .comment-title a {text-transform: uppercase; font-weight: bold; color: #333; margin: 0 0 5px 0;} #postform {border: 0px;}
  
  Clover:
  /* TRANSMOGRIFIED - DREAMWIDTH */ /* Clover */ body {background: #f3f3ea; color: #222; font-family: arial; font-size: 10pt; line-height: 16px; margin-top: 30px;} a, a:link, a:active, a:visited {color: #000; text-decoration: none;} a:hover {color: #f55ea8; text-decoration: none;} #container {width: 750px; margin: auto; border: 1px solid #ddd;} #wrap {padding-right: 230px; padding-top: 25px; padding-left: 20px;} #header {background: url(http://i41.tinypic.com/2566x3q.jpg) center center no-repeat; height: 200px; margin-bottom: 0px;} #header h1, #header h2 {display: none;} #content {width:100%} .page-tags #content h2, .page-tags #wrap h2 {text-transform: lowercase; font-family: arial; font-size: 13.5pt; font-weight: normal; color: #666; margin: 10px; background: #fff; border: none;} .page-tags #content {border: 0px solid #fff; background: #fff;} .page-tags #wrap {background: #FFF; border: 0px solid #EEE; padding: 0px; margin: 0px 0; width: 70%;} .ljtaglist {margin: 10px; padding: 0; text-align: left;} .ljtaglist li {margin-left: 10px; padding: 0;} .page-tags .module-section-two {display: none;} .month-wrapper {background: #FFF; border: 0px solid #fff; padding: 10px; margin: 20px 0;} .month {border: 0px solid #EEE; background: #fff; padding: 10px;} .month-wrapper #h2, .month-wrapper #h3, .month-wrapper caption, .month h3, .inner h3 {text-transform: lowercase; font-family: arial; font-size: 14px; font-weight: normal; color: #666; margin: 10px; background: #fff; border: none;} .navigation {border: 0px;} .month-wrapper, #archive-month dl {border: 0px;} .navigation .page-back a:before {content: " "; font-size: 0.5em; letter-spacing: 0px; vertical-align: 40%; padding-right: 1px; text-decoration: none;} .navigation .page-forward a:after {content: " "; font-size: 0.5em; letter-spacing: 0px; vertical-align: 40%; padding-left: 1px;} .entry-wrapper {background: #FFF; border: none; padding: 0px; clear: both; margin: 0px 0; margin-left: -20px;} .module-userprofile .userpic img {border: none; margin: 20px;} .module-userprofile .userpic {text-align: center;} .module-userprofile ul {margin: 0px; padding: 0px; text-align: center; margin-top: 5px;} .module-userprofile p {margin-top: 0px; margin-bottom: 1px #ddd;} .module-userprofile li {display: inline; padding: 5px; list-style: none;} .module-calendar {text-align: center;} .module-calendar table {margin-left: auto; margin-right: auto;} .module-section-two {position: relative; width: 210px; float: left; margin-left: 20px; margin-top: -20px; padding-bottom: 0px; background-color: #fff; /* this must stay at the bottom of this code as in some circumstances it closes one declaration and opens another one */ margin-right: -240px;;} .module-section-one ul, .navigation ul {background: #fff; border-top: 0px solid #DDD; border-bottom: 0px solid #DDD; border-left: none; border-right: none; line-height: 28px; font-size: 10px; text-transform: lowercase; text-align: center; margin: 0 0 0px 0; text-align: center;} .module-section-one li, .navigation li {display: inline; list-style: none;} .module-section-one li a, .navigation li a {padding: 10px 10px; background: #fff; color: #000;} .module-section-one ul li a:hover, .navigation li a:hover {background: #fecfee; color: #000; z-index:1} .module-section-two .module {color: #000; background-color: #fff; padding: 10px; margin: 0px 0px 0px 0px; text-align: center; border-right: none; border-top: none; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; font-size: 10px;} .module-section-two a {color: #333;} .module-section-two a:hover {color: #f55ea8;} .module-section-two .module-header a {text-decoration: none; background: #fff;} .module-section-two h2 {margin: 0; margin-bottom: 0px; padding: 5px; border: none; border-bottom: 1px #ddd; #ffffff; font-family: arial; font-weight: normal; text-transform: lowercase; text-align: center; font-size: 10px; color: #333; background: #fff;} .module-section-two h2 a {color:#333;} .module-section-two ul {list-style-type: none; margin-left: 0.5em; padding: 0; text-align: left; font-size: 10px;} .module-section-two ul ul {list-style-type: none; margin-left: 0.5em; padding: 0.5em; font-size: 10px;} .module-section-three {display: none;} .entry-title, .entry-title a {font-family: trebuchet ms; font-size: 15px; font-weight: bold; color: #666; background: #fff; margin: 0 0 5px 0; width: 355px; line-height: 118%;} .entry .userpic a, .comment .userpic a {float: right; padding: 10px; margin: 33px 0 10px 10px; background: #FFF; border: 1px solid #ddd;} .entry .userpic img, .comment .userpic img {border: 1px solid #EEE;} .time, .date {display: inline; font-size: 9px; text-transform: uppercase;} .entry-content {text-align: left; margin: 20px 10px;} .entry, .comment, .text_noentries_day { padding: 10px; margin-top: 40px;} .entry-wrapper-odd .entry, .comment-wrapper-odd .comment, .text_noentries_day { border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #ddd; background-color: #ffffff; color: #666666; font-size: 11px; } .entry-wrapper-odd .userpic a, .comment-wrapper-odd .userpic a { background-color: #fff; border: none; } .entry-wrapper-odd .entry-title, .comment-wrapper-odd .comment-title { border: none; color: #333; background-color: #fff; } .entry-wrapper-odd .entry-title a, .comment-wrapper-odd .comment-title a { color: #333; } .entry-wrapper-odd .entry-title a:hover, .comment-wrapper-odd .comment-title a:hover { color: #f55ea8; } a, .entry-wrapper-odd a, .comment-wrapper-odd a { color: #333; } a:hover, .entry-wrapper-odd a:hover, .comment-wrapper-odd a:hover { color: #f55ea8; } a, .entry-wrapper-even a, .comment-wrapper-even a { color: #333; } a:hover, .entry-wrapper-even a:hover, .comment-wrapper-even a:hover { color: #f55ea8; } .entry-wrapper-even .entry, .comment-wrapper-even .comment { background-color: #ffffff; color: #666666; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 1px solid #ddd; font-size: 11px; } .entry-wrapper-even .userpic a, .comment-wrapper-even .userpic a { background-color: #fff; border: none; } .entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title { border: none; color: #333; background-color: #fff; } .entry-wrapper-even .entry-title a, .comment-wrapper-even .comment-title a { color: #333; border: none; } .entry-wrapper-even .entry-title a:hover, .comment-wrapper-even .comment-title a:hover { color: #f55ea8; } .entry-wrapper-even a, .comment-wrapper-even a { color: #333; } .entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {margin: 0; padding: 0; display: inline; font-size: 9px; text-transform: lowercase; color: #bbb;} .entry-management-links li, .entry-interaction-links li, .comment-management-links li, .comment-interaction-links li {display: inline; list-style: none; margin: 0; padding-left: 10px; padding-top: 10px;} .entry .metadata ul { margin: 0px; padding: 0px; font-size: 10px; } .entry .metadata li { list-style: none; } .tag {text-transform: lowercase; margin-bottom: 20px; text-align: left; font-size: 10px;} .tag ul, .tag li {list-style: none; display: inline; padding: 0; margin: 0;} .tag li:before {content: ", ";} .tag li:first-child:before {content: " ";} *+html .tag li {padding: 0 5px;} .entry-management-links .edit_entry a, .comment-management-links .delete_comment a, .comment-management-links .edit_comment a { background-image: url(none); text-align: left; } .entry-management-links .edit_tags a, .comment-interaction-links .parent a { background-image: url(none); } .entry-management-links .mem_add a, .entry-management-links .watch_comments a, .comment-management-links .watch_thread a { background-image: url(none); } .entry-management-links .link_prev a { background-image: url(none); } .entry-management-links .link_next a { background-image: url(none); } .entry-interaction-links li a, .entry-management-links .tell_friend a, .comment-interaction-links li a { background-image: url(none); background-repeat: no-repeat; background-position: 0% 20%; padding-left: 4px; display: inline; } .comment-management-links .delete_comment a { background-image: url(none); } .entry-management-links li a, .comment-management-links li a, .comment-interaction-links .thread a { background-image: url(none); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 14px; } #entries {margin-top: -25px;} hr.below-reply-container, hr.above-entry-interaction-links {display: none;} option, select, input {font-family: arial; font-size: 9pt; color: #222; background: #FFF; border: 1px solid #ddd;} textarea {font-family: arial; font-size: 9pt; color: #222; background: #FFF; border: 1px solid #ddd; padding: 5px;} button {font-family: arial font-size: 9pt; color: #222; background: #FFF; text-transform: uppercase; font-weight: bold; border: 1px solid #ddd;} .comment {border: 1px solid #ddd; background: #fff; padding: 10px;} .comment-wrapper {background: #FFF; border: 1px solid #ddd; padding: 10px; clear: both; margin: 20px 20px;} .comment-content {text-align: justify; margin: 20px 20px;} .comment-title, .comment-title a {text-transform: uppercase; font-weight: bold; color: #333; margin: 0 0 5px 0;} #postform {border: 0px;}

Comments

[sunlit]

Hello! I have chosen the clover one. :)

[revolutions]

... oh, hey! :D So glad you liked it.

[lillbet]

Trying on "Wildflowers" and taking if for my icon comm as well.

[revolutions]

:) Glad you liked it!

[wekhter]

Ah, such a light and airy layout! Perhaps I might have made some different choices in the borders, but the spacing is so fascinating this way I'm unsure if that even would have been a good idea.

Quite nice. :3

[revolutions]

I'm still a newbie at this. :) Planning to try something a bit different next time.

[skripka]

Thanks for the flowers!

[revolutions]

You're welcome! <3

[basilmemories]

This is exactly the layout I was looking for. Thank you.

[revolutions]

Thankyou. <3

Wildflowers

[violetknights]

beautiful, Thank you

And thank you to for the simple instructions - i've never been able to do a customised layout before :D

Re: Wildflowers

[revolutions]

Thankyou! And I'm glad they were comprehensible. :)

[wenchpixie]

beautiful, have taken wildflower one and may customise later :)

[revolutions]

Thankyou! <3

Thank you!

[willidan]

Took 'Wildflowers'. It's beautiful! Thank you!

Re: Thank you!

[revolutions]

Thankyou, and you're very welcome! <3

[trialia]

Thank you for uploading this! Think I'm going to customise Clover for madamepresident :) I will credit, of course!

[revolutions]

Thankyou! <3

[htbthomas]

This is just what I've been looking for! I changed the banner to my own, but it was really easy to change the container and header. ♥

[cranberry]

beautiful! i love the Wildflowers!

[mixies]

Grabbed the Wildflowers one. Thanks for sharing!

[kisekileia]

I'm really loving Wildflowers, but does anyone know how to increase some of the font sizes? I'm a CSS newbie, and I'm having a tough time figuring out what parts of the code correspond to what attributes of the layout.

[zackysaint]

Very beautiful layouts. I really like the wildflowers. Just can't decide if I'm gonna keep the wildflower pic (it's so pretty) or am gonna put up my own.

[tripudiare]

I love the layouts, they're beautiful. I have grabbed the wildflowers one for josswhedonisgod, but have created a new header image. Credit is given in the profile.

I'm definitely considering this for my personal journal too :)

[semisweet]

thank you! using wildflowers with credit. :)

[jigofspite]

Thank you! I snagged Wildflowers and changed the header. Very nice.

[sweetbird]

These are brilliant! I quite enjoy the Wildflower layout. Will credit. (:

[goodisrelative]

THANKS! I am using wildflower right now. Awesome job!

[suko]

I love the wildflowers layout, it's beautiful! :3

[babyskies]

took the wildflowers one, it's exceptionally pretty :]

[innate_autumn]

Snagged the 'wildflowers' one, will credit ^^ So pretty!

[lunardreamed]

Ah, such a light and airy layout!

It is. Easy on the eyes and doesn't create crowding on a smaller screen.

This will be my first time messing with the style sheet, so I'm hoping I can make it work.

[debc]

I love the wildflowers one, thank you so much!

[amanda_in_pajamas]

I love the layout! I've been looking for a layout that I could add my own flower photo to and "Clover" fits the bill nicely!

I have a question about customization...is it possible to make the tag list multi-level? I know very very little about CSS, so I've been largely unsuccessful trying to change the display.

Thanks!!!

[amanda_in_pajamas]

*headdesk* Please ignore the help question. I forgot that there were two places to control the settings. I needed to set multilevel in modules too.

Thanks again for the cool layout!!!