REN/HEI OTP

#7

2008-09-02T14:06:26Z

A new theme! I love Smooth Sailing, but started to get bored with it. And because the 3 column theme is not a popular one, it seemed a good subject for some experimenting. Plus, tiny icons. I love tiny icons. :3
It seems I can't help but turn every sidebar into a topbar, lmao. :|
Edited on 27th September with another colour scheme.

INFO
Style: S2 - 3 Column For free, paid, plus accounts (ad placement: between entries) Best viewed at 1024*768 or higher Was tested in Firefox and IE6 (it seems to work well with Firefox, in IE6 the comment pages are sometimes buggy) Color scheme credit
INSTALLING THE LAYOUT
1. Go to LJ's customize page. Type '3 Column' in the search box, hit enter, then apply one of the available themes. 2. Go to the Journal display customization page. At the bottom of the page find 'Display link list', and choose 'No' (this is reallyreally important!). Your links will be placed in the blurb part of the sidebar. Here at Blurb text you can put your text and links in the box. 3. Download the tiny icons. Go to the Journal style customization page. At the bottom of the page (under Images) expand the Icon menu, and after you uploaded the tiny icons to your own server, paste the matching urls to the boxes. There is an lj user and lj comm tiny icon in the .zip file, after you uploaded those, you'll find the places to paste them under MISC. Icon credit.) 4. Go to Custom CSS, and select the following: Use layout's stylesheet(s): No Leave the Custom external stylesheet URL box blank. Copy + paste the CSS to the Custom stylesheet box. Hit 'Save changes', and you're done!
CSS
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 3 column - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0; padding: 0; background: #8a8780; font-size: 11px; font-family: "Arial", sans-serif; color: #8a8780; line-height: 17px; } a { color: #e47267; text-decoration: none; } a:hover { color: #b3b2ab; } .ljuser a { color: #b3b2ab; text-transform: uppercase; } .ljuser a:hover { color: #e47267; } blockquote { padding: 7px; border: 2px dotted #f1f1f1; } blockquote:first-line { } #container { position: relative; width: 80%; background: #ffffff; margin: 0 auto; padding: 137px 0 0 0; text-align: left; border-bottom: 9px solid #D7D8C5; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ #header { position:absolute; background-color: ; background-image: url(''); background-repeat: no-repeat; background-position: ; width: 100%; top: 0px; left: 0px; height: ; border-bottom: ; } /------------------------------------ -------------- SIDEBARS -------------- -------------------------------------/ #leftbar { position: absolute; top: 0px; padding: 0; margin: 0; width: 100%; height: 110px; text-align: left; z-index: 0; border-top: 23px solid #E0E1D6; } #rightbar { position: absolute; width: 100%; height: 45px; top: 0; padding: 0; margin: 0; text-align: right; z-index: 15; } #leftbar a, #rightbar a { font-weight: normal; } #leftbar a:hover, #rightbar a:hover { } .sidebox{ margin: 0; padding: 0 0 10px; } h2, li.links_header, .sidebox div a img, .sidebox div span.ljuser { display: none; } div#userpic { display: none; background: #E0E1D6; float: left; height: 79px; width: 74px; padding: 0 4px 4px; margin: 14px 13px 3px 22px; } .userpic{ } div#userpic img { background: #E0E1D6; border: 1px dashed #ffffff; height: 60px; width: 60px; margin: 4px 10px 0 0; padding: 6px; opacity: 0.8; } .blurb { text-align: justify; height: 86px; padding: 26px 20px 0 20px; margin: -44px 0 0 0; background: #D7D8C5; color: #9f9e93; border-top: 1px dashed #fefefe; border-bottom: 1px dashed #fefefe; } .blurb a, .blurb a:visited { display: inline; padding: 2px 0; text-align: right !important; } .blurb a:hover { color: #b3b2ab !important; } ul.links { padding: 7px 17px 0 0; margin: 0; } li.links { list-style-type: none; background: #e47267; display: inline; margin: -14px 0 0 4px; padding: 9px 5px 14px 5px; } li.links a { border-style: dashed; border-width: 0 1px 1px 1px; border-color: #fefefe; color: #fefefe !important; font-family: "Century Gothic", sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 10px 7px 10px; margin: 0; z-index: 20; } li.links a:hover { color: #fae3e1 !important; } .sidebox .calempty, .sidebox .calendarInactive, .sidebox .calendarActive { display: none; margin: 0; padding: 0; font-size: 0 !important; line-height: 0 !important; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ div.systemmessage { padding: 3px; font-size: 13px; text-align: center; background: #E0E1D6; color: #ffffff; margin: 0; font-family: "Century Gothic", sans-serif; letter-spacing: 1px; } div.systemmessage a { font-weight: normal; text-transform: uppercase; } #entries { position: relative; margin: 0; padding: 0; text-align: left; z-index: 1; } div.entry { margin: 0; padding: 10px 20px; border-bottom: 2px dotted #f1f1f1; } h1 { padding: 14px 5px 4px 15px; margin: 0px; text-align: left; color: #E47267; font-size: 16px; font-family: "Century Gothic", sans-serif; letter-spacing: 1px; line-height: 19px; font-weight: normal; border-bottom: 1px solid #eaeaea; } .userpic2{ position: relative; float: left; padding: 4px; background: #E0E1D6; margin: 18px 10px 0 23px; } .userpic2 img { width: 80px; height: 80px; border: 1px dashed #ffffff; padding: 4px; } .aboutentry { width: auto; text-align: left; margin: 0; height: 1%; font-size: 10px; padding: 5px 3px 3px 3px; line-height: 15px; color: #b4b4b4; position: relative; text-transform: lowercase; } .aboutentry img { float: left; padding: 0 3px; } .moodpic{ float: left; padding: 3px; } div.ljtags { position: absolute; top: 0; right: 0; padding: 1px 2px; margin: -1px 0 0 0; width: 220px; line-height: 15px; background: #f8f8f8; border: 1px solid #eaeaea; text-align: left !important; font-size: 9px; text-transform: lowercase; } div.ljtags a { color: #e47267 !important; } div.ljtags a:hover { color: #b3b2ab !important; } div.entrylinks { text-align: left; border-top: 1px solid #eaeaea; line-height: 14px; padding: 3px 10px; margin: 5px 0 0 0; } div.entrylinks a { text-decoration: none; margin: 0; padding: 0 2px; font-weight: normal; font-size: 12px; letter-spacing: 1px; } div.entrylinks a:hover { } div.entrylinks img { border:0px; text-decoration:none; } .entrytext { text-align: justify; padding: 10px; } div.entrytext img { position: relative; } div.entrytext table img { position: static; } /------------------------------------ ------------ FRIENDS PAGE ------------ -------------------------------------/ .comment_wrapper { position: relative; background: #ffffff; margin: 0; padding: 10px 20px; text-align: left; border-bottom: 2px dotted #f2f2f2; } .comment_subject { font-weight: normal; color: #E47267; font-family: "Century Gothic", sans-serif; font-size: 16px; text-transform: lowercase; letter-spacing: 1px; text-align: left; padding: 18px 0 8px 10px; margin: 0 0 4px 0; border-bottom: 1px dotted #dedede; } .comment_postedby { text-align: left; margin: 0; padding: 0 0 0 10px; position: relative; display: inline; } .comment_date { position: relative; text-align: left; margin: 0; padding: 3px 0 3px 10px; color: #b4b4b4; border-bottom: 1px dotted #e7e7e7; } .comment_wrapper .userpic2 { position: relative; float: left; padding: 4px; margin: 10px 8px 0 2px; background: #E0E1D6; z-index: 10; } .comment_wrapper .userpic2 img { width: 80px; height: 80px; padding: 4px; border: 1px dashed #ffffff; } .comment_links { text-align: left; margin: 0; padding: 3px 10px; } .comment_links a { padding: 0 2px; text-decoration: none; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: lowercase; } .comment_links a:hover { } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ div.entryinfo { font-size: 13px; color: #E47267; text-transform: uppercase; padding: 10px 0; text-align: center; } .calendarInactive { text-align:center; margin: 0 1px; padding: 5px; font-size: 12px; border-bottom: 1px solid #f1f1f1; } .calendarActive { text-align: right; padding: 5px; margin: 0 1px; border-bottom: 1px solid #f2f2f2; background: #f8f8f8; } .calendarActive a { font-size: 12px; color: #e47267; font-weight: normal; padding-right: 15px; } .calendarActive a:hover { color: #b3b2ab !important; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ h3{ background: #D7D8C5; padding: 5px 20px; margin: 0; text-align: left; font-size: 20px; font-weight: normal; color: #ffffff !important; font-family: "Century Gothic", sans-serif; text-transform: lowercase; } .comment_child { margin: 0px 0px 0px 20px; } .comment_child .entry { padding: 20px 10px 10px 10px; margin: 0px; } .comment_info { width: 100%; text-align: left; margin: 0; padding: 5px 0 0 0; } .comment_info .comment_postedby { position: relative !important; top: 1px; left: 1px; text-align: left; margin: 0; padding: 0; } .comment_info .comment_date{ text-align: left; margin: 0px; padding: 0px; color: #b4b4b4; width: auto; border: none; } .comment_info .comment_subject { font-weight: bold; font-size: 12px; font-family: "Arial", sans-serif; color: #E47267; text-align: left; padding: 0px; margin: 0px; border: 0px; background-clor: #e3e3e3; } .comment_info img { width: 80px !important; height: 80px !important; float: right !important; padding: 6px; border: 1px solid #eaeaea; } .comment_info .comment_postedby img { display: none !important; } div.commentlinks { font: 8pt Verdana; float: left !important; padding: 0px 10px 0px 0px; } div.commentlinks img { border: 0px !important; text-decoration: none; width: 10px !important; height: 10px !important; float: left !important; padding: 1px; } div.commentlinks a { text-decoration: none; margin: 2px; padding: 0; color: #b8dcb8 !important; } div.commentlinks a:hover { color: #b3b2ab !important; } .comment_child .entrytext { margin-top: 50px !important; } .minicomment { text-align: left; padding: 2px 2px 2px 15px; margin: 7px 0 0 0; } .minicommentholder { border: 1px solid #9ca0a1; } .replyform, #qrform { background-color: #ffffff; padding: 6px; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #ffffff; padding: 1px; border: 1px solid #eaeaea !important; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #ffffff !important; color: #85898d; font-size: 11px; } /-------------------------------------- -------------- TAGS PAGE -------------- ----------------------------------------/ #entries h2 { text-align: left; padding: 20px 0px 0px 50px; } .ljtaglist { text-align: left; margin: 0 50px 0 0; } .ljtaglist li { padding: 4px 4px 4px 16px; border-bottom: 1px solid #eaeaea; list-style-type: none; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ input, textarea { background-color: #ffffff; border: 1px solid #eaeaea !important; color: #9ca0a1; font-family: "Arial", sans-serif; font-size: 10px; } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('ljuser.gif'); /paste the ljuser.gif's url here/ padding: 12px 10px 2px 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('ljuser.gif') !important; /paste the ljuser.gif's url here/ padding: 11px 10px 1x 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('ljcomm.gif') !important; /paste the ljcomm.gif's url here/ padding: 12px 11px 2px 0px !important; } div.ContextualPopup { font: normal 11px "Arial", sans-serif, !important; } div.ContextualPopup img { border: 4px solid #eaeaea; } div.ContextualPopup div.Inner { background-color: #ffffff !important; color: #9ca0a1 !important; border: 1px solid #ebebeb; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #e47267 !important; } div.ContextualPopup div.Inner a:hover { color: #b3b2ab !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #62615e !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #62615e !important; font-family: tahoma; color: #9f9e93; border-bottom: 0px solid #313131 !important; } #lj_controlstrip a { color: #b7b6ac !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #c3c2b8 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #62615e !important; color: #9f9e93; padding: 0; margin: 0; border: 1px solid #737472 !important; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { display: none; } #lj_controlstrip_statustext { font-size: 9px; color: #9f9e93 !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } #readme { text-align: justify; padding: 2px; } .nosubject { font-style: italic; } /-------------------------------------/ Another, blue - brown colour scheme, which I used in my journal for a while: /----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 3 column - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0; padding: 0; background: #8CCDD9; font-size: 11px; font-family: "Arial", sans-serif; color: #868686; line-height: 17px; } a { color: #e36d57; text-decoration: none; } a:hover { color: #8CCDD9; } .ljuser a { color: #8CCDD9; text-transform: uppercase; } .ljuser a:hover { color: #e36d57; } blockquote { padding: 7px; border: 2px dotted #f1f1f1; } blockquote:first-line { } #container { position: relative; width: 80%; background: #ffffff; margin: 0 auto; padding: 137px 0 0 0; text-align: left; border-left: 2px solid #7dc3d1; border-right: 2px solid #7dc3d1; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ #header { position:absolute; background-color: ; background-image: url(''); background-repeat: no-repeat; background-position: ; width: 100%; top: 0px; left: 0px; height: ; border-bottom: ; } /------------------------------------ -------------- SIDEBARS -------------- -------------------------------------/ #leftbar { position: absolute; top: 0px; padding: 0; margin: 0; width: 100%; height: 100px; text-align: left; z-index: 0; border-top: 23px solid #544427; } #rightbar { position: absolute; width: 100%; height: 45px; top: 0; padding: 0; margin: 0; text-align: right; z-index: 15; } #leftbar a, #rightbar a { font-weight: normal; } #leftbar a:hover, #rightbar a:hover { } .sidebox{ margin: 0; padding: 0 0 10px; } h2, li.links_header, .sidebox div a img, .sidebox div span.ljuser { display: none; } div#userpic { display: none; background: #e5dfd3; float: left; height: 79px; width: 74px; padding: 0 4px 4px; margin: 14px 13px 3px 22px; } .userpic{ } div#userpic img { background: #e5dfd3; border: 1px dashed #ffffff; height: 60px; width: 60px; margin: 4px 10px 0 0; padding: 6px; opacity: 0.8; } .blurb { text-align: justify; height: 86px; padding: 26px 20px 0 20px; margin: -44px 0 0 0; background: #4E3E20; color: #9f9e93; border-top: 1px dashed #846D3C; border-bottom: 1px dashed #846D3C; } .blurb a, .blurb a:visited { display: inline; padding: 2px 0; text-align: right !important; } .blurb a:hover { color: #8CCDD9 !important; } ul.links { padding: 7px 20px 0 0; margin: 0; } li.links { list-style-type: none; background: #e36d57; display: inline; margin: -14px 0 0 4px; padding: 9px 5px 14px 5px; } li.links a { border-style: dashed; border-width: 0 1px 1px 1px; border-color: #fefefe; color: #fefefe !important; font-family: "Century Gothic", sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 10px 7px 10px; margin: 0; z-index: 20; } li.links a:hover { color: #f7d3cc !important; } .sidebox .calempty, .sidebox .calendarInactive, .sidebox .calendarActive { display: none; margin: 0; padding: 0; font-size: 0 !important; line-height: 0 !important; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ div.systemmessage { padding: 3px; font-size: 13px; text-align: center; background: #544427; color: #846D3C; margin: 0; font-family: "Century Gothic", sans-serif; letter-spacing: 1px; } div.systemmessage a { font-weight: normal; text-transform: uppercase; } #entries { position: relative; margin: 0; padding: 0; text-align: left; z-index: 1; } div.entry { margin: 0; padding: 10px 20px; border-bottom: 2px dotted #f1f1f1; } h1 { padding: 14px 5px 4px 15px; margin: 0px; text-align: left; color: #e36d57; font-size: 16px; font-family: "Century Gothic", sans-serif; letter-spacing: 1px; line-height: 19px; font-weight: normal; border-bottom: 1px solid #eaeaea; } .userpic2{ position: relative; float: left; padding: 4px; background: #e5dfd3; margin: 18px 10px 0 23px; } .userpic2 img { width: 80px; height: 80px; border: 1px dashed #ffffff; padding: 4px; } .aboutentry { width: auto; text-align: left; margin: 0; height: 1%; font-size: 10px; padding: 5px 3px 3px 3px; line-height: 15px; color: #b4b4b4; position: relative; text-transform: lowercase; } .aboutentry img { float: left; padding: 0 3px; } .moodpic{ float: left; padding: 3px 0; } div.ljtags { position: absolute; top: 0; right: 0; padding: 1px 2px; margin: -1px 0 0 0; width: 220px; line-height: 15px; background: #f8f8f8; border: 1px solid #eaeaea; text-align: left !important; font-size: 9px; text-transform: lowercase; } div.ljtags a { color: #e36d57 !important; } div.ljtags a:hover { color: #8CCDD9 !important; } div.entrylinks { text-align: left; border-top: 1px solid #eaeaea; line-height: 14px; padding: 3px 10px; margin: 5px 0 0 0; } div.entrylinks a { text-decoration: none; margin: 0; padding: 0 2px; font-weight: normal; font-size: 12px; letter-spacing: 1px; } div.entrylinks a:hover { } div.entrylinks img { border:0px; text-decoration:none; } .entrytext { text-align: justify; padding: 10px 15px 10px 25px; } div.entrytext img { position: relative; } div.entrytext table img { position: static; } /------------------------------------ ------------ FRIENDS PAGE ------------ -------------------------------------/ .comment_wrapper { position: relative; background: #ffffff; margin: 0; padding: 10px 20px; text-align: left; border-bottom: 2px dotted #f2f2f2; } .comment_subject { font-weight: normal; color: #e36d57; font-family: "Century Gothic", sans-serif; font-size: 16px; text-transform: lowercase; letter-spacing: 1px; text-align: left; padding: 18px 0 8px 10px; margin: 0 0 4px 0; border-bottom: 1px dotted #dedede; } .comment_subject img { float: left; } .comment_postedby { text-align: left; margin: 0; padding: 0 0 0 10px; position: relative; display: inline; } .comment_date { position: relative; text-align: left; margin: 0; padding: 3px 0 3px 10px; color: #b4b4b4; border-bottom: 1px dotted #e7e7e7; } .comment_wrapper .userpic2 { position: relative; float: left; padding: 4px; margin: 10px 8px 0 2px; background: #e5dfd3; z-index: 10; } .comment_wrapper .userpic2 img { width: 80px; height: 80px; padding: 4px; border: 1px dashed #ffffff; } .comment_links { text-align: left; margin: 0; padding: 3px 10px; } .comment_links a { padding: 0 2px; text-decoration: none; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: lowercase; } .comment_links a:hover { } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ div.entryinfo { font-size: 13px; color: #e36d57; text-transform: uppercase; padding: 10px 0; text-align: center; } .calendarInactive { text-align:center; margin: 0 1px; padding: 5px; font-size: 12px; border-bottom: 1px solid #f1f1f1; } .calendarActive { text-align: right; padding: 5px; margin: 0 1px; border-bottom: 1px solid #f2f2f2; background: #f8f8f8; } .calendarActive a { font-size: 12px; color: #e36d57; font-weight: normal; padding-right: 15px; } .calendarActive a:hover { color: #8CCDD9 !important; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ h3{ background: #D7D8C5; padding: 5px 20px; margin: 0; text-align: left; font-size: 20px; font-weight: normal; color: #ffffff !important; font-family: "Century Gothic", sans-serif; text-transform: lowercase; } .comment_child { margin: 0px 0px 0px 20px; } .comment_child .entry { padding: 20px 10px 10px 10px; margin: 0px; } .comment_info { width: 100%; text-align: left; margin: 0; padding: 5px 0 0 0; } .comment_info .comment_postedby { position: relative !important; top: 1px; left: 1px; text-align: left; margin: 0; padding: 0; } .comment_info .comment_date{ text-align: left; margin: 0px; padding: 0px; color: #b4b4b4; width: auto; border: none; } .comment_info .comment_subject { font-weight: bold; font-size: 12px; font-family: "Arial", sans-serif; color: #e36d57; text-align: left; padding: 0px; margin: 0px; border: 0px; background-clor: #e3e3e3; } .comment_info img { width: 80px !important; height: 80px !important; float: right !important; padding: 6px; border: 1px solid #eaeaea; } .comment_info .comment_postedby img { display: none !important; } div.commentlinks { font: 8pt Verdana; float: left !important; padding: 0px 10px 0px 0px; } div.commentlinks img { border: 0px !important; text-decoration: none; width: 10px !important; height: 10px !important; float: left !important; padding: 1px; } div.commentlinks a { text-decoration: none; margin: 2px; padding: 0; color: #b8dcb8 !important; } div.commentlinks a:hover { color: #8CCDD9 !important; } .comment_child .entrytext { margin-top: 50px !important; } .minicomment { text-align: left; padding: 2px 2px 2px 15px; margin: 7px 0 0 0; } .minicommentholder { border: 1px solid #9ca0a1; } .replyform, #qrform { background-color: #ffffff; padding: 6px; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #ffffff; padding: 1px; border: 1px solid #eaeaea !important; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #ffffff !important; color: #85898d; font-size: 11px; } /-------------------------------------- -------------- TAGS PAGE -------------- ----------------------------------------/ #entries h2 { text-align: left; padding: 20px 0px 0px 50px; } .ljtaglist { text-align: left; margin: 20px 50px 0 50px; padding: 0 0 30px 0; } .ljtaglist li { padding: 4px 4px 4px 16px; border-bottom: 1px solid #eaeaea; list-style-type: none; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ input, textarea { background-color: #ffffff; border: 1px solid #eaeaea !important; color: #9ca0a1; font-family: "Arial", sans-serif; font-size: 10px; } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('ljuser.gif'); /paste the ljuser.gif's url here/ padding: 12px 10px 2px 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('ljuser.gif') !important; /paste the ljuser.gif's url here/ padding: 11px 10px 1x 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('ljcomm.gif') !important; /paste the ljcomm.gif's url here/ padding: 12px 11px 2px 0px !important; } img[src='http://p-stat.livejournal.com/img/icon_protected.gif'] { border: 0; background-image: url('http://img216.imageshack.us/img216/9817/friendsonlyaa9.png'); background-repeat: no-repeat; height: 0; width: 0; padding: 14px 18px 0px 0px !important; } img[src='http://p-stat.livejournal.com/img/icon_private.gif'] { border: 0; background-image: url('http://img218.imageshack.us/img218/4024/privateqq8.png'); background-repeat: no-repeat; height: 0; width: 0; padding: 16px 16px 1px 0px !important; } img[src='http://p-stat.livejournal.com/img/icon_groups.gif'] { border: 0; background-image: url('http://img219.imageshack.us/img219/4908/groupstb0.png'); background-repeat: no-repeat; height: 0; width: 0; padding: 16px 19px 1px 0px !important; } div.ContextualPopup { font: normal 11px "Arial", sans-serif, !important; } div.ContextualPopup img { border: 4px solid #eaeaea; } div.ContextualPopup div.Inner { background-color: #ffffff !important; color: #9ca0a1 !important; border: 1px solid #ebebeb; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #e36d57 !important; } div.ContextualPopup div.Inner a:hover { color: #8CCDD9 !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #62615e !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #62615e !important; font-family: tahoma; color: #9f9e93; border-bottom: 0px solid #313131 !important; } #lj_controlstrip a { color: #b7b6ac !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #c3c2b8 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #62615e !important; color: #9f9e93; padding: 0; margin: 0; border: 1px solid #737472 !important; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { display: none; } #lj_controlstrip_statustext { font-size: 9px; color: #9f9e93 !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } #readme { text-align: justify; padding: 2px; } .nosubject { font-style: italic; } /-------------------------------------/
Notes: If you'd like normal sized userpics, find .userpic2 img and .comment_wrapper .userpic2 img and take out "width: 80px;" and "height: 80px;" If you need a taller topbar, add the same amount of pixels to BASICS - #container - "padding: *137*px 0 0 0;" and SIDEBARS - .blurb - "height: 86px;".
Feel free to edit as much as you'd like, if you have any questions, just ask and I'll gladly help, please credit (!), comments are appreciated. Enjoy! :)

