dreamwidthlayouts | Tabula Rasa: Hexo (Reply)

Image Preview

Title: Hexo
Credit to: This post.

baud.
Base style: Tabula Rasa
Type: CSS
Best resolution: 1920x1080
Tested in: Firefox, Chrome
Notes: This is inspired by the Hexo "Anatole" theme, by CaiCai and Ben02.

Select Plain (Tabula Rasa);

Select 2 Column (sidebar on the left);

Presentation: Erase the numbers in "Set the width of a single sidebar. Ensure that the value is given in em or px." and "For a setup of two sidebars on the side, set the width to twice the value of a single sidebar (also in em or px).". Make sure the fields are blank.

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

Custom Stylesheet CSS: Paste the following in the field: https://fonts.googleapis.com/css?family=Marck+Script|Roboto

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

Paste this code in the "Custom CSS" field:

/* ----- SIDEBAR BACKGROUND ----- */

#secondary {background: url(IMAGE);

width: 40%; background-size: cover;  background-color: #fff; height: 100%; top: 0; left: 0; padding-top: 180px; position: fixed; border-right: 1px solid #f2f2f2; }

/* ----- BODY ----- */

body { margin: 0 auto 30px auto; color: #555; font-family: Roboto, sans-serif; font-size: 15px; width: 100%; background-color: #fff;}

img {max-width: 100%; }

a, a:link, a:hover, a:visited, a:active { text-decoration: none; color: #777; font-weight: bold; }

a:hover { color: #aaa; }

blockquote { padding: 10px; font-style: italic; color: #555; border-bottom: 10px solid #f2f2f2; }

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

#content { height: auto; float: right; width: 60%; }

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

#primary { margin-top: -20px; }

div.inner > div.userpic { float: left; margin-top: -65px; position: relative; margin-left: 15px;  }

div.inner > div.userpic img { height: 60px; width: 60px;  }

div.separator { height: 15px; }

.entry { background: #ffffff; line-height: 1.6em; }

.entry-title { font-size: 20px; text-transform: uppercase; font-family: Roboto; }

.entry-title a {  }

.datetime { text-transform: uppercase; font-size: 13px;                 margin-top: -25px !important; }

.header {  text-align: left; margin-left: 95px;   }

.entry-content { padding: 15px; color: #666; }

ul.entry-interaction-links.text-links { text-align: center; padding-bottom: 10px; text-transform: uppercase;}

ul.entry-management-links.icon-links { text-align: center; }

.tag { padding: 15px; }
.tag-text { text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }

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

div.module-content > div.userpic { text-align: center !important; margin: 35px; }

div.module-content > div.userpic img { transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -webkit-transform: rotate(30deg); border-radius: 15px; border: 5px solid #fff;}

.journal-name { text-align: center; font-size: 50px; color: #f3f3f3; font-family: Marck Script, script; text-transform: capitalize; }

.module-customtext.module { text-align: center; background: #fff; font-size: 15px; padding: 50px; border: 1px solid #f2f2f2; margin: 15px; margin-top: 35px; }

ul.module-list { list-style-type: none; text-align: center; text-transform: uppercase; font-size: 15px; padding-top: 15px; letter-spacing: 1px; } 
li.module-list-item { display: inline; padding-bottom: 8px; margin-left: 5px; }

li.module-list-item a { color: #fff; }
li.module-list-item a:hover { color: #f1f1f1; border-bottom: 2px solid #fff; }

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

li.page-back, li.page-forward { text-transform: uppercase; font-size: 15px; text-align: center; }

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

#lj_controlstrip { z-index: 2000; background-color: #fff; background-image: none; padding: 0.5em; text-transform: uppercase; border: 1px solid #f2f2f2; color: #666 !important; }

#lj_controlstrip_userpic { padding-top: 0.5em; padding-left: 0.5em; width: 43px; }

#lj_controlstrip td { font-family:roboto, sans-serif; line-height: 1.6em; color: #666 !important; }

#lj_controlstrip_statustext { color: #666 !important; font-family: roboto, sans-serif; margin-bottom: 0.5em; }

#lj_controlstrip input { font-family: Roboto, sans-serif; background-color: #fff; color: #666 !important; padding: 1px 3px; margin: 0; width: auto; text-transform: none; border: 1px solid #f2f2f2;}

#lj_controlstrip a { font-family: roboto, sans-serif, sans-serif; color: #999 !important; }

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks { border-right: 1px solid #f2f2f2; }
/* ---- DISPLAY ---- */

h2#pagetitle, h2#subtitle, h1#title, h2.module-header, #footer, div.navigation.topnav, .manage-link, ul.userlite-interaction-links.icon-links { display: none; }

Replace "IMAGE" with your sidebar background. Any resolution will do. If you want to use a pattern instead, replace

#secondary {background: url(IMAGE); 

width: 40%;
background-size: cover;  background-color: #fff; height: 100%; top: 0; left: 0; padding-top: 180px; position: fixed; border-right: 1px solid #f2f2f2; }

with

#secondary {background: url(IMAGE) repeat; 

width: 40%; background-color: #fff; height: 100%; top: 0; left: 0; padding-top: 180px; position: fixed; border-right: 1px solid #f2f2f2; }

The name in the sidebar is the word in your "name" profile field.

Note: Please ignore the purple circle on the bottom right. It's from the Ghostery add-on.

Tabula Rasa: Hexo

Post a comment in response: