005; Flora

[cirque]

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 :/

Comments

[foxfirefey]

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.

[cirque]

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

[syntheid]

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

[cirque]

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

[tropicsbear]

Oooh, nice. Will credit when I use!

[cirque]

Thank you!

[booksyarntea]

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.

[cirque]

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

[bucaneve]

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

[cirque]

Thanks!:3

[semantics]

This is so nice! Bookmarking to use.

[cirque]

Thank you so much :D

[carisma_sensei]

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

[cirque]

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

[emiri]

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.

[cirque]

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!

[fridgeflower]

The pastel was what I needed in my life!

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

[cirque]

Glad you like it!! >.

[aetherna]

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

[cirque]

Thank you :DD enjoy!!

[aldro]

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

[cirque]

Thank you very much!

[taxcha]

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

[cirque]

Thanks :D

[elydesia]

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

[cirque]

Thank you, I'm glad you like it.

As for the problem, this might be an obvious question but I need to check, on customize at the bottom, have you clicked on '2 columns, sidebar on right'?

(I know the sidebar is actually on the left but huh the coding is weird and it works this way).

[muuttis]

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

[cirque]

Thank you, enjoy! :D

[runningrampet]

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

[cirque]

Thank you very much!

[perfectworry]

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!

[cirque]

I'm sorry for the terribly late reply! I've found a font that looks similar, and has proper actual brackets.

If you go to the top of the CSS and find:
@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');
}

and change that big long link to:
http://themes.googleusercontent.com/static/fonts/thegirlnextdoor/v4/cWRA4JVGeEcHGcPl5hmX7rOFxJ5Ig03puUh67ume3us.woff

it should work fine? Let me know if not.

[ex_tata739]

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

[cirque]

Thank you!

[lost_dreamer]

Used with Credit on my profile.

The layout is really cute. ^_^

[cirque]

Thank you, I'm glad you like it :3

Flora layout

[rainbowmiracles]

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

Re: Flora layout

[cirque]

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

[1lastdanceluv]

Beautiful! Using for my journal now :)

[ladyvox]

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

[kiokushitaka]

thank you

[shiawasenajinsei]

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! :)

[cirque]

Sorry for the late reply but, yes of course you can - I really like the changes you've made, it looks great!

[delancret]

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?

[anita]

Using it. Thanks! :)