Tabula Rasa: Bluer Skies

[baud]

Image Preview


Title: Bluer Skies
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 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), Custom Text (position 2) and Navigation (position 3). 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


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

Paste this code in the "Custom CSS" field:

/* ----- BODY ----- */ body { color: #222; font-family: 'Lato', sans-serif; font-size: 13px; word-wrap: break-word;} img {max-width: 100%; } a, a:link, a:hover, a:visited, a:active { text-decoration: none; color: #002fa7; } a:hover { color: #aaa; } blockquote { padding: 10px; font-style: italic; color: #555; border-bottom: 5px solid #002fa7; } /* ---- CONTENT ---- */ @media only screen and (min-width: 900px) {#canvas{ margin-top: 15px; } #content { width: 800px; } #primary { margin-top: -20px; margin-left: 300px !important; width: 500px; } #secondary { float: left !important; margin-left: 30px;width: 230px;padding: 0; position: fixed; } } #primary { width: 85%; margin: 1em auto; } /* ---- PRIMARY ---- */ div.inner > div.userpic { float: right; margin-top: -45px; position: relative; margin-right: 15px; display: none; } div.inner > div.userpic img { height: 50px; width: 50px; } div.separator { height: 15px; } .entry { background: #ffffff; line-height: 1.7em; margin: 0 auto; } .entry-title { font-size: 15px; text-transform: uppercase; font-weight: 600; margin-bottom: -5px !important;} .entry-title a { font-weight: 400; } .datetime { text-transform: uppercase; font-size: 10px; font-weight: 400; } .header { text-align: left; margin-left: 20px; font-weight: 400; } .entry-content { padding: 15px; color: #222; } ul.entry-interaction-links.text-links { text-align: right; padding-bottom: 10px; text-transform: uppercase;} ul.entry-management-links.icon-links { text-align: right; } .tag { padding: 15px; } .tag-text { text-transform: uppercase; font-weight: 400; letter-spacing: 1px; } /* ---- SECONDARY ---- */ .module-userprofile.module > h2.module-header { display: none; } div.module-content > div.userpic { text-align: center; margin: 0 auto; padding: 0; } div.module-content > div.userpic img { height: 60px; width: 60px; border-radius: 3px; vertical-align: middle;} .journal-name { display: none; } .module-customtext.module > h2.module-header { display: block; font-weight: 400; color: #002fa7; } .module-customtext.module { text-align: center; background: #fff; font-size: 11px; margin-top: 35px; border-bottom: 1px solid #eeeeee; padding: 20px 0; border-top: 1px solid #eeeeee;} ul.module-list { list-style-type: none; text-align: center; text-transform: uppercase; font-size: 11px; padding-top: 15px; letter-spacing: 1px; -moz-column-count: 2; -moz-column-gap: 10px; -webkit-column-count: 2; -webkit-column-gap: 10px; column-count: 2; column-gap: 10px; } li.module-list-item { display: block; } li.module-list-item a { color: #002fa7; } li.module-list-item a:hover { color: #aaa; 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 { color: #333 !important; z-index: 2000; background-color: #fff; background-image: none; padding: 0.5em; text-transform: uppercase; border: 1px solid #f2f2f2; } #lj_controlstrip_userpic { padding-top: 0.5em; padding-left: 0.5em; width: 43px; } #lj_controlstrip td {color: #333 !important; line-height: 1.6em; } #lj_controlstrip_statustext { color: #333 !important; margin-bottom: 0.5em; } #lj_controlstrip input { background-color: #fff; color: #333 !important; padding: 1px 3px; margin: 0; width: auto; text-transform: none; border: 1px solid #f2f2f2;} #lj_controlstrip a { 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, #footer, div.navigation.topnav, .manage-link, ul.userlite-interaction-links.icon-links, .module-typelist.module > h2.module-header { display: none; }

Accent: #002fa7

Comments

[goodbyebird]

This is really nice!

[wishfulclicking]

This looks very nice and clean.

[whichwanderer]

Oooh! Saving this for later!

[kunizuka]

Looks really good! I love simple layouts.

[nowhere]

this is lovely! i love how sleek and clean it is. thanks so much for sharing!

[aroceu]

using this for a comm! very clean, thank you :)

[riskanalyst]

Love this and using it on this journal and on solipsistically I thought a nice way to credit where it's easily visible would be to use the URL for this post in the Links List module in the fourth position. (If you like that, please feel free to add instructions for it in this post for people to credit you!)

Thanks for sharing this!

[seamade]

Nice and simple and very easy to maneuver around -- good job!

[eoa]

How pretty! Thank you <3