Layout 026 : Bases.

[sven]

This layout is now an official Dreamwidth style.


Live Preview

Instructions.. read.

Pre-Install	Select Style - Select Tabula Rasa Modules - Make sure that the navigation module looks just like this in the green.. 1 Group One Navigation. Custom CSS - UNTICK "Use layout's stylesheet(s)". Then paste the following beside the big "Use embedded CSS" box. /* DREAMWIDTH : Tabula Rasa --- Bases. --- Sven @ Fruitstyle.Dreamwidth.org Do not remove this note. */ /* 8====================== PAGE =======================> */ body {background: #eeeeee; font: 12px arial; color: #606060; padding: 0; margin: 0; } blockquote {border-bottom: 1px solid #dddddd; margin: 10px 20px 10px 20px; padding: 10px; background: #f5f5f5; border-top: 7px solid #00b4b4; } a {color: #00b4b4; text-decoration: none;} a:hover {color: #83bfbf; text-decoration: underline;} input, select {border: 1px solid #dddddd; background: #d1efef !important; font: 10px arial !important; color: #606060 !important;} #container { } #primary {width: 600px; float: left; background: #ffffff; margin: 31px 0 60px 60px; border: 1px solid #dddddd; } #secondary { width: 200px; background-color: #ffffff; position: static; margin: 0 0 0 670px; border: 1px solid #dddddd;} #tertiary { float: left; display: none; } h2 {font: 20px arial; padding: 10px;} .inner {} .page-top { display: none;} /* 8====================== HEADER =======================> */ #header {font: 30px arial; margin: 0; background: #ffffff; margin: 60px 0 0 60px; width: 600px; border: 1px solid #dddddd; width: 600px; } #title { padding: 20px 20px 20px 30px; margin: 60px 0 0 0; } #pagetitle {display: none;} /* 8====================== NAVIGATION BAR =======================> */ .navigation ul {margin: 20px 0 0 0; padding: 0; list-style: none; } .navigation li {display: inline; padding: 0 10px 0 10px; border-top: 1px solid #dddddd; border-right: 1px solid #dddddd;} /* 8====================== ENTIRES =======================> */ .entry-title {font: 20px arial; border: 1px solid #dddddd; border-left: 0; border-right: 0; padding: 7px; margin: 0; } .entry-title a {text-decoration: none;} .datetime { font: 9px arial; text-transform: uppercase; display: block; color: #777777; padding: 2px 10px 0 10px; border-bottom: 1px solid #dddddd; background: #d1efef; } .contents .userpic {float: right; border: 1px solid #dddddd; padding: 7px; margin: 10px; background: #ffffff; } .contents .userpic img {border: 0;} .contents .userpic img:hover {opacity: .8;} .entry-poster { display: block; border-bottom: 1px solid #dddddd; padding: 2px 10px 2px 10px;} .page-recent .entry-poster {display: none;} .entry-content { padding: 10px; min-height: 100px;} .entry-content a img {border-width: 1px; padding: 3px;} .entry-content a img:hover {opacity: .8;} /* 8====================== METADATA =======================> */ .metadata ul {padding: 0; margin: 0; list-style: none; } .metadata li {padding: 2px 10px 2px 10px; border-top: 1px solid #dddddd;} .metadata-label {font-weight: bold; } /* 8====================== ENTRY TAGS =======================> */ .tag {margin: 0; padding: 0; border-top: 1px solid #dddddd;} .tag-text {display: none;} .tag ul { padding: 0; list-style: none; margin: 0; } .tag li {display: inline-table; border-right: 1px solid #dddddd; padding: 0px 7px 0px 7px;} .metadata li, .metadata li + li + li {background: #d1efef; color: } .metadata li + li , .metadata li + li + li + li {background: #ffffff; } /* 8====================== ENTRY TOOL =======================> */ .entry-interaction-links {padding: 0; margin: 0; list-style: none; background: #00b4b4; padding: 7px; } .entry-interaction-links li {display: inline; padding: 7px 0px 7px 0px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; } .entry-interaction-links li + li {border-left: 0; margin: 0 0 0 -3px;} .entry-interaction-links a {color: #ffffff !important; padding: 7px 10px 7px 10px; font-weight: bold;} .entry-interaction-links a:hover{background: #83bfbf; text-decoration: underline; } .entry-management-links { margin: 7px 0px 0 0; list-style: none; background: #00b4b4; float: right; } .entry-management-links li.edit_entry {margin: 0;} .entry-management-links li {border-left: 0; margin: 0 0 0 -3px; display: inline; padding: 11px 0px 3px 0px; border-left: 1px solid #ffffff;} .entry-management-links a {color: #ffffff !important; padding: 11px 10px 3px 10px; font-weight: bold;} .entry-management-links a:hover{background: #83bfbf; text-decoration: underline; } li.edit_entry {margin: 0;} /* 8====================== COMMENT PAGES =======================> */ .above-entry-interaction-links, .below-reply-container {display: none;} .page-entry .entry-title {border-top: 0;} .comment {padding: 10px; margin: 10px; border: 1px solid #dddddd;} .comment-title {font: 20px arial; padding: 7px; } .comment .datetime {width: 200px; background: #ffffff; border: 1px solid #dddddd; } .comment-poster, .poster-ip {border-bottom: 1px solid #dddddd; display: block; padding: 0 7px 0 7px; } .comment-pages {font: lighter 10px arial; text-align: center; padding: 10px; border-bottom: 1px solid #dddddd;} .comment .userpic {margin-right: 0; margin-top: -30px; } .comment .userpic img {width: 50px; height: 50px;} .comment-content {padding: 10px 0 10px 0;} .bottomcomment {padding-bottom: 10px; text-align: center;} .bottomcomment .entry-interaction-links {margin-bottom: 10px; text-align: left;} .screened .comment-content {background: #d1efef; padding: 10px;} /* 8====================== COMMENT TOOLS =======================> */ .comment-interaction-links {padding: 0; margin: 0; list-style: none; background: #d1efef; padding: 3px; } .comment-interaction-links li {display: inline; padding: 3px 0px 3px 0px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; } .comment-interaction-links li + li {border-left: 0; margin: 0 0 0 -3px;} .comment-interaction-links a { padding: 3px 10px 3px 10px; font-weight: bold;} .comment-interaction-links a:hover{background: #ffffff; text-decoration: underline; } .comment-management-links { margin: 2px 0px 0 0; list-style: none; background: #d1efef; float: right; } .comment-management-links li.edit_entry {margin: 0;} .comment-management-links li {border-left: 0; margin: 0 0 0 -3px; display: inline; padding: 6px 0px 7px 0px; border-left: 1px solid #ffffff;} .comment-management-links a { padding: 6px 10px 0px 10px; font-weight: bold;} .comment-management-links a:hover{background: #ffffff; text-decoration: underline; } .multiform-checkbox {border: 1px solid #dddddd; border-bottom: 0; padding: 3px; } #qrform > table { border: 0 !important; border-spacing: 0 !important; width: 100%; margin: 0; border-bottom: 1px solid #dddddd !important;} #qrform td { border-right: 1px solid #dddddd; border-top: 1px solid #dddddd !important; padding: 5px; text-transform: uppercase; font: 9px georgia; letter-spacing: 2px;} #qrform td + td { border-right: 0; letter-spacing: 0; font-size: 12px; text-transform: lowercase;} .textbox {width: 80% !important; font-size: 12px;} #prop_picture_keyword { margin: 0 0 0 10px;} #submitpost, #submitmoreoptsm, #postform input { letter-spacing: 1px;} #postform {background: #ffffff; border: 1px solid #dddddd; border-top: 0;} #postform table {border-spacing: 0; width: 100%; } #postform td { border-right: 1px solid #dddddd; text-transform: uppercase; font: 9px georgia; letter-spacing: 2px; font-weight: bold;} #postform td + td { border-right: 0; letter-spacing: 0; font-size: 12px; text-transform: lowercase; font-weight: normal;} #postform tr + tr td { border-top: 1px solid #dddddd; padding: 5px; } #postform #userpics label{ margin: 0 3px 0 3px;} #postform table table {width: 100%; } #postform table table td {padding: 3px;} /* believe me, this style is much easier to deal with if you just leave this here. It says "lets use the IE box model" for non IE browsers */ * { box-sizing:border-box; -moz-box-sizing:border-box } /* 8====================== TAGS PAGES =======================> */ .ljtaglist {margin: 0; padding: 0 0 0 25px; list-style: square; color: #aaaaaa; font-size: 6px;} .ljtaglist a {font-size: 12px; display: block; } /* 8====================== ARCHIVE PAGES =======================> */ #archive-year .header h3 {font: 20px arial; border: 1px solid #dddddd; border-left: 0; border-right: 0; padding: 7px; margin: 0; } .month caption { display: none; } table.month {width: 100%; text-align: center; } .month th {padding: 10px 0 0 0; } .month td {border-top: 1px solid #dddddd;} .day-has-entries p{padding: 0; margin: 0; } .month a { background: #f5f5f5;} .month .inner a{float: right;} /* 8====================== MODULE - SECTION - ONE =======================> */ .module-content {width: 198px;} .module-navlinks .module-list {padding: 0; margin: 0; width: 600px; margin: -10px 0 0 -611px; background: #00b4b4; padding: 7px; position: absolute;} .module-navlinks .module-list-item {list-style: none; display: inline; padding: 7px 0px 7px 0px;} .module-navlinks .module-list-item a {color: #ffffff; font: bold 12px arial; text-decoration: none; padding: 7px 10px 7px 10px;} .module-navlinks .module-list-item a:hover {background: #83bfbf; text-decoration: underline; } .module-navlinks .module-list-item {border-left: 1px solid #ffffff; border-right: 1px solid #ffffff;} .module-navlinks .module-list-item + .module-list-item {border-left: 0; border-right: 1px solid #ffffff; margin: 0 0 0 -3px;} .module-navlinks .current {background: #83bfbf; } .module-section-two {width: 210px; float: left; background: #ffffff; border: 1px solid #dddddd; margin: 0 10px 0 10px; padding: 10px 0 0 0; background: #00b4b4; } .module-header {font: 20px arial; padding: 7px; text-align: center; border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; margin: 0 0 10px 0;} #secondary .module {background: #ffffff; border-top: 10px solid #ffffff; } .module-user-links, .module-userprofile {text-align: center; font-weight: bold;} .module-userprofile .userpic {border: 1px solid #dddddd; padding: 7px; background: #ffffff; margin: 0 auto; width: 114px; } .userpic img {border: 0;} .userpic img:hover {opacity: .8;} .module-userprofile .userlite-interaction-links {margin: 0; list-style: none; padding: 4px 0 4px 0; background: #00b4b4;} .module-userprofile li {display: inline; padding: 10px 0 4px 0; background: #00b4b4; } .module-userprofile .userlite-interaction-links a {padding: 10px 7px 4px 7px; } .module-userprofile .userlite-interaction-links a:hover {background-color: #83bfbf; } .module-userprofile li + li {margin: 0 0 0 -3px; border-left: 1px solid #ffffff;} /* screwed up image size fix */ .module-user-links li.tell_friend img{width: 16px; height: 16px;} .module-content table {width: 198px; text-align: center; border-collapse: collapse;} .module-content td {border-top: 1px solid #dddddd;} .module-content .entry-day a {display: block; background: #f5f5f5; } .manage-tags-link {text-align: right; padding: 0 10px 0 0;} .module-typelist ul, .module-categories ul{margin: 0 0 10px 0; padding: 0 0 0 20px; } .module-typelist .module-list-item, .module-categories .module-list-item {list-style-type: square; color: #aaaaaa; font-size: 6px; } .module-typelist .module-list-item a, .module-categories .module-list-item a {font-size: 12px; display: block; text-align: left; } .module-pagesummary {font-size: 9px; } .module-pagesummary ul {display: block; margin: 0; padding: 10px; list-style: none; color: #aaaaaa;} .module-pagesummary li {margin: 5px 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px solid #dddddd;} .module-syndicate {text-align: center;} .module-syndicate img:hover {opacity: .8;} .module-time, .module-powered {border-top: 1px solid #dddddd !important; padding: 10px;} /* 8====================== NAVBAR =======================> */ #lj_controlstrip td{border-right: 1px solid #dddddd; background: #ffffff; color: #606060; font: 12px arial; border-bottom: 1px solid #dddddd;} #lj_controlstrip a {color: #00b4b4;} #lj_controlstrip a:hover { color: #83bfbf; } #lj_controlstrip_statustext {color: #aaaaaa; } /* 8====================== CONTEXTUAL POPUP =======================> */ div.ContextualPopup {border: 1px solid #dddddd; background: #ffffff; padding: 7px;} div.ContextualPopup .Userpic {border: 1px solid #dddddd; padding: 3px; }
Add a header (if you want)	Replace HTTP://URLHERE with your header url and ### with the height of your header (in px). Add the code to the bottom your the rest of the CSS. #title {display: none;} #header {background: #ffffff url(HTTP://URLHERE) no-repeat center; height: ###px;}
Credit	Please credit for the layout in your profile bio like "Layout by fruitstyle" Thank you.

Ask for help here.

Comments

[confessed]

The navigation module link doesn't seem to be working.

[sven]

Thanks, it's fixed

[eltoshen]

Taking and using right now.

I love the new style.

[rainy_chan]

Thank you! ♥
So beautiful <3

[margin_of_error]

Took your layout, very nice, will credit.

[starrarte]

Oh, this is very nice. Using and credited, with minor CSS adjustments.

[sinsyne]

I love how all your layouts are so clean. Thanks for the gorgeous style!
Using and crediting. :)

