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

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

[beautifulfic]

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

[sven]

Of course. It looks lovely, enjoy! (: