LAYOUT : So Long, Lonesome

[mezzanotte]

live preview: here 01. Change style to PLAIN for TABULA RASA. 02. Go to "Advanced Customization". 03. At the bottom of the page, there's a section called: CHOOSE A PAGE SETUP, change the set-up to: 1 Column (modules at bottom; no sidebar). 04. Go to Modules. Uncheck everything except for: "NAVIGATION" and save changes. 05. Go to Custom CSS. Uncheck: Use Layout's Stylesheet(s) and paste the code below into the section called: 'USE EMBEDDED CSS'. 06. Comments and credit loved, but not required. Feel free to modify and re-distribute! /* SO LONG, LONESOME. CODED BY MEZZANOTTE FOR DW. TABULA RASA : PLAIN THEME : ONE COLUMN ( MODULES AT THE BOTTOM ) : DO NOT USE LAYOUT STYLESHEET. Please disable all modules EXCEPT for the module: "NAVIGATION" for this to work. custom comment pages should be disabled too, it looks p. gross. */ /* MAIN STYLE */ *{ max-width: 96.5%; } a { color: #ccc; font-family: 'Bell Mt'; text-decoration: none; font-size: 14px; } a:hover { color: #eaeaea; border-bottom: #eaeaea dotted 1px; } H1, H2, H3 { margin: .25em 0; padding: .25em 0; } img {opacity:0.8;} hr { display: none; } .entry-content hr, .comment-content hr { display: block; margin: 1em 10%} body { font-size: 14px; padding: 0; font-family: 'Bell Mt';} html body { margin-left: 0em; margin-right: 0em; } q { font-style: italic; } /* "JOURNAL TITLE" OR YOU MEAN SONG LYRICS LBR*/ h1#title {font-family: 'Bell Mt'; font-size: 18px; font-style: italic; letter-spacing: 0.5px; text-transform: uppercase; color: #222222; width: 100%; padding-left: 250px; padding-top: 60px; } h2#subtitle {font-family: 'Century Gothic'; font-size: 9px; font-weight: light; letter-spacing: 5px; text-transform: uppercase; color: #eaeaea; width: 100%; padding-top: -130px; padding-left: 270px;} h2#pagetitle {display: none;} /* ENTRIES GO HEREEEEEEE.*/ .entry, .comment { background: transparent; width: 750px; padding-left: 270px; padding-top: 45px; max-width: 750px; } .entry .entry-title, .entry .entry-title a { font-family: 'Century Gothic'; font-size: 14px; font-weight: light; letter-spacing: 2px; text-transform: uppercase; padding: 3px; border-top: dotted 1px #eaeaea; border-bottom: dotted 1px #eaeaea; } .entry-content, .comment-content, .comment { font-family: 'Bell Mt'; font-size: 14px; padding: 20px 15px;} .entry .entry-title, .comment-title, .comment-title a, .entry .entry-title a { color: #eaeaea; font-size: 14px; text-decoration: none; } .entry a, .entry a:visted, .entry a:active { font-family: 'Bell Mt'; font-size: 14px; text-decoration: none; } .entry a:hover{ font-size: 16px;} .datetime { padding-left: 550px; } .datetime, .datetime a { font-family: 'Bell MT'; font-size: 9px; text-align: right; text-transform: uppercase; color: #ccc; text-decoration: none; } .entry .userpic, .comment .userpic { float: left; margin: -90px 10px 10px -155px; } .entry .userpic img, .comment .userpic img { padding: 5px; border-radius: 50%; opacity:0.8; border: 1px dotted #eaeaea; } /* scroll on by, love child. scroll on by. or dear dw code, stop giving me grief.*/ .one-column #content { float: none; } .two-columns-left #content, .three-columns-sides #content { border-left: 15em solid transparent;} .two-columns-right #content, .three-columns-sides #content { border-right: 15em solid transparent;} .three-columns-left #content { border-left: 30em solid transparent; } .three-columns-right #content { border-right: 30em solid transparent;} .column-right #content {min-width: 15em;} #content-footer {height: 0; font-size: 0; /*to make IE happy*/ clear: both;} #header, #footer {margin: 0; clear: both; padding: .5em;} #header {background: transparent;} #primary {float: left; width:100%; margin-right:-100%; margin-left: 0;} .one-column #primary { float: none; } #primary > .inner:first-child {padding: 1em;} .one-column #secondary { width: auto; } .two-columns-left #secondary, .three-columns-sides #secondary { float: left; width: 15em; margin-left: -15em; } .two-columns-right #secondary {float: right; width: 15em; margin-right: -15em;} .three-columns-left #secondary {float: left;width: 15em;margin-left: -30em;} .three-columns-right #secondary {float: right; width: 15em; margin-right: -15em; } #secondary > .inner:first-child {padding: 1em;} .one-column #tertiary { width: auto; } .two-columns-left #tertiary, .two-columns-right #tertiary { clear: both; } .two-columns-left #tertiary { margin-left: -15em; } .two-columns-right #tertiary { margin-right: -15em; } .two-columns-left #tertiary .module, .two-columns-right #tertiary .module { float: left; width: 15em; } .three-columns-left #tertiary { float: left; width: 15em; margin-left: -15em; } .three-columns-right #tertiary {float: right; width: 15em; margin-right: -30em; margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */ } .three-columns-sides #tertiary { float: right; width: 15em; margin-right: -15em; } #tertiary > .inner:first-child { padding: 1em; } .navigation ul {list-style: none; margin-left: 0; padding-left: 400px;} .navigation li {display: inline; padding: 0 .5em;} .noentries {padding: 0 .5em;} /* To prevent overlapping when icon's on the left */ /* and list is the first thing in content */ .entry-content li, .comment-content li { list-style-position: inside; } .metadata ul { display: inline;list-style: none; margin-left: .5em; padding-left: 0;} .metadata li { margin-bottom: .5em;} .metadata.top-metadata ul { margin: 0;} .metadata.top-metadata {margin-bottom: 1em;} .tag ul {display: inline; list-style: none; margin-left: .5em; padding-left: 0;} .tag ul li {display: inline;padding: .25em;} /* same for month view */ ul.entry-management-links {list-style: none; margin-left: 0; padding-left: 0; } ul.entry-management-links li {display: inline; padding: 0 .25em;} ul.entry-interaction-links {list-style: none; margin-left: 0; padding-left: 270px; padding-top: 20px; padding-bottom: 20px; text-align: right;} ul.entry-interaction-links li { display: inline; padding-left: 0px; .25em;} /* wrap long content, particularly openid usernames */ .module-pagesummary .ljuser { white-space: normal !important;} .module-pagesummary .module-content {word-wrap: break-word;} .module-credit dt, .module-credit dd {display: inline; margin: 0;padding: 0;} .module-credit dt {font-weight: bold;margin-right: 0.5em;} .tags_cloud li, .module-tags_cloud li { display: inline; list-style-type: none; } .module-syndicate .module-content {text-align: center;} .one-column .module-syndicate .module-content {text-align: left;} /* COMMENTS OR FTLOG OF GOD WHY. */ .comment-wrapper {padding-left: 270px; width: 700px; } .comment { padding: 5px; } .comment .header { display: none } .comment .comment-title, .comment .comment-title a {} .comment .comment-title { } .comment-title h4 {font-size: inherit; font-weight: inherit;margin: 0; padding-left: 270px; } ul.comment-management-links {list-style: none; text-align: right;} ul.comment-management-links li {display: inline; padding-left: 270 .25em;} ul.comment-interaction-links {list-style: none;margin-left: 0;padding-left: 270px;} ul.comment-interaction-links li {display: inline;padding: 0 .25em;} textarea#commenttext {width: 100%; /* fix for FF form width glitch */} /* NAVIGATION OR THAT FLOATY THING AT THE BOTTOM */ .module-navlinks { color: #888888; bottom: 0; margin: 0 auto; padding-top: 8px; padding-left: 270px; padding-bottom: 8px; padding-right: auto; position: fixed; width: 100%; z-index: 100; border-top: dotted #eaeaea 1px; } .module-navlinks ul.module-list { display: inline; letter-spacing: 2px; margin: 0 0 0 2em; padding: 0; text-transform: uppercase; font-family: 'Century Gothic'; letter-spacing: 1.5px; font-size: 10px; color: #ccc; text-align: center;} .module-navlinks ul.module-list li {display: inline; list-style: none; margin: 0 1em 0 0; padding: 3px; background: #fff; text-align: center;} .module-navlinks ul.module-list li a { color: #000; text-transform: uppercase; font-family: 'Century Gothic'; letter-spacing: 1px; font-size: 15px; color: #ccc; text-align: center;} .module-navlinks ul.module-list li a:hover {color: #333;} /* ARCHIVE */ div#archive-year { padding-left: 270px; } table.month, .month, .page, { padding: 5px; font-family: 'Bell Mt'; font-size: 14px; color: #ccc; background-color: #fff; } table.month { margin: 0 auto; border-collapse: collapse; } table.month td {height: 3.25em;} table.month td,table.month th {border: 1px solid; /* ??????????? */ padding: 3px;} table.month td p { margin: 0;padding: 3px;} .month dl dt {font-weight: bold;} .month dl span.time {padding-right: .5em;} .month dl h3 {display: inline;font-size: medium;} .page-month .month .entry-poster {margin-right: .5em;} .month dl .tag ul {margin-top: 0;} /* ICONS */ .sorting-options ul { list-style: none; margin-left: 0; } .sorting-options ul li { display: inline; } .keywords ul { display: inline; list-style: none; margin-left: .5em; padding-left: 0; } .keywords ul li { display: inline; padding: .25em;} /* MODULE */ .module {background: #fff;} /* CONTROL STRIPPER. OR THAT FLOATY THING ON THE TOP */ #lj_controlstrip {color: #ccc; font-family: 'Century Gothic'} table#lj_controlstrip td {text-transform: uppercase; background-color: #FFF; border: 0px solid #ffffff;color: #ccc; font-family: 'Century Gothic';} #lj_controlstrip_statustext {color: #ccc;} #lj_controlstrip a {color: #ccc;} #lj_controlstrip input {background-color: #FFF; text-transform: uppercase; padding: 2px;} /* TAGS */ .page-tags h2 { text-transform: uppercase; background-color: #FFF; border: 0px solid #ffffff;color: #ccc; font-family: 'Century Gothic'; } .page-tags .tags-container { padding-left: 270px; } .page-tags .ljtaglist { margin: 0; padding: 0; } .page-tags .ljtaglist li { font-family: 'Century Gothic'; } NOTE: Please disable custom comment pages! Thank you!

Comments

[grackle]

Yeah, sometimes on LJ I can go in and fiddle with the CSS but with Dreamwidth I end up breaking everything. I've partially broken the one I'm using now because Firefox won't display some of the fonts now. CSS baffles me at the best of times.

This layout is really beautiful by the way and I have a comm I plan to use it on.