Entries tagged with layout: tabula rasa

This is a port of the Motion WordPress Theme for Dreamwidth.

Full-size Preview

Instructions:
o1. Go to the Select Journal Style
page and choose Tabula Rasa (any of them, shouldn't matter which).
o2. In the Customize CSS section uncheck "Use layout's stylesheet(s)" and paste the code in the Use embedded CSS box and hit Save Changes.

/*-------------------------------------------------
  Style: Tabula Rasa
  Title: Motion
  Theme: Original
  
  Note: This theme was originally designed and built for the WordPress CMS and is copyright 85ideas.com.
  Modify, adapt, and customize for your own site at will!
  The CSS, XHTML and design of this theme are released under GPL:http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
  Adapted for Dreamwidth by Lian (wrenishly), 2011
---------------------------------------------------*/
/************************************************
* Resets *
************************************************/
html, body, div, p, span, h1, h2, h3, h4, h5, h6, img, ul, ol, dl, li, dt, dd, blockquote, pre, form, fieldset, label, input, table, th, td, a{margin:0; padding:0; border:0; vertical-align:baseline; color:#fff}
:focus{outline:0}
body{line-height:1}
ul, ol{list-style:none}
h1, h2, h3, h4, h5, h6{font-size:1em}

/************************************************
* General elements *
************************************************/
body{background:#000 url(http://img525.imageshack.us/img525/7105/bodybgd.jpg) top center no-repeat fixed; padding-bottom:20px; font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif; text-align:center}
h1, h2, h3, h4, h5, h6{font-family:Rockwell,Georgia,Palatino Linotype,Palatino,"Times New Roman",Times,serif}
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, label, th, td, a{text-shadow:0 0 4px #444}
a{color:#a8ef9d; text-decoration:none}
a:hover{}
a img{border:0}
blockquote{font-style:italic; background:url(http://i53.tinypic.com/2uy2j2u.png); padding:.4em 1em .7em 1em; margin:.7em 0 .3em 0}
code{font-size:1.1em; font-family:"Bitstream Vera Sans Mono",Monaco,"Lucida Console",monospace}
kbd, tt{font-size:1.2em}
hr{border:1px solid #a8ef9d}
pre{overflow:auto; width:600px; background:url(http://i55.tinypic.com/28wgm1k.png); padding:1em 1.5em; margin:1em 0; font-size:1.2em; white-space:pre-wrap; /* css3 */}
dl{}
dt{font-weight:bold}
dd{padding-left:1em}
table{margin:.5em 0}
table th{color:#a8ef9d}
table td, table th{padding:.5em .7em}
table th{background:url(http://i53.tinypic.com/2uy2j2u.png); text-transform:uppercase; border-bottom:1px transparent}
table td{background:url(http://i55.tinypic.com/28wgm1k.png); vertical-align:middle}
table tr.even td{background:url(http://i52.tinypic.com/256rdop.png)}
table tr:hover td{background:url(http://i53.tinypic.com/2uy2j2u.png)}
fieldset{padding:1.2em; border:1px dashed #a8ef9d}
legend{padding:.2em .8em; font-size:1.2em; text-transform:capitalize}
input, textarea, select{font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif; margin:.2em 0; color:#222; font-size:1em}
input.adminbar-input{margin:0}
input, textarea{padding:.3em}
input.radio, input.checkbox{background:#fff; padding:2px}
form label{font-weight:bold; display:inline}
form label.subscribe-label{display:inline}

/************************************************
* General *
************************************************/
#canvas{margin:15px auto 10px auto; padding:0; text-align:left; width:60em}

/************************************************
* Header *
************************************************/
.topnav{overflow:hidden; width:100%}
#title{color:#fff; font-size:2em; font-weight:normal; text-shadow:0 0 6px #555}
#pagetitle{font-weight:normal; font-size:1.3em; padding-bottom:15px}
#pagetitle span{color:#a8ef9d}

/**********************************************
 * Content
 *********************************************/
#content{padding:30px 0 20px 0}
#primary{float:left; overflow:hidden; width:40em}
/* For one-column
#primary.full{width:980px}
*/
/************************************************
 * Entry &Comments *
 ***********************************************/
.sticky-entry-wrapper{padding:.5em; margin:0 0 2em; background:url(http://i55.tinypic.com/28wgm1k.png)}
.header{background:url(http://i55.tinypic.com/28wgm1k.png); padding:.5em}
.header a{color:#afdaff; font-size:1.4em}
.header a:hover{color:#a8ef9d; border-bottom:1px dashed #a8ef9d}

.access-filter, 
.restrictions, 
.datetime{    line-height:1.5em;     position:relative;     top:5px}
.datetime{overflow:hidden; font-size:0.7em; width:100%; background:url(http://i56.tinypic.com/1z2m6ac.png) left no-repeat;     padding:.4em 0 0 1.75em}

.contents{color:#fff; margin:.8em 0; font-size:0.8em; line-height:1.5em}
.contents h1{padding:.8em 0; font-size:1.5em}
.contents h2{padding:.8em 0; font-size:1.4em}
.contents h3{padding:.8em 0; font-size:1.3em}
.contents h4{padding:.8em 0; font-size:1.2em}
.contents h5{padding:.8em 0; font-size:1.1em}
.contents h6{padding:.8em 0; font-size:1em}
.contents p{padding:.6em 0 .2em 0}
.contents a{border-bottom:1px dashed #a8ef9d}
.contents a:hover{background:url(http://i55.tinypic.com/28wgm1k.png)}
.contents a img{background:none; border-bottom:0}
.contents ul, 
.contents ol{padding:.4em 0 .5em 2em}
.contents ul li{list-style:disc}
.contents ol li{list-style:decimal}
.footer{background:url(http://i53.tinypic.com/2uy2j2u.png); overflow:hidden; width:100%; padding:1em 0 0; font-size:0.8em; margin:1em 0}
.footer a{color:#fff}
.footer a:hover{color:#afdaff}
.footer .tag{float:left; width:93%; background:url(http://i52.tinypic.com/x50jl.png) left 1px no-repeat; padding-left:20px; line-height:16px}
.footer .tag .tag-text{ float:left;  margin:0 .5em 0 0}
.footer li{ display:inline}
.footer .tag, 
.footer .entry-management-links{ margin:0 1em 1em}
.footer .entry-management-links{ float:left}
.footer hr{ display:none}
/*----- MANAGEMENT/INTERACTION LINKS -----*/
.entry-interaction-links, 
.comment-interaction-links{float:right; margin:0 1em 1em}
.entry-interaction-links li, 
.comment-interaction-links li, 
.bottomcomment .entry-interaction-links li{    display:inline; color:#fff; background:url(http://i55.tinypic.com/28wgm1k.png); padding:6px; line-height:3em; font-size:.9em}
.entry-interaction-links li:hover, 
.comment-interaction-links li:hover{cursor:pointer; color:#a8ef9d}
.entry-interaction-links .entry-permalink a{background:url(http://i40.tinypic.com/ajy061.png) left 4px no-repeat; padding-left:17px}
/*----- USERPICS -----*/
.userpic{float:left; margin:0 1em 1em 0}
.userpic img{    margin-top:.5em; background:url(http://i55.tinypic.com/28wgm1k.png)!important; padding:1em;  /* optional rounded corners for browsers that support it */-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.userpic a{ border:0}
.userpic a:hover{ background:none}
#secondary .module-userprofile .userpic img{padding:1em}

/*----- COMMENTS -----*/
#comments{overflow:visible; width:100%}
#comments ul.commentlist li ul.children li{clear:both; margin:20px 0 0 20px}
.comment h3{font-size:1em; font-weight:normal}
.comment .poster, .comment .poster-ip{font-size:.9em; margin-bottom:10px; color:#eee}
.comment-poster a{color:#b9ff9d}
.comment-poster a:hover{color:#eee}
#comments .footer{font-size:.7em; color:#bbb;     clear:both;     padding:1em}
#comments .footer .inner{    float:left;     width:96.5%}
#comments .footer .inner .multiform-checkbox{    float:left;     margin:.5em 0 0}
#comments .footer .inner .comment-management-links{    float:left;     margin:.5em 0 0 1em}
#comments .footer .comment-interaction-links{    margin:0}
#comments h3#trackbacktitle{padding-top:10px}
#comments ul.trackback{margin:10px 0 0 0; padding:15px; background:url(http://i55.tinypic.com/28wgm1k.png)}
#comments ul.trackback li{margin-bottom:17px; font-size:.9em}
#comments ul.trackback li .commentbody .author{margin:0}
#comments a#cancel-comment-reply-link{display:block; padding:8px 0}
#comments a#cancel-comment-reply-link:hover{color:#ccc}
#comments .reply{margin-top:20px; overflow:hidden; width:100%}
#ljqrttopcomment{    clear:both}
#qrformdiv{    max-width:98%;     margin:0 auto}
.bottomcomment{    clear:both;     margin:2.5em 0;     background:url(http://i53.tinypic.com/2uy2j2u.png);  padding:1em;  overflow:hidden}
.bottomcomment a{ color:#fff}
.bottomcomment a:hover{ color:#afdaff}
.bottomcomment .entry-management-links{ float:left}
.bottomcomment .entry-management-links li{ display:inline}
.bottomcomment .entry-interaction-links{ margin:-.5em 0}

/************************************************
* Navigation (page turns) *
************************************************/
.navigation{overflow:hidden; width:100%; line-height:1.7em; margin-bottom:20px}
.navigation li{float:left; background:url(http://i55.tinypic.com/28wgm1k.png); line-height:2em; margin:5px 0 5px 5px;     padding:.5em 1em;     color:#fff;     font-size:0.8em}
.navigation li.active{    font-style:italic}
.navigation li:hover{background:url(http://i52.tinypic.com/256rdop.png)}
.navigation li a{color:#fff}
.navigation li a:hover{color:#afdaff; text-decoration:none}
.navigation li ul{position:absolute; width:180px; left:-999em; padding-top:5px; margin:0}
.navigation li:hover ul, 
.navigation li.sfhover ul{left:auto}
.navigation li li{padding:0; margin:0; width:180px; line-height:1.5em}
.navigation li li a{color:#fff; margin:0; padding:7px 13px; background:url(http://i54.tinypic.com/33avz0g.png)}
.navigation li li ul li{margin-left:13px}
.navigation li li a:hover{color:#afdaff}
.navigation li:hover, 
.navigation li.sfhover{position:static; /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */}
/************************************************
* All Modules *
************************************************/
.modules ul{width:100%; overflow:hidden}
.module table{width:100%}
.module ul.children li{border-bottom:none}
.module ul.children{margin-bottom:0}
.modules li{margin:5px}
.modules ul li{margin:8px 2px}
.modules ul li a{display:inline !important}
/************************************************
* Sidebar *
************************************************/
#secondary{float:right; overflow:hidden; width:300px; font-size:0.8em; line-height:1.4em; margin-bottom:30px}
#secondary .module{background:url(http://i55.tinypic.com/28wgm1k.png); overflow:hidden; padding:10px; margin-bottom:15px}
#secondary h2{background:url(http://i55.tinypic.com/28wgm1k.png); padding:5px 10px; line-height:1.3em; font-weight:normal; font-size:1.4em; margin-bottom:10px}
#secondary h2 a{    color:#fff}
#secondary h2 a:hover{    color:#AFDAFF}
#secondary ul ul li a{display:block; padding:3px 5px}
#secondary ul ul li a:hover, #secondary p a:hover{background:url(http://i55.tinypic.com/28wgm1k.png)}
#secondary ul ul ul li{background:url(images/bullet.png) left 7px no-repeat; line-height:1.5em; padding:0 0 0 10px; margin:0 0 0 10px}
#secondary p{color:#eee; padding:0 5px 10px 5px}
#secondary img{background:none; border:none; padding:0 5px}
#secondary .module-syndicate img{ background:transparent !important}
/*----- SPECIFIC MODULE TWEAKS -----*/
#secondary .module-userprofile .journal-name, 
#secondary .module-userprofile .journal-website-name, 
#secondary .module-userprofile .userlite-interaction-links{    float:left;     margin:1em 0 0}

#secondary .module-userprofile li{    display:inline}
#secondary .module-tags_cloud a{display:inline !important}
#secondary .module-tags_cloud a:hover{color:#fff}
#secondary .module-tags_cloud a:hover{color:#fff}
#secondary .module-syndicate ul li span{padding:2px 5px}
#secondary .module-search .search-button{cursor:pointer; background:url(http://i55.tinypic.com/28wgm1k.png); color:#fff; font-size:1em; padding:1em;     margin:0 0 0 1em; vertical-align:top}
#secondary .module-search .search-button:hover{background:url(http://i53.tinypic.com/2uy2j2u.png)}
#secondary .module-search .search-box{ padding:0.8em}
/************************************************
* Page Footer *
************************************************/
#tertiary{background:url(http://i55.tinypic.com/28wgm1k.png); clear:both; overflow:hidden; width:100%; font-size:0.8em}
#tertiary .foot1{float:left; width:310px; margin:10px 0 0 10px; display:inline}
#tertiary .foot2{float:left; width:310px; margin:10px 15px 0 15px}
#tertiary .foot3{float:left; width:310px; margin:10px 0 0 0}
#tertiary h3{font-weight:normal; font-size:1.4em; margin-bottom:.4em}
#tertiary h4{font-weight:normal; font-size:1em; margin:.8em 0 .2em 0; font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif}
#tertiary p{line-height:1.5em; color:#eee; padding:.2em 0 .8em 0}
#tertiary ul li{padding:10px; margin-bottom:10px; background:url(http://i55.tinypic.com/28wgm1k.png)}
#tertiary ul ul li{background:url(images/bullet.png) left 7px no-repeat; line-height:1.5em; padding:0 0 0 10px; margin-bottom:4px}
#tertiary li a{display:block; font-weight:normal; padding:2px 5px}
#tertiary a:hover{background:url(http://i55.tinypic.com/28wgm1k.png)}
#tertiary .widget_tag_cloud a{display:inline}
#tertiary .widget_tag_cloud a:hover{background:none; color:#fff}
/************************************************
* Reading Page *
************************************************/
.page-read .poster, .page-network .poster{float:left; width:74%; text-align:left; margin:.5em 1em 1em 0; background:url(http://i53.tinypic.com/2uy2j2u.png); overflow:hidden; padding:1em; font-size:0.8em; line-height:1.1em}
.page-read .poster a, .page-network .poster a{ border:0}
.page-read .poster a:hover, .page-network .poster a:hover{ border:0;  background:none; color:#afdaff}
/************************************************
* Archive Page *
************************************************/
.page-archive .month-wrapper{ margin:0 0 2em}
.page-archive .month-wrapper caption{ display:none}
.page-archive .month{ width:100%}
.page-archive .month .day .label{ float:left;  font-size:2em}
.page-archive .month .footer .inner{ padding:0 1em 1em}
/************************************************
* Tags Page *
************************************************/
.page-tags ul ul.tags_multilevel{ margin:0 0 0 1em}
/************************************************
* Reply Page *
************************************************/
.page-reply table{ font-size:12px}
/************************************************
* Contextual Popup *
************************************************/
div.ContextualPopup div.Inner{ background-color:#030303}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited{ text-decoration:underline !important;  font-weight:bold;  color:#fff}

Credit to:

endlist

[010] Motion (port): original

[004] INDEXED (spot color)

This is my first layout, so I know the CSS is probably still a bit of a mess, and I may have missed some things. Please give me feedback if something is messed up. ♥