dreamwidthlayouts | Tabula Rasa: Door to the river

Image Preview

Title: Door to the river
Credit to: This post.

baud.
Base style: Tabula Rasa
Type: CSS
Best resolution: 1366x768
Tested in: Firefox

Select Plain (Tabula Rasa);

Select 2 Column (sidebar on the right);

Modules: In Main Module Section select Custom Text (position 1) and Navigation (position 2). You can also select "Links". All the rest must be unchecked.

Custom Stylesheet CSS: Paste the following in the field: https://fonts.googleapis.com/css?family=Lato|Montserrat|Vollkorn

Custom CSS: Make sure Use layout's stylesheet(s) is checked.

Paste this code in the "Custom CSS" field:

/* Cleaned CSS: */

.access-filter, .time, .userpic { display: none; }
.navigation.topnav { display: none; }

.navigation.bottomnav {     background: transparent;
text-transform: uppercase; font: 12pt 'Montserrat', sans-serif; padding: 10px;}

.ContextualPopup {
    background: ;
    color: ;
    }

.ContextualPopup a { color: ; }
.ContextualPopup a:visited { color: ; }
.ContextualPopup a:hover { color: ; }
.ContextualPopup a:active { color: ; }

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

img {
    border: none;
}

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
    font-size: 12pt;
font-family: 'Lato', sans-serif;
line-height: 1.6em;
    padding: 0;
color: #333;
    background: transparent;
    
}

html body {
    margin-left: em;
    margin-right: em;
}

a { color: #dcc3a5; text-decoration: none; }
a:visited { color: #dcc3a5; text-decoration: none;   }
a:hover { color: #dcc3a5; text-decoration: none;  }
a:active { color: #dcc3a5; text-decoration: none;  }

q { font-style: italic; }

/* #content layout */
#content { float: none; margin: 20px; width: 92%; }
@media only screen and (min-width: 40em) {

.two-columns-right #content
  {
        border-right:  solid transparent;
    .column-right #content {
        min-width: ; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
    }
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header {
    margin: 20px;
    clear: both;
    padding: .5em;
}

#header {

}

h1#title { font: 38px/2 'Vollkorn', serif; font-weight: 700; 
text-transform: uppercase; display: inline; color: #c29915;
}

#title a { color: #c29915; }

h2#subtitle {font: 21px/2 'Montserrat', sans-serif; font-weight: 200; display: inline;
text-transform: lowercase; float: right; margin-right: 70px;}

h2#pagetitle { display: none;
}

#footer {
display: none;
}

#primary {
    width:100%;
    margin-right:-100%;
    margin-left: 0;
line-height: 1.6em;
float: left;
}

#primary > .inner:first-child, #secondary > .inner:first-child, #tertiary > .inner:first-child {
    padding: 1em;
}

/* modules layout */
h1#title { font: 38px/2 'Vollkorn', serif; font-weight: 700; 
text-transform: uppercase; display: inline; color: #c29915;
}

#title a { color: #c29915; }

h2#subtitle {font: 21px/2 'Montserrat', sans-serif; font-weight: 200; display: inline;
text-transform: lowercase; float: right; margin-right: 70px;}

h2#pagetitle { display: none;
}

#primary { float: left; line-height: 1.6em;   }
#secondary, #tertiary { line-height: 1.6em; }

@media only screen and (min-width: 40em) {
    .multiple-columns #primary {
float: left; 
width: 70%;
    }
    .two-columns-right #secondary {
        float: right;
        width: 28%;
}
}

.navigation ul {
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

div.header { margin-bottom: 15px; }

.entry {
    background: transparent;
    
}

.entry .entry-title { font: 0px; margin-bottom: -15px; }
    
}

