Layout: [Tabula Rasa] Bold and Clean ★

2011-03-09T04:20:47Z

Posted by: ko

Bold and clean- a simple but effective DW layout for communities. [The code seems to bug when used for regular journals. Fixes?]

Key features- custom text which stays in place as the user scrolls through posts , tiny icon replacements. Fairly easy to customize.

How to Install:

1. Go to customize journal style, and select Plain for Tabula Rasa as your theme.

2. Go to customize your theme, then at the bottom of the page select "3 column (sidebars on left)" for your page setup.

3. Edit your modules, and de-select EVERYTHING except for 'Custom Text'. Make sure to click 'save changes'.

4. Copy and paste the below code into your custom css page, and leave the 'Use layout's stylesheet(s)' option selected.

/* Bold and Clean theme by KO of KONBINI @ dreamwidth. For use with 'Tabula Rasa : Plain', using the layout's stylesheet. Looks best with '3 column, sidebar on left' setup. Enjoy!*/

/*Tiny icons are courtesy of dryicons.com./

::-moz-selection {
background: #333333;
color: #FFF; }

body {
background-color: white;
font: 11px Courier New;
color: #333333;
}

a:link, a:active, a:visited {
font-weight: normal;
color: #333333;
text-decoration: none;
text-transform: uppercase;
}

a img {
border: 0px;
}

/* basics, */

#canvas {
width: 65%;
padding-top: 40px;
margin: 0 auto;
}

#header {
display: none;
}

#footer {
clear: both;
display: none;
}

#primary {
width: 80%;
float: left;
}

.two-columns-left #secondary {
width: 20%;
float: left;
}

.two-columns-left #tertiary {
clear: both;
display: none;
}

/* entries, */

.userpic {
float: right; }

.entry-content {
margin: 5px 0 10px 0;
padding-top: 10px;
text-align: left; }

.entry-title, .entry-title a {
font-family: courier new;
font-size: 20px;
font-weight: bold;
letter-spacing: -1px; }

.datetime, .metadata, .tag {
font-family: courier new;
font-size: 11px;
text-transform: uppercase;
font-weight: bold; }

.userpic img {
margin-right: 10px;
margin-bottom: 10px; }

.metadata-item-music {
padding-left: 17px;
background: no-repeat url('http://29.media.tumblr.com/tumblr_lhrtay83j11qeunsao1_100.png') left center; }

.entry-management-links {
list-style: none;
padding: 0;
text-align: center; }

/* modules, */

div.module {
position: fixed!important;
padding-top: 80px;
}

div.module-customtext div.module-content {
padding: 0px 0px;
position: fixed!important;
}

/* extras, */

.separator {
background-color: #;
background-image: url('');
background-repeat: repeat-x;
height: 10px;
}

.clearfoot {
display: none;
}

/* tinyicons - generated by malionette's tiny icon generator, */

img[src*="user.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://24.media.tumblr.com/tumblr_lhnjukcFJG1qeunsao1_100.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="community.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://24.media.tumblr.com/tumblr_lhnjp9WBwC1qeunsao1_100.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="feed.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://28.media.tumblr.com/tumblr_lhnjqrfQwi1qeunsao1_100.png) no-repeat; padding: px 0 0 px !important; }
img[src*="locked.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://27.media.tumblr.com/tumblr_lhnjshxwcI1qeunsao1_100.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="private.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://28.media.tumblr.com/tumblr_lhnjri2O2y1qeunsao1_100.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="user_staff.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://30.media.tumblr.com/tumblr_lhnjvfoT1n1qeunsao1_100.png) no-repeat; padding: 16px 0 0 16px !important; }
img[src*="comm_staff.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://30.media.tumblr.com/tumblr_lhnjvfoT1n1qeunsao1_100.png) no-repeat; padding: 16px 0 0 16px !important; }

/* lj control strip, */

#lj_controlstrip, #lj_controlstrip td {
background: #FFFFFF; }

#lj_controlstrip td, #lj_controlstrip span {
border: 0px;
color: #333333;
font-family: courier new;
font-size: 11px; }

#lj_controlstrip td a, #lj_controlstrip span a {
color: #333333;
font-family: courier new;}

#lj_controlstrip td a:hover, #lj_controlstrip span a:hover {
text-decoration: underline;
color: #333333; }

#lj_controlstrip .ljuser a b {
color: #333333; }

#lj_controlstrip .ljuser a b:hover {
color: #FFF; }

#lj_controlstrip_userpic a:hover, .ljuser a:hover {
border: none !important; }

#lj_controlstrip img[src='http://s.dreamwidth.org/img/silk/identity/user.png'], #lj_controlstrip img[src='http://s.dreamwidth.org/img/silk/identity/user_staff'] {
width: 0px; height: 0px;
padding-left: 16px;
padding-top: 16px;
background: transparent url('http://24.media.tumblr.com/tumblr_lhnjukcFJG1qeunsao1_100.png') left center; }

#lj_controlstrip img[src='http://s.dreamwidth.org/img/silk/identity/community.png'], #lj_controlstrip img[src='http://s.dreamwidth.org/img/silk/identity/comm_staff.png'] {
width: 0px; height: 0px;
padding-left: 16px;
padding-top: 16px;
background: transparent url('http://24.media.tumblr.com/tumblr_lhnjp9WBwC1qeunsao1_100.png') left center; }

Click 'save changes' once more.

5. Go to text and input whatever you want your text module to say. Links and [small] images work fine with this layout.

6. Enjoy ★

NOTES:

This is the first version of the layout, if you notice anything 'weird' about it feel free to report back to me here and I'll try to fix it. Alternately, if you fix it yourself let me know! I'll update + credit you for the bug fix.

This layout is mostly percentage as opposed to pixel based as to how it looks on a screen, it should do well for most resolutions.

I hope that you like this layout, I put a lot of time and effort into its creation!

-CB

comments

コンビニ

Layout: [Tabula Rasa] Bold and Clean ★