Layout: [Tabula Rasa] Bold and Clean ★

[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

[vangirl]

Oooh, it looks really nice! :D

Only issue is that, at least on Chrome and Safari, the layout credits are in the dead center of the layout and it makes it difficult to read. It may just be a mac thing though. ^^

[ko]

oh! i work on a mac also, have you tried disabling the credit module in your theme? i don't mind just being credited on profile pages/ in a journal entry instead. <3

[vangirl]

I haven't installed it yet. I'm just seeing it on your current layout right now! (Unless there is a slight difference between the two?)

I might install it later and see if I can play around with it though. It could be something screwy on my end too. xD;

[ko]

OH that sounds pretty weird, screencap it for me and i can try to get the bug out?

i don't see it on any of my computers [my mac at home/the PC at my gran's/my sister's laptop] but i don't doubt that it's going on and whether it's on your end or not i want to make sure it can get fixed (: it's probably something with the module position code.

[arf_she_said]

Hi! I love the idea of this and I am trying it out on one of my journals. Thanks so much for your work!

I'm still fiddling to fit in with my colour and font preferences (and to see if I can make tags work which is a deal-breaker for me!) but one bug so far for me (Firefox 3.6.15/Ubuntu): the entry content didn't pick up the font definitions in body, which I had to add.

Also, three columns (left) didn't work for me at all, compressing the primary column into a space of about 10%. Could be percentages not adding up. I ended up going with two column-left, making the canvas 100%, primary 90% and secondary 10%. This arrangement suits the purpose of the journal which is texty.

Anyway thanks again! I would be happy to provide my modified css if that would help you.

[ko]

feel free to provide the modified version!!

[emmei]

I'm grabbing your layout for my other journal... Is credit on the profile page ok?

[heechuls]

using for another journal thanks *__*

[fulmar]

Grabbed and adapted for my fic journal, thanks.

[nologic]

Grabbing for my journal, left links and credit on my custom text page. Thank you for making such a wonderfully simple layout~

[exoskeleton]

This is a cute layout! C: I'm going to use it on my icon community, supahsekret. Also I will stop editing this comment now, derp.

[ex_ballerine259]

very cute, memming for future use!

[monochroming]

HELLO i'm just wondering if you know what i seem to have done wrong here...

i can't for the life of me figure it out orz.

[cimberelly]

Thanks so much for this! I really love how simple and clean it looks. I'll be using it for my journal and I'll definitely credit.

[goodbyebird]

This looks lovely. Thanks for sharing :)

[vixens]

thanks so much!!! the only reason I wasn't digging dreamwidth is because I couldn't find a layout I liked, so thank you.

[siix]

I love the simplicity! Thanks for making it!

[ellyd]

Has there been any luck getting this to work for personal journals? ;~;

[ketsudan]

Hello!

I am using this for my community chesswar and was wondering if there was a way to make the "previous #" only show up once on the page. As you can see, there is a link on the top and the bottom of the page.

Other than that, this is a lovely layout!