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

.

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