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

[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).

[elydesia]

ooh, woooow, I feel silly now! I guess I read too fast and skipped over that part completely.

Thank you for replying （　´∀｀）/

[cirque]

Aaah, it's ok, not to worry :)