#6 - Black & White (My Chemical Romance layouts)

2008-08-31T00:37:36Z

I had to make a layout with the new(ish) Ryan Russell photos.

INFO
Style: S2 - Smooth Sailing Two versions: light and dark For free, paid, plus accounts (Vertical ad placement doesn't work at all. If you'd like custom comment pages, I suggest horizontal ad placement. If you don't use comment pages, choose horizontal or between entries ad placement. But. If you don't have adblock, the layouts won't look as good. Sorry. ;__;) Best viewed at 1024*768 or higher Was tested in Firefox and IE (it works better with Firefox)
INSTALLING THE LAYOUT
1. Pick a header from below and paste its code into the CSS you chose under .pageheaderblock - background-image (you can find it in the HEADER section). For example if you choose the Gerard header, your .pageheaderblock will look like this. 2. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes. (screencap) 3. Go to the Theme customization page and choose these settings at Presentation: Userinfo Position in Entries: Right side of the entry text Username Position in Entries: Below usericons Username Position in Comments: Below usericons MetaData Position: Below entry text Entry Tags Position: With Metadata (mood, music) 4. Go to Custom CSS, and select the following: Use layout's stylesheet(s): No Use layout's stylesheet(s) when including custom external stylesheet: No Leave the Custom external stylesheet URL box blank. Copy + paste the code to the Custom stylesheet box. (screencap) Hit 'Save changes', and you're done!
CODES
LIGHT
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Arial", sans-serif; font-size: 11px; background-color: #f2f2f2; color: #848484; line-height: 18px; } a { color: #f2f2f2; text-decoration: none; } a:visited { color: #; } a:hover { color: #666666; text-decoration: none; } .ljuser a { color: #666666 !important; text-transform: uppercase !important; } .ljuser a:hover { color: #b8b8b8 !important; } .pageblock { position: relative; width: 820px; margin-left: auto; margin-right: auto; } blockquote { margin: 5px 22x; padding: 4px 10px; border: 1px solid #e0e0e0; } .bodyblock { margin: 0; padding: 0; } .bodyheaderblock { border-top: 0px solid #ffffff; background-color: transparent; } .bodynavblock { text-align: center; background-color: transparent; margin: 15px 0 20px 200px; } .bodynavblock ul { padding: 0; margin: 0; position: relative; z-index: 15 !important; } .bodynavblock li { display: inline; padding: 0px; } .bodynavblock a, .bodynavblock a:visited { padding: 4px; text-align: center; font-weight: normal !important; color: #b8b8b8; } .bodynavblock a:hover { color: #666666; } .body-title, .body-midtitle, .pagefooterblock { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { text-align: left; margin: 0 0 0 200px; background: #ffffff; padding-bottom: 280px; background-image: url('HEADERURL'); /paste your header's url here/ background-repeat: no-repeat; background-position: bottom center; } .header-icon { display: none; } .header-title { margin: 0; padding: 15px 15px 5px 15px; font-size: 19px; color: #666666; letter-spacing: 1px; font-family: "Lucida Sans Unicode", sans-serif; background: #ffffff; text-align: right; } .header-subtitle { margin: 0; padding: 0 15px 15px 15px; font-size: 13px; color: #b8b8b8; letter-spacing: 1px; text-align: right; background: #ffffff; } .header-menu { margin: 0px; text-align: center; background-color: transparent; } .header-menu ul { padding: 5px 0; margin: 0; background-color: #f8f8f8; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .header-menu li { display: inline; background-color: transparent; } .header-menu a, .header-menu a:visited { padding: 5px 7px; text-decoration: none; font-weight: normal; font-size: 10px; text-transform: uppercase; color: #b8b8b8; } .header-menu a:hover { color: #666666; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { position: absolute; background-color: #f2f2f2; top: 30px; left: 0; width: 180px; padding: 0 10px; text-align: left; font-size: 10px; line-height: 17px; color: #999999; } .sidebox { position: relative; padding: 10px 5px; } .sideboxTitle { padding: 3px 0; margin: 0 0 4px 0; font-family: "Lucida Sans Unicode", sans-serif; text-transform: lowercase; font-weight: normal; text-align: center; font-size: 15px; color: #b8b8b8; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; } .sideboxContent { text-align: left; } .sideboxContent a { color: #666666; } .sideboxContent a:hover { color: #b8b8b8; } .sidebox #profile { text-align: center; } .sidebox #freetext { text-align: justify; padding: 0 5px 0 0; } .sidebox #search { padding-top: 5px; margin-left: 11px; } .sidebox #search select, .sidebox #search input { font-size: 11px; background-color: #f2f2f2 !important; color: #999999; padding: 0; margin: 1px; border: 1px solid #dbdbdb !important; } .sidebox #tags_sidebox { text-align: left; padding: 0; line-height: 0px; font-size: 0px; } .sidebox #tags_sidebox a { display: block; font-size: 10px; color: #666666; line-height: 17px; padding: 1px 2px 1px 15px; border-bottom: 1px solid #dbdbdb; } .sidebox #tags_sidebox a:hover { color: #b8b8b8; background: #eeeeee; } .sidebox #systemlinks { text-align: left; display: inline; } .sidebox #latestmonth { text-align: center; text-transform: uppercase; letter-spacing: 1px; letter-spacing: 2px; } .sidebox #latestmonth a { font-weight: bold; margin-bottom: 5px; } .profile-label { display: none; } .profile-userpic { margin: 10px auto 2px auto; padding: 7px; background-color: #f2f2f2; border: 1px solid #dbdbdb; } .profile-content { } .listtitle { border-bottom: 1px solid #dbdbdb; color: #b8b8b8; text-transform: uppercase; padding: 1px 0; margin: 1px 0; text-align: center; letter-spacing: 2px; } .listitem { padding: 0; margin: 0; } .listitem ul { padding: 0; margin: 0 5px 0 0; list-style-type: disc !important; } .listitem li { display: block; } .listitem a { padding: 1px 2px 1px 15px; margin: 0 0 1px 0; display: block; text-transform: lowercase; color: #666666; border-bottom: 1px solid #dbdbdb; } .listitem a:hover { color: #b8b8b8; background-color: #eeeeee !important; } .sidebox #latestmonth table{ padding: 0px; margin-left: auto; margin-right: auto; } .latestmonth-active { padding: 2px 4px; margin: 1px; letter-spacing: 0px; background: #f8f8f8; } .latestmonth-active a { color: #b8b8b8; font-weight: bold; } .latestmonth-active a:hover { color: #666666; } .latestmonth-inactive { padding: 2px 4px; margin: 1px; letter-spacing: 0px; } .summaryList { padding: 1px 2px 1px 15px; border-bottom: 1px solid #dbdbdb; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { padding: 30px 0; margin: 0 0 0 200px; background-color: #ffffff; } .entryHolder a { color: #b8b8b8; } .entryHolder a:hover { color: #666666; } .entryUserinfo { position: relative; margin: -57px 5px 0 4px; text-align: center; padding: 0 2px 5px 10px; background-color: transparent; z-index: 10; float: right; } .entryUserinfo a { color: #b8b8b8; padding: 0 3px 3px 0; } .entryUserinfo a:hover { color: #666666; } .entryUserinfo-usericon img { padding: 8px; margin: 0 0 2px 0; border: 1px solid #e0e0e0; background: #ffffff; } .entryUserinfo-usericon img:hover { opacity: 0.9; } .entryHeader { padding: 0px 15px 4px 15px; margin: 0; text-align: left; text-transform: uppercase; } .entryHeader a { color: #b8b8b8; } .entryHeader a:hover { color: #666666; } .entryHeaderDate { padding: 0; text-align: left; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #b8b8b8; } .entryHeaderDate a { color: #bfbfbf; text-decoration : none; } .entryHeaderDate a:hover { color : #bfbfbf; text-decoration : none; } .entryHeaderSubject { display: block; margin: 4px 0 0 0; padding: 4px 130px 4px 0; border-top: 1px solid #e0e0e0; font-family: "Lucida Sans Unicode", sans-serif; font-size: 18px; font-weight: normal; line-height: 20px; color: #666666; text-transform: none; } .entryHeaderTags { font-size: 9px; font-weight: normal; } .entryText { position: relative; padding: 19px 15px 15px 20px; margin: 0; text-align: justify; } .entryText img { max-width: ; } .entryMetadata { margin: 0 !important; } .entryMetadata ul { margin: 0 0 15px 35px; padding: 0 15px 0 8px; text-transform: lowercase; font-weight: normal; font-size: 10px; } .entryMetadata li { list-style: none; display: block; padding: 0; } .entryMetadata a { } .entryMetadata a:hover { } .entryMetadata-label { letter-spacing: 1px; padding: 0 3px 0 0px; } .entryLinkbar { display: inline; } .entryLinkbar ul { margin: 0 12px; padding: 2px 0; text-align: center; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .entryLinkbar li { display: inline; } .entryLinkbar a { font-weight: normal; font-size: 10px; padding: 4px 6px; text-transform: uppercase; letter-spacing: 1px; color: #666666 !important; } .entryLinkbar a:hover { color: #b8b8b8 !important; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { border: 1px solid #e0e0e0; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 500px; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #e0e0e0; background: #f2f2f2; font-weight: bold; } .day-blank, .day { border: 1px solid #e0e0e0; } .day-date { width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #b8b8b8; } .day-count a:hover { color: #666666; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu { background-color: transparent; margin: 0; position: relative; bottom: 0; } #footer-menu ul { list-style: none; text-align: center; padding: 6px 0; margin: 0 0 15px 200px; background-color: #f8f8f8; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .footer-menu li { display: inline; padding: 0px; margin: 0px; } #footer-menu a, .footer-menu a:visited { position: relative; white-space: nowrap; padding: 5px 8px; display: inline; font-weight: normal; font-size: 10px; color: #b8b8b8 !important; text-transform: uppercase; } #footer-menu a:hover { color: #666666 !important; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { padding: 4px; margin: 1px 0 1px 200px; background: #ffffff; } .commentHolder a { color: #b8b8b8; } .commentHolder a:hover { color: #666666; } .commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; background-color: transparent; } .commentUserinfo a { color: #b8b8b8; } .commentUserinfo a:hover { color: #666666; } .commentUserinfo-usericon img { background-color: transparent !important; padding: 0px; margin: 3px; border: 1px solid #ffffff; } .commentText { padding: 6px; text-align: justify; } .commentHeader { background-color: transparent; color: #666666; padding: 4px 0px 8px 8px; font-size: 12px; letter-spacing: -1px; text-transform: lowercase; } .commentHeader a { color: #848484; } .commentHeaderScreened { padding: 4px 0px 4px 8px; } .commentHeaderSubject { font-weight: bold; text-transform: uppercase; letter-spacing: 0px; color: #b8b8b8; } .commentLinkbar { font-size: 11px; text-transform: lowercase; color: #848484; text-align: right; padding: 2px 0 0 0; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px; margin: 0px; display: inline; } .replyform { background-color: #ffffff; padding: 6px; margin: 0; width: 608px; float: right; } .replyform a { color: #b8b8b8 !important; } .replyform a:hover { color: #666666 !important; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #ffffff; color: #848484 !important; padding: 1px; border: 1px solid #e0e0e0 !important; } #qrform { background-color: #ffffff; padding: 6px; margin: 0; max-width: 608px; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #ffffff !important; color: #848484; font-size: 11px; } #commenttext{ width: 90%; background-color: #ffffff; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable { width: 500px; margin-bottom: 20px; text-align: left; } .tagstable td { border-bottom: 1px solid #e0e0e0; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ input, textarea { background-color: #ffffff; border: 1px solid #e0e0e0 !important; color: #848484 !important; font-family: "Arial", sans-serif; font-size: 11px; } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif'); /paste the url of your ljuser tiny icon here/ padding: 12px 11px 1px 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif') !important; /paste the url of your ljuser tiny icon here/ padding: 11px 12px 1x 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('http://img291.imageshack.us/img291/9130/mcrljcommqx7.gif') !important; /paste the url of your ljcomm tiny icon here/ padding: 13px 11px 0px 0px !important; } div.ContextualPopup { font: normal 11px "Arial", sans-serif, !important; } div.ContextualPopup img { border: 0px solid #e0e0e0; } div.ContextualPopup div.Inner { background-color: #ffffff !important; color: #848484 !important; border: 1px solid #e0e0e0; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #b8b8b8 !important; } div.ContextualPopup div.Inner a:hover { color: #666666 !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #3b3b3b !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #3b3b3b !important; font-family: tahoma; color: #8e8e8e; border-bottom: 0px solid #313131 !important; } #lj_controlstrip a { color: #999999 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #b2b2b2 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #3b3b3b !important; color: #929292; padding: 0; margin: 0; border: 1px solid #505050 !important; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { display: none; } #lj_controlstrip_statustext { font-size: 9px; color: #929292 !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
DARK
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Arial", sans-serif; font-size: 11px; background-color: #282828; color: #848484; line-height: 18px; } a { color: #282828; text-decoration: none; } a:visited { color: #; } a:hover { color: #666666; text-decoration: none; } .ljuser a { color: #666666 !important; text-transform: uppercase !important; } .ljuser a:hover { color: #b8b8b8 !important; } .pageblock { position: relative; width: 820px; margin-left: auto; margin-right: auto; } blockquote { margin: 5px 22x; padding: 4px 10px; border: 1px solid #4a4a4a; } .bodyblock { margin: 0; padding: 0; } .bodyheaderblock { border-top: 0px solid #323232; background-color: transparent; } .bodynavblock { text-align: center; background-color: transparent; padding: 0; margin: 15px 0 20px 200px; } .bodynavblock ul { padding: 0; margin: 0; position: relative; z-index: 15 !important; } .bodynavblock li { display: inline; padding: 0px; } .bodynavblock a, .bodynavblock a:visited { padding: 4px; text-align: center; font-weight: normal !important; color: #b8b8b8; } .bodynavblock a:hover { color: #666666; } .body-title, .body-midtitle, .pagefooterblock { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { text-align: left; margin: 0 0 0 200px; background: #323232; padding-bottom: 280px; background-image: url('HEADERURL'); /paste your header's url here/ background-repeat: no-repeat; background-position: bottom center; } .header-icon { display: none; } .header-title { margin: 0; padding: 15px 15px 5px 15px; font-size: 19px; color: #666666; letter-spacing: 1px; font-family: "Lucida Sans Unicode", sans-serif; background: #323232; text-align: right; } .header-subtitle { margin: 0; padding: 0 15px 15px 15px; font-size: 13px; color: #b8b8b8; letter-spacing: 1px; text-align: right; background: #323232; } .header-menu { margin: 0px; text-align: center; background-color: transparent; } .header-menu ul { padding: 5px 0; margin: 0; background-color: #2c2c2c; border-top: 1px solid #4a4a4a; border-bottom: 1px solid #4a4a4a; } .header-menu li { display: inline; background-color: transparent; } .header-menu a, .header-menu a:visited { padding: 5px 7px; text-decoration: none; font-weight: normal; font-size: 10px; text-transform: uppercase; color: #b8b8b8; } .header-menu a:hover { color: #666666; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { position: absolute; top: 30px; background-color: #282828; left: 0; width: 180px; padding: 0 10px; text-align: left; font-size: 10px; line-height: 17px; color: #999999; } .sidebox { position: relative; padding: 10px 5px; } .sideboxTitle { padding: 3px 0; margin: 0 0 4px 0; font-family: "Lucida Sans Unicode", sans-serif; text-transform: lowercase; font-weight: normal; text-align: center; font-size: 15px; color: #b8b8b8; border-top: 1px solid #424242; border-bottom: 1px solid #424242; } .sideboxContent { text-align: left; } .sideboxContent a { color: #666666; } .sideboxContent a:hover { color: #b8b8b8; } .sidebox #profile { text-align: center; } .sidebox #freetext { text-align: justify; padding: 0 5px 0 0; } .sidebox #search { padding-top: 5px; margin-left: 11px; } .sidebox #search select, .sidebox #search input { font-size: 11px; background-color: #282828 !important; color: #999999; padding: 0; margin: 1px; border: 1px solid #424242 !important; } .sidebox #tags_sidebox { text-align: left; padding: 0; line-height: 0px; font-size: 0px; } .sidebox #tags_sidebox a { display: block; font-size: 10px; color: #666666; line-height: 17px; padding: 1px 2px 1px 15px; border-bottom: 1px solid #424242; } .sidebox #tags_sidebox a:hover { color: #b8b8b8; background: #2d2d2d; } .sidebox #systemlinks { text-align: left; display: inline; } .sidebox #latestmonth { text-align: center; text-transform: uppercase; letter-spacing: 1px; letter-spacing: 2px; } .sidebox #latestmonth a { font-weight: bold; margin-bottom: 5px; } .profile-label { display: none; } .profile-userpic { margin: 10px auto 2px auto; padding: 7px; background-color: #282828; border: 1px solid #424242; } .profile-content { } .listtitle { border-bottom: 1px solid #424242; color: #b8b8b8; text-transform: uppercase; padding: 1px 0; margin: 1px 0; text-align: center; letter-spacing: 2px; } .listitem { padding: 0; margin: 0; } .listitem ul { padding: 0; margin: 0 5px 0 0; list-style-type: disc !important; } .listitem li { display: block; } .listitem a { padding: 1px 2px 1px 15px; margin: 0 0 1px 0; display: block; text-transform: lowercase; color: #666666; border-bottom: 1px solid #424242; } .listitem a:hover { color: #b8b8b8; background-color: #2d2d2d !important; } .sidebox #latestmonth table{ padding: 0px; margin-left: auto; margin-right: auto; } .latestmonth-active { padding: 2px 4px; margin: 1px; letter-spacing: 0px; background: #2d2d2d; } .latestmonth-active a { color: #b8b8b8; font-weight: bold; } .latestmonth-active a:hover { color: #666666; } .latestmonth-inactive { padding: 2px 4px; margin: 1px; letter-spacing: 0px; } .summaryList { padding: 1px 2px 1px 15px; border-bottom: 1px solid #424242; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { padding: 30px 0; margin: 0 0 0 200px; background-color: #323232; } .entryHolder a { color: #b8b8b8; } .entryHolder a:hover { color: #666666; } .entryUserinfo { position: relative; margin: -57px 5px 0 4px; text-align: center; padding: 0 2px 5px 10px; background-color: transparent; z-index: 10; float: right; } .entryUserinfo a { color: #b8b8b8; padding: 0 3px 3px 0; } .entryUserinfo a:hover { color: #666666; } .entryUserinfo-usericon img { padding: 8px; margin: 0 0 2px 0; border: 1px solid #4a4a4a; background: #323232; } .entryUserinfo-usericon img:hover { opacity: 0.8; } .entryHeader { padding: 0px 15px 4px 15px; margin: 0; text-align: left; text-transform: uppercase; } .entryHeader a { color: #b8b8b8; } .entryHeader a:hover { color: #666666; } .entryHeaderDate { padding: 0; text-align: left; font-size: 10px; font-weight: normal; letter-spacing: 1px; color: #b8b8b8; } .entryHeaderDate a { color: #bfbfbf; text-decoration : none; } .entryHeaderDate a:hover { color : #bfbfbf; text-decoration : none; } .entryHeaderSubject { display: block; margin: 4px 0 0 0; padding: 4px 130px 4px 0; border-top: 1px solid #4a4a4a; font-family: "Lucida Sans Unicode", sans-serif; font-size: 18px; font-weight: normal; line-height: 20px; color: #666666; text-transform: none; } .entryHeaderTags { font-size: 9px; font-weight: normal; } .entryText { position: relative; padding: 19px 15px 15px 20px; margin: 0; text-align: justify; } .entryText img { max-width: ; } .entryMetadata { margin: 0 !important; } .entryMetadata ul { margin: 0 0 15px 35px; padding: 0 15px 0 8px; text-transform: lowercase; font-weight: normal; font-size: 10px; } .entryMetadata li { list-style: none; display: block; padding: 0; } .entryMetadata a { } .entryMetadata a:hover { } .entryMetadata-label { letter-spacing: 1px; padding: 0 3px 0 0px; } .entryLinkbar { display: inline; } .entryLinkbar ul { margin: 0 12px; padding: 2px 0; text-align: center; border-top: 1px solid #4a4a4a; border-bottom: 1px solid #4a4a4a; } .entryLinkbar li { display: inline; } .entryLinkbar a { font-weight: normal; font-size: 10px; padding: 4px 6px; text-transform: uppercase; letter-spacing: 1px; color: #666666 !important; } .entryLinkbar a:hover { background: #2e2e2e; color: #b8b8b8 !important; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { border: 1px solid #4a4a4a; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 500px; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #4a4a4a; background: #282828; font-weight: bold; } .day-blank, .day { border: 1px solid #4a4a4a; } .day-date { width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #b8b8b8; } .day-count a:hover { color: #666666; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu { background-color: transparent; margin: 0; position: relative; bottom: 0; } #footer-menu ul { list-style: none; text-align: center; padding: 6px 0; margin: 0 0 15px 200px; background-color: #2c2c2c; border-top: 1px solid #4a4a4a; border-bottom: 1px solid #4a4a4a; } .footer-menu li { display: inline; padding: 0px; margin: 0px; } #footer-menu a, .footer-menu a:visited { position: relative; white-space: nowrap; padding: 5px 8px; display: inline; font-weight: normal; font-size: 10px; color: #b8b8b8 !important; text-transform: uppercase; } #footer-menu a:hover { color: #666666 !important; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { padding: 4px; margin: 1px 0 1px 200px; background: #323232; } .commentHolder a { color: #b8b8b8; } .commentHolder a:hover { color: #666666; } .commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; background-color: transparent; } .commentUserinfo a { color: #b8b8b8; } .commentUserinfo a:hover { color: #666666; } .commentUserinfo-usericon img { background-color: transparent !important; padding: 0px; margin: 3px; border: 1px solid #323232; } .commentText { padding: 6px; text-align: justify; } .commentHeader { background-color: transparent; color: #666666; padding: 4px 0px 8px 8px; font-size: 12px; letter-spacing: -1px; text-transform: lowercase; } .commentHeader a { color: #848484; } .commentHeaderScreened { padding: 4px 0px 4px 8px; } .commentHeaderSubject { font-weight: bold; text-transform: uppercase; letter-spacing: 0px; color: #b8b8b8; } .commentLinkbar { font-size: 11px; text-transform: lowercase; color: #848484; text-align: right; padding: 2px 0 0 0; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px; margin: 0px; display: inline; } .replyform { background-color: #323232; padding: 6px; margin: 0; width: 608px; float: right; } .replyform a { color: #b8b8b8 !important; } .replyform a:hover { color: #666666 !important; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #323232; color: #848484 !important; padding: 1px; border: 1px solid #4a4a4a !important; } #qrform { background-color: #323232; padding: 6px; margin: 0; max-width: 608px; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #323232 !important; color: #848484; font-size: 11px; } #commenttext{ width: 90%; background-color: #323232; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable { width: 500px; margin-bottom: 20px; text-align: left; } .tagstable td { border-bottom: 1px solid #4a4a4a; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ input, textarea { background-color: #323232; border: 1px solid #4a4a4a !important; color: #848484 !important; font-family: "Arial", sans-serif; font-size: 11px; } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif'); /paste the url of your ljuser tiny icon here/ padding: 12px 11px 1px 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif') !important; /paste the url of your ljuser tiny icon here/ padding: 11px 12px 1x 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('http://img291.imageshack.us/img291/9130/mcrljcommqx7.gif') !important; /paste the url of your ljcomm tiny icon here/ padding: 13px 11px 0px 0px !important; } div.ContextualPopup { font: normal 11px "Arial", sans-serif, !important; } div.ContextualPopup img { border: 0px solid #4a4a4a; } div.ContextualPopup div.Inner { background-color: #323232 !important; color: #848484 !important; border: 1px solid #4a4a4a; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #b8b8b8 !important; } div.ContextualPopup div.Inner a:hover { color: #666666 !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #2c2c2c !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #2c2c2c !important; font-family: tahoma; color: #8e8e8e; border-bottom: 1px solid #3a3a3a !important; } #lj_controlstrip a { color: #686868 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #b2b2b2 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #2c2c2c !important; color: #888888; padding: 0; margin: 0; border: 1px solid #3a3a3a !important; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { display: none; } #lj_controlstrip_statustext { font-size: 9px; color: #929292 !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
THE HEADERS
Choose one and paste its url under .pageheaderblock. Also, upload them to your own server, please. All photos are by Ryan Russell. (I'm still bad at making graphics, so feel free to use these as bases, add brushes, text, your username etc. to them.)

NOTES
1. Adding your own header: if you'd like to make your own header, the base codes are fit for 620px280px ones. If you're gonna use a taller header than 280px, edit HEADER - .pageheaderblock - "padding-bottom: 280px;" with the height of your header. If you want to use a pic which is wider than 620px, note how many pixels wider your header graphic is, and add this number to BASICS - .pageblock - "width: 820px;". 2. Hiding the sidebar:* if you don't want a sidebar, find SIDEBAR - .sidebar and write "display: none;" after the bracket. After that replace every "820px" with "620px" and every "200px" with "0" in your text editor. 3. Other color schemes: These layouts are based on really simple color schemes. The easiest way to add some color to them is to replace "#b8b8b8" (the color of the links, sidebox titles, listtitles, entry dates) and "#666666" (the color of the entry subjects, entry links, lj usernames, sidebar links) with your chosen colors hex codes. For example: Light - blue: #666666 -> #3db5d8 and #b8b8b8 -> #98d4e6 Light - orange/blue: #666666 -> #f28339 and #b8b8b8 -> #5bd0de Light - green/red: #666666 -> #79BE00 and #b8b8b8 -> #ED6D4A Dark - blue: #666666 -> #237484 and #b8b8b8 -> #01a9bf Dark - yellow: #666666 -> #796735 and #b8b8b8 -> #c99013 Dark - green: #666666 -> #626a10 and #b8b8b8 -> #889500 4. I used tiny icons. They are now hosted at imageshack. If the link is broken, upload these to your own server: lj user tiny icon, lj comm tiny icon. You'll find their places under MISC (.ljuser img).
Feel free to edit the codes to your liking, if you don't know how to change something, just ask and I'll gladly help, please credit me (!). Enjoy! :)

#5

2008-08-07T00:22:13Z

This layout was inspired by the Boxer theme (I love its clean and organized look), but didn't really end up looking like that. And because my last two layout had a topbar, too, I made a sidebar version as well for this one. Hope you'll like it. :)

