ko: (Default)
[personal profile] ko posting in [community profile] konbini
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
 

Date: 2011-03-09 10:36 pm (UTC)
vangirl: DO NOT TAKE. I actually bought this. >:|> (Aeyrn: Snow)
From: [personal profile] 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. ^^

Date: 2011-03-10 12:06 am (UTC)
vangirl: (Default)
From: [personal profile] 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;

Date: 2011-03-10 12:19 pm (UTC)
arf_she_said: (Default)
From: [personal profile] 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.

Date: 2011-04-05 01:43 pm (UTC)
emmei: (Default)
From: [personal profile] emmei
I'm grabbing your layout for my other journal... Is credit on the profile page ok?

Date: 2011-05-09 09:11 am (UTC)
heechuls: (Default)
From: [personal profile] heechuls
using for another journal thanks *__*

Date: 2011-06-28 06:55 am (UTC)
fulmar: (Default)
From: [personal profile] fulmar
Grabbed and adapted for my fic journal, thanks.

Date: 2011-08-27 05:19 am (UTC)
nologic: This is Ryoji, looking smug and proud of himself, with his mouth tucked into his scarf and left hand on his chest. (Default)
From: [personal profile] nologic
Grabbing for my journal, left links and credit on my custom text page. Thank you for making such a wonderfully simple layout~

Date: 2011-12-31 03:24 pm (UTC)
exoskeleton: (disney ➢ hakuna matata)
From: [personal profile] exoskeleton
This is a cute layout! C: I'm going to use it on my icon community, [community profile] supahsekret. Also I will stop editing this comment now, derp.
Edited Date: 2011-12-31 03:25 pm (UTC)

Date: 2012-01-03 11:05 pm (UTC)
From: [community profile] ex_ballerine259
very cute, memming for future use!

Date: 2012-01-06 03:16 am (UTC)
monochroming: (always smiling)
From: [personal profile] 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.

Date: 2012-01-16 05:12 am (UTC)
cimberelly: (piku)
From: [personal profile] 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.

Date: 2012-02-22 02:19 pm (UTC)
goodbyebird: SCC: Sarah riding a motorcycle in bw. (SCC Sarah no easy ride)
From: [personal profile] goodbyebird
This looks lovely. Thanks for sharing :)

Date: 2012-03-11 05:34 am (UTC)
vixens: a shiba-inu contemplates (Default)
From: [personal profile] 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.

Date: 2012-06-21 04:41 am (UTC)
siix: (★ 003)
From: [personal profile] siix
I love the simplicity! Thanks for making it!

Date: 2012-07-08 03:31 am (UTC)
ellyd: a yeti, staring blankly. (ar; imaginary boyfriend.)
From: [personal profile] ellyd
Has there been any luck getting this to work for personal journals? ;~;

Date: 2012-09-06 05:22 am (UTC)
ketsudan: (Default)
From: [personal profile] ketsudan
Hello!

I am using this for my community [community profile] 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!

コンビニ。

the layout/graphics community
of 子/CB [[personal profile] ko]

contact:
charmander★hotmail。co。jp.

Expand Cut Tags

No cut tags