suckerlove | LAYOUT : So Long, Lonesome

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!

Threaded | Top-Level Comments Only

So hi, I like this.

fabulous.

Your comments are delightful!

The layout is lovely, you're lovely, everything is lovely <3 I'm gonna use it on a bunch of things

yoinking! will credit ♥

THANK YOU V. MUCH. <333

you are the most fabu. :c

sobs. it honestly gave me grief! haha. dw coding is a beast. haha but tyvm.

NO YOU ARE THE LOVELIESTTTTT. :C

EEE. no worries. ty! ty.

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.

Lovely! So nice and simple <3

This is lovely! Using, thank you! :)

hey -- i'm having a bit of a problem with this (REALLY BEAUTIFUL) layout. i'm using it on this journal, and it looks great, except there's this "top of page" link hovering on the left side of the screen. i haven't touched the code whatsoever, but i know it's not there in the live preview so i'm really confused as to where it came from. do you have any idea about where it came from/how to fix it?

Replying with an RP Journal. :C But basically IDK What happens. it sort of vanishes when you get entries in?

ahh, ok. it's not showing up on my reading page so i guess i'll just wait until i get some entries made, yeah. thanks for replying so promptly!

Yeah! DW code gives me grief. So I HAVE NO IDEA why that happens. TBQH. But it's something i'm going to fix for future layouts uw u!

Lovely layout! adding to memory for the future! :)

LAYOUT : So Long, Lonesome

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject