dreamwidthlayouts | Tabula Rasa: Venus As A Boy

Image preview

Title: Venus as a boy
Credit to: This post.

baud and

vigils.
Base style: Tabula Rasa
Type: CSS
Best resolution: Any
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=Literata:400,400i,500,700|Roboto+Condensed:300,400,700&display=swap

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

Paste this code in the "Custom CSS" field:

/* VENUS AS A BOY
by baud
inspired by vigils/terra */

.module-customtext.module > h2.module-header, #header { display: none; }

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

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

blockquote { font-size: 16pt; font-family: 'Literata', sans-serif; font-weight: 300; }

img {
    border: none;
}

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

body {
    font-size: 14pt;
font-family: 'Literata', sans-serif;
    padding: 0;
color: #333;
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); 
    
}

a, a:link, a:visited, a:active { color: #94bbe9; text-decoration: none; }
a:hover { background:  background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); text-decoration: none; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

q { font-style: italic; }

#canvas { margin: 1.5em;  display: table; border-spacing: 0; background: #fff;}

#content { width: 90%; max-width: 1200px; margin: auto; padding-top: 25px; }

#primary { padding: 0 !important; box-sizing: border-box; display: table-row;}

@media only screen and (min-width: 900px) { #canvas { display: block; margin: 2.5em; } #primary { width: 70%; box-sizing: border-box; float: left; display: block; margin-top: 1em !important; } #entries { margin-right: 3em; } }

@media only screen and (min-width: 1400px) { #canvas {margin: 2.5em 8% !important; } }

#secondary { box-sizing: border-box;  display: table-header-group; margin-bottom: 3em; }

@media only screen and (min-width: 900px) { #secondary {width: 27%; max-width: 300px; box-sizing: content-box; padding: 1em 0 1em 1em; float: right; display: block; margin-top: 0;}}

#container { display: table; }

@media only screen and (min-width: 900px) { #container {display: block;}}

@media only screen and (min-width: 40em) {

.entry h1,h2,h3,h4,h5,h6 {text-transform: uppercase;
display: block;
font: 600 .9em Roboto Condensed, sans-serif;
letter-spacing: 0.5px;}

.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;
}
h1#title { display: none; }

h1#title a, h1#title a:visited {  display: none;}

#subtitle { display: none;}

@media only screen and (min-width: 900px) { h1#title { display: none; }
h2#pagetitle { display: none !important; font-size: 0px; color: transparent;
}

#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 { display: none;
}

#title a {display: none; }

h2#subtitle { display: none;}

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;
    line-height: 1.6em;
}

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

.datetime { text-transform: uppercase; font: 14pt 'Roboto Condensed', sans-serif; color: #333; padding-top: 5px; padding-bottom: 5px; }

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

.entry .entry-title, .entry .entry-title a { font: 30px/2 'Roboto Condensed', Georgia, serif; text-transform: none; color: #bfb5da; }

.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;
font-family: Roboto Condensed;

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: #eeaeca; }
.entry-interaction-links a:visited, .entry-management-links a:visited { #eeaeca;  }
.entry-interaction-links a:hover, .entry-management-links a:hover { color: ;  }
.entry-interaction-links a:active, .entry-management-links a:active { color: #eeaeca;  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em; font-size: 15pt; font-family: Roboto Condensed; font-weight: 400;
}

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

/* 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-content a { text-transform: uppercase; font: 13pt 'Roboto Condensed', sans-serif;  }
.module a:visited {  }
.module a:hover { color: #333;  }
.module a:active {  }

.module h2 { font: 25px/2 'Roboto Condensed', Georgia, serif !important;  color: #bfb5da !important; margin-bottom: -15px; }

.module-header a { font: 30px/2 'Roboto Condensed', Georgia, serif !important; color: #bfb5da !important; margin-bottom: -15px; text-transform: none !important; }

.module-content {
font-size: 16pt; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; padding: 10px; padding-top: 0px; }
}

}

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

padding-left: 0;
}

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

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 'Roboto Condensed', 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: background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); font-weight: normal;  text-decoration: none;   -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

#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 'Roboto Condensed', 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 is heavily based on

vigils's layout, that's why I ask you to credit

vigils as well. It's shared with their consent.

Flat | Top-Level Comments Only

Lovely! Using, credited you both in my profile :)

Oh, I LOVE that it's minimalist without being stark. Gorgeous work.

OK, having issues with getting the navigation menu to display property.

I have uBlock Origin installed on both browsers. I don't know if that would be a factor.

Google Chrome:

Opera:

The adblock is probably not an issue, since Dreamwidth doesn't have ads.

Can you make sure your settings on "Presentation" are like the ones on this screenshot?:

OK, that fixed it! The issue was the values entered into the sidebar widths.

Had the same issue with it, thank you for explaining what was wrong!

Used it and credited in profile, thank you! And thanks also for that navigation menu fix. I had the same problem.

Newbie here, I love pink and blue colors, thank you for the wonderful work.

this is gorgeous! borrowing with thanks

Hi, I'm sorry but I can't find modules and custom css, sorry for the stupid question but I never installed a custom theme for Dreamwidth so I'm at a loss and I don't know what to do!

Ooh, this is lovely! Used it and have credited in my profile :) Thanks!

Tabula Rasa: Venus As A Boy

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject