dustier | 005; Flora

Just a nice simple girly layout in Tabula Rasa. This looks a lot like some of the more simpler LJ layouts done in Flexible Squares.

The tinyicons took me f o r e v e r , and I'm not 100% satisfied with them but I kind of fell in love with this tinyicon set and just had to incorporate them somehow. If you'd like to delete/change them, go to the section in the CSS titled 'tinyicons' and just delete it :)

If girly colours aren't your thing - I am planning a revamp of this layout in super bright neon colours!

Features; rounded userpics, custom font, metadata icons.
CSS:

/* Cleaned CSS: */
/* Layout: Flora
   By: cirque @ dustier
   Base: Tabula Rasa 
   Tinyicons: http://www.iconarchive.com/ */

/*------------------------------------- basics -------------------------------------*/

@font-face {
  font-family: 'Bad Script';
  font-style: normal;
  font-weight: 400;
  src: local('Bad Script Regular'), local('BadScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/badscript/v2/rL_b2ND61EQmMOJ8CRr1fhsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

* { margin: 0; padding: 0; }
html { font-size: 100%; }

body { background: #fdefd6; font: 7.5pt 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; color: #AAA; line-height: 1.8em; text-align: center; margin: 60px 0; }

a, a:link, a:visited { color: #dea070; text-decoration: none; }
a:hover { color: #facd9f; text-decoration: none; }

blockquote { background: #FFF; border: 1px solid #aa955d; font: 9pt 'Consolas', sans-serif; font-style: italic; padding: 40px 20px; margin: 20px; color: #AAA; }

::-moz-selection { background: #aa955d; color: #FFF; }

hr { color: transparent; height: 1px; border-style : none;  border-bottom: 3px double #aa955d; }

#canvas { width: 800px; margin: 0 auto; text-align: justify; }
#primary { float: right; margin: 0; width: 550px; text-align: justify; }

.two-columns-right #secondary { float: left; width: 200px; margin: 0; padding: 20px; background: #FFF; border-right: 1px solid #fdefd6; border-bottom: 1px solid #fdefd6; }
.two-columns-right #tertiary { clear: both; }
.two-columns-right #tertiary .module { float: left; width: 15em; }

.navigation { width: 510px; text-align: justify; padding: 20px; background: #FFF; border-right: 1px solid #fdefd6; border-bottom: 1px solid #fdefd6; margin: 0 0 10px 0; margin: 0 0 10px 0; }
.topnav { display: none; }

li.page-back, li.page-forward { display: inline; list-style: none; padding: 0; margin: 0; }
li.page-separator { display: none; }

div.navigation ul { display: inline; padding: 0; margin: 0; }

/*------------------------------------- header & footer -------------------------------------*/

#header { display: none; }
#footer { float: right; margin: 0; width: 510px; text-align: justify; padding: 20px; background: #FFF; border-right: 1px solid #fdefd6; border-bottom: 1px solid #fdefd6; margin: 0 0 10px 0; }

h1#title { font-size: 10pt; font-weight: normal; text-transform: uppercase; color: #DDD; letter-spacing: 5pt; padding: 0; margin: 0; }
h2#subtitle { font-size: 8pt; font-weight: normal; text-transform: lowercase; color: #CCC; letter-spacing: 5pt; padding: 0; margin: 0; }
h2#pagetitle { display: none; }

/*------------------------------------- navigation -------------------------------------*/

div.module-navlinks { margin: 0 0 10px 0; }
div.module-navlinks ul.module-list { padding: 0; margin: 0; list-style: none; font-size: 7pt; text-transform: uppercase; letter-spacing: 1pt; }
div.module-navlinks ul.module-list li { padding: 0; margin: 0; list-style: none; border-bottom: 1px dotted #EEE; background-image: none; }

/*------------------------------------- entry -------------------------------------*/

div.entry { padding: 20px; background: #FFF; border-right: 1px solid #fdefd6; border-bottom: 1px solid #fdefd6; margin: 0 0 10px 0; }
div.entry-content { margin: 10px 0 0 0; }

div.entry div.header { padding: 0; margin: 0 0 5px 0; }
h3.entry-title { font-family: 'Bad Script'; padding: 0; margin: 0; font-size: 11pt; text-transform: lowercase; letter-spacing: 1pt; font-weight: normal; color: #aa955d; border-bottom: 1px dotted #E5E5E5; }
h3.entry-title a { color: #aa955d; }
h3.entry-title a:hover { color: #dea070; }

.datetime {  text-transform: uppercase; color: #BBB; font-size: 7pt; letter-spacing: 2pt; }
.datetime a { color: #BBB; }

div.entry div.userpic { float: right; margin: 0 0px 10px 10px; }
div.entry div.userpic img { padding: 8px; background: #FFF!important; border: 1px solid #aa955d; width: 70px; height: 70px; border-radius: 100px; opacity: 0.5;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
div.entry div.userpic img:hover { opacity: 0.9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

span.poster { margin: 15px 0; }

.metadata { margin: 20px 0 0 0; }
div.metadata ul { padding: 0; margin: 0; }
div.metadata ul li { list-style: none; padding: 0; margin: 0; text-transform: lowercase; }

span.metadata-label-location, span.metadata-label-mood, span.metadata-label-music { display: none; }
span.metadata-item-location { background: url('http://i26.tinypic.com/2i25yfb.png') no-repeat; padding: 0 0 0 15px; margin: 0; display: inline; }
span.metadata-item-music { background: url('http://i31.tinypic.com/2a7zp0h.png') no-repeat; padding: 0 0 0 15px; margin: 0; display: inline; }
span.metadata-item-mood { background: url('http://i32.tinypic.com/2j0gpd2.png') no-repeat; padding: 0 0 0 15px; margin: 0; display: inline; }

span.tag-text { display: none; }
div.tag ul { background: url('http://i.imgur.com/klOf7vI.png') no-repeat; padding: 0 0 0 18px; margin: 0; display: inline; }
div.tag ul li { display: inline; list-style: none; font-weight: normal; padding: 0; margin: 0 5px 0 0; }

ul.entry-management-links { padding: 0; margin: 5px 0 0 0; list-style: none; text-align: center; }
ul.entry-management-links li { padding: 0; margin: 0 auto; display: inline; list-style: none; text-align: center; }

ul.entry-interaction-links { padding: 0; margin: 5px 0 0 0; text-align: center; }
ul.entry-interaction-links li { display: inline; list-style: none;  font-weight: normal; text-transform: uppercase; margin: 0 5px 0 0; padding: 0; }

/*------------------------------------- archive & calender page -------------------------------------*/

li.active { list-style: none; display: inline; padding: 0; margin: 10px; }

.month { padding: 20px; background: #FFF; border-right: 1px solid #fdefd6; border-bottom: 1px solid #fdefd6; margin: 0 0 10px 0; }
.month h3 { padding: 0; margin: 0; font-size: 9pt; text-transform: lowercase; letter-spacing: 1pt; font-weight: normal; color: #aa955d; border-bottom: 1px dotted #E5E5E5; }

div.navigation ul { display: inline; }
div.navigation li { display: inline; list-style: none; }

table.month { border: 0; }
.month th { text-align: center; margin: 0 2px; text-transform: lowercase; font-weight: normal; background: #F9F9F9; }
.month td.day { font-weight: normal; }
.month td.day-has-entries { font-weight: normal; }
.month td.day-has-entries p { padding: 0 0 0 5px; margin: 0; display: inline; }
.month table { width: 100%; border: 0; margin: auto; }
.month caption { display: none; }

td.day { padding: 10px; border: 0; text-align: center; }

/*------------------------------------- tags page -------------------------------------*/

.page-tags h2 { font-family: 'Bad Script'; padding: 0; margin: 0; font-size: 11pt; text-transform: lowercase; letter-spacing: 1pt; font-weight: normal; color: #aa955d; border-bottom: 1px dotted #E5E5E5; }

.page-tags .tags-container { padding: 20px; background: #FFF; border-right: 1px solid #fdefd6; border-bottom: 1px solid #fdefd6; margin: 0 0 10px 0; }

.page-tags .ljtaglist { margin: 0; padding: 0; }
.page-tags .ljtaglist li { padding: 0 0 0 10px; margin: 0; text-transform: lowercase; letter-spacing: 0; list-style: none; background: url('http://i.imgur.com/kut1bXh.png') 0 7px no-repeat; color: #AAA; }

/*------------------------------------- read comments & write a comment -------------------------------------*/

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

input, textarea { background: #FFF; padding: 5px; border: 1px solid #DDD; font: 8pt 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; color: #888; }
textarea.textbox  { width: 80% !important; }

.poster-ip { display: none; }

div.comment div.userpic { display: block; float: right; margin: 0 0 0 0px; background: transparent; padding: 10px; }
div.comment div.userpic img { padding: 8px; background: #FFF!important; border: 1px solid #aa955d; width: 70px; height: 70px; border-radius: 100px; opacity: 0.5;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
div.comment div.userpic img:hover { padding: 8px; background: #FFF!important; border: 1px solid #aa955d; width: 70px; height: 70px; border-radius: 100px; opacity: 0.9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }

.page-reply .entry-wrapper-even {  }
.page-reply .entry-wrapper-odd {  }

.comment { background: #FFF; border: 1px solid #E5E5E5; margin: 0; padding: 10px; }
.comment-wrapper { margin: 10px 0; padding: 0; }
.comment-content { margin: 10px 0; }

.bottomcomment { background: #FFF; border: 1px solid #E5E5E5; margin: 10px 0; padding: 10px; }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0!important; }

.comment-poster {  text-transform: uppercase; color: #AAA; }

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

table.talkform { background: #FFF; border: 1px solid #E5E5E5; margin: 0 0 10px 0; padding: 10px; }

/*------------------------------------- sidebar (minus the navigation)  -------------------------------------*/

h2.module-header { font-family: 'Bad Script', Sans-serif; padding: 0; margin: 0 0 10px 0; font-size: 11pt; text-transform: lowercase; letter-spacing: 1pt; font-weight: normal; color: #aa955d; border-bottom: 1px dotted #E5E5E5; }
h2.module-header a { color: #aa955d; }

.module-userprofile, .module-customtext, .module-typelist, .module-tags_list, .module-pagesummary, .module-calendar, .module-syndicate, .module-powered, .module-time { margin: 10px 0; }

div.module-content div.userpic { text-align: center; }
div.module-content div.userpic img { padding: 8px; background: #FFF!important; border: 1px solid #aa955d; width: 70px; height: 70px; border-radius: 100px; opacity: 0.5;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
div.module-content div.userpic img:hover { padding: 8px; background: #FFF!important; border: 1px solid #aa955d; width: 70px; height: 70px; border-radius: 100px; opacity: 0.9;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
div.journal-name { font-size: 7pt; text-transform: uppercase; letter-spacing: 1pt; margin: 5px 0 0 0; text-align: center; color: #BBB; }
div.journal-website-name { font-size: 7pt; text-transform: uppercase; letter-spacing: 1pt; margin: 0; text-align: center; color: #BBB; }

ul.userlite-interaction-links { padding: 0; margin: 5px 0 0 0; list-style: none; text-align: center; }
ul.userlite-interaction-links li { padding: 0; margin: 0 auto; display: inline; list-style: none; text-align: center; }

ul.module-list { color: #CCC; padding: 0; margin: 0; list-style: none; }
ul.module-list li { padding: 0 0 0 9px; margin: 0; list-style: none; border-bottom: 1px dotted #EEE; background: url('http://i.imgur.com/kut1bXh.png') no-repeat 0 6px; }

ul.module-list-item { color: #CCC; padding: 0; margin: 0; list-style: none; }
ul.module-list-item li { padding: 0 0 0 9px; margin: 0; list-style: none; border-bottom: 1px dotted #EEE; background: url('http://i.imgur.com/kut1bXh.png') no-repeat 0 6px; }
div.manage-tags-link { margin: 10px 0 0 0; padding: 0; text-transform: uppercase; font-size: 7pt; text-align: right; letter-spacing: 1px; }

div.module-calendar table { font-size: 7pt; text-align: center; margin: 0 auto; color: #BBB; }
div.module-calendar th { text-transform: uppercase; background: #f1e4cc; margin: 0 1px; padding: 3px 8px; border: 1px solid #E5E5E5; }
div.module-calendar td.empty-day { text-transform: uppercase; background: #fdf6e8; margin: 0 1px; border: 1px solid #EEE; }
div.module-calendar td.entry-day { text-transform: uppercase; background: #fdefd6; margin: 0 1px; border: 1px solid #EEE; }

.two-columns-right #tertiary .module {
    float: right;
    width: 520px;
    padding: 10px;
    margin: auto;
}

.module-powered, .module-time {text-align: center;}

/*------------------------------------- tinyicons -------------------------------------*/

img[src*='edit.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/vEPIhnN.png') no-repeat; }
img[src*='tag_edit.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/9tZgVLQ.png') no-repeat; }
img[src*='memories_add.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/jDwea7b.png') no-repeat; }
img[src*='track.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/bQgtVnU.png') no-repeat; }
img[src*='tellafriend.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/IDRWSkm.png') no-repeat; }
img[src*='next.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i29.tinypic.com/153wtib.png') no-repeat; }
img[src*='previous.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i31.tinypic.com/im71tt.png') no-repeat; }

img[src*='anonymous.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i29.tinypic.com/10f5koy.png') no-repeat; }
img[src*='user.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i32.tinypic.com/vgj43n.png') no-repeat; }
img[src*='delete.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i30.tinypic.com/10rk5tc.png') no-repeat; }
img[src*='screen.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i31.tinypic.com/2m4ymwo.png') no-repeat; }
img[src*='unscreen.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i26.tinypic.com/b3punc.png') no-repeat; }
img[src*='freeze.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i28.tinypic.com/slte85.png') no-repeat; }
img[src*='unfreeze.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i27.tinypic.com/32zq8gp.png') no-repeat; }

img[src*='subscription_add.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/q8MziiS.png') no-repeat; }
img[src*='subscription_remove.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/GLFYE8c.png') no-repeat; }
img[src*='post.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/ZnaiPAh.png') no-repeat; }
img[src*='message.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/8inrFvu.png') no-repeat; }
img[src*='tellafriend.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i.imgur.com/IDRWSkm.png') no-repeat; }

img[src*='locked.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i26.tinypic.com/2zs01oz.png') no-repeat; }
img[src*='private.png'] { width: 0; height: 0; padding: 16px 18px 0 0; background: url('http://i30.tinypic.com/jrz0n4.png') no-repeat; }

img[src*='feed.png'] { background-image: url('http://i26.tinypic.com/33ml8w9.png') !important; }
img[src*='news.png'] { background-image: url('http://i32.tinypic.com/33tifs9.png') !important; }

Live preview: A temporary one at my journal -

cirque

Instructions:
Go to 'Customize' & apply 'Muted' for 'Tabula Rasa'.
Make sure it's set to 2 Column (Sidebar on the right).
Go to 'Customize your theme', then 'Custom CSS'.
Where it says 'Use layout's stylesheet(s)', click no.
Copy & Paste the CSS into the big white box.
Hit save, and voila!
Please credit cirque @ dustier :) And keep the original credit in the CSS intact please, it also credits the tinyicon makers etc.
Let me know if you have any questions/need help.
Note! If you would like to change any of the colours, go ahead, I was considering making a less girly (more blue!) version of this as well but then I didn't :/

Threaded | Top-Level Comments Only

How very pretty! My one suggestion is to add some margin to modules in .module-section-two -- right now

cirque has them mashed right up against each other and it's hard to figure out there's two modules there side by side instead of weird lines of text that aren't making sense.

Oh, I really like this! Using it now with credit.

Oooh, nice. Will credit when I use!

this is simply way too cute! i've already applied it to my current journal. :3 credit toward you can be found in my profile.

That's so cute! :3 Bookmarking for future use <3

This is so nice! Bookmarking to use.

This is my favourite layout from you! It's lovely~
I wanted to ask if you would like to affiliate with my layout community

inconformista. If you don't accept affies for this community, that's alright too :3

Thanks for the tip! I'd completely overlooked that part. I've got it looking a little neater now.

Thank you very much! I'm glad you like it :)

Thank you!

Thank you very much! I'm glad you like it, and thanks for crediting :D

Thanks!:3

Thank you so much :D

Aaaah thank you! :D And yes, I would love to affiliate with you :3 your layouts are gorgeous *w* I've added you to my affiliates post here <3

Thanks! I added you too :3 Can't wait to see more of your layouts!

OH GOOD LORD. I think this is the first DW custom layout I have properly really fallen in love with! This is just 9001% adorable and so pretty.

Is it all right if I play around with the column and text size just slightly, because I am somewhat vision impaired :X? I don't want to make it too much bigger for fear of making all your beautiful work look ugly but right now it's just a wee small for me to be able to read it with ease.

Aww, thank you so much :) I'm really glad you like it!

Of course you can edit it :) I did worry that the text might be too small for people :( let me know if you need any help at all with it!

So I noticed for some reason the user icons weren't showing up, and it seems like on those, setting width: 0; made them disappear. Removing that lets the replacement icons show up without issue, though.

Oh, I did that on purpose - sorry! :( I should've fixed it before I uploaded the CSS here, oops :O

It's done! \o/ Yay thank youuu.

The pastel was what I needed in my life!

Using it for this character journal, credit in the profile. Thanks!

So pretty. *cries* Definitely gonna use this one day. Thanks a lot!!! <333

Lovely! Using and credited in my profile info. ;-)

This is so pretty!
Mem'd for future use!

This is a beautiful layout; I love the use of pastel here, as well as the small icons.

However, when I use it on my main journal, the white bg of the sidebar is missing, and I'm not sure why. I tried taking out modules (perhaps it was overloaded?) but it didn't make a difference.

I'd like to use it, but I won't be able to until this is fixed. I took a screenshot for you to have a looksee: http://puu.sh/305kt.png

Page 1 of 4

005; Flora

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject