betterdolphin | Presser for Blanket

Click images above for Image Previews - Live Preview with Bottombar - Live Preview with Sidebar

"presser"

Has many variations. One with a sidebar, one with a bottom bar, all with 4 pre-made color variations.

Note still figuring out DW layouts, feel free to tell me if I got anything wrong.

Notes
Tested on latest Firefox, Chrome, and IE7-9. IE7 and 8 work fine, they're just missing some style things like text-shadow or transparent colors. Also no special font because Google Fonts decided not to host the files earlier IEs could render, but I tried to substitute the missing font with more websafe fonts so hopefully, for the most part, they'll work.

If you use the bottombar, the modules were styled in a specific order so might not look as good out of order. This is the order I did them in:
Profile, Calendar, Syndication, Recent Active Entries (paid only), Search (paid only), Cut Tags, Tags, Page Summary, Custom Text. (Powered By, Page Generation Time and Style Credit are all forced to be hidden in the CSS.)

This was made with the thought in mind that a repeated background could go into the short header bar, like flowers or sky or a pattern, but I couldn't find any good photos that I wasn't able to redistribute freely. But the color behind the titles is actually transparent so your photo would show through!

Directions
To install, go here. Below you'll find a section of themes to select and a search field. In the search box put in Blanket, I used Peach as a base. In the top right you'll see a box called Current Theme, click "Customize your theme". On your left you'll see a sidebar. If you need to edit the modules, go there first, otherwise click on "Custom CSS".

In there, you'll see "Use layout's stylesheet(s)" with a checkbox. UNCHECK it, then copy and paste this WHOLE document into the "Use embedded CSS" box. Click "Save Changes" and it should be ready to go!

Presser Blue with Sidebar

Code

/*
  Presser - Blue with Sidebar
  For: Blanket (Peach)
  Available:  http://betterdolphin.dreamwidth.org/
  By:  Toby
*/

/* DIRECTIONS:  Full directions on how to install are on the bottom of this document! */

html, body{
	height: 100%;
	min-height: 100%;
}

body{
	background: #F8F9F2;
	color: #515050;
	font: 1em 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}

@font-face {
  font-family: 'Terminal Dosis';
  font-style: normal;
  font-weight: 200;
  src: local('Terminal Dosis ExtraLight'), local('TerminalDosis-ExtraLight'), url('http://themes.googleusercontent.com/static/fonts/terminaldosis/v4/SwfduKDlxm7-vFPpKzhxuQNVTb8kAFPi3wXyBHhN67Q.woff') format('woff');
}

@font-face {
  font-family: 'Terminal Dosis';
  font-style: normal;
  font-weight: 400;
  src: local('Terminal Dosis Book'), local('TerminalDosis-Book'), url('http://themes.googleusercontent.com/static/fonts/terminaldosis/v4/_IcvjW_kWHsIHjjUsLbdpFGxLvFzKVP0OsRYGzgS_zk.woff') format('woff');
}

a, a:link, a:visited{
	color: #E58220;
	text-decoration: underline;
}

a:hover{
	color: #84BFC3;
	text-decoration: underline;
}

h1, h2, h3, h4, h5{margin: 0 0 10px;}

q{font-style: italic;}

input, textarea{
	background: #fff;
	border: solid 1px #eee;
	color: #333;
}

/***************************content***************************/

#canvas{
	margin: 0 auto 3em;
	padding: 0;
	text-align: justify;
	width: 100%;
}

#canvas>.inner{
	height: 100%;
}

#content{
	margin: 0 0 7em;
	padding: 0;
}

#primary{
	margin: -1px auto 0;
	padding: 0;
	position: relative;
	width: 60%;
	z-index: 0;
}

/***************************header***************************/

#header{
	background: #84BFC3;
	border-bottom: 1px solid #DFE0D9;
	color: #C52525;	
	margin: 0 auto;
	position: relative;
	width: 100%;
	z-index: 9;
}

#header>.inner{
	background: #f8f9f2;
	background: none repeat scroll 0 0 rgba(248, 249, 242, 0.75);
	margin: 0 auto;
	padding: 0 2em .5em;
	width: 60%;
}

/**navigation**/

.navigation{
	font: 200 1.5em 'Terminal Dosis',"Century Gothic","Arial Narrow",sans-serif;
	position: absolute;
	right: -125px;
	text-transform: uppercase;
	width: 120px;
}

.navigation.bottomnav{
	width: 220px;
}

li.page-back, li.page-forward{
	display: inline;
	list-style: none;
	margin: 0 0 0 .3125em;
	padding: 0;
}

li.page-separator{
	display: none;
}

.navigation ul{
	display: inline;
	margin: 0;
	padding: 0;
}

