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 | Flat

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

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.

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

Ohh I love this! I'm using this right now!

I absolutely love this!! Thank you so much for sharing! :)

This is super cute, but the typeface for the subject lines is doing something weird so the "]" looks like a ")," but the "[" just looks like itself… Since I use brackets in every subject line, it kinda screws up my system. Is there any way for me to change that to a similarly cute font that won't wonk out like that? (As you can probably see if you look at my page, I've gone and tried to fix it but it's just a bland default font instead of something cuter. Thank you!

like this! I'm using this with credit. Thank you very much

Used with Credit on my profile.

The layout is really cute. ^_^

What an adorable layout. I'm using it and have credited you. Thank you very much for sharing your talent :)

Beautiful! Using for my journal now :)

This is lovely!!! Won't work on LJ though right? I don't think there's the Tabula Rasa layout there?

thank you

Helloooo :) Do you mind if I... "merge" this layout with a custom theme? Because I couldn't decide between using this or the theme and I figured it would look good together so I'm kinda experimenting with the codes and tweaking them a bit (as you can see in my journal, although it's still a mess right now because it's been a while since I last dealt with codes and I'm practically back to being a noob XD). I'll still credit you of course!! :D I hope you don't mind! :)

This is beautiful, but is there any way to change the links list/navigation thing? I don't have much use for the "network" link, for instance, but the ability to someday put in IC contact links or links to applications or games would be very useful! :)

And this part is less important, but I notice that your current layout includes your journal title and subtitle. Any way to do that without breaking this pretty layout or making the tables not line up?

Using it. Thanks! :)

Page 1 of 2

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

Flora layout

no subject

no subject

no subject

no subject

no subject

no subject