dreamwidthlayouts | Tabula Rasa: This is yesterday

full page preview

Title: This is yesterday
Credit to: This post.

baud; Control strip by

vigils.
Base style: Tabula Rasa
Type: CSS
Best resolution: 1920x1080
Tested in: Firefox, Chrome

Select Plain (Tabula Rasa);

Select 1 Column (sidebar on top and bottom);

Presentation: Make sure your settings are the same as this screenshot.

Modules: Select Profile (position 2) and Custom Text (position 1);

Text: "Text for the 'Custom Text' heading": your title. "Text for the 'Custom Text' box": your description and links. Make the description at least two sentences long; if it's too short, the icon will stay too close to the title;

Custom Stylesheet CSS: Paste the following in the field: https://fonts.googleapis.com/css?family=Cardo:400,400i|Muli:400,700&display=swap

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

Paste this code in the "Custom CSS" field:

/* Cleaned CSS: */
/* ----- BODY ----- */

::selection{background:#6f6f6f;color:#fff;}
::-moz-selection{background:#6f6f6f;color:#fff;}

body { 
font-family: 'Cardo', serif;
background: #fff url("") repeat fixed; color: #333;
-webkit-filter: grayscale(100%);
filter: grayscale(100%); }

a, a:link, a:hover, a:visited, a:active { text-decoration: none; color: #666; font-family: 'Muli', sans-serif;  }

a:hover { color: #111; text-decoration: none; }

blockquote { padding: 10px; font-style: italic; color: #555;  }

/* ---- CONTENT ---- */

#primary { margin: 0 auto;  }

@media only screen and (min-width: 900px) { #content { margin: 0 auto;  width: 650px; margin-top: 20px; }
#primary { margin: 0 auto;  }
#secondary {}

}

/* ---- PRIMARY ---- */

#primary > .inner { margin-top: 30px; }

.entry { background: #ffffff; }

.entry-title {font-size: 25px; color: #111; font-family: 'Muli', sans-serif; letter-spacing: .15px; }

.entry-title a { color: #111; }

.entry-title a:hover { color: #333;}

.datetime a, .datetime { text-transform: uppercase; font-size: 13px; color: #555; margin-top: -10px !important; display: none; }

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

.header { text-align: left;   }

.entry-content { color: #333; font-size: 16px;  line-height: 1.7em; margin-top: 5px; font-family: 'Cardo', serif; }

ul.entry-interaction-links.text-links { text-align: right; padding-bottom: 10px; text-transform: uppercase; font-family: 'Cardo', serif;}

ul.entry-management-links.icon-links { text-align: right; font-family: 'Cardo', serif; }

img { max-width: 500px; text-align: center; }

/* ---- SECONDARY ---- */

#secondary {  }

.module-section-one > .inner {  display: flex; flex-direction: row;  }

.module-userprofile.module img { border-radius: 100%;  justify-content: center; margin: 15px; margin-left: 45px; }

.userlite-interaction-links.icon-links { display: none; }

.module-customtext.module {  align-self: flex-end; font-family: 'Cardo', serif; }

.userpic img {   }

li.menu { display: inline; }

li.menu:hover {  }

li.menu a { }

li.menu a:hover { }

h2.module-header { text-align: left;  color: #111; font-size: 30px; font-family: 'Muli', sans-serif; }

/* ---- FOOTER ---- */

li.page-back { display: inline; font-family: 'Cardo', serif;  }

li.page-back:hover { }

li.page-back a:hover {}

li.page-forward { display: inline; }

li.page-forward:hover {  }

li.page-forward a:hover { }

/* ---- DISPLAY ---- */

h2#pagetitle, h2#subtitle, #footer, div.navigation.topnav, .tag, .manage-link, div.inner > div.userpic, .module-userprofile.module > h2.module-header, #header, .journal-name  { display: none; }

/* ----- CONTROL STRIP ----- */

/* Controlstrip */

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

#lj_controlstrip td {font: 13px/2 'Cardo', 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: #555; 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 Lora, 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; } }

Flat | Top-Level Comments Only

This is beautiful! Nice work.

Gorgeous!

Oh, this is gorgeous. I've been going a little mad collecting themes for Tumblr - nice to see someone with similar design sensibilities working over here at Dreamwidth, too.

This is great! I'm wondering if there's a place in the custom CSS that I can put something like:

so that images can be turned to colour at hover-over?