[gee]

Taking and editing with credit; <3

[kagamine]

oh my! how beautiful! <33

[daydreambeliever]

Very nice layout! I am currently using this style, and have credited you in my profile.

[shanaqui]

Hi, this is a lovely style, I'm using it, although I fiddled around to make it a little wider. Previously when viewing my reading page, the banner area would show at the top, and now it doesn't... even though I don't really have anything there, I preferred it to be there nonetheless... do you have any idea how I could fix it? Sorry to bother you!

[shanaqui]

Oh... it fixed itself when I actually put in a reading page title. Okay. Never mind!

[jessilestrange]

Pretty layout ♥

[rizzo]

I've used this layout as a base, and credited you. I've done quite a bit of tweaking though. :) Thanks for making these, I'd never have time to do it myself anymore.

[spud66cat]

Thank you! Using this now and have credited.

[fallske]

This is really lovely, thank you. I've placed the credit on my profile (:

[beautifulfic]

Great layout,

Unfortunately, something's happened to the navlinks (beneath the usepic and prifule section) to stop the CSS from working. Not sure if it's temporary or not, but DW did do a code change earlier today.

B xxx

[sven]

Ok, it's fixed (: Here's the instructions:

Replace everything between

/* 8====================== MODULE - SECTION - ONE =======================> */

