Tabula Rasa: Hexo

[baud]

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.

Comments

[misbegotten]

This is really beautiful!

[carisma_sensei]

This is amazing!

[blushiness]

Omg this is so gorgeous and easy to customize! Thank you for sharing!

[shirubia]

This layout is great! I've grabbed it for my journal and I'm crediting you in my profile, hope that's okay :)

[kunizuka]

Awesome layout, thanks for sharing!

[saga]

oh my gosh this is gorgeous!!!

[brighght]

Thank you for the beautiful layout! I've credited you in my profile.

[chottostop]

i'm using this (with credit on my profile). thank you for sharing! this layout is really pretty! ♥

[webzip]

Trying out this layout, thank you for the hard work! Is there a way to hide the

"edit entry, edit tags, add memory, share this entry, track this" icons?

[maxisbea]

this layout is awesome!!!

[mspepperpotts]

Hi!

Is there a way to get the text on the bottom or more centered in the image if I have the display userpic disabled?

[half_witch_half_bitch]

Trying it out for this here witch-type; danke.

[tachycardic]

I love this layout so much I'm using it three different times! Thanks so much!