.navigation li{
	color: #ccc;
	display: inline;
	list-style: none;
	text-shadow: 1px 1px 0 #fff;
}

.navigation li a, .navigation li a:visited{
	color: #ccc;
	text-decoration: none;
}

.navigation li a:hover{
	color: #84BFC3;
	text-decoration: none;
	text-shadow: 1px 1px 0 #fff;
}

.page-tags .tags-container h2, .month h3, #header h1#title{
	color: #E58220;
	font: 200 2.5em 'Terminal Dosis',"Century Gothic","Arial Narrow",sans-serif;
	letter-spacing: 0;
	text-shadow: 1px 1px 0 #F1F2ED;
	text-transform: uppercase;
}

#header h2#subtitle{
	color: #666;
	font: small-caps 0.7em 'Lucida Grande','Lucida Sans Unicode',Helvetica,sans-serif;
	letter-spacing: .3em;
	margin: -20px 0 0;
	padding: 0;
	text-shadow: 1px 1px 0 #F1F2ED;
}

#header h2#pagetitle{
	color: #E58220;
	display: none;
	font: 200 2.5em 'Terminal Dosis',"Century Gothic","Arial Narrow",sans-serif;
	letter-spacing: 0;
	text-shadow: 1px 1px 0 #F1F2ED;
	text-transform: uppercase;
}

.module-navlinks{
	background: #84BFC3;
	bottom: 0;
	color: #F1F2ED;
	font-size: .7em;
	margin: 0 auto;
	position: fixed;
	width: 100%;
	z-index: 100;
}

.module-navlinks ul.module-list{
	letter-spacing: -0.5px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

.module-navlinks ul.module-list li{
	display: inline;
	list-style: none;
	margin: 0 1em 0 0;
	padding: 0 .5em 0 0;
}

.module-navlinks ul.module-list li a{
	color: #F8F9F2;
	display: inline-block;
	.display: inline;
	padding: .75em;
	text-decoration: none;
	.zoom: 1;
}

.module-navlinks ul.module-list li a:hover{
	background: #f8f9f2;
	background: none repeat scroll 0 0 rgba(248, 249, 242, 0.75);
	color: #666;
}

/***************************footer***************************/

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

.page-top{
	display: none; 
	margin: 0 auto;
	text-align: right;
	text-transform: uppercase;
	width: 60%;
}

/***************************sidebar***************************/

#secondary{
	color: #515050;
	background: #F1F2ED;
	border-bottom: 1px solid #DFE0D9;
	min-height: 100%;
	left: 0;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	top:110px;
	width: 20%;
	z-index: 0;
}

#secondary h2{
	color: #84BFC3;
	font: small-caps 1em 'Lucida Grande','Lucida Sans Unicode',Helvetica,sans-serif;
	letter-spacing: .3em;
}

#secondary h2 a{
	color: #84BFC3;
}

#secondary>.inner{
	border-top: 1px solid #1E1B1B;
	margin: 0 auto;
	padding: 1em .5em;
	width: 90%;
}

#secondary .module{
	border-top: 1px solid #DFE0D9;
	margin: 2em 1em;
	padding: 1em 0 0;
	text-align: center;
}

#secondary .module:first-child{
	border-top: 0;
}

#secondary .module-header, #secondary .module-header a{
	text-decoration: none;
}

#secondary .module-header{
}

#secondary .separator-after{
	clear: both;
}

#secondary .module-content{
	font-size: 0.7em; 
}

#secondary .module-content ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

#secondary .module-content li{
	margin: .5em 0;
}

.module-calendar td a{
	display: block;
	padding: 2px;
}

.manage-link{
	text-align: right;
}

.manage-link a{
	color: #E56562;
	text-decoration: none;
}

.manage-link a:hover{
	color: #E56562;
	text-decoration: underline;
}

/**credit**/
.module-credit{
	display: none;
	text-align: center;
}

.module-credit dt, .module-credit dd{
	display: inline;
	margin: 0;
	padding: 0;
}

.module-credit dt{
	font-weight: bold;
	margin-right: .5em;
}

/**time**/
.module-time{
	display: none;
	margin: 2em .4em 1em 1em !important;
	text-align: center;
}

/**powered**/
.module-powered{
	display: none;
	margin: 2em 1em 1em 0 !important;
	text-align: center;
}

/**cuts**/
.module-cuttagcontrols{
}

.module-cuttagcontrols .module-content, .module-cuttagcontrols h2{
}

/**search**/
.module-search .search-form{
	margin: .2em auto;
}

.module-search .search-box{
	margin: .2em;
}

/**user profile**/
.module-userprofile{
}

#secondary .userpic{
	float: none;
	margin: 0;
}

