( layout ) teatime for brittle

[vorador]

teatime
for brittle
( preview )

features fixed sidebar, no modules, alternating post background colours
tested in chrome, firefox
entry pages are not customised

installation

— go to organize - select style, type Brittle in the search box, and pick any one of the styles;
— go to the custom css tab and make sure Use layout's stylesheet(s) is turned off;
— copy and paste this code into the Custom stylesheet URL box:
https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic|Lato:400,400italic,700,700italic
— copy and paste this code into the Use embedded CSS box:
/* ------------------------ THEME BY VORADOR ------------------------ */ /* SCROLLBARS */ ::-webkit-scrollbar {width:12px; height:12px; background:#fff;} ::-webkit-scrollbar-thumb {background:#20b2aa; border:5px solid #fff;} /* GENERAL */ html {margin:0; padding:0; outline:none;} body {background:#fff; font:normal 12px 'Lato'; color:#444; line-height:150%; text-align:center;} a {text-decoration:none; color:#20b2aa; -webkit-transition:.6s; -moz-transition:.6s; -ms-transition:.6s; -o-transition:.6s; transition:all .6s ease;} a:hover {color:#444; -webkit-transition:.6s; -moz-transition:.6s; -ms-transition:.6s; -o-transition:.6s; transition:all .6s ease;} blockquote {margin:10px; padding:5px 10px; border-left:1px solid #20b2aa; max-width:100%; box-sizing:border-box; position:relative; word-wrap:break-word; font:normal 12px 'Lora'; line-height:180%;} img {max-width:100%;} pre, code, input, textarea {white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; font:normal 10px 'Lato'; letter-spacing:1px; margin:10px; padding:10px; width:100%; overflow:auto; background:#f7f7f7; border:0; line-height:180%; width:calc(100% - 40px);} h1, h2, h3, h4, h5, h6 {font-family:'Lato'; font-weight:700; margin:0 0 10px 0; padding:0; display:block;} h1 {font-size:18px;} h2, h3 {font-size:16px;} h4, h5, h6 {font-size:14px;} /* CONTEXTUAL POPUP */ .ContextualPopup {margin:10px 0 0 25px; background:#fff!important; font:normal 11px 'Lato'!important; border:0!important; border-radius:0!important; box-shadow:none!important; padding:10px!important;} div.ContextualPopup .Actions {padding:0; margin-right:60px!important; margin-left:-30px!important; line-height:140%; background-color:#fff!important;} div.ContextualPopup .Relation {font-weight:bold!important; text-transform:uppercase!important; padding:5px 0 0 5px;} .ContextualPopup .Userpic {padding:10px; margin:0px; border:none!important;} .ContextualPopup .Userpic img {width:50px; height:50px; opacity:1; padding:5px; background:#f7f7f7; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.6s ease; transition:all 0.6s ease;} .ContextualPopup .Userpic img:hover {opacity:.6; -webkit-transition:all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.6s ease; transition:all 0.6s ease;} .ContextualPopup .Userpic a, .ContextualPopup .Userpic a:hover {border:none!important;} .ContextualPopup .Actions a{color:#20b2aa!important; text-decoration:none!important; font-weight:lighter!important;} .ContextualPopup .Actions a:hover {color:#444!important; font-weight:lighter!important;} .ContextualPopup ul {margin:0 0 0 30px!important; padding:0; float:left; position:relative;} /* ICONS - LOCKED, PRIVATE, STICKY, NSFW, 18+, TINY ICONS, CUT ICON */ img[src*='collapse.svg'], img[src*='collapseAll.svg'], img[src*='expandAll.svg'] {display:none;} img[src*='user.png'] {width:0; height:0; background:url('https://40.media.tumblr.com/d67657689d29bbda67930210775c77eb/tumblr_inline_nte4bsUKwI1tr4gs8_500.png') top left no-repeat; padding:15px 16px 0 14px;} img[src*='community.png'] {width:0; height:0; background:url('https://40.media.tumblr.com/37059e40a013ba145b2f477abdf2a2bd/tumblr_inline_nte4p5jmIb1tr4gs8_500.png') top left no-repeat; padding:15px 0 0 12px;} span.cuttag_container {text-align:center; font-style:normal!important; color:transparent!important; background:url(http://i.imgur.com/z1ySPWo.gif) no-repeat left center; padding-left:5px; margin-left:10px;} span.cuttag_container a {font-weight:400; font-style:italic; color:#444;} span.cuttag_container a:hover {color:#20b2aa;} .sticky-entry-icon img {display:none;} .sticky-entry-icon:before {content:'PINNED'; font:normal 12px 'Lato'; color:#20b2aa; background:#f7f7f7; padding:5px;} .security-private .entry-title:before {content:'PRIVATE'; font:normal 12px 'Lato'; color:#20b2aa; background:#f7f7f7; margin-right:5px; padding:5px;} .security-custom .entry-title:before {content:'CUSTOM'; font:normal 12px 'Lato'; color:#20b2aa; background:#f7f7f7; margin-right:5px; padding:5px;} .security-protected .entry-title:before {content:'LOCKED'; font:normal 12px 'Lato'; color:#20b2aa; background:#f7f7f7; margin-right:5px; padding:5px;} .access-filter img, .restrictions img {display: none;} .restrictions-NSFW .restrictions:before {content:'NSFW'; font:normal 10px 'Lato'; color:#444; background:#f7f7f7; margin-right:5px; padding:5px;} .restrictions-18 .restrictions:before {content:'18+'; font:normal 10px 'Lato'; color:#444; background:#f7f7f7; margin-right:5px; padding:5px;} .entry-wrapper-even .sticky-entry-icon:before, .entry-wrapper-even .restrictions:before {background:#fff!important;} /* HEADER */ #header {display:none;} /* CONTENT */ #content {width:800px; margin:0 auto; padding:0; text-align:left;} #primary {width:600px; float:left; position:relative; display:inline-block;} #entries {margin:10px auto;} .entry-wrapper {margin-bottom:40px; padding:10px;} .entry-wrapper-odd {background:#fff;} .entry-wrapper-even {background:#f7f7f7;} .entry-wrapper-even .entry-title:before, .entry-wrapper-even span.metadata-label {background:#fff!important;} .header {display:block; margin:5px auto 20px auto; margin-left:70px;} /* container for entry title, date, time, restrictions */ span.datetime {text-transform:uppercase; font-size:9px;} span.time:before {content:'@ ';} .contents {} /*container for entry text, userpic, poster */ .userpic {float:left; position:relative; display:inline-block; margin:-70px 0 0 0;} .userpic img {width:50px; height:50px; padding:5px; background:#f7f7f7;} .entry-wrapper-even .userpic img {background:#fff!important;} span.poster {padding:5px; background:#f7f7f7; font-size:9px; text-transform:uppercase;} span.poster img {display:none;} span.empty {display:none!important;} .entry-wrapper-even span.poster {background:#fff;} .entry-content {margin:20px 0;} .metadata {font-size:10px; display:none;} .metadata ul li {margin:5px 0 5px -40px!important;} li#metadata-mood {list-style-type:none; display:block;} li#metadata-location {list-style-type:none; display:block;} li#metadata-music {list-style-type:none; display:block;} span.metadata-label {padding:5px; background:#f7f7f7; text-transform:uppercase;} .footer {margin:0 0 40px 0; padding:0 0 1px 0; font-size:10px;} /* container for entry tags, links */ .tag ul {margin:0; padding:0;} .tag ul:before {content:'TAGS:'; padding:5px; background:#f7f7f7;} .tag ul li {list-style-type:none; display:inline;} span.tag-text {display:none;} ul.entry-management-links {float:left; position:relative; margin:10px 0 0 0; padding:0;} li.link {list-style-type:none; display:inline-block; padding:5px; text-transform:uppercase; background:transparent!important;} ul.entry-interaction-links {float:right; position:relative; margin:10px 0 0 0; padding:0;} li.entry-permalink, li.entry-replylink, li.entry-readlink {list-style-type:none; display:inline-block; padding:5px; text-transform:uppercase; background:transparent!important;} /* NAVIGATION BAR */ #secondary {float:right; position:fixed; display:inline-block; width:160px; margin-left:40px; padding:20px;} ul.module-list {margin:0; padding:0;} li.module-list-item {list-style-type:none; display:block;} li.module-list-item a {display:block; padding:5px 4px 5px 7px; margin-bottom:1px; background:#f7f7f7; font-size:10px; text-transform:uppercase; letter-spacing:1px;} li.module-list-item a:hover {background:#fff;} .topnav {display:none;} .bottomnav li {list-style-type:none; display:inline-block; background:#f7f7f7; padding:5px; text-transform:uppercase; font-size:10px;} li.page-separator {display:none;} #tertiary, #footer, .module-cuttagcontrols {display:none;} /* ARCHIVE PAGE */ #archive-year .navigation ul li {list-style-type:none; display:inline-block; margin-top:20px; padding:5px; text-transform:uppercase; font-size:10px;} li.active {background:#f7f7f7;} .month .header {display:none;} caption {text-transform:uppercase; letter-spacing:1px; font-size:14px; margin:10px;} thead, tbody {background:#fff; text-align:center;} th {padding:5px; background:#f7f7f7; border:1px solid #fff;} td.day {width:40px; height:40px; background:#f7f7f7; vertical-align:middle; border:1px solid #fff;} td.day-has-entries {background:#20b2aa;} span.label {padding:5px;} td.day p {margin:0; padding:0; font-size:9px;} td.day p a {padding:5px; color:#fff;} td.day p a:hover {color:#444;} .month-wrapper .footer {display:none;} /* TAGS PAGE */ .tags-container {padding:20px 0;} .header h2 {text-transform:uppercase; letter-spacing:1px; font-size:14px; font-weight:400; margin:10px 0 0 -60px;} ul.ljtaglist {margin:0; padding:0;} ul.ljtaglist li {list-style-type:none; display:block; margin-bottom:1px;} ul.ljtaglist li a {display:inline-block; padding:3px 6px; background:#f7f7f7;} ul.ljtaglist a:hover {background:#fff;} ul.tags_multilevel {margin:5px 0 20px 20px; padding:0;} span.non-link-tag {font-size:12px; text-transform:uppercase; letter-spacing:1px;} .manage-link, .tag-nav-trigger {display:none;} /* NAVIGATION STRIP */ #lj_controlstrip a {color:#888;} #lj_controlstrip a:hover {color:#20b2aa;} span#lj_controlstrip_statustext {color:#222;} input#Logout {text-transform:lowercase; letter-spacing:0px; padding:2px 6px;}
— click Save changes and you're done!

theme colours

#fff #444 #f7f7f7 #20b2aa

If you have any questions, don't hesitate to contact me.

Comments

[geckoholic]

Using this for my icon comm, thanks!!

[tropicsbear]

Adding to my memories!

[flammare]

this is gorgeous, thank you!

[chimp]

Loving this! Nice and clean (:

[escaliers]

Added to my memories, I like this one a lot!

[ravynstoneabbey]

Hi! I love the layout & stuck it on my memebox @ buxumsimul Slight problem, the navigation bar on the top is a touch difficult to use. I tried looking through your code for the CSS to fix it, and no dice.

http://i.imgur.com/pvuR9V7.png < screenshot for you.

EDIT: I changed layouts, but thought you would still like to know about the issue.

[vorador]

thanks for pointing this out to me! i literally completely forgot about the navbar. i have it disabled on all my accounts and i've had it turned off for so long i forgot it even exists.

anyway, here's the fix:
#lj_controlstrip a {color:#888;} #lj_controlstrip a:hover {color:#20b2aa;} span#lj_controlstrip_statustext {color:#222;} input#Logout {text-transform:lowercase; letter-spacing:0px; padding:2px 6px;}

[ravynstoneabbey]

Yeah, I just started using it again. I'm going to try the fix and see how it behaves. And edit: MUCH BETTER, thank you!

[vorador]

you're welcome! i'm glad that worked.