.datetime { text-transform: uppercase; font: 12pt 'Montserrat', sans-serif; color: #333; padding-top: 5px; padding-bottom: 5px; letter-spacing: 1px; }

.datetime a { color: #333 !important; }

.entry .entry-title, .entry .entry-title a { font: 28px/2 'Vollkorn', Georgia, serif; text-transform: capitalize; color: #a89a88; }

.no-subject .entry .entry-title {
    background: none;
    border: none;
}

.entry a {  }
.entry a:visited {  }
.entry a:hover {  }
.entry a:active {  }

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
    content: "";
    display: block;
    overflow: hidden;
    width: 10em;
}
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* 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;
    }

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img {
    max-width: 100%;
    height: auto;
}

@media only screen and (min-width: 64em) {
    .entry-content img, .comment-content img { max-width: none; }
}

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.tag ul {
    display: inline;
    margin-left: 0;
    padding-left: 0; display: none; 
}

.tag { display: none; }

.tag ul li {
    display: inline;
} /* same for month view */

ul.entry-management-links {
    margin-left: 0;
    text-align: right;
text-transform: uppercase;
 font-size: 10pt;

padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    margin-left: 0;
    padding-left: 0;
text-transform: uppercase;
    text-align: right;
}

.entry-interaction-links a, .entry-management-links a { color: #a89a88; }
.entry-interaction-links a:visited, .entry-management-links a:visited { #a89a88;  }
.entry-interaction-links a:hover, .entry-management-links a:hover { color: #333;  }
.entry-interaction-links a:active, .entry-management-links a:active { color: #a89a88;  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em; font-size: 10pt;
}

.entry-interaction-links { padding-bottom: 30px;  border-bottom: 3px solid #dcc3a5; 
}

/* comments */

.comment-posted {font-weight:bold;}

.comment-wrapper {
    padding: .5em 0;
    min-width: 15em;
}

.comment .comment-title {
    
    margin: 0;
}

.comment .comment-title, .comment .comment-title a {
    
}

.no-subject .comment .comment-title {
    background: none;
    border: none;
}

ul.comment-management-links {
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.icon-keywords ul {
    display: inline;
    margin-left: 0;
    padding-left: 0;
}

.icon-keywords ul li {
    display: inline;
}

/* modules */

.module {
    background: transparent;
    
}

.module a { text-transform: uppercase; font: 13pt 'Montserrat', sans-serif;  }
.module a:visited {  }
.module a:hover { color: #333;  }
.module a:active {  }

.module h2 { display: none; }
    
    
}

.module-content {
    
}

.module-content ul {
    list-style: outside;

padding-left: 0;
}

ul.module-list { padding-top: 15px; }
.module-content li {
text-transform: uppercase;
display: block;
font: 300 .9em Lato, sans-serif;
letter-spacing: 0.5px;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #c29915;
}

ul.userlite-interaction-links.icon-links {
    margin-left: 0;
    padding-left: 0;
}

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

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.any-column .module-calendar table { margin: 0; }
.module-calendar .module-content { text-align: left; }
@media only screen and (min-width: 40em) {
    .multiple-columns .module-calendar .module-content {
        text-align: center;
    }

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

.multiple-columns .module-syndicate .module-content {
        text-align: center;
    }
}

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

.search-box {
    margin: .2em auto;
    max-width: 100%;
}

.search-form .search-box-item, 
.search-form .search-button-item {
    display: block
}

.search-form .comment_search_checkbox_item {
    display: inline
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}

.module-credit .category-title {
    font-weight: bold;
}

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

/* Controlstrip */

#lj_controlstrip {background: #fff;  padding: 1em 0; top: 0; left: 0; width: 100%; position: relative;}

#lj_controlstrip td {font: 13px/2 'Montserrat', sans-serif; color: #111; display: table-cell;}

#lj_controlstrip_statustext { font-size: 1.2em;  color: #111; font-weight: 700; margin-bottom: .5em; }

#lj_controlstrip a { color: #a89a88; font-weight: normal; }

#lj_controlstrip a:hover { text-decoration: underline;}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, .cuttag img { border: 0; }

#lj_controlstrip_user .ljuser {  padding: .25em; font-size: 1.2em;}

#lj_controlstrip_user img, #lj_controlstrip_actionlinks img { display: none; }

#lj_controlstrip_userpic { width: 60px; padding-left: 2em !important; }

#lj_controlstrip_userpic img  { border: 0 !important; padding: 6px !important; }

#lj_controlstrip_userpic a  { padding: 0; margin: 0; }

#lj_controlstrip input {     font: italic .88em/2 'Vollkorn', Georgia, serif; background: #eee; color: #111; padding: .25em .5em 0 .5em; margin: 0; width: auto;text-transform: lowercase; letter-spacing: .05em; border: none;}

#lj_controlstrip input #search { padding: .125em .25em; margin: 0; border: none;}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember  { background-color: #eee; color: #111; border: none;}

#lj_controlstrip_login td,  {border-bottom: 0;}

#lj_controlstrip #lj_controlstrip_search { display: none; }

@media only screen and (min-width: 1000px) {
	
#lj_controlstrip td {font-size: 14px;}
	
#lj_controlstrip #lj_controlstrip_search { display: block; } }

Notes: This layout was originally made for my author blog, but I decided to share. It may be a bit wonky on mobile and the code is a bit of a mess. The colors are inspired by Willem de Kooning's Door To The River. The controlstrip code was made by

vigils, so it would be nice if you could credit them as well.

Tabula Rasa: Door to the river

no subject