#secondary .userpic img{
	width: 75px;
	height: 75px;
}

.journal-name{
	clear: both;
	font: 200 2em 'Terminal Dosis',"Century Gothic","Arial Narrow",sans-serif;
	text-shadow: 1px 1px 0 #fff;
	text-transform: uppercase;
}

.module-userprofile.module{
	text-align: center;
}

ul.userlite-interaction-links.icon-links{
	list-style: none;
	margin: .5em 0 0;
	padding: 0;
}

ul.userlite-interaction-links.icon-links li{
	display: inline;
	padding: 0 .20em;
}

/**calendar**/
.module-calendar{
}

.module-calendar table{
	margin: 0 auto;
}

.module-calendar table a{
	text-decoration: none;
}

/**syndicate**/
.module-syndicate{
	text-align: center;
}

/**tags**/
.module-tags_cloud{
}

.module-tags_cloud .module-content{
}

.module-tags_cloud li, .tags_cloud li{
	display: inline;
}

.module-tags_cloud li a, .tags_cloud li a, .module-tags_cloud li a:hover, .tags_cloud li a:hover{
	text-decoration: none;
}

.module-tags_cloud .module-content{
}

/**links**/
.module-pagesummary, .module-typelist{
}

.module-pagesummary li, .module-typelist li{
	text-align: left;
}

.module-pagesummary li:first-child, .module-typelist li:first-child{
	border-left: 0;
}

.module-pagesummary li a, .module-typelist li a, .module-pagesummary li a:hover, .module-typelist li a:hover{
	text-decoration: none;
}

/***************************entries***************************/

.entry, .month, .comment{
	background: #F1F2ED;
	border: 1px solid #fff;
	border-top: 1px solid #DFE0D9;
	border-bottom: 1px solid #DFE0D9;
	color: #515050;
	margin-top: -1px;
}

.entry>.inner, .month>.inner, .comment>.inner{
	border-left: 1px solid #DFE0D9;
	border-right: 1px solid #DFE0D9;
	padding: 1em 0;
}

.comment>.inner{
	font-size: .76em;
}

.comment .contents, .month .contents, .entry .contents{
	margin: 0 auto;
	width: 90%;
}

.entry-content{
	font-size: .76em;
	line-height: 1.2em;
	margin: 1em 0 2em;
}

.month .header, .header{
	margin: 0 auto 1em;
	width: 90%;
}

h3.entry-title{
	font: 200 2.3em/1em 'Terminal Dosis',"Century Gothic","Arial Narrow",sans-serif;
	color: #6baad1;
	letter-spacing: -1px;
	margin: 0;
	padding: 0;
	text-shadow: 1px 1px 0 #fff;
	text-transform: uppercase;
}

h3.entry-title a{
	color: #E58220;
	text-decoration: none;
}

.datetime{
	color: #666;
	font: small-caps 0.7em 'Lucida Grande','Lucida Sans Unicode',Helvetica,sans-serif;
	letter-spacing: 1px;
	padding: 0;
	text-transform: uppercase;
}

.datetime a{
	color: #666;
}

.userpic{
	display: block;
}

.userpic img{
	background: #DFE0D9;
	border: solid 1px #F8F9F2;
	padding: 10px;
}

.poster{
	color: #666;
	display: block;
	font-size: 0.9em;
	font-weight: normal;
	letter-spacing: 0;
	padding: .5em 0;
	text-align: right;
	text-transform: uppercase;
}

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li, .comment-content li{
	list-style-position: inside;
}

.metadata{
	font-size: .8em;
	margin: 0;
}

.metadata.top-metadata{
	margin: 1em 0 2em;
}

.metadata ul{
	margin: 0;
	padding: 0;
}

.metadata ul li{
	color: #666;
	font-size: .9em;
	font-weight: normal;
	letter-spacing: 0;
	list-style: none;
	padding: 0;
	text-transform: lowercase;
}

.metadata-label-location, .metadata-label-mood, .metadata-label-music{
	color: #968E8E;
	font-weight: bold;
	padding: 0 .3em 0 0;
}

.metadata-item-location, .metadata-item-mood, .metadata-item-music{
}

.entry .footer{
	clear: both;
	font-size: .8em;
}

.footer .tag{
	width: 94%;
	margin: 0 auto;
}

.footer ul a{
	text-decoration: none;
}

.entry>.tag{
	text-align: center;
}

.tag-text{
	display: none;
}

.tag ul{
	border: 0 !important;
	display: inline;
	margin: 0;
	padding: 0 0 0 1.3em;
}

.tag ul li{
	color: #666;
	display: inline;
	font-size: .9em;
	font-weight: normal;
	letter-spacing: 0;
	list-style: none;
	padding: 0;
	text-transform: lowercase;
}