INFO
Style: S2 - Smooth Sailing For free, paid, plus accounts (ad placement: between entries) Best viewed at 1024*768 or higher Was tested in Firefox and IE (it works better with Firefox)
INSTALLING THE LAYOUT
1. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap) 2. Go to the Theme customization page and choose these settings at Presentation: Userinfo Position in Entries: Left side of the entry text Username position in entries: Below usericons MetaData Position: Below entry text Entry Tags Position: With Metadata (mood, music) Linkbar Alignment in Entries: Align Right Linkbar Alignment in Comments: Align Right Hit 'Save Changes'. 3. Go to the Sidebar page. If you chose the topbar version, hide every sideboxes, except the Profile Sidebox (=Profile Position), the Freetext Sidebox and the Freetext #2 Sidebox. Paste the matching codes below to the Free Text Sidebox #2 Text box - screencap - (this is important! the easiest way to code was to put the text in one sidebox, and the HTML in the other. The order you set for them doesn't matter.) With the sidebar version you decide about the sideboxes' order/visibility. 4. Go to Custom CSS, and select the following: Use layout's stylesheet(s): No Use layout's stylesheet(s) when including custom external stylesheet: No Leave the Custom external stylesheet URL box blank. Copy + paste the code to the Custom stylesheet box. (screencap) Hit 'Save changes', and you're done!
CODES
TOPBAR VERSION
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Arial", sans-serif; font-size: 11px; background-color: #e5edf7; color: #929292; line-height: 18px; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/bodybg.jpg'); background-positon: top left; background-repeat: repeat; } a { color: #b0d0ee; text-decoration: none; } a:visited { color: #; } a:hover { color: #cacaca; text-decoration: none; } .pageblock { width: 740px; margin-left: auto; margin-right: auto; padding: 0px 0 0 0; background-image: url(''); background-repeat: no-repeat; background-position: top center; } blockquote { margin: 5px 20px 5px 20px; padding: 3px 10px; border-left: 1px dashed #E7EFF8; color: #b0b0b0; } .bodyblock { margin: 0; padding: 138px 0 0 0; background: #fefefe; } .bodyheaderblock { border-top: 0px solid #ffffff; background-color: transparent; } .bodynavblock { text-align: center; background-color: transparent; margin-bottom: 10px; margin-top: 20px; } .bodynavblock ul { margin: 0px; } .bodynavblock li { display: inline; padding: 0px; } .bodynavblock a, .bodynavblock a:visited { color: #949494 !important; padding: 4px; text-align: center; font-weight: normal !important; } .bodynavblock a:hover { display: display: inline; color: #b0b0b0 !important; } .pagefooterblock, .body-title, .body-midtitle { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { text-align: left; padding: 0px; margin: 0px; background-color: #343434; height: 116px; background-image: url('http://img353.imageshack.us/img353/29/boxerpageblpatternan7.jpg'); background-position: top left; background-repeat: repeat; } .header-icon { display: none; } .header-title { font-size: 21px; font-family: "Arial Narrow", "Arial", sans-serif; padding: 0 20px 3px 92px; letter-spacing: 1px; position: absolute; top: 51px; } .header-subtitle { font-size: 11px; font-family: "Tahoma", sans-serif; padding: 0 20px 0 92px; letter-spacing: 2px; position: absolute; top: 85px; } .header-menu { margin: 0px; padding: 0px; text-align: left; background-color: transparent; position: absolute; top: 0px; width: 740px; } .header-menu ul { padding: 11px 0; margin: 0px; background-color: #343434; border-top: 1px dashed #484848; border-bottom: 1px dashed #484848; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/headermenubg.jpg'); background-position: top left; background-repeat: repeat; } .header-menu li { display: inline; background-color: transparent; } .header-menu a, .header-menu a:visited { padding: 11px; color: #949494 !important; text-decoration: none; font-family: "Arial Narrow", "Arial", sans-serif; font-size: 13px; letter-spacing: 1px; font-weight: normal; text-transform: lowercase; border-right: 1px dashed #484848; } .header-menu a:hover { color: #b0b0b0; background-color: #363636; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 740px !important; position: absolute; top: 115px; border-top: 1px dashed #484848; margin: 0 0 0 -740px; background: #343434; text-align: justify; height: 139px !important; } .sidebox { padding: 10px; color: #949494; } .sidebox a { } .sidebox a:hover { color: #a4a4a4; } .sideboxTitle, .sidebox #search, .sidebox #tags_sidebox, .sidebox #summary, .sidebox #systemlinks, .sidebox #latestmonth, .profile-label, .profile-content { display: none; } .sidebox #freetext { padding: 5px 13px 5px 0; margin: 8px 0 0 6px; height: 110px; width: 364px; border-right: 1px dashed #484848; position: absolute; top: 1px; z-index: 1; } .sidebox #freetext2 { position: absolute; top: 8px; left: 401px; width: 333px; } .sidebox #freetext2 a { color: #95b4db; } .sidebox #freetext2 a:hover { color: #afafaf; background: #383838; } .sidebox #profile { text-align: center; width: 150px !important; font-size: 10px; z-index: 10; } .profile-userpic { margin: 5px auto 2px auto; padding: 0; position: absolute; top: -79px; width: 73px; height: 73px; left: 7px; border-right: 1px dashed #484848; border-left: 1px dashed #484848; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { color: #929292; padding: 1px 0 2px 0; background-color: #fefefe; border-top: 1px dashed #E7EFF8; } .entryUserinfo { position: relative; margin: -34px 3px 0 0; text-align: center; padding: 0 2px 5px 10px; background-color: transparent; z-index: 10; width: 129px; } .entryUserinfo a { color: #b0d0ee; padding: 0 3px 3px 0; } .entryUserinfo a:hover { color: #cacaca; } .entryUserinfo-usericon img { padding: 3px; margin: 0 0 2px 0; border: 1px dashed #E7EFF8; } .entryHeader { padding: 20px 15px 6px 0; margin: 7px 0 0 132px; font-family: "Arial", sans-serif; font-weight: bold; font-size: 14px; text-transform: uppercase; text-align: left; color: #dadada; } .entryHeader a { color: #b0d0ee; } .entryHeader a:hover { color: #cacaca; } .entryHeaderDate { letter-spacing: -1px; padding: 0; text-align: left; font-weight: normal; text-transform: lowercase; } .entryHeaderDate a { color: #bfbfbf; text-decoration : none; } .entryHeaderDate a:hover { color : #bfbfbf; text-decoration : none; } .entryHeaderSubject { padding: 0; font-family: "arial", sans-serif; } .entryHeaderTags { font-size: 9px; font-weight: normal; } .entryText { position: relative; padding: 19px 15px 19px 20px; text-align: justify; } .entryText img { max-width: 615px; } .entryMetadata { margin: 0 !important; } .entryMetadata ul { margin: 0 0 0 35px; padding: 0 15px 0 8px; text-transform: lowercase; font-weight: normal; border-left: 1px dashed #E7EFF8; color: #c0c0c0; } .entryMetadata li { list-style: none; display: block; padding: 0; } .entryMetadata a { color: #dadada; } .entryMetadata a:hover { color: #b0d0ee; } .entryMetadata-label { letter-spacing: 1px; padding: 0 3px 0 0px; } .entryLinkbar { display: inline; } .entryLinkbar ul { margin: 0; padding: 10px 15px; text-align: right; } .entryLinkbar li { display: inline; } .entryLinkbar a { font-size: 14px; font-weight: normal; text-transform: lowercase; letter-spacing: -1px; padding: 2px 7px; color: #dadada; } .entryLinkbar a:hover { color: #b0d0ee; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { border: 1px solid #f2f2f2; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 500px; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #f2f2f2; background: #f2f2f2; font-weight: bold; } .day-blank, .day { border: 1px solid #f2f2f2; } .day-date { width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #b0d0ee; } .day-count a:hover { color: #cacaca; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu { background-color: #343434; margin: 0; } #footer-menu ul { list-style: none; text-align: left; padding: 11px 0; margin: 0; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/headermenubg.jpg'); background-position: top left; background-repeat: repeat; } .footer-menu li { display: inline; padding: 0px; margin: 0px; } #footer-menu a, .footer-menu a:visited { position: relative; white-space: nowrap; padding: 11px; border-right: 1px dashed #484848; text-align: center; display: inline; font-family: "Arial Narrow", "Arial", sans-serif; font-size: 13px; letter-spacing: 1px; font-weight: normal; text-transform: lowercase; color: #949494 !important; } #footer-menu a:hover { color: #b0b0b0 !important; background-color: #363636; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { padding: 4px; margin: 0 8px; } .commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; background-color: transparent; } .commentUserinfo a { color: #b0d0ee; } .commentUserinfo a:hover { color: #cacaca; } .commentUserinfo-usericon img { background-color: transparent !important; padding: 3px; margin: 3px; border: 1px dashed #E7EFF8; width: 70px; height: 70px; } .commentText { padding: 6px; text-align: justify; } .commentHeader { background-color: transparent; color: #dadada; padding: 4px 0px 8px 8px; border-top: 1px dashed #E7EFF8; font-size: 12px; letter-spacing: -1px; text-transform: lowercase; } .commentHeader a { color: #85898d; } .commentHeaderScreened { padding: 4px 0px 4px 8px; } .commentHeaderSubject { font-weight: bold; text-transform: uppercase; letter-spacing: 0px; } .commentLinkbar { font-size: 11px; text-transform: lowercase; color: #85898d; text-align: right; padding: 2px 0 0 0; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px; margin: 0px; display: inline; } .replyform, #qrform { background-color: #fefefe; padding: 6px; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #fefefe; padding: 1px; border: 1px solid #eaeaea !important; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #fefefe !important; color: #85898d; font-size: 11px; } #commenttext{ width: 90%; background-color: #fefefe; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable { width: 500px; margin-bottom: 20px; text-align: left; } .tagstable td { border-bottom: 1px solid #eaeaea; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ input, textarea { background-color: #fefefe; border: 1px solid #eaeaea !important; color: #929292; font-family: "Arial", sans-serif; font-size: 11px; } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/ljuser.gif'); padding: 12px 13px 2px 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/ljuser.gif') !important; padding: 11px 13px 1x 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/ljcomm.gif') !important; padding: 12px 13px 2px 0px !important; } div.ContextualPopup { font: normal 11px "Arial", sans-serif, !important; } div.ContextualPopup img { border: 4px solid #eaeaea; } div.ContextualPopup div.Inner { background-color: #fefefe !important; color: #929292 !important; border: 1px dashed #e5edf7; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #b0d0ee !important; } div.ContextualPopup div.Inner a:hover { color: #cacaca !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #2d2d2d !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #2d2d2d !important; font-family: tahoma; color: #929292; border-bottom: 0px solid #313131 !important; } #lj_controlstrip a { color: #727272 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #b2b2b2 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #2d2d2d !important; color: #929292; padding: 0; margin: 0; border: 1px solid #3a3a3a !important; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { display: none; } #lj_controlstrip_statustext { font-size: 9px; color: #929292 !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
Paste these codes to the free text sidebox: <table width="100%" cellpadding="3" cellspacing="7"><tr><td><font size="3">title.</font> <a href="YOURURL">link 01</a> / <a href="YOURURL">link 02</a> / <a href="YOURURL">link 03</a> / <a href="YOURURL">link 04</a> / <a href="YOURURL">link 05</a> / <a href="YOURURL">link 06</a> / <a href="YOURURL">link 07</a> / <a href="YOURURL">link 08</a>.</td></tr><tr><td><font size="3">title.</font> <a href="YOURURL">link 01</a> / <a href="YOURURL">link 02</a> / <a href="YOURURL">link 03</a> / <a href="YOURURL">link 04</a> / <a href="YOURURL">link 05</a> / <a href="YOURURL">link 06</a> / <a href="YOURURL">link 07</a> / <a href="YOURURL">link 08</a>.</td></tr></table> After you edited it with your info, don't forget to take out every enters!
SIDEBAR VERSION
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Arial", sans-serif; font-size: 11px; background-color: #e5edf7; color: #929292; line-height: 18px; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/bodybg.jpg'); background-positon: top left; background-repeat: repeat; } a { color: #b0d0ee; text-decoration: none; } a:visited { color: #; } a:hover { color: #cacaca; text-decoration: none; } .pageblock { width: 880px; margin-left: auto; margin-right: auto; padding: 0px 0 0 0; background-image: url(''); background-repeat: no-repeat; background-position: top center; } blockquote { margin: 5px 20px 5px 20px; padding: 3px 10px; border-left: 1px dashed #E7EFF8; color: #b0b0b0; } .bodyblock { margin: 0 0 -40px 0; padding: 0; background-color: #fefefe; } .bodyheaderblock { border-top: 0px solid #ffffff; background-color: transparent; } .bodynavblock { text-align: center; background-color: transparent; margin-bottom: 50px; margin-top: 15px; } .bodynavblock ul { margin: 0px; position: relative; z-index: 15 !important; } .bodynavblock li { display: inline; padding: 0px; } .bodynavblock a, .bodynavblock a:visited { color: #949494 !important; padding: 4px; text-align: center; font-weight: normal !important; } .bodynavblock a:hover { display: display: inline; color: #b0b0b0 !important; } .pagefooterblock { height: 40px; color: #343434; background: #343434; font-size: 6px; text-align: right; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/headermenubg.jpg'); background-position: top left; background-repeat: repeat; z-index: 1; } .body-title, .body-midtitle { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { text-align: left; padding: 0px; margin: 0px; background-color: #343434; height: 116px; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/pageheaderblbg.jpg'); background-position: top left; background-repeat: repeat; } .header-icon { display: none; } .header-title { font-size: 21px; font-family: "Arial Narrow", "Arial", sans-serif; padding: 0 20px 3px 20px; letter-spacing: 0px; position: absolute; top: 54px; } .header-subtitle { font-size: 11px; font-family: "Tahoma", sans-serif; padding: 0 20px; letter-spacing: 2px; position: absolute; top: 85px; } .header-menu { margin: 0px; padding: 0px; text-align: left; background-color: transparent; position: absolute; top: 0px; width: 880px; } .header-menu ul { padding: 11px 0; margin: 0px; background-color: #343434; border-top: 1px dashed #484848; border-bottom: 1px dashed #484848; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/headermenubg.jpg'); background-position: top left; background-repeat: repeat; } .header-menu li { display: inline; background-color: transparent; } .header-menu a, .header-menu a:visited { padding: 11px; color: #949494 !important; text-decoration: none; font-family: "Arial Narrow", "Arial", sans-serif; font-size: 13px; font-weight: normal; text-transform: lowercase; border-right: 1px dashed #484848; letter-spacing: 1px; } .header-menu a:hover { color: #b0b0b0; background-color: #363636; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 200px; text-align: left; color: #b2b2b2; font-size: 10px; line-height: 15px; } .sidebox { position: relative; padding: 10px 8px; border-bottom: 1px dashed #E7EFF8 !important; width: 92%; } .sideboxTitle { padding: 0 0 3px 0; color: #dadada; font-family: "Arial", sans-serif; text-transform: lowercase; font-weight: normal; text-align: center; font-size: 14px; letter-spacing: -1px; } .sideboxContent { text-align: left; } .sideboxContent a { color: #b0d0ee; } .sideboxContent a:hover { color: #cacaca; } .sidebox #profile { text-align: center; } .sidebox #freetext { text-align: justify; padding: 0 5px 0 0; } .sidebox #search { padding-top: 5px; margin-left: 20px; } .sidebox #search select, .sidebox #search input { font-size: 10px; background-color: #fafafa !important; color: #b2b2b2; padding: 0; margin: 0; border: 1px solid #e8e8e8 !important; letter-spacing: 0px; } .sidebox #tags_sidebox { text-align: left; display: inline; padding: 0 5px; } .sidebox #systemlinks { text-align: left; display: inline; } .sidebox #latestmonth { text-align: center; text-transform: uppercase; } .sidebox #latestmonth a { margin-bottom: 5px; } .profile-label { display: none; } .profile-userpic { margin-left: auto; margin-right: auto; margin-bottom: 2px; padding: 3px; background-color: #fefefe; border: 1px dashed #E7EFF8; } .profile-content { } .listitem, .listitem ul { padding: 0; margin: 0 5px 0 0; } .listitem li { display: block; } .listitem a { padding: 1px 2px 1px 15px; margin: 0 0 2px 0; display: block; text-transform: lowercase; color: #b0d0ee; background: #fafafa !important; border-bottom: 1px solid #f2f2f2; } .listitem a:hover { color: b0d0ee; padding-left: 12px; background-color: #f4f4f4 !important; } .listtitle { color: #d0d0d0; text-transform: uppercase; font-size: 10px; margin: 10px 0 3px 20px; text-align: left; letter-spacing: 2px; } .sidebox #latestmonth table{ padding: 0px; margin-left: auto; margin-right: auto; font-size: 9px; letter-spacing: 1px; } .latestmonth-active { padding: 3px 5px; margin: 1px; letter-spacing: 0px; border-right: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; font-size: 11px; background: #fafafa; } .latestmonth-active a { font-weight: bold; color: #b0d0ee; } .latestmonth-active a:hover { color: #cacaca; } .latestmonth-inactive { padding: 3px 5px; margin: 1px; border-right: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; color: #dedede; background: #fafafa; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { color: #929292; padding: 1px 0 2px 0; background-color: #fefefe; border-top: 1px dashed #E7EFF8; border-right: 1px dashed #E7EFF8; } .entryUserinfo { position: relative; margin: -34px 3px 0 0; text-align: center; padding: 0 2px 5px 10px; background-color: transparent; z-index: 10; width: 129px; } .entryUserinfo a { color: #b0d0ee; padding: 0 3px 3px 0; } .entryUserinfo a:hover { color: #cacaca; } .entryUserinfo-usericon img { padding: 3px; margin: 0 0 2px 0; border: 1px dashed #E7EFF8; } .entryHeader { padding: 20px 15px 6px 0; margin: 7px 0 0 132px; font-family: "Arial", sans-serif; font-weight: bold; font-size: 14px; text-transform: uppercase; text-align: left; color: #dadada; } .entryHeader a { color: #b0d0ee; } .entryHeader a:hover { color: #cacaca; } .entryHeaderDate { letter-spacing: -1px; padding: 0; text-align: left; font-weight: normal; text-transform: lowercase; } .entryHeaderDate a { color: #bfbfbf; text-decoration : none; } .entryHeaderDate a:hover { color : #bfbfbf; text-decoration : none; } .entryHeaderSubject { padding: 0; font-family: "arial", sans-serif; } .entryHeaderTags { font-size: 9px; font-weight: normal; } .entryText { position: relative; padding: 19px 15px 19px 20px; text-align: justify; } .entryText img { max-width: 615px; } .entryMetadata { margin: 0 !important; } .entryMetadata ul { margin: 0 0 10px 35px; padding: 0 15px 0 8px; text-transform: lowercase; font-weight: normal; border-left: 1px dashed #E7EFF8; color: #c0c0c0; } .entryMetadata li { list-style: none; display: block; padding: 0; } .entryMetadata a { color: #dadada; } .entryMetadata a:hover { color: #b0d0ee; } .entryMetadata-label { letter-spacing: 1px; padding: 0 3px 0 0px; } .entryLinkbar { display: inline; } .entryLinkbar ul { margin: 0px; padding: 10px 15px; text-align: right; } .entryLinkbar li { display: inline; } .entryLinkbar a { font-size: 14px; font-weight: normal; text-transform: lowercase; letter-spacing: -1px; padding: 3px 7px; color: #dadada; } .entryLinkbar a:hover { color: #b0d0ee; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { border: 1px solid #f2f2f2; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 500px; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #f2f2f2; background: #f2f2f2; font-weight: bold; } .day-blank, .day { border: 1px solid #f2f2f2; } .day-date { width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #b0d0ee; } .day-count a:hover { color: #cacaca; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu { background-color: transparent; margin: 0; position: relative; bottom: 0; } #footer-menu ul { list-style: none; text-align: left; padding: 11px 0; margin: 0; } .footer-menu li { display: inline; padding: 0px; margin: 0px; } #footer-menu a, .footer-menu a:visited { position: relative; white-space: nowrap; padding: 11px; border-right: 1px dashed #484848; text-align: center; display: inline; font-family: "Arial Narrow", "Arial", sans-serif; font-size: 13px; font-weight: normal; text-transform: lowercase; color: #949494 !important; letter-spacing: 1px; } #footer-menu a:hover { color: #b0b0b0 !important; background-color: #363636; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { padding: 4px; margin: 0 8px; } .commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; background-color: transparent; } .commentUserinfo a { color: #b0d0ee; } .commentUserinfo a:hover { color: #cacaca; } .commentUserinfo-usericon img { background-color: transparent !important; padding: 3px; margin: 3px; border: 1px dashed #E7EFF8; width: 70px; height: 70px; } .commentText { padding: 6px; text-align: justify; } .commentHeader { background-color: transparent; color: #dadada; padding: 4px 0px 8px 8px; border-top: 1px dashed #E7EFF8; font-size: 12px; letter-spacing: -1px; text-transform: lowercase; } .commentHeader a { color: #85898d; } .commentHeaderScreened { padding: 4px 0px 4px 8px; } .commentHeaderSubject { font-weight: bold; text-transform: uppercase; letter-spacing: 0px; } .commentLinkbar { font-size: 11px; text-transform: lowercase; color: #85898d; text-align: right; padding: 2px 0 0 0; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px; margin: 0px; display: inline; } .replyform, #qrform { background-color: #fefefe; padding: 6px; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #fefefe; padding: 1px; border: 1px solid #eaeaea !important; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #fefefe !important; color: #85898d; font-size: 11px; } #commenttext{ width: 90%; background-color: #fefefe; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable { width: 500px; margin-bottom: 20px; text-align: left; } .tagstable td { border-bottom: 1px solid #eaeaea; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ input, textarea { background-color: #fefefe; border: 1px solid #eaeaea !important; color: #929292; font-family: "Arial", sans-serif; font-size: 11px; } .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/ljuser.gif'); padding: 12px 13px 2px 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/ljuser.gif') !important; padding: 11px 13px 1x 0px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/05/ljcomm.gif') !important; padding: 12px 13px 2px 0px !important; } div.ContextualPopup { font: normal 11px "Arial", sans-serif, !important; } div.ContextualPopup img { border: 4px solid #eaeaea; } div.ContextualPopup div.Inner { background-color: #fefefe !important; color: #929292 !important; border: 1px dashed #e5edf7; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #b0d0ee !important; } div.ContextualPopup div.Inner a:hover { color: #cacaca !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #2d2d2d !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #2d2d2d !important; font-family: tahoma; color: #929292; border-bottom: 0px solid #313131 !important; } #lj_controlstrip a { color: #727272 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #b2b2b2 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #2d2d2d !important; color: #929292; padding: 0; margin: 0; border: 1px solid #3a3a3a !important; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { width: 50px; height: 50px; } #lj_controlstrip_statustext { font-size: 9px; color: #929292 !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
These are the images I used for these layouts: .body background, .pageheaderblock background, .header-menu/.footer-menu/.pagefooterblock background, lj user tiny icon, lj comm tiny icon. Please upload them to your own server. Pattern credit: shizoo.frozen-media.de.
Note: The layout right now looks wrong with the navigation strip. If you don't want to turn if off, change the following parts in the CSS: Topbar version HEADER - .header-menu - "top: 0px;" to "top: 45px;" HEADER - .header-title - "top: 51px;" to "top: 96px;" HEADER - .header-subtitle - "top: 85px;" to "top: 130px;" SIDEBAR - .sidebar - "top: 115px;" to "top: 160px;". Sidebar version HEADER - .pageheaderblock - "height 116px;" to "height: 122px;" HEADER - .header-menu - "top: 0px;" to "top: 50px;" HEADER - .header-title: - "top: 54px;" to "top: 104px;" HEADER - .header-subtitle - "top: 85px;" to "top: 135px;".
FREQUENTLY ASKED
1. You chose the topbar one and it looks like this. When you choose the Smooth Sailing theme, make sure that you apply it with the 2 Column (sidebar on right) page setup. 2. How to add a header? Because the headerimage doesn't have its own class (like with FlexiSquares), your header is the background of the body/pageblock/pageheaderblock. This time it will be the background of .pageblock. First, you need to know the height of your header (in pixels). Find this part under pageblock: padding: 0px 0 0 0; background-image: url(''); background-repeat: no-repeat; background-position: top center; and edit it like this: padding: your header's height in pixels 0 0 0; (for example "padding: 300px 0 0 0;") background-image: url('YOURHEADERSURL'); background-repeat: no-repeat; background-position: top center; find HEADER - .header-title - "top: 51px;" and add your header's height (in pixels) to the number. Same with HEADER - .header-subtitle - "top: 85px;" and HEADER - .header-menu - "top: 0px;". If you chose the topbar version, add your header pic's height to SIDEBAR - .sidebar - "top: 115px;", too.
RULES!
1. Credit me. <small><a href="http://allwashedout.livejournal.com/">layout codes</a></small> or something similar. Also, don't repost the codes as your own. 2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask. 3. Enjoy! :)