and

/* screwed up image size fix */

with

.module-content {width: 198px;} .module-navlinks .module-list {padding: 0; margin: 0; width: 600px; margin: -10px 0 0 -611px; background: #00b4b4; padding: 7px; position: absolute;} .module-navlinks .module-list-item {list-style: none; display: inline; padding: 7px 0px 7px 0px;} .module-navlinks .module-list-item a {color: #ffffff; font: bold 12px arial; text-decoration: none; padding: 7px 10px 7px 10px;} .module-navlinks .module-list-item a:hover {background: #83bfbf; text-decoration: underline; } .module-navlinks .module-list-item {border-left: 1px solid #ffffff; border-right: 1px solid #ffffff;} .module-navlinks .module-list-item + .module-list-item {border-left: 0; border-right: 1px solid #ffffff; margin: 0 0 0 -3px;} .module-navlinks .current {background: #83bfbf; } .module-section-two {width: 210px; float: left; background: #ffffff; border: 1px solid #dddddd; margin: 0 10px 0 10px; padding: 10px 0 0 0; background: #00b4b4; } .module-header {font: 20px arial; padding: 7px; text-align: center; border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; margin: 0 0 10px 0;} #secondary .module {background: #ffffff; border-top: 10px solid #ffffff; } .module-user-links, .module-userprofile {text-align: center; font-weight: bold;} .module-userprofile .userpic {border: 1px solid #dddddd; padding: 7px; background: #ffffff; margin: 0 auto; width: 114px; } .userpic img {border: 0;} .userpic img:hover {opacity: .8;} .module-userprofile .userlite-interaction-links {margin: 0; list-style: none; padding: 4px 0 4px 0; background: #00b4b4;} .module-userprofile li {display: inline; padding: 10px 0 4px 0; background: #00b4b4; } .module-userprofile .userlite-interaction-links a {padding: 10px 10px 4px 10px; } .module-userprofile .userlite-interaction-links a:hover {background-color: #83bfbf; } .module-userprofile li + li {margin: 0 0 0 -3px; border-left: 1px solid #ffffff;}

And also could you please credit fruitstyle for the layout (or base codes in your case) in your profile if you are using this layout? Thanks (:!

[southern_heaven]

Wonderful layout! I'm going to use it and credit you.

[stardoll]

Such a gorgeous layout! Simple, clean, beautiful.

I'm using it and credited you, thank you! :D

[blythe]

beautiful layout :D tweaked it, but i'll definitely still credit you via my links :)

[sionnach]

Beautiful layout! Will credit!

.

[mythdriven]

Editing it up and may add a header later. Just wanted to let you know I'm using it. Will credit shortly.

I absolutely loved it in the colours you created it, and the size, but I'm sure there are tons of people using it as is. Wanted it to be unique.

Thank you for a beautiful layout and a great bouncing off point.

~C

Re: .

[sven]

(: the pink and gray looks very nice. Thanks for using!

[snuddles]

Pretty layout! I'm going to tweak it a bit, but, still crediting you in profile! Thank you!

[pyromaniac]

I love the layout! currently using it now 8)

also, I've tweaked the color scheme a bit, but I still gave credit of course |3

[littlewin]

Thanks for sharing. I snagged it and edited it a bit, hope that's okay. Will credit obv.

[redmisoplz]

Very nice layout. I'm using it now and may tinker with it later, but it's beautiful enough as it is. Thanks for sharing!

[kayimi]

Lovely layout! @ Tweeked & Credited.

Just one thing, on Google Chrome, not sure if it's been tested there, but the Top Navigation bar exceeds the header. But it's only noticable on Chrome. Other than that, it's fine. Still works on Firefox. :]

[sven]

Yeah, I know of this problem. Unfortunately, I don't know how to solve it. ):