.footer ul.entry-interaction-links{
	background: #DFE0D9;
	border-bottom: 1px solid #F8F9F2;
	border-top: 1px solid #F8F9F2;
	padding: .5em;
}

.footer ul.entry-management-links{
	padding: .4em;
}

.footer ul.entry-interaction-links, .footer ul.entry-management-links{
	font: 200 1em 'Terminal Dosis',"Century Gothic","Arial Narrow",sans-serif;
}

ul.entry-management-links{
	margin: 0;
	padding: 0;
	text-align: center;
}

ul.entry-management-links li{
	color: #666;
	display: inline;
	font-size: .9em;
	font-weight: normal;
	letter-spacing: 0;
	list-style: none;
	padding: 0 5px 0 0;
	text-transform: lowercase;
}

ul.entry-interaction-links{
	margin: 0;
	text-align: center;
}

ul.entry-interaction-links li{
	color: #666;
	display: inline;
	font-size: .9em;
	font-weight: normal;
	letter-spacing: 0;
	list-style: none;
	margin: 0 5px;
	padding: 0 5px 0 0;
	text-transform: uppercase;
}

/********************************comment********************************/

.comment-pages{
	font-size: .8em;
	text-align: center;
}

.toppages{
	padding: 1em 0 0;
}

.bottompages{
	padding: 0 0 1em;
}

.comment-wrapper{
	margin: 0 0 2em;
	padding: 0;
}

.comment{
}

ul.comment-interaction-links li{
	margin: 0 1em;
}

.comment-title{
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, sans-serif; 
}

.comment-title h4{
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
}

hr.above-entry-interaction-links, hr.below-reply-container{
	display: none;
}

textarea.textbox{
	width: 100% !important;
}

.bottomcomment, .comments-message{
	color: #515050;
	font-size: .78em;
	margin: 0 auto 2em;
	padding: 1em;
}

.bottomcomment .entry-interaction-links{
	margin: 1em 0;
	padding: 0;
}

.comment-management-links ul, .comment-interaction-links ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-management-links li, .comment-interaction-links li{
	display: inline;
}

#qrform table{
	border: 0 !important;
}

/********************************archive********************************/

.page-archive .navigation li{
	display: block;
}

.page-archive .navigation.bottomnav{
	right: 0;
	text-align: right;
	width: 100%;
}

.page-archive .navigation.bottomnav li{
	display: inline;
}

li.active{
	color: #84BFC3;
	list-style: none;
	margin: 0;
	padding: 0;
	text-shadow: 1px 1px 0 #fff;
	text-transform: uppercase;
}

.month dl{
	margin: 0 auto;
	width: 90%;
}

.comment .footer, .month .footer{
	font-size: .7em;
	margin: 0 auto;
	padding: .5em;
	text-align: right;
	width: 90%;
}

.month .footer a, .month .footer a:hover{
	text-decoration: none;
}

.month th{
	background: #84BFC3;
	color: #F1F2ED;
	font-size: .9em;
	font-weight: normal;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
}

.month table{
	border: 0;
	border-collapse: collapse;
	margin: auto;
	width: 100%;
}

.month caption{
	display: none;
}

td.day{
	background: #dfe0d9;
	border: 1px solid #F1F2ED;
	padding: .5em;
}

.month-back a, .month-forward a{
	color: #84BFC3 !important;
}

.page-month .navigation.bottomnav{
	padding: 1em 0;
	right: -1em;
	width: 100%;
}

/********************************tags********************************/

.page-tags .tags-container{
	font-size: .8em;
	margin: 0 auto 2em;
	padding: 4em 2em;
}

.page-tags .tags-container ul{
	margin: 1em;
	padding: 0;
}

.page-tags .tags-container ul li{
	list-style: none;
	margin: 0;
	padding: 0 0 .5em;
}

.userpic{
	float: left;
	margin: 0 10px 0 0;
}

.poster-ip{
	font-weight: bold;
}

form#postform{
	color: #515050;
	font-size: .8em;
}

/* DIRECTIONS:  To install, go to your Dreamwidth.  Scroll over "Organize" in the menu, click "Select Style".  Below you'll find a section of themes to select and a search field.  In the search box put in Blanket, I used Peach as a base.  In the top right you'll see a box called Current Theme, click "Customize your theme".  On your left you'll see a sidebar.  Click on "Custom CSS".

In there, you'll see "Use layout's stylesheet(s)" with a checkbox.  UNCHECK it, then copy and paste this WHOLE document into the "Use embedded CSS" box.  Click "Save Changes" and it should be ready to go! */

Presser Blue with Bottombar