#4

2008-07-24T19:49:58Z

Similar to the previous one, but I played around a bit more with the topbar.

INFO
Style: S2 - Smooth Sailing For free, paid, plus accounts (placement: horizontal/between entries) Best viewed at 1024*768 or higher Was tested in Firefox and IE (it works better with Firefox)
INSTALLING THE LAYOUT
1. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap) 2. Go to the Theme customization page and choose these settings at Presentation: Userinfo Position in Entries: Right side of the entry text Username position in entries: Below usericons MetaData Position: Below entry text Entry Tags Position: With Metadata (mood, music) Linkbar Alignment in Entries: Align Center Linkbar Alignment in Comments: Align Right Hit 'Save Changes'. 3. On the Sidebar page hide every sideboxes except the Profile Sidebox (= Profile Position), Latest Month Sidebox (= Latest Month Position) and the Freetext Sidebox. Paste the matching codes below to the Free Text Sidebox Text box. 4. Go to Custom CSS, and select the following: Use layout's stylesheet(s): No Use layout's stylesheet(s) when including custom external stylesheet: No Leave the Custom external stylesheet URL box blank. Copy + paste the code to the Custom stylesheet box. (screencap) Hit 'Save changes', and you're done!
THE CODE
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Lucida Sans Unicode", "Arial", sans-serif; font-size: 11px; background-color: #badaeb; color: #949494; } a { color: #6bbfc5; text-decoration: none; } a:visited { color: #; } a:hover { color: #a6a6a6; text-decoration: none; } .ljuser a { font-family: "Arial", sans-serif; text-transform: uppercase; } .pageblock{ margin-left: auto; margin-right: auto; margin-bottom: 0px; width: 880px; } blockquote { margin: 6px 25px; padding: 7px 7px 7px 29px; color: #aeaeae; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/04/blockquote.jpg'); background-position: top left; background-repeat: no-repeat; } .bodyblock { margin: 32px 0 0 0; padding: 180px 0 0 0; } .bodyheaderblock { border-top: 0px solid #ffffff; background-color: transparent; } .bodynavblock { font-size: 13px; font-family: "Arial", sans-serif; text-transform: uppercase; text-align: center; background-color: transparent; margin: 20px 0; } .bodynavblock ul { margin: 0px; } .bodynavblock li { display: inline; padding: 0px; } .bodynavblock a, .bodynavblock a:visited { color: #e08e79 !important; padding: 4px; text-align: center; font-weight: bold !important; } .bodynavblock a:hover { display: display: inline; color: #a4a4a4 !important; } .pagefooterblock, .body-title, .body-midtitle { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { text-align: left; padding: 0px; margin: 0px; background-color: #DF6B52; height: 54px !important; } .header-title { font-size: 21px; padding: 2px 15px 2px 89px; font-family: "Arial", sans-serif; font-weight: normal; color: #f5ded9; letter-spacing: -1px; position: relative; text-align: left; top: 0px; background-color: #DF6B52; } .header-subtitle { font-size: 15px; padding: 1px 15px 3px 89px; font-family: "Trebuchet MS", sans-serif; font-weight: normal; position: relative; color: #EFC6BD; text-align: left; top: 0px; background-color: #DF7C65; } .header-icon { display: none; } .header-menu { position: absolute; top: 52px; margin: 0px !important; padding: 0px; text-align: right; background-color: transparent; width: 880px; } .header-menu ul { padding: 8px 8px 8px 86px; margin: 0px; background-color: #E08E79; } .header-menu li { display: inline; background-color: transparent; } .header-menu a, .header-menu a:visited { padding: 3px 8px; color: #f8f0ee !important; font-weight: normal; text-transform: uppercase; font-family: "Arial", sans-serif; font-size: 10px; } .header-menu a:hover { color: #f1d5ce !important; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 880px !important; position: absolute; top: 80px; margin: 0 0 0 -880px; background: #fbfbfb; text-align: justify; line-height: 18px; height: 155px !important; border-bottom: 2px solid #add2e6; } .sidebox { padding: 10px; color: #949494; } .sidebox a { color: #E08E79; } .sidebox a:hover { color: #a4a4a4; } .sideboxTitle, .sidebox #search, .sidebox #tags_sidebox, .sidebox #summary, .sidebox #systemlinks, .profile-label, .profile-content { display: none; } .sidebox #freetext { padding-right: 170px; position: absolute; top: 4px; z-index: 1; } .sidebox #profile { text-align: center; width: 150px !important; font-size: 10px; z-index: 10; } .profile-userpic { margin: 5px auto 2px auto; padding: 5px; position: absolute; top: -86px; width: 70px; height: 70px; left: 0px; background-color: #DF6B52 !important; } .sidebox #latestmonth { width: 160px; float: right; margin-left: 10px; position: absolute; top: 0px; right: 0px; display: block; height: 155px; background-color: #f1f1f1; z-index: 20; font-family: "Arial", sans-serif; } .sidebox #latestmonth table{ padding: 3px 0 0 0; margin-left: auto; margin-right: auto; text-align: center; font-size: 12px; font-weight: bold; text-transform: uppercase; line-height: 16px; } .latestmonth-active { padding: 3px; font-weight: bold; font-style: italic; margin: 0; letter-spacing: 0px; font-size: 13px; } .latestmonth-active a { color: #6BBFC5; } .latestmonth-active a:hover { color: #a6a6a6; } .latestmonth-inactive { padding: 3px 4px; margin: 0; letter-spacing: 0px; font-weight: normal; color: #bebebe; font-size: 11px; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { color: #949494; padding: 9px 0; background-color: #fbfbfb; margin-bottom: 30px; border-bottom: 2px solid #add2e6; } .entryUserinfo { position: relative; margin-top: -39px; text-align: center; padding: 0; background-color: transparent; z-index: 10; font-size: 11px; font-family: "Arial", sans-serif; } .entryUserinfo a { color: #6bbfc5; padding: 0 0 3px 0; font-weight: bold; text-transform: uppercase; } .entryUserinfo a:hover { color: #a6a6a6; } .entryUserinfo-usericon img { padding: 0; margin: 0 0 2px 10px; border: 7px solid #ececec; } .entryHeader { padding: 6px 124px 3px 20px; font-family: "Lucida Sans Unicode", "Arial", sans-serif; font-weight: bold; text-align: left; text-transform: uppercase; border-bottom: 1px solid #ececec; line-height: 19px; } .entryHeader a { color: #6bbfc5; } .entryHeader a:hover { color: #a6a6a6; } .entryHeaderDate { font-family: "Arial", sans-serif; font-size: 15px; color: #bebebe; padding: 0; text-align: left; font-weight: normal; } .entryHeaderDate a { color : #bfbfbf; text-decoration : none; } .entryHeaderDate a:hover { color : #bfbfbf; text-decoration : none; } .entryHeaderSubject { padding: 0; font-family: "Arial", sans-serif; color: #E08E79; font-size: 15px; text-transform: uppercase; font-weight: bold; letter-spacing: 0px; } .entryHeaderTags { font-size: 9px; font-weight: normal; } .entryText { position: relative; padding: 20px; line-height: 18px; text-align: justify; } .entryText img { max-width: ; } .entryMetadata { margin: 0 !important; } .entryMetadata ul { margin: 0 20px 20px 20px; padding: 0px; text-transform: uppercase; font-family: "Arial", sans-serif; } .entryMetadata li { font-size: 10px; list-style: none; display: block; padding: 2px 0; } .entryMetadata a { color: #b8b8b8; } .entryMetadata a:hover { color: #6bbfc5; } .entryMetadata-label { font-size: 11px; font-weight: bold; padding: 0 3px 0 0px; color: #E08E79; } .entryLinkbar { display: inline; } .entryLinkbar ul { margin: 0; padding: 3px 20px 6px 20px; text-align: center; border-top: 1px solid #ececec; } .entryLinkbar li { display: inline; } .entryLinkbar a { font-family: "Arial", sans-serif; font-size: 12px; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; padding: 2px; margin-left: 11px; color: #bebebe; } .entryLinkbar a:hover { color: #a4a4a4; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { border: 1px solid #e6e6e6; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 500px; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #e6e6e6; background: #e6e6e6; font-weight: bold; } .day-blank, .day { border: 1px solid #e6e6e6; } .day-date { width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #6bbfc5; } .day-count a:hover { color: #a6a6a6; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu { margin: 0; padding: 0; } #footer-menu ul { list-style: none; text-align: center; padding: 0 0 30px 0; } #footer-menu li { display: inline; padding: 0px; margin: 0px; } #footer-menu a, #footer-menu a:visited { position: relative; white-space: nowrap; padding: 8px 10px; text-align: center; display: inline; font-weight: bold !important; text-transform: uppercase; color: #E08E79 !important; font-size: 15px; font-family: "Arial", sans-serif; } #footer-menu a:hover { color: #a4a4a4 !important; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { color: #949494; font-family: "Lucida Sans Unicode", "Arial", sans-serif; font-size: 11px; padding: 2px 8px; margin-bottom: 14px; background-color: #fbfbfb; border-bottom: 2px solid #add2e6; } .commentUserinfo { text-align: center; margin: 8px 8px 8px 0px; background-color: transparent; } .commentUserinfo a { font-family: "Arial", sans-serif; font-weight: bold; color: #6bbfc5; text-transform: uppercase; } .commentUserinfo a:hover { color: #a6a6a6; } .commentUserinfo-usericon img { padding: 0; margin: 3px; border: 7px solid #ececec; } .commentText { padding: 6px; text-align: justify; line-height: 18px; } .commentHeader { color: #e08e79; padding: 4px 8px; font-family: "Arial", sans-serif; font-size: 14px; } .commentHeader a { color: #949494; } .commentHeaderScreened { font-family: ; background-color: #cecece; padding: 2px 0px 2px 8px; } .commentHeaderSubject { font-weight: bold; } .commentLinkbar { font-size: 11px; text-transform: uppercase; color: #949494; text-align: right; padding-top: 4px; padding-bottom: 4px; font-weight: bold; font-family: "Arial", sans-serif; letter-spacing: 1px; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px 0px 5px; margin: 0px; display: inline; } .commentLinkbar a { color: #E08E79; } .commentLinkbar a:hover { color: #a4a4a4; } .replyform, #qrform { background-color: #fbfbfb; padding: 6px; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #fbfbfb; padding: 1px; border: 1px solid #e4e4e4 !important; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #ebebeb !important; color: #949494; font-size: 11px; } #commenttext{ width: 90%; background-color: #fbfbfb; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable { width: 500px; margin-bottom: 20px; text-align: left; } .tagstable td { border-bottom: 1px solid #e8e8e8; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif'); padding: 13px 8px 1px 2px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif') !important; padding: 12px 9px 1x 2px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljcomm.gif') !important; padding: 14px 12px 1px 2px !important; } div.ContextualPopup { font: normal 11px "Lucida Sans Unicode", "Arial", sans-serif, !important; } div.ContextualPopup img { border: 4px solid #e8e8e8; } div.ContextualPopup div.Inner { background-color: #fbfbfb !important; color: #a0a0a0 !important; border: 1px solid #e8e8e8; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #6bbfc5 !important; } div.ContextualPopup div.Inner a:hover { color: #a6a6a6 !important; } #lj_controlstrip { width: 83% !important; z-index: 2 !important; margin: 0 auto; } #lj_controlstrip table { background-color: #badaeb !important; margin: 0; padding: 0; z-index: 2; } #lj_controlstrip td { background-color: #BADAEB !important; font-family: tahoma; color: #75add0; border-bottom: 0px solid #E08E79 !important; width: 280px !important; margin: 0 auto; } #lj_controlstrip a { color: #5594c0 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #3e7fb1 !important; text-decoration: none; } #lj_controlstrip a img { display: none; } #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #badaeb !important; color: #75add0 !important; padding: 0; margin: 0; border: 1px solid #a1cae2; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { width: 0; height: 0; } #lj_controlstrip_statustext { font-size: 9px; color: #75add0 !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
Paste these codes to the free text sidebox: <table width="100%" cellspacing="5" cellpadding="3"><tr><td><font face="Arial" size="3">title.</font> Maecenas tortor felis, ullamcorper nec, vestibulum ut, vulputate eget, lorem. Ut pellentesque mi nec neque. Mauris erat massa. Morbi porta leo vel risus. Vestibulum cursus dapibus est. Aliquam massa est, iaculis a, placerat non, cursus et, sapien. Pellentesque sed eros a ipsum porttitor lobortis. Vestibulum orci lectus, pharetra at, semper vulputate, nonummy vel.</td></tr><tr><td><font face="Arial" size="3">title.</font> <a href="YOURURL">link 01</a>, <a href="YOURURL">link 02</a>, <a href="YOURURL">link 03</a>, <a href="YOURURL">link 04</a>, <a href="YOURURL">link 05</a>, <a href="YOURURL">link 06</a>.</td></tr><tr><td><font face="Arial" size="3">title.</font> <a href="YOURURL">link 01</a>, <a href="YOURURL">link 02</a>, <a href="YOURURL">link 03</a>, <a href="YOURURL">link 04</a>, <a href="YOURURL">link 05</a>, <a href="YOURURL">link 06</a>.</td></tr></table> After you edited it with your info, don't forget to take out every enters!
Note #1: The content width is fixed, it's 880 pixels now. If you'd like to change it, replace every "880px" (there are four of them) with the width you'd like. Note #2: The layout right now looks wrong with the navigation strip. If you don't want to turn if off, change the following parts in the CSS: HEADER - .pageheaderblock - "margin: 0px" to "margin: 10px 0 0 0;" HEADER - .header-subtitle - "top: 0px;" to "top: 4px;" HEADER - .header-menu - "top: 52px;" to "top: 110px;" SIDEBAR - .sidebar - "top: 80px;" to "top: 136px;". It'll look like this.
These are the images I used for the layout: blockquote background, lj user tiny icon, lj comm tiny icon. Please upload them to your own server.
RULES!
1. Credit me. Also, don't repost the codes as your own. 2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask. 3. Enjoy! :)

