コンビニ

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

/* 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 ★

 

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.