fruitstyle | Layout 026 : Bases.

This layout is now an official Dreamwidth style.

wicked awesome layout preview

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.

Flat | Top-Level Comments Only

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

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

Thanks. I actually managed to tweak it myself, although I'll have to check it works in IE. and yes, of course I'll credit. I was sort of getting there, if that makes sense :D

B xxx

Of course. It looks lovely, enjoy! (:

Layout 026 : Bases.

no subject

no subject

no subject

no subject