#3

2008-07-11T21:28:14Z

When making a layout I have a hard time deciding on a color scheme (or the layout doesn't look as pretty as I wanted), and usually end up using black, white and grey. So, more colors this time! The colors I used are pretty muted, but it's a start. Also, the fact that you can put HTML in the free text sideboxes makes coding a topbar so much easier, I love it.

Still Smooth Sailing.

INFO
Style: S2 - Smooth Sailing For free, paid, plus accounts (works well when the ads are between entries.) Best viewed at 1024*768 or higher Was tested in Firefox and IE (it works better with Firefox)
INSTALLING THE LAYOUT
1. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap) 2. Go to the Theme customization page and choose these settings at Presentation: Userinfo Position in Entries: Right side of the entry text Username position in entries: Below usericons MetaData Position: Below entry text Entry Tags Position: With Metadata (mood, music) Linkbar Alignment in Entries: Align Right Linkbar Alignment in Comments: Align Right Hit 'Save Changes'. 3. On the Sidebar page hide every sideboxes except the Profile Sidebox (= Profile Position) and the Freetext Sidebox. Paste the matching codes below to the Free Text Sidebox Text box. 4. Go to Custom CSS, and select the following: Use layout's stylesheet(s): No Use layout's stylesheet(s) when including custom external stylesheet: No Leave the Custom external stylesheet URL box blank. Copy + paste the code to the Custom stylesheet box. (screencap) Hit 'Save changes', and you're done!
THE CODE
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #78726D; color: #808080; } a { color: #71d0c3; text-decoration: none; } a:visited { color: #; } a:hover { color: #b6b6b6; text-decoration: none; } .pageblock{ position: relative; margin-left: auto; margin-right: auto; margin-bottom: 0px; width: 830px; border-left: 2px solid #6d6864; border-right: 2px solid #6d6864; background: url(yourheader) no-repeat top left; padding-top: 0px; } blockquote { margin: 6px 25px; padding: 7px; background-color: #f0fafc; color: #99a4a7; line-height: 16px; font-size: 10px; } .bodyblock { margin: 180px 0 0; padding: 15px 0 0 0; background-color: #fbfbfb; position: relative; } .bodyheaderblock { border-top: 0px solid #ffffff; background-color: transparent; } .bodynavblock { text-align: center; background-color: transparent; margin-bottom: 10px; margin-top: 20px; } .bodynavblock ul { margin: 0px; } .bodynavblock li { display: inline; padding: 0px; } .bodynavblock a, .bodynavblock a:visited { color: #949494 !important; padding: 4px; text-align: center; font-weight: normal !important; } .bodynavblock a:hover { display: display: inline; color: #b0b0b0 !important; } .pagefooterblock, .body-title, .body-midtitle { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { position: relative; text-align: left; padding: 0px; margin: 0px; background-color: #4A4A4A; height: 71px !important; } .header-title { font-size: 26px; padding: 0 0 0 20px; font-family: "Arial", sans-serif; font-weight: normal; color: #c3c3c3; position: relative; letter-spacing: -1px; } .header-subtitle { font-size: 16px; padding: 3px 0 3px 15px; margin-left: 20px; font-family: "Trebuchet MS", sans-serif; font-weight: normal; position: relative; top: -10px; color: #707070; letter-spacing: 2px; } .header-icon { display: none; } .header-menu { margin: 0px !important; padding: 0px; text-align: center; background-color: transparent; position: absolute; top: 52px; width: 100%; } .header-menu ul { padding: 3px 0 3px 0; margin: 0px; background-color: #908d86; } .header-menu li { display: inline; background-color: transparent; } .header-menu a, .header-menu a:visited { padding: 3px 13px; color: #cfcecc !important; font-weight: normal; text-transform: uppercase; } .header-menu a:hover { color: #b8b6b3 !important; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 100% !important; position: absolute; top: -180px; left: 0; margin: 0; background: #e0f0f4; text-align: justify; font-family: Verdana, sans-serif; line-height: 18px; font-size: 11px; height: 180px !important; border-bottom: 7px solid #E9F7FA; } .sidebox { padding: 10px; color: #99a4a7; } .sidebox a { color: #E47267; } .sidebox a:hover { color: #99a4a7; } .sideboxTitle, .sidebox #search, .sidebox #tags_sidebox, .sidebox #summary, .sidebox #latestmonth, .sidebox #systemlinks, .profile-label { display: none; } .sidebox #freetext { width: 670px; float: right; margin-left: 150px; position: absolute; top: 4px; z-index: 1; } .sidebox #profile { text-align: center; width: 150px !important; font-size: 10px; z-index: 10; } .profile-userpic { margin: 5px auto 2px auto; padding: 0px; border: 5px solid #cce2e8; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { color: #808080; padding: 30px 15px; } .entryUserinfo { position: relative; margin-top: -30px; text-align: center; padding: 0px; background-color: transparent; z-index: 10; font-size: 10px; } .entryUserinfo a { color: #71d0c3; padding: 0 3px 3px 0; font-weight: bold; text-transform: uppercase; } .entryUserinfo a:hover { color: #b6b6b6; } .entryUserinfo-usericon img { padding: 4px; margin: 0 0 0px 10px; background-color: #ebebeb; border: 1px solid #ebebeb; } .entryHeader { padding: 0 0 2px 10px; font-family: "Verdana", sans-serif; font-weight: bold; text-align: left; border-bottom: 1px dotted #e9e9e9; text-transform: uppercase; } .entryHeader a { color: #E47267; } .entryHeader a:hover { color: #71d0c3; } .entryHeaderDate { font-family: "Arial", sans-serif; font-size: 9px; text-transform: lowercase; letter-spacing: 1px; color: #cccccc; padding: 0 0 3px 0; text-align: left; font-weight: normal; } .entryHeaderDate a { color : #bfbfbf; text-decoration : none; } .entryHeaderDate a:hover { color : #bfbfbf; text-decoration : none; } .entryHeaderSubject { padding: 2px 136px 0 0; font-family: "Tahoma", sans-serif; color: #fbfbfb; font-size: 17px; text-transform: uppercase; display: block; font-weight: bold; letter-spacing: 0px; } .entryHeaderTags { font-size: 9px; font-weight: normal; } .entryText { position: relative; padding: 15px 5px 15px 10px; line-height: 18px; text-align: justify; } .entryText img { max-width: ; } entryMetadata { margin: 0 !important; } .entryMetadata ul { margin: 0 0 15px 0; padding: 0px; } .entryMetadata li { font-size: 9px; list-style: none; display: block; padding: 2px 0 0 10px; font-family: "Arial", sans-serif; letter-spacing: 1px; } .entryMetadata a { color: #c8c8c8; } .entryMetadata a:hover { color: #71d0c3; } .entryMetadata-label { font-size: 9px; font-family: "Trebuchet MS", sans-serif; text-transform: lowercase; font-weight: bold; padding: 0 3px 0 0px; color: #71D0C3; } .entryLinkbar { display: inline; } .entryLinkbar ul { margin: 0 7px 0 0; padding: 2px 0 10px 0px; text-align: right; border-top: 1px dotted #e9e9e9; } .entryLinkbar li { display: inline; } .entryLinkbar a { font-family: "arial", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; padding: 2px; margin-left: 11px; color: #cccccc; } .entryLinkbar a:hover { color: #71d0c3; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { border: 1px solid #e6e6e6; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 500px; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #e6e6e6; background: #e6e6e6; font-weight: bold; } .day-blank, .day { border: 1px solid #e6e6e6; } .day-date { width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #71d0c3; } .day-count a:hover { color: #b6b6b6; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu { background-color: #4a4a4a; border-top: 7px solid #908d86; margin: 0px; } #footer-menu ul { list-style: none; text-align: center; padding: 8px 0; } .footer-menu li { display: inline; padding: 0px; margin: 0px; } #footer-menu a, .footer-menu a:visited { position: relative; white-space: nowrap; padding: 8px 13px; text-align: center; display: inline; font-weight: normal; text-transform: uppercase; color: #929292 !important; } #footer-menu a:hover { color: #797979 !important; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { color: #808080; font-family: "Verdana", sans-serif; font-size: 11px; padding: 2px 8px; margin-bottom: 5px; } .commentUserinfo { text-align: center; margin: 8px 8px 8px 0px; background-color: transparent; } .commentUserinfo a { font-size: 10px; color: #71d0c3; } .commentUserinfo a:hover { color: #b6b6b6; } .commentUserinfo-usericon img { background-color: #ebebeb !important; padding: 4px; margin: 3px; border: 1px solid #ebebeb; } .commentText { padding: 6px; text-align: justify; line-height: 18px; } .commentHeader { color: #E47267; padding: 4px 8px; font-family: "Verdana", sans-serif; font-size: 12px; border-top: 1px dotted #e0e0e0; } .commentHeader a{ color: #808080; } .commentHeaderScreened { font-family: ; background-color: #cecece; padding: 2px 0px 2px 8px; } .commentHeaderSubject { font-weight: bold; } .commentLinkbar { font-size: 11px; text-transform: uppercase; color: #808080; text-align: right; padding-top: 4px; padding-bottom: 4px; font-weight: bold; font-family: "Arial", sans-serif; letter-spacing: 1px; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px 0px 5px; margin: 0px; display: inline; } .commentLinkbar a { color: #cccccc; } .commentLinkbar a:hover { color: #71d0c3; } .replyform, #qrform { background-color: #fbfbfb; padding: 6px; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #fbfbfb; padding: 1px; border: 1px solid #e4e4e4 !important; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #ebebeb !important; color: #808080; font-size: 11px; } #commenttext{ width: 90%; background-color: #fbfbfb; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable { width: 500px; margin-bottom: 20px; text-align: left; } .tagstable td { border-bottom: 1px solid #e8e8e8; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif'); padding: 13px 8px 1px 2px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif') !important; padding: 12px 9px 1x 2px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljcomm.gif') !important; padding: 14px 12px 1px 2px !important; } div.ContextualPopup { font: normal 11px "Verdana", sans-serif, !important; } div.ContextualPopup img { border: 4px solid #e8e8e8; } div.ContextualPopup div.Inner { background-color: #fbfbfb !important; color: #a0a0a0 !important; border: 1px solid #e8e8e8; padding: 3px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: normal; color: #71d0c3 !important; } div.ContextualPopup div.Inner a:hover { color: #b6b6b6 !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #4a4a4a !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #4a4a4a !important; font-family: tahoma; color: #808080; border-bottom: 1px solid #525252 !important; } #lj_controlstrip a { color: #7d7d7d !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #b2b2b2 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #484848 !important; color: #808080; padding: 0; margin: 0; border: 1px solid #5b5b5b; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { width: 50px; height: 50px; } #lj_controlstrip_statustext { font-size: 9px; color: #bababa !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
Paste these codes to the free text sidebox: <table width="100%" cellpadding="3"><tr><td width="68%" valign="top"><b>TITLE</b><br><br>Maecenas tortor felis, ullamcorper nec, vestibulum ut, vulputate eget, lorem. Ut pellentesque mi nec neque. Mauris erat massa. Morbi porta leo vel risus. Vestibulum cursus dapibus est. Aliquam massa est, iaculis a, placerat non, cursus et, sapien. Pellentesque sed eros a ipsum porttitor lobortis. Vestibulum orci lectus, pharetra at, semper vulputate, nonummy vel, quam. Suspendisse quam velit, vulputate at, gravida a, laoreet laoreet, nulla. Aliquam massa est.</td><td width="16%" valign="top"><center><b>TITLE</b><br><br><a href="YOURURL">link 01</a><br><a href="YOURURL">link 02</a><br><a href="YOURURL">link 03</a><br><a href="YOURURL">link 04</a><br><a href="YOURURL">link 05</a><br><a href="YOURURL">link 06</a></center></td><td width="16%" valign="top"><center><b>TITLE</b><br><br><a href="YOURURL">link 01</a><br><a href="YOURURL">link 02</a><br><a href="YOURURL">link 03</a><br><a href="YOURURL">link 04</a><br><a href="YOURURL">link 05</a><br><a href="YOURURL">link 06</a></center></td></tr></table> After you edited it with your info, don't forget to take out every enters!
VERSION #2
For those who'd like a simpler topbar: /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 830px !important; position: absolute; top: -130px; left: 0; margin: 0; padding: 8px 0; background: #e0f0f4; text-align: justify; font-family: Verdana, sans-serif; line-height: 18px; font-size: 11px; height: 130px !important; border-bottom: 7px solid #E9F7FA; } .sidebox { padding: 7px 15px; color: #99a4a7; } .sideboxTitle, .listtitle, .sidebox #search, .sidebox #tags_sidebox, .sidebox #summary, .sidebox #latestmonth, .sidebox #profile { display: none; } .sidebox #systemlinks { text-align: center; } .listitem, .listitem ul { padding: 0; margin: 10px 0; display: inline; text-align: center; } .listitem li { display: inline; } .listitem a { padding: 1px 10px; text-transform: lowercase; color: #E47267; border-right: 1px solid #cce1e7; } .listitem a:hover { color: #99a4a7; } .sidebox #freetext { padding: 10px text-align: justify; } Replace your whole SIDEBAR section with this, change BASICS --> .bodyblock --> "margin-top: 180px 0 0 0;" to "margin-top: 130px 0 0 0;" and on the Sidebar page hide every sideboxes except the Free Text Sidebox and the Links Sidebox (= Links Visibility).
These are the images I used for the layout: lj user tiny icon, lj comm tiny icon. Please upload them to your own server.
RULES!
1. Credit me. Also, don't repost the codes as your own. 2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask. 3. Enjoy! :)

