LAYOUT | molena (v2)

[manual]

( live preview )
( previous version )

HOW TO:
— If you're using DW's default layout, you're golden. Otherwise, go here and pick one.
— Pick 2 Column (Sidebar on Left) OR 3 Columns (2 Sidebars on Left).
— Under the modules tab, uncheck everything except: Custom Text, Navigation, Profile, and Links List. It should look like this.
— Go to the Custom CSS tab and uncheck the Use Layout's Stylesheet(s) box.
— Copy this whole thing:
/* Molena v2 (layout by manual@dw ) For the Practicality theme */ H1, H2, H3 { margin: .25em 0; padding: .25em 0; } img { opacity: 1; filter: alpha(Opacity=1); } img:hover { border: none; opacity: 0.7; filter: alpha(Opacity=70); -webkit-transition-duration: 0.75s; transition-duration: 0.75s; } hr { display: none; } .entry-content hr, .comment-content hr { display: block; margin: 1em 15%; margin-top: 15px; } body { font-family: 'Helvetica', 'Geneva', sans-serif; font-size: 0.8em; text-align: justify; padding: 10px; background: #efefef url(); color: #333333; background-color: #efefef; font-weight: lighter; } html body { margin-left: 0em; margin-right: 0em; } a, a:active { color: #ff0000; } a:visited, a:hover { color: #cc0000; } q { font-style: italic; } .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; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */ } #content-footer { height: 0; font-size: 0; /*to make IE happy*/ clear: both; } #header, #footer { margin: 0; clear: both; padding: .5em; } #header { background: #000 url(); margin-top: 30px; color: #fff; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } h1#title { font-family: inherit !important; font-size: 2em; font-weight: lighter; margin: 20px 16px 10px 16px; } h2#subtitle, h2#pagetitle { font-family: inherit !important; font-size: 1.5em; margin: 0px 16px; } #footer { background: #333 url(http://i.imgur.com/nmrstVB.png); font-family: inherit !important; font-size: 1.4em; color: #fff; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } #footer a { color: #fff; } #footer a:active { color: #fff; } #footer a:hover { color: #fff; } #footer a:visited { color: #fff; } #primary { float: left; width:100%; margin-top: 20px; margin-right:-100%; } .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: 0; } .navigation li { display: inline; padding: 0 .5em; } .noentries { padding: 0 .5em; color: #000; } /* entries */ .entry { background: #fff; color: #333333; background-color: #fff; box-shadow: 0 0 5px #000; moz-box-shadow: 0 0 5px #000; line-height: 1.2em; } .entry .entry-title { font-family: 'Century Gothic', 'Helvetica', sans-serif; font-size: 1.5em; background-color: #cecece; padding: 10px; } .entry .entry-title, .entry .entry-title a { font-weight: 900; } .entry .entry-title a:hover { color: #ff0000; } .entry a, .entry a:visited, .entry a:hover, .entry a:active { color: #cc0000; } .entry-poster a, .entry-poster a:active, .entry-poster a:hover, .entry-poster a:visited { color: #000; text-transform: lowercase !important; } /* 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: none; list-style: none; margin-left: .5em; padding-top: 10px; padding-left: 0; } .metadata li { margin-bottom: .5em; padding-top: 10px; } .metadata.top-metadata ul { margin: 0; padding-top: 10px; } .metadata.top-metadata { margin-bottom: 1em; padding-top: 10px; } .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; font-family: inherit !important; font-size: 0.8em; margin-left: 0; padding-left: 0; } ul.entry-management-links li { display: inline; padding: 0 .25em; font-family: inherit !important; font-size: 0.8em; } ul.entry-interaction-links { list-style: none; margin-left: 0; padding-left: 0; font-family: inherit !important; font-size: 0.8em; text-align: right; } .entry-interaction-links a { color: #333; } ul.entry-interaction-links li { display: inline; padding: 0 .25em; } /* comments */ .comment-wrapper { padding: .5em 0; } .comment .comment-title, .comment .comment-title a, .comment .comment-title { background: #ececec; color: #000; font-weight: 500; font-family: 'Century Gothic', 'Helvetica', sans-serif; font-size: 1.3em; padding: 10px; margin-top: 20px; } h4.comment-title { font-size: inherit; font-weight: inherit; margin: 0; padding: 0; } ul.comment-management-links { list-style: none; margin-left: 0; padding-left: 0; text-align: center; } ul.comment-management-links li { display: inline; padding: 0 .25em; } ul.comment-interaction-links { list-style: none; margin-left: 0; padding-left: 0; text-align: right; } ul.comment-interaction-links li { display: inline; padding: 0 .25em; } textarea#commenttext { width: 100%; /* fix for FF form width glitch */ } /* archive */ 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; } /* modules */ .module { background: #ffffff; background-color: #ffffff; } .module a, .module a:active { font-family: inherit !important; color: #555; } .module a:hover { font-family: 'Helvetica', 'Geneva', sans-serif; color: #ff0000; } .module a:visited { font-family: 'Helvetica', 'Geneva', sans-serif; color: #333; } .module h2 { color: #333; font-family: 'Helvetica', 'Geneva', sans-serif; text-decoration: italic; font-size: 1.37em; } .module-content { font-family: 'Helvetica', 'Geneva', sans-serif; text-align: justify; padding: 5px; } .module-content ul { list-style: outside; margin-left: 1em; padding-left: 0; } .module-content li { margin: .5em 0; } ul.userlite-interaction-links.icon-links { list-style: none; margin-left: 0; padding-left: 0; text-align: center; } ul.userlite-interaction-links.icon-links li { display: inline; padding: 0 .20em; text-align: center; } ul.userlite-interaction-links.text-links { text-align: left; } .module-calendar .module-content { text-align: center; } .one-column .module-calendar .module-content { text-align: left; } .module-calendar table { margin: 0 auto; } .one-column .module-calendar table { margin: 0; } .module-calendar td { padding: 1px; } .module-calendar td a { display: block; padding: 2px; } .search-box { margin: .2em auto; } /* wrap long content, particularly openid usernames */ .module-pagesummary .ljuser { white-space: normal !important; } .module-pagesummary .module-content { word-wrap: normal; font-size: 1em; margin-left: -20px; text-align: left; } .module-credit dt, .module-credit dd { display: inline; margin: 0; padding: 0; } .module-credit dt { font-weight: lighter; 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; } .entry .userpic, .comment .userpic { text-align: right; } /*--------------------*/ /*--- Practicality ---*/ /*--------------------*/ /*--- Main ---*/ * { margin: 0; padding: 0; } body { margin: 0; } a, a:link, a:visited { text-decoration: none; } p { margin: 1em 0; } input, textarea { background: #ffffff; border: 1px solid #333333; color: #333333; } blockquote { background: #fff url(); color: #333333; margin: 1em 1em 1.5em 3em; padding: 10px; width: 85%; } ul { list-style: square; list-style-position: inside; margin: .2em 0 0 2.5em; } ol { margin: .2em 0 0 2.5em; list-style: decimal; list-style-position: inside; } /*--- Main Containers ---*/ #canvas { width: 90%; margin: 0 auto; } #primary > .inner:first-child { padding: 0; } .column-left #primary > .inner:first-child { padding-left: 1em; } .column-right #primary > .inner:first-child { padding-right: 1em; } #secondary > .inner:first-child, #tertiary > .inner:first-child { padding: 0; } .three-columns-left #secondary > .inner:first-child, .three-columns-right #secondary > .inner:first-child { padding-right: .5em; } .three-columns-left #tertiary > .inner:first-child, .three-columns-right #tertiary > .inner:first-child { padding-left: .5em; } /*--- Journal Header ---*/ #header { padding: .1em .5em; } h1#title { text-transform: lowercase; text-align: center; font-weight: lighter; } h2#subtitle { border: none; color: #ececec; text-transform: lowercase; text-align: center; font-weight: lighter; } h2#pagetitle { border: none; color: transparent; text-transform: uppercase; text-align: center; font-weight: none; } h2#subtitle { margin: -1em 0 0; text-align: center; } #header .module-navlinks { font-family: inherit !important; font-size: 0.9em; background: transparent; border: none; color: #ffffff; text-transform: uppercase; font-weight: lighter; letter-spacing: 0; margin: -1em 0 0; text-align: center; } #header .module-navlinks li { display: inline; padding: 0 1em; } #header .module-navlinks li a { color: #ffffff; } /*--- Journal Navigation ---*/ .navigation { font-family: inherit !important; font-size: 0.9em; background: #transparent; color: #fff; border-bottom: none; text-transform: uppercase; text-align: center; margin: 0 0 15px 0; padding: 5px; } .topnav, .topnav a { display: none; } .bottomnav a { color: #111; } .navigation.empty { display: none; } .page-read .navigation.empty { display: block; padding: 10px; } .page-read .navigation.empty ul { margin: 0; padding: 0; } .page-read .navigation.empty ul li { margin: 0; padding: 0; } /*--- Sidebar ---*/ li.page-separator { display: none; } .module { box-shadow: 0 0 5px #000; moz-box-shadow: 0 0 5px #000; margin-top: 20px; margin-bottom: 15px; padding: 10px; } h2.module-header { border-bottom: 1px solid #111; color: #333; font-size: 1em; text-align: center; text-transform: uppercase; font-weight: lighter; margin: 0 0 10px 0; } h2.module-header a { color: #666; } ul.module-list { list-style: none; } ul.module-list li { padding: 0 0 0 5px; list-style: none; } ul.module-list-item { list-style: none; } ul.module-list-item li { padding: 0 0 0 5px; list-style: none; } div.module-content div.userpic { text-align: center; } div.module-content div.userpic img { background: #111 url(); border: none; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } div.module-content div.userpic img:hover { opacity: 0.7; filter: alpha(Opacity=70); -webkit-transition-duration: 0.75s; transition-duration: 0.75s; } div.journal-name { text-transform: lowercase; margin-top: 5px; text-align: center; } div.journal-website-name { text-transform: lowercase; text-align: center; } ul.userlite-interaction-links.icon-links { margin: 5px 0 0; text-align: left; display: none; } ul.userlite-interaction-links.icon-links li { margin: 0 auto; display: none; } ul.userlite-interaction-links.text-links { padding: 0 0 0 5px; list-style: none; display: none; } div.module-navlinks { color: #222; text-transform: uppercase; font-size: 1em; letter-spacing: 0.1em; list-style: none; text-align: right; } div.module-navlinks a { color: #666; } div.manage-link { margin: 10px 0 0; text-align: right; display: none; } div.module-calendar table { text-align: center; } div.module-calendar th { background: #efefef; color: #666; } div.module-calendar td.empty-day { border: 1px solid #cfcfcf; } div.module-calendar td.entry-day { background: #efefef; border: 1px solid #cfcfcf; } div.module-calendar td.entry-day a { color: #333; } div.module-calendar td.entry-day a:visited { color: #666; } div.module-calendar td.entry-day a:hover { color: #333; } div.module-calendar td.entry-day a:active { color: #333; } /*--- Entries ---*/ div.entry { padding: 25px; margin: 0 0 15px 0; } div.entry-content { margin: 20px 0 0; min-height: 150px; padding: 16px; } div.entry div.header { font-family: inherit !important; font-size: 1.37em; background: transparent !important; font-size: 1em; padding: 5px; width: 100%; } h3.entry-title { font-weight: normal; text-transform: uppercase; color: #000; } h3.entry-title a, h3.entry-title a:active, h3.entry-title a:hover, h3.entry-title a:visited { color: #000; } .datetime { display: inline-block; color: #000; font-size: .75em; text-transform: uppercase; } .datetime a { color: #000; } .has-userpic div.entry div.userpic { width: 100px; height: 100px; margin-top: -75px !important; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .has-userpic div.entry div.userpic img { width: 100px; height: 100px; border: none; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .entry-poster { color: #111; display: block; font-size: .8em; text-transform: uppercase; padding: 5px; margin-top: 10px; margin-bottom: 10px; } .metadata { font-size: .85em; text-transform: uppercase;; margin: 1em 0 0; text-align: right; } div.metadata ul { padding: 0; margin: 0; } div.metadata ul li { padding: 0; margin: 0; } span.metadata-item-location, span.metadata-item-music, span.metadata-item-mood, div.tag ul { color: #333366; text-align: right; padding-top: 20px; } .entry .footer { clear: both; } div.tag { margin: 1em 0 .5em 0; font-size: 0.85em; text-transform: uppercase; padding-top: 30px; } div.tag ul li { margin: .5em 0 0; text-align: right; padding-top: 10px; } ul.entry-management-links { border-top: 1px solid #cfcfcf; margin: .5em 0 0; padding: .5em 0 0; text-align: center; } ul.entry-management-links li { margin: 0 auto; text-align: center; } ul.entry-interaction-links { margin: 0; padding: 0; font-family: 'Helvetica', Geneva, sans-serif; font-size: 0.9em; text-align: right; } ul.entry-interaction-links li, ul.entry-management-links li { color: #333366; font-size: 1.3em; text-transform: uppercase; margin: 0 .5em 0 0; padding: 0; text-align: right; } ul.entry-interaction-links a, ul.entry-interaction-links a:active, ul.entry-interaction-links a:hover, ul.entry-interaction-links a:visited, ul.entry-management-links a, ul.entry-management-links a:active, ul.entry-management-links a:hover, ul.entry-management-links a:visited { text-align: right; color: #333; } /*--- Archive Page ---*/ .month { background: #ffffff; color: #333333; border-bottom: 2px dotted #666; margin: 0 0 1em 0; padding: 2em; } .month a { color: #333366; } .month a:visited { color: #9999cc; } .month a:hover { color: #333366; } .month a:active { color: #333366; } table.month { border-bottom: none; } .month table { margin: auto; width: 100%; } table.month td, table.month th { border: 1px solid #cfcfcf; } .month caption { display: none; } .month h3 { color: #333366; font-size: 1.2em; font-weight: normal; } .month th { background: #efefef; color: #333333; border: 1px solid #cfcfcf; text-align: center; } .month td.day { border: 1px solid #cfcfcf; color: #333333; font-weight: normal; } td.day { padding: 1em; } .month td.day-has-entries { background: #efefef; color: #333333; font-weight: normal; text-align: left; } .month td.day-has-entries p { font-size: 1.14em; font-weight: bold; text-align: right; } .month td.day-has-entries p a { color: #333366; } .month td.day-has-entries p a:visited { color: #9999cc; } .month td.day-has-entries p a:hover { color: #7b82b7; } .month td.day-has-entries p a:active { color: #333366; } /*--- Tags Page ---*/ .page-tags .tags-container { background: #ffffff; color: #333333; border-bottom: 3px solid #666; padding: .5em; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .page-tags .tags-container a { color: #333366; } .page-tags .tags-container a:visited { color: #9999cc; } .page-tags .tags-container a:hover { color: #7b82b7; } .page-tags .tags-container a:active { color: #333366; } .page-tags .tags-container h2 { font-family: 'Helvetica', sans-serif; font-size: 1.37em; color: #000; text-transform: uppercase; font-weight: normal; margin: 0 0 .5em 0; } .page-tags .tags-container .ljtaglist { list-style: none; } /*--- Comments ---*/ hr.above-entry-interaction-links, hr.below-reply-container { display: none; } .comment { background: #ffffff; color: #333333; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; padding: 15px; } .comment a { color: #333; } .comment a:visited { color: #111; } .comment a:hover { color: #ff0000; } .comment a:active { color: #333; } .comment-title, .comment-title a { background: transparent !important; color: #fff; font-family: inherit !important; font-size: 1.3em; text-transform: uppercase; } div.header { } .comment .datetime, .comment .datetime a { background: transparent !important; color: #fff; font-family: inherit !important; font-size: 1.3em; text-transform: uppercase; padding: 4px 20px; margin-top: -40px; } .comment-content { min-height: 100px; padding-top: 20px; border-bottom: 1px solid #cecece; padding-bottom: 10px; } span.multiform-checkbox { padding: 10px 2px; } .comment-poster { color: #333; margin-bottom: .5em; text-transform: uppercase; font-size: .8em; padding: 5px; } .comment-poster a { color: #333366; } .poster-ip { text-transform: uppercase; font-size: .7em; padding: 5px; } textarea.textbox { background: #ffffff; color: #333333; width: 80% !important; } .has-userpic div.comment div.userpic { border: none; display: block; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .has-userpic div.comment div.userpic img { border: none; moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; } .comment-management-links ul, .comment-interaction-links ul { font-size: 0.8em; text-transform: uppercase; text-align: center; } .comment-management-links li, .comment-interaction-links li { font-size: 0.8em; text-transform: uppercase; text-align: center; } .comment-interaction-links li a, .comment-management-links li a { color: #333366; } #qrform table { border: none !important; } .bottomcomment { color: #333333; margin: .5em 0; padding: .7em; display: none; } .bottomcomment a { color: #ff0000; } .bottomcomment a:visited { color: #cc0000; } .bottomcomment a:hover { color: #cc0000; } .bottomcomment a:active { color: #ff0000; } .comment-wrapper-odd .comment .header, .comment-wrapper-even .comment .header { background: transparent !important; } div.comment-pages.toppages, div.comment-pages.toppages a { text-align: center; font-size: 1.2em; font-weight: 600; color: #000; } div.comment-pages.bottompages { display: none; } /*--- Contextual Pop-ups ---*/ div.ContextualPopup { color: #333333; margin: auto; } div.ContextualPopup div.Inner { background: #ffffff; border: 1px solid #cfcfcf; color: #333333; } div.ContextualPopup .Userpic { border: 1px dotted #666; margin: .5em; padding: 0; } div.ContextualPopup .Content { border: 0; color: #333333; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:active { color: #333; text-decoration: none; } div.ContextualPopup .Relation { color: #333333; } /*--- Navigation Bar ---*/ table#lj_controlstrip { background: #000 url(); border: none; color: #fff; } #lj_controlstrip input { background: #ffffff; border: 1px solid #333333; color: #333333; } #lj_controlstrip a { color: #fff; } #lj_controlstrip_statustext { color: #fff; } #lj_controlstrip .ljuser a b { color: #fff; } .has-userpic div.entry div.userpic, .has-userpic div.comment div.userpic { float: right; margin-top: -60px; width: 100px; height: 100px; } .has-userpic div.entry .header { margin-right: 135px; } .has-userpic div.comment .header { margin-right: 135px; }
— Paste the code in, hit save, and you're done.
— MODULES:

If you picked Two Columns, make sure all your modules are on the Main Module Section in the droplist.

For Three Columns, your inner sidebar modules go under Secondary Module Section.
— Custom comment pages are functional, so are the other pages. Should've been mostly cleaned up, code-wise.
— If you want an image background for the header, ctrl+F background: #000 url();, and paste the image URL in the parenthesis.

NOTES:
— Tested on Firefox and Chrome, let me know if it's not working on your browser.
— Feel free to edit, but do not take out the credit line from the layout code.

Comments

[tropicsbear]

Ooooh, nice! Will credit when I use.

[baekh]

I like it. Simple and clean, thank you

[violetsugar]

Thank you so much! :) This is a lovely layout, simple and clean.

[waxbox]

Thanks! Using it here: impalics

[sparr]

What is up with the super wide list left margins? 2.5em on ul and ol seems really excessive.

I would recommend putting a wider variety of HTML in your example screenshots at the very least.