P. S. Hi to the people who friended me! :)

Layout #2

2008-06-23T20:34:22Z

Soo, second layout, this time a wide one. Still Smooth Sailing, still simple style.

INFO
Style: S2 - Smooth Sailing For free, paid, plus accounts (works well when the ads are between entries.) Best viewed at 1024*768 or higher Was tested in Firefox and IE (it works better with Firefox)
INSTALLING THE LAYOUT
1. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap) 2. Go to the Theme customization page and choose these settings at Presentation: Userinfo Position in Entries: Left side of the entry text (this is important) Username position in entries: Below usericons Wrap entry text under userinfo: Yes (really important!) MetaData Position: Below entry text Entry Tags Position: With Metadata (mood, music) Linkbar Alignment in Entries: Align Right Linkbar Alignment in Comments: Align Right Hit 'Save Changes'. 3. Go to Custom CSS, and select the following: Use layout's stylesheet(s): No Use layout's stylesheet(s) when including custom external stylesheet: No Leave the Custom external stylesheet URL box blank. Copy + paste the code to the Custom stylesheet box. (screencap) Hit 'Save changes', and you're done!
THE CODE
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed in 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #ebebeb; color: #808080; } a { color: #8bbce7; text-decoration: none; } a:visited { color: #; } a:hover { color: #d59437; text-decoration: none; } .pageblock{ } blockquote { margin: 5px 20px 5px 20px; padding: 10px 10px 10px 30px; background-color: #f5f5f5; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/blckquotebg.jpg'); background-repeat: no-repeat; background-position: top-left; } .bodyblock { margin: 30px 30px 0 30px; padding: 0px; } .bodyheaderblock { border-top: 0px solid #ffffff; background-color: transparent; } .bodynavblock { text-align: center; background-color: transparent; margin-bottom: 10px; margin-top: 20px; } .bodynavblock ul { margin: 0px; } .bodynavblock li { display: inline; padding: 0px; } .bodynavblock a, .bodynavblock a:visited { color: #949494 !important; padding: 4px; text-align: center; font-weight: normal !important; } .bodynavblock a:hover { display: display: inline; color: #b0b0b0 !important; } .pagefooterblock, .body-title, .body-midtitle { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { text-align: left; padding: 28px 0 0 0; margin: 0px; border-bottom: 8px solid #282828; background-color: #282828; } .header-title { display: inline; font-size: 19px; padding: 0 0 0 40px; font-family: "Arial", sans-serif; font-weight: normal; } .header-subtitle { display: inline; font-size: 14px; padding: 3px 0 3px 15px; margin-left: 15px; font-family: "Arial", sans-serif; font-weight: normal; border-left: 1px solid #848484; } .header-icon { display: none; } .header-menu { margin: 0px; padding: 0px; text-align: right; background-color: transparent; } .header-menu ul { padding: 7px 0 7px 0; margin: 18px 0 0 0; background-color: #282828; border-top: 1px dashed #545454; border-bottom: 1px dashed #545454; } .header-menu li { display: inline; background-color: transparent; } .header-menu a, .header-menu a:visited { padding: 7px 17px 7px 17px; color: #949494 !important; text-decoration: none; font-family: "Arial", sans-serif; font-size: 14px; font-weight: normal; text-transform: lowercase; border-left: 1px dashed #545454; } .header-menu a:hover { color: #b0b0b0; background-color: #383838; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 205px; text-align: left; color: #aaaaaa; line-height: 16px; font-size: 10px; padding: 10px 0 10px 0; margin-left: 30px; background-color: #f3f3f3; border: 1px solid #e6e6e6; } .sidebox { position: relative; padding: 5px 5px 10px 10px; } .sideboxTitle { padding: 8px 0 3px 0; color: #b2b2b2; font-family: "Arial", sans-serif; text-transform: lowercase; font-weight: normal; text-align: center; font-size: 15px; } .sideboxContent { text-align: left; } .sideboxContent a { color: #8bbce7; } .sideboxContent a:hover { color: #d59437; } .sidebox #profile { text-align: center; } .sidebox #freetext { text-align: justify; padding: 0 5px 0 5px; } .sidebox #search { } .sidebox #search select, .sidebox #search input { font-size: 11px; background-color: #f0f0f0 !important; color: #a8a8a8; padding: 0; margin: 0; border: 1px solid #dedede; letter-spacing: 0px; } .sidebox #tags_sidebox { text-align: left; display: inline; } .sidebox #systemlinks { text-align: left; display: inline; } .sidebox #latestmonth { text-align: center; text-transform: uppercase; letter-spacing: 1px; letter-spacing: 2px; } .sidebox #latestmonth a { font-weight: bold; margin-bottom: 5px; } .profile-label { display: none; } .profile-userpic { margin-left: auto; margin-right: auto; margin-bottom: 2px; padding: 6px; background-color: #f3f3f3; border: 1px solid #e6e6e6; } .profile-content { } .listitem, .listitem ul { padding: 0; margin: 0 5px 0 5px; } .listitem li { display: block; } .listitem a { padding: 3px 2px 3px 15px; display: block; text-transform: lowercase; color: #8bbce7; border-bottom: 1px solid #e9e9e9; } .listitem a:hover { color: 8bbce7; padding-left: 9px; background-color: #eeeeee; } .listtitle { color: #b2b2b2; text-transform: uppercase; font-size: 10px; margin: 10px 0 3px 20px; text-align: left; letter-spacing: 3px; } .sidebox #latestmonth table{ padding: 0px; margin-left: auto; margin-right: auto; } .latestmonth-active { padding: 2px; background-color: #eeeeee; border: 1px solid #eeeeee; margin: 1px; letter-spacing: 0px; } .latestmonth-active a { color: #c2c2c2; } .latestmonth-active a:hover { color: #d59437; } .latestmonth-inactive { padding: 2px; margin: 1px; color: #aaaaaa; letter-spacing: 0px; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { color: #808080; padding-top: 16px; background-color: #fafafa; margin-bottom: 30px; border: 1px solid #e6e6e6; } .entryUserinfo { position: relative; margin-top: -30px; text-align: center; padding: 0 2px 0 5px; background-color: transparent; z-index: 10; font-size: 10px; } .entryUserinfo a { color: #8bbce7; padding: 0 3px 3px 0; } .entryUserinfo a:hover { color: #d59437; } .entryUserinfo-usericon img { padding: 10px; margin: 0 0 0px 10px; background-color: #fafafa; border: 1px solid #e8e8e8; background-image: url(''); background-repeat: no-repeat; background-position: top left; } .entryHeader { padding: 0 0 3px 150px; font-family: "Verdana", sans-serif; font-weight: bold; text-align: left; border-bottom: 1px solid #e8e8e8; } .entryHeader a { color: #8bbce7; } .entryHeader a:hover { color: #d59437; } .entryHeaderDate { font-family: "Arial", sans-serif; font-size: 9px; text-transform: lowercase; letter-spacing: 1px; color: #cccccc; padding: 0 20px 3px 0; text-align: left; font-weight: normal; } .entryHeaderDate a { color : #bfbfbf; text-decoration : none; } .entryHeaderDate a:hover { color : #bfbfbf; text-decoration : none; } .entryHeaderSubject { padding: 2px 20px 0 0; font-family: "Arial", sans-serif; color: #bfbfbf; font-size: 16px; text-transform: uppercase; display: block; } .entryHeaderTags { font-size: 9px; font-weight: normal; } .entryText { position: relative; padding: 24px 20px 24px 150px; line-height: 18px; text-align: justify; } .entryText img { max-width: ; } entryMetadata { margin: 0 !important; } .entryMetadata ul { margin: 0px; padding: 0px; border-top: 1px solid #e8e8e8; } .entryMetadata li { font-size: 9px; list-style: none; display: block; background-color: #f3f3f3; padding: 2px 0 0 15px; font-family: "Arial", sans-serif; letter-spacing: 1px; } .entryMetadata a { color: #d3aa32; } .entryMetadata a:hover { color: #8bbce7; } .entryMetadata-label { font-size: 9px; font-family: "Trebuchet MS", sans-serif; text-transform: lowercase; font-weight: bold; padding: 0 3px 0 0px; color: #cfcfbb; } .entryLinkbar { display: inline; } .entryLinkbar ul { margin: 0px; padding: 10px 0 10px 0; text-align: right; border-top: 1px solid #e8e8e8; background-color: #f3f3f3; } .entryLinkbar li { display: inline; } .entryLinkbar a { font-family: "Verdana", sans-serif; font-size: 10px; font-weight: bold; text-transform: lowercase; padding: 10px; color: #d3aa32; border-left: 1px solid #e8e8e8; } .entryLinkbar a:hover { color: #8bbce7; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { border: 1px solid #e6e6e6; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 500px; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #e6e6e6; background: #e6e6e6; font-weight: bold; } .day-blank, .day { border: 1px solid #e6e6e6; } .day-date { width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #8bbce7; } .day-count a:hover { color: #d59437; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu { background-color: #282828; border: 6px solid #282828; margin-bottom: 20px; } #footer-menu ul { list-style: none; text-align: center; padding: 10px 0 10px 0; border: 1px dashed #787878; } .footer-menu li { display: inline; padding: 0px; margin: 0px; } #footer-menu a, .footer-menu a:visited { position: relative; white-space: nowrap; padding: 10px 17px 10px 17px; text-align: center; display: inline; font-family: "Arial"; font-size: 14px; font-weight: normal; text-transform: lowercase; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { color: #808080; background-color: #fafafa; font-family: "Verdana", sans-serif; font-size: 11px; padding: 8px; margin-bottom: 15px; border: 1px solid #e6e6e6; } .commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; background-color: transparent; } .commentUserinfo a { font-size: 10px; color: #8bbce7; } .commentUserinfo a:hover { color: #d59437; } .commentUserinfo-usericon img { background-color: #fafafa !important; padding: 6px; margin: 3px; border: 1px solid #e8e8e8; } .commentText { padding: 6px; text-align: justify; line-height: 18px; } .commentHeader { background-color: transparent; color: #808080; padding: 4px 0px 8px 8px; } .commentHeader a{ color: #808080; } .commentHeaderScreened { font-family: ; background-color: #cecece; padding: 4px 0px 4px 8px; } .commentHeaderSubject { font-weight: bold; } .commentLinkbar { font-size: 10px; text-transform: lowercase; color: #808080; text-align: right; padding-top: 4px; padding-bottom: 4px; font-weight: bold; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px 0px 5px; margin: 0px; display: inline; } .replyform, #qrform { background-color: #fafafa; padding: 6px; } .replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea { background-color: #fafafa; padding: 1px; border: 1px solid #e4e4e4 !important; } #qrform table #submitpost, #qrform table #submitmoreopts { background-color: #ebebeb !important; color: #808080; font-size: 11px; } #commenttext{ width: 90%; background-color: #fafafa; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable { width: 500px; margin-bottom: 20px; text-align: left; } .tagstable td { border-bottom: 1px solid #e8e8e8; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ .ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color: transparent; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif'); padding: 13px 8px 1px 2px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljuser.gif') !important; padding: 12px 9px 1x 2px !important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/Second/ljcomm.gif') !important; padding: 14px 12px 1px 2px !important; } div.ContextualPopup { font: normal 11px "Verdana", sans-serif, !important; } div.ContextualPopup img { border: 4px solid #e8e8e8; } div.ContextualPopup div.Inner { background-color: #fafafa !important; color: #808080 !important; border: 1px solid #e8e8e8; padding: 6px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: normal; color: #8bbce7 !important; } div.ContextualPopup div.Inner a:hover { color: #d59437 !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #282828 !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #282828 !important; font-family: tahoma; color: #808080; border-bottom: 1px solid #313131 !important; } #lj_controlstrip a { color: #727272 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #b2b2b2 !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; background-repeat: no-repeat !important; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #484848 !important; color: #808080; padding: 0; margin: 0; border: 1px solid #5b5b5b; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { width: 50px; height: 50px; } #lj_controlstrip_statustext { font-size: 9px; color: #bababa !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
These are the images I used for the layout: blockquote background, lj user tiny icon, lj comm tiny icon. Please upload them to your own server.
RULES!
1. Credit me. Also, don't repost the codes as your own. 2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask. 3. Enjoy! :)

Layout #1

2008-06-10T22:35:45Z

My first layout, meep. I hope there aren't any confusing parts. /o\ Edit: Sidebar version added.

INFO
Style: S2 - Smooth Sailing Two versions: with topbar or sidebar For free, paid, plus accounts (works well when the ads are between entries.) Best viewed at 1024*768 or higher Was tested in Firefox and IE (it works better with Firefox)
INSTALLING THE LAYOUT
1. Pick a header from below and paste its code into the CSS you chose under .pageheaderblock (you can find it in the HEADER section). For example if you choose the Bob header, your .pageheaderblock will look like this. 2. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap) 3. Go to the Theme customization page and choose these options at Presentation, then hit 'Save Changes'. (I marked the important ones, you decide about the rest.) 4. Go to the Sidebar page. With the *topbar version* the profile userpic and info, page summary, calendar and multisearch box are disabled (free text, links and tags are enabled), so at Profile Position, Summary Position, Latest Month Position and Multisearch Position (under Multisearch Sidebox) choose hide, then hit 'Save Changes'. NOTE: the topbar is now 160px tall. However, depending on the amount of text/links/tags you have in your sidebar, this height might won't fit. If the topbar overlaps the entries, you'll have to change two numbers in the code: BASICS --> .bodyblock --> margin-top: 172px and SIDEBAR --> .sidebar --> margin-top: -160px (increase these numbers if you need a taller topbar, or decrease them if you need a shorter one than 160px). With the *sidebar version* every part is enabled and you decide about the sideboxes' visibility and order. 5. Go to Custom CSS, and select the following: Use layout's stylesheet(s): No Use layout's stylesheet(s) when including custom external stylesheet: No Leave the Custom external stylesheet URL box blank. Copy + paste the code to the Custom stylesheet box. (screencap) Hit 'Save changes', and you're done! ~~I hope.~~
THE BASIC CODE
WITH TOPBAR
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed at 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; background-color: #fafafa; color: #666666; background-image: url(''); background-position: top right; background-repeat: repeat; background-attachment:; } a { color: #92b9d1; text-decoration: none; } a:visited { color: #; } a:hover { color: #c9935a; text-decoration: none; } .pageblock{ background-color: transparent; background-image: url(''); background-repeat: repeat-y; background-position: center top; } blockquote { margin: 5px 45px 5px 45px; padding: 15px; background: #f6f6f6; color: #666666; font-size: 12px; text-align: justify; font-family: "Trebuchet MS", "Arial", sans-serif; border: 1px solid #ededed; } .pagefooterblock { background-color: #efefef; padding-bottom: 30px; padding-top: 30px; font-size: 9px; font-family: "Trebuchet MS", "Arial", sans-serif; letter-spacing: 1px; text-transform: lowercase; color: #efefef !important; text-align: center; border-top: 1px solid #e2e2e2; border-bottom: 24px solid #282828; } .pagefooterblock, .pagefooterblock a, .pagefooterblock a:visited { color: #; } .pagefooter li { display: inline; } .bodyblock { width: 830px; margin-top: 172px; margin-left: auto; margin-right: auto; background-color: transparent; background-image: url(''); background-repeat: no-repeat; background-position: top right; } .bodyheaderblock { border-top: 0px solid #ffffff; background-color: transparent; } .bodynavblock { text-align: center; font-family: "Arial"; font-size: 11px; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; background-color: transparent; margin-bottom: 8px; } .bodynavblock ul { margin-top: 20px; margin-bottom: 10px; } .bodynavblock li { display: inline; padding: 5px; } .bodynavblock a, .bodynavblock a:visited { color: #626262 !important; padding: 4px; text-align: center; font-weight: normal !important; letter-spacing: 2px; } .bodynavblock a:hover { display: display: inline; color: #999999 !important; } .body-title, .body-midtitle { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { /Don't forget to paste your headers's code here!/ height: 390px !important; background-repeat: no-repeat; background-position: top center; text-align: left; border-bottom: 10px solid #e0e0e0; margin-top: -9px; z-index: 0; position: relative; } .header-title, .header-subtitle, .header-icon { display: none; } .header-menu { position: relative; top: 369px; text-align: center; background-color: transparent; font-family: "Trebuchet Ms", sans-serif; font-size: 9px; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; } .header-menu li { text-align: center; display: inline; background-color: #000000; } .header-menu a, .header-menu a:visited { padding: 2px; margin: 0 10px 0 10px; color: #fafafa !important; text-decoration: none; } .header-menu a:hover { color: #a6a6a6 !important; } .header-menu ul { list-style: none; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 830px;; margin-top: -160px; margin-left: -830px; position: absolute; background: #fafafa; line-height: 1.4em; text-align: justify; font-family: "Trebuchet MS", "Arial", sans-serif; } .sidebox { position: relative; width: 96%; padding: 10px; color: #888888; margin-left: 10px; font-size: 12px; padding-bottom: 10px; } .sideboxTitle { display: inline; padding-right: 3px; background-color: transparent; color: #565656; font-size: 12px; text-transform: lowercase; font-weight: bold; letter-spacing: 2px; text-align: left; } .sideboxContent { text-align: left; padding: 2px; } .sidebox #profile, .sidebox #latestmonth, .sidebox #search { display: none; } .sidebox #freetext { text-align: justify; display: inline; } .sidebox #tags_sidebox { text-align: left; display: inline; background-image: url(''); background-repeat: no-repeat; background-position: left center; } .sidebox #systemlinks { text-align: left; line-height: 1.4em; display: inline; } .listitem, .listitem ul, .listitem li { display: inline; text-align: left; } .listitem a { padding: 0 10px 0 10px; text-transform: lowercase; border-right: 1px solid #e4e4e4; } .listitem a:hover { color: ; } .listtitle { color: #c8c8c8; font-family: "Trebuchet MS", "Arial"; text-transform: lowercase; font-size: 12px; margin-top: 5px; text-align: left; letter-spacing: 3px; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { color: #666666; background-color: #fafafa; padding: 40px 15px 30px 15px; background-image: url(''); background-position: bottom left; background-repeat: no-repeat; } .entryUserinfo { text-align: center; margin-top: -58px; padding: 0 2px 5px 0; background-color: transparent; font-weight: normal !important; font-size: 10px; font-family: "Trebuchet MS", "Arial", sans-serif; color: #9e9e9e !important; position: relative; z-index: 10; } .entryUserinfo a { font-size: 11px; font-family: "Arial", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #282828; font-weight: bold; padding: 0 3px 3px 0; } .entryUserinfo a:hover { color: #c9935a; } .entryUserinfo-usericon img { padding: 10px; margin: 0 9px 0px 10px; background-color: #eeeeee; border: 1px solid #e6e6e6; background-image: url(''); background-repeat: no-repeat; background-position: top left; } .entryHeader { background-color: transparent; color: #282828; font-size: 12px; padding: 3px 14px 3px 140px; margin-bottom: 17px; border-bottom: 3px solid #eeeeee; font-family: "Arial", sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; text-align: right; } .entryHeader a { color: #282828; } .entryHeader a:hover { color: #c9935a; } .entryHeaderSubject { padding-bottom: 5px; font-family: "Arial", sans-serif; color: #282828; font-weight: bold; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .entryHeaderDate { font-family: "Arial", sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: #b8b8b8; padding: 0 0 3px 10px; display: block; text-align: right; font-weight: normal; } .entryHeaderDate a { color : #666666; text-decoration : none; } .entryHeaderDate a:hover { color : #666666; text-decoration : none; } .entryText { padding: 10px 5px 6px 8px; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; line-height: 1.4em; text-align: justify; } .entryText img { max-width: 645px; } entryMetadata { font-size: 9px; letter-spacing: 1px; margin: 0 !important; } .entryMetadata ul { margin: 20px 0 0 8px; padding: 0px; border: 1px solid #ededed; width: 390px; } .entryMetadata li { list-style: none; display: block; background-color: #f5f5f5; padding: 3px; font-family: "Arial", sans-serif; font-size: 9px; letter-spacing: 1px; } .entryMetadata a { color: #; } .entryMetadata-label { font-size: 9px; font-family: "Arial", sans-serif; letter-spacing: 1px; text-transform: uppercase; font-weight: normal; padding: 0 3px 0 0px; } .entryLinkbar { text-align: center; display: inline; } .entryLinkbar ul { text-align: center; margin-top: 25px; padding-top: 5px; border-top: 2px solid #f4f4f4; } .entryLinkbar li { padding: 2px; display: inline; } .entryLinkbar a { font-family: "Arial", sans-serif; font-size: 11px; letter-spacing: 2px; font-weight: bold; text-transform: uppercase; padding: 0 10px 0 10px; color: #cacaca; line-height: 1.5em; border-right: 1px solid #eaeaea; } .entryLinkbar a:hover { color: #c9935a; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; width: 500px; border: 1px solid #dedede; margin-left: auto; margin-right: auto; margin-top: 20px; } .daysubjects { font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; color: #666666; padding: 8px 8px 8px 40px; } .daytitles { font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; text-align: center; border: 1px solid #dedede; background: #dedede; color: #666666; } .day-blank { font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; border: 1px solid #dedede; } .day { font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; border: 1px solid #dedede; } .day-date { font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; border-right: 1px solid transparent; border-bottom: 1px solid transparent; color: #666666; width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; font-size: 12px; } .day-count a { text-decoration: none; color: #92b9d1; } .day-count a:hover { color: #C9935A; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu, #footer-menu ul { list-style: none; text-align: center; } .footer-menu li { text-align: center; display: inline; } #footer-menu a, .footer-menu a:visited { bottom: -30px; position: relative; color: #666666; white-space: nowrap; padding: 10px; margin: 0 3px 0 3px; text-align: center; display: inline; font-family: "Georgia"; font-size: 10px; letter-spacing: 1px; text-transform: lowercase; background-color: #fafafa; border-bottom: 1px solid #e2e2e2; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { color: #666666; background-color: transparent; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; padding: 5px; margin-bottom: 8px; border: 1px solid #e2e2e2; } .commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; background-color: transparent; } .commentUserinfo-usericon img { background-color: #f1f1f1 !important; padding: 5px; margin: 3px; border: 1px solid #e4e4e4; } .commentText { padding: 6px; font-family: "Trebuchet MS", "Arial", sans-serif; text-align: justify; font-size: 12px; line-height: 1.4em; } .commentHeader { background-color: transparent; color: #666666; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; padding: 4px 0px 4px 8px; } .commentHeader a{ color: #666666; } .commentHeaderScreened { font-family: ; font-size: 12px; background-color: #cecece; padding: 4px 0px 4px 8px; } .commentHeaderSubject { font-weight: bold; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; } .commentLinkbar { font-family: ; font-size: 12px; color: #666666; text-align: right; padding-top: 4px; padding-bottom: 4px; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px 0px 5px; margin: 0px; display: inline; } .replyform { background-color: transparent; color: #666666; padding-left: 10px; } #commenttext{ width:100%; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable, .tagstable td { border-bottom: 1px solid #e8e8e8; } .tagstable { width: 500px; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ div.ContextualPopup { font: normal 12px "Trebuchet MS", "Arial",sans-serif, !important; } div.ContextualPopup img { border: 5px solid #e4e4e4; } div.ContextualPopup div.Inner { background-color: #f5f5f5 !important; background-image: url(''); background-repeat: repeat; color: #666666 !important; border: 1px solid #ededed; padding: 6px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: normal; color: #92b9d1 !important; } div.ContextualPopup div.Inner a:hover { color: #c9935a !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #424242 !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #000000 !important; font-family: tahoma; color: #929292; border-bottom: 1px solid #313131 !important; } #lj_controlstrip a { color: #727272 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #aeaeae !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #4a4a4a !important; color: #929292; padding: 0; margin: 0; border: 1px solid #5d5d5d; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { width: 50px; height: 50px; } #lj_controlstrip_statustext { font-size: 9px; color: #bababa !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
WITH SIDEBAR
/----------------------------------------------- ------- DO NOT REMOVE, PLEASE ------- - overrides by allwashedout @ lj.com - - style: s2 smooth sailing - - works with Firefox and IE - - best viewed at 1024768 or higher resolution - -------------------------------------------------/ /---------------------------------- -------------- BASICS -------------- ------------------------------------/ body { margin: 0 !important; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; color: #666666; background: url() repeat top right #fafafa; } a { color: #92b9d1; text-decoration: none; } a:visited { color: #; } a:hover { color: #c9935a; text-decoration: none; } .pageblock{ background: url() repeat-y center top; } blockquote { margin: 5px 45px 5px 45px; padding: 15px; background: #f6f6f6; text-align: justify; border: 1px solid #ededed; } .pagefooterblock { background-color: #efefef; padding: 30px 0; font-size: 1px; letter-spacing: 1px; text-transform: lowercase; color: #efefef !important; text-align: center; border-top: 1px solid #e2e2e2; border-bottom: 24px solid #282828; } .pagefooterblock, .pagefooterblock a, .pagefooterblock a:visited { color: #; } .pagefooter li { display: inline; } .bodyblock { width: 860px; margin: 5px auto 0; background: url() no-repeat top right; } .bodyheaderblock {} .bodynavblock { text-align: center; font-family: "Arial"; font-size: 11px; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; background-color: transparent; margin-bottom: 8px; } .bodynavblock ul { margin-top: 20px; margin-bottom: 10px; } .bodynavblock li { display: inline; padding: 5px; } .bodynavblock a, .bodynavblock a:visited { color: #626262 !important; padding: 4px; text-align: center; font-weight: normal !important; letter-spacing: 2px; } .bodynavblock a:hover { display: display: inline; color: #999999 !important; } .body-title, .body-midtitle { display: none; } /----------------------------------- --------------- HEADER -------------- ------------------------------------/ .pageheaderblock { /Don't forget to paste your header's code here!/ height: 390px !important; background-repeat: no-repeat; background-position: top center; text-align: left; border-bottom: 10px solid #e0e0e0; margin-top: -9px; z-index: 0; position: relative; } .header-title, .header-subtitle, .header-icon { display: none; } .header-menu { position: relative; top: 369px; text-align: center; background-color: transparent; font-family: "Trebuchet Ms", sans-serif; font-size: 9px; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; } .header-menu li { text-align: center; display: inline; background-color: #000000; } .header-menu a, .header-menu a:visited { padding: 2px; margin: 0 10px 0 10px; color: #fafafa !important; text-decoration: none; } .header-menu a:hover { color: #a6a6a6 !important; } .header-menu ul { list-style: none; } /----------------------------------- -------------- SIDEBAR -------------- -------------------------------------/ .sidebar { width: 190px; position: relative; margin: 20px 0 0 26px; background-color: #f5f5f5; line-height: 1.4em; text-align: left; color: #787878; } .sidebox { position: relative; width: 96%; padding: 5px; font-size: 12px; padding-bottom: 10px; } .sideboxTitle { padding: 8px 0 3px 0; color: #c4c4c4; font-family: "Arial", sans-serif; letter-spacing: 2px; text-transform: uppercase; font-weight: bold; text-align: center; } .sideboxContent { text-align: left; } .sidebox #profile { text-align: center; } .sidebox #freetext { text-align: justify; padding: 0 5px 0 5px; } .sidebox #search { } .sidebox #tags_sidebox { text-align: left; display: inline; font-size: 11px; } .sidebox #systemlinks { text-align: left; line-height: 1.4em; display: inline; } .sidebox #latestmonth { text-align: center; text-transform: uppercase; letter-spacing: 1px; font-family: "Arial", sans-serif; font-size: 11px; letter-spacing: 2px; } .sidebox #latestmonth a { font-weight: bold; } .profile-label { display: none; } .profile-userpic { margin: 0 auto 2px; padding: 8px; background-color: #eaeaea; } .profile-content { } .listitem, .listitem ul, listitem li { display: block; padding: 0; background-color: transparent; margin: 0 5px 4px 5px; background-color: #f1f1f1 !important; } .listitem a { padding: 2px 2px 2px 15px; display: block; text-transform: lowercase; font-size: 11px; } .listitem a:hover { color: #92b9d1; padding-left: 9px; background-color: #ececec; } .listtitle { color: #c8c8c8; font-family: "Arial"; text-transform: uppercase; font-size: 10px; margin: 10px 0 3px 20px; text-align: left; letter-spacing: 3px; } .sidebox #latestmonth table{ padding: 0px; margin-left: auto; margin-right: auto; } .latestmonth-active { padding: 2px; background-color: #e8e8e8; border: 1px solid #e8e8e8; margin: 1px; font-size: 10px; letter-spacing: 0px; } .latestmonth-inactive { padding: 2px; background-color: transparent; border: 1px solid #e8e8e8; margin: 1px; color: #999999; font-size: 10px; letter-spacing: 0px; } .summaryList a { font-size: 11px; } /----------------------------------- -------------- ENTRIES -------------- -------------------------------------/ .entryHolder { color: #666666; background-color: #fafafa; padding: 30px 0px 30px 10px; background-image: url(''); background-position: bottom left; background-repeat: no-repeat; } .entryUserinfo { text-align: center; margin-top: -58px; padding: 0 2px 5px 0; background-color: transparent; font-weight: normal !important; font-size: 10px; color: #9e9e9e !important; position: relative; z-index: 10; } .entryUserinfo a { font-size: 11px; font-family: "Arial", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #282828; font-weight: bold; padding: 0 3px 3px 0; } .entryUserinfo a:hover { color: #c9935a; } .entryUserinfo-usericon img { padding: 10px; margin: 0 9px 0px 10px; background-color: #eeeeee; border: 1px solid #e6e6e6; background-image: url(''); background-repeat: no-repeat; background-position: top left; } .entryHeader { background-color: transparent; color: #282828; font-size: 12px; padding: 3px 14px 3px 140px; margin-bottom: 17px; border-bottom: 3px solid #eeeeee; font-family: "Arial", sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; text-align: right; } .entryHeader a { color: #282828; } .entryHeader a:hover { color: #c9935a; } .entryHeaderSubject { padding-bottom: 5px; font-family: "Arial", sans-serif; color: #282828; font-weight: bold; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .entryHeaderDate { font-family: "Arial", sans-serif; font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: #b8b8b8; padding: 0 0 3px 10px; display: block; text-align: right; font-weight: normal; } .entryHeaderDate a { color : #666666; text-decoration : none; } .entryHeaderDate a:hover { color : #666666; text-decoration : none; } .entryText { padding: 10px 5px 6px 8px; line-height: 1.4em; text-align: justify; } .entryText img { max-width: 621px; } entryMetadata { font-size: 9px; letter-spacing: 1px; margin: 0 !important; } .entryMetadata ul { margin: 20px 0 0 8px; padding: 0px; border: 1px solid #ededed; width: 390px; } .entryMetadata li { list-style: none; display: block; background-color: #f5f5f5; padding: 3px; font-family: "Arial", sans-serif; font-size: 9px; letter-spacing: 1px; } .entryMetadata a { color: #; } .entryMetadata-label { font-size: 9px; font-family: "Arial", sans-serif; letter-spacing: 1px; text-transform: uppercase; font-weight: normal; padding: 0 3px 0 0px; } .entryLinkbar { text-align: center; display: inline; } .entryLinkbar ul { text-align: center; margin-top: 25px; padding-top: 5px; border-top: 2px solid #f4f4f4; } .entryLinkbar li { padding: 2px; display: inline; } .entryLinkbar a { font-family: "Arial", sans-serif; font-size: 11px; letter-spacing: 2px; font-weight: bold; text-transform: uppercase; padding: 0 10px 0 10px; color: #cacaca; line-height: 1.5em; border-right: 1px solid #eaeaea; } .entryLinkbar a:hover { color: #c9935a; } /----------------------------------------- -------------- ARCHIVE PAGES -------------- -------------------------------------------/ .yearlinks{ text-align: right; } .yearlink{ padding-left:4px; padding-right: 4px; } .month { width: 500px; border: 1px solid #dedede; margin: 20px auto 0; } .daysubjects { padding: 8px 8px 8px 40px; } .daytitles { text-align: center; border: 1px solid #dedede; background: #dedede; } .day-blank, .day { border: 1px solid #dedede; } .day-date { border-right: 1px solid transparent; border-bottom: 1px solid transparent; width: 50%; text-align: center; } .day-count { width: 50%; text-align: center; float: right; } .day-count a { text-decoration: none; color: #92b9d1; } .day-count a:hover { color: #C9935A; } /---------------------------------- -------------- FOOTER -------------- ------------------------------------/ #footer-menu, #footer-menu ul { list-style: none; text-align: center; } .footer-menu li { text-align: center; display: inline; } #footer-menu a, .footer-menu a:visited { bottom: -30px; position: relative; color: #666666; white-space: nowrap; padding: 10px; margin: 0 3px 0 3px; text-align: center; display: inline; font-family: "Georgia"; font-size: 10px; letter-spacing: 1px; text-transform: lowercase; background-color: #fafafa; border-bottom: 1px solid #e2e2e2; } /----------------------------------------- -------------- COMMENT PAGES -------------- ------------------------------------------/ .commentHolder { color: #666666; background-color: transparent; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; padding: 5px; margin-bottom: 8px; border: 1px solid #e2e2e2; } .commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; background-color: transparent; } .commentUserinfo-usericon img { background-color: #f1f1f1 !important; padding: 5px; margin: 3px; border: 1px solid #e4e4e4; } .commentText { padding: 6px; font-family: "Trebuchet MS", "Arial", sans-serif; text-align: justify; font-size: 12px; line-height: 1.4em; } .commentHeader { background-color: transparent; color: #666666; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; padding: 4px 0px 4px 8px; } .commentHeader a{ color: #666666; } .commentHeaderScreened { font-family: ; font-size: 12px; background-color: #cecece; padding: 4px 0px 4px 8px; } .commentHeaderSubject { font-weight: bold; font-family: "Trebuchet MS", "Arial", sans-serif; font-size: 12px; } .commentLinkbar { font-family: ; font-size: 12px; color: #666666; text-align: right; padding-top: 4px; padding-bottom: 4px; } .commentLinkbar ul { margin: 0px; padding: 0px; } .commentLinkbar li { padding: 0px 5px 0px 5px; margin: 0px; display: inline; } .replyform { background-color: transparent; color: #666666; padding-left: 10px; } #commenttext{ width:100%; } /-------------------------------------- -------------- TAGS PAGES -------------- ----------------------------------------/ .tagstable, .tagstable td { border-bottom: 1px solid #e8e8e8; } .tagstable { width: 500px; } /-------------------------------- -------------- MISC -------------- ----------------------------------/ div.ContextualPopup { font: normal 12px "Trebuchet MS", "Arial",sans-serif, !important; } div.ContextualPopup img { border: 5px solid #e4e4e4; } div.ContextualPopup div.Inner { background-color: #f5f5f5 !important; background-image: url(''); background-repeat: repeat; color: #666666 !important; border: 1px solid #ededed; padding: 6px; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: normal; color: #92b9d1 !important; } div.ContextualPopup div.Inner a:hover { color: #c9935a !important; } #lj_controlstrip { z-index: 10 !important; } #lj_controlstrip table { background-color: #424242 !important; margin: 0; padding: 0; width: auto; z-index: 2; } #lj_controlstrip td { background-color: #000000 !important; font-family: tahoma; color: #929292; border-bottom: 1px solid #313131 !important; } #lj_controlstrip a { color: #727272 !important; font-family: tahoma; font-size: 9px; text-transform: lowercase; } #lj_controlstrip a:hover { color: #aeaeae !important; text-decoration: none; } #lj_controlstrip a img, #lj_controlstrip form { padding: 0; margin: 0; border: 0; } #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input { font-family: tahoma; font-size: 9px; background-color: #4a4a4a !important; color: #929292; padding: 0; margin: 0; border: 1px solid #5d5d5d; } #lj_controlstrip_userpic, #lj_controlstrip_userpic img { width: 50px; height: 50px; } #lj_controlstrip_statustext { font-size: 9px; color: #bababa !important; font-weight: normal; letter-spacing: 1px; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; } /------------------------------------*/
THE HEADERS
Choose one and paste its code under .pageheaderblock. Also, upload them to your own server, please (I'm not gonna delete them from photobucket, but y'know, just in case). Photos are mainly from mcr-pics.com and mcr_pic_spam.
PREVIEWS	CODES
	background-color: #d5e3ee; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01band1.jpg');
	background-color: #000700; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01band2.jpg');
	background-color: #17100a; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01bob02.jpg');
	background-color: #1e241a; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/frank.jpg');
	background-color: #b7d2e7; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/gerard01.jpg');
	background-color: #cfdbf1; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01gerard002.jpg');
	background-color: #10211b; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/mikey.jpg');
	background-color: #201d18; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/ray001.jpg');
I'm not good at making graphics, but hey, I think simple headers work well with this layout. If you'd like to, you can pretty these up, add text to them, etc. Or if you want to make your own, you'll need a good quality picture with a distinct background color, make it 390px tall, then paste its url and the background color's hex code into the CSS.
EDIT: More variety! nokitas made a really, REALLY pretty stock header which is shareable \o/ If you use it, don't forget to credit her as well!
	background-color: #000000; background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/header_nokitas.png');
(If you use this one, replace HEADER --> .pageheaderblock --> "height: 390px !important;" with "height: 496px !important;", HEADER --> .header-menu --> "top: 369px;" with "top: 478px;" plus at BASICS --> .bodyblock --> "margin-top: (172px or 5px);" add 106 to the number.)
RULES!
1. Credit me. CREDITING IS AWESOME. Also, don't repost the codes as your own. 2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask. 3. Enjoy! :)