s2 layout: carried to Ohio in a swarm of bees [flexible squares]
This and another layout batch that I'll post sometime soon, are actually a part of the same 'set' in they way I usually do (in the sense that they're all quite distinct, but explore a certain theme in a variety of ways). But next up I'm going to make a "layouts I'm never going to get around to polishing into proper posts" post. By which I mean the milou_en_avril and clockrobot layouts.
image | live
image | live layout:carried to Ohio in a swarm of bees
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, sidebar/links list
browsers: IE7+, FF, Safari, Chrome
installation
01. Choose Journal Style
Select "Greys" Flexible Squares layout in "Select a New Theme"
02. Choose a Page Setup
i. Set Advertisement display to Horizontal or Between Entries
ii. Select 2 Column (sidebar on right) or 2 Column (sidebar on left).
03. Style
Change the "Background color of the outer table" to #FFFFFF.
04. Custom CSS
Ensure Use layout's stylesheet(s) is set to no
05.
Paste code into the Custom Stylesheet box.
version one: stripped (links list only)
/*
carried to Ohio in a swarm of bees in stripped (flexible squares; milou veronica)
*/
body {text-align: center; color: #ffffff; font-family:"Arial", Helvetica,serif; font-size: .77em; margin:0}
.headerimage {display:none;position: relative; background: transparent url() no-repeat scroll 0 0; height:;width:;margin: 0 auto}
#content{background-color: #FFFFFF; color: #222222;margin: 0 auto; border-width: 0px; padding:0;}
#maincontent { padding:90px 0 0;width: 650px;background: #FFF url() repeat scroll 0 0; text-align: justify;margin: 0 auto 0 40px}
#sidebar {padding:0; text-align: left; color: #000000; font-size: .92em; line-height: 1.75;width: 700px;margin: 0 auto 0 40px;text-transform:lowercase}
/* HEADER */
#header {margin: 0 auto;text-align: left; padding:0 0 0px; line-height: 1; color: #333;font-family:Helvetica,Arial,sans-serif}
div#header a, div#header a:link, div#header a:visited {font-weight:normal;background-color:transparent;color:#888888}
div#header li.view {padding:20px 10px}
ul.navheader{font-size: .8em;text-transform: uppercase;letter-spacing:-0.04em;margin:0;padding:10px 0;text-align:left;border-bottom:1px solid #eee;border-top:1px solid #eee}
ul.navheader li {margin:0 0 0 -3px; list-style-type: none;display:inline;padding: 0 10px}
ul.navheader li:hover,div#header li.view:hover{color:#222;border-bottom:4px solid #eee;padding-bottom: 10px} ul.navheader li:hover a{color:#aaaaaa}
ul.navheader li a{font-weight:normal;background-color:transparent;color:#888888}
.title {width: 700px;text-align:right;margin: 80px 0 0 40px;font-size:1.3em;text-transform: lowercase;padding:0 15px 0 0;line-height:0.8;background: transparent url(http://i50.tinypic.com/2qkpkzl.jpg) no-repeat scroll 100% 50%}
.subtitle{width: 700px;text-align:right;padding:0 10px 0 40px;text-transform: lowercase;color:#aaa;font-size:.9em}
/* ENTRIES */
.subcontent { min-height: 120px; background: #FFFFFF url() repeat scroll;margin-left: auto; margin-right: auto}
.date {margin:0; color:#888888;text-transform: uppercase; font-size:.8em;padding:0}
.subject {font-size: 1.3em;padding:0; letter-spacing:-0.04em;line-height: 1; color: #666666;font-family:Helvetica,Arial,sans-serif}
.subject a, .subject a:link, .subject a:visited {text-decoration: none;padding:5px}
.datesubject {text-align: left;padding:10px 0}
.entry{margin:0; padding: 0;text-align: justify;line-height: 1.75}
.entry_text {margin:0;padding:15px 0 10px 0}
.entry ul li,.entry ol li{padding-left: 5px;margin-left: 15px}
/* USERPICS */
.userpic, .userpicfriends {margin:10px 0 10px 20px; position: relative;float: right; padding: 0;background-color: transparent !important;z-index: 15;}
.userpicfriends {text-align: center;text-transform: uppercase;letter-spacing:-0.07em;font-size:.9em}
.userpicfriends img,.userpic img {display:none;width:80px;height:80px}
body.lj-view-entry .userpicfriends img{display:inline}
.userpicfriends a font {color:#111}
/* COMMENT BAR */
.comments {color: #fff;text-transform: uppercase; font-weight:bold;font-size:.85em;letter-spacing:-0.03em;text-align: left; padding:12px 6px;margin:30px 0 0;border-top:1px solid #eeeeee;border-bottom:1px solid #eeeeee}
div.comments a, div.comments a:visited, div.comments a:link {background-color:#;width:85px;padding:3px 7px 2px 12px;margin:0;clear:right;background: transparent url(http://i46.tinypic.com/dfk6ix.png) no-repeat scroll 0 0}
div.comments a:hover{color:#A8C8CF;background-color:#FFF}
.separator{height: 75px}
/* CURRENTS AND TAGS (icons by ?) */
.ljtags {text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i48.tinypic.com/28l6u8o.png) no-repeat scroll 100% 50%;margin: 50px 0 0 auto;width:350px; text-transform: lowercase; color: #ffffff; font-weight: bold;font-size: 0;clear:right}
div.ljtags a {font-size: 7pt;background-color:#eeeeee;margin-left:5px;padding:0 2px;font-weight: normal}
.currents {text-align: right; margin:0; padding-top:15px; padding: 8px 0px 8px 0; text-transform: lowercase; font-size: 7pt; color: #646464;clear:right}
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #000; display:none}
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%}
.currentlocation {background-image: url(http://i46.tinypic.com/etzgjn.png)}
.currentmood{background-image: url(http://i49.tinypic.com/244nuw5.png)}
.currentgroups {background-image: url(http://i47.tinypic.com/21l05.png)}
.currentmusic {background-image: url(http://i46.tinypic.com/w15sut.png)}
/* TAG PAGE */
h2 { font-size: 1.3em; letter-spacing:-0.04em;line-height: 1; color: #666666;font-family:Helvetica,Arial,sans-serif;padding:5px;font-weight: normal;margin: 0px auto}
.ljtaglist {text-align: left; margin: 0; padding:10px; list-style:inside none square;}
.ljtaglist li {padding:2px 10px;border-bottom: 1px dotted #eeeeee;} .ljtaglist li:hover{background-color:#f2f2f2}
/* COMMENT PAGE */
.box { text-align: left; padding:0; clear: right;margin-left: auto; margin-right: auto}
.datesubjectcomment {text-align: left; color: #000000;font-variant:small-caps;margin:0;border-bottom: 1px solid #eeeeee;border-top:1px solid #eee;padding:5px}
.datesubjectcomment strong{;margin-left:20px;font-size:1.4em}
.userpiccomment {display:none}
input { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa; border: 1px solid #cccccc}
textarea.textbox {width: 100% !important}
.reply{ border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left}
.replytosubject {font-weight: bold}
.replytoposter{padding:5px}
body.lj-view-reply .entry{padding:10px}
.replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 20px;color:#666666}
.commentreply {min-height:40px;text-align: left; position: relative; margin:5px 0;padding:10px;line-height:1.5}
.commentbox {padding: 20px 0;margin-top:10px}
.commentboxpartial {padding: 0;margin: 10px}
.commentinfo {margin-top: 10px;width: 100%}
form#postform{}form#qrform {}
form#qrform table {border-width: 0px !important}
.skiplinks {text-align: center;margin: 0 auto 30px;padding: 5px 0; font-size: 8pt; color: #ccc;border-top:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3}
/* SIDEBAR */
.defaultuserpic {display:none}
.sbarheader {}
.sbarbody {padding: 0}
.sbarbody2 {padding: 0 0 10px;line-height:1.5;float:left;width:300px;color:#999}
ul.sbarlist{ margin: 0; padding: 0; list-style: none;line-height:1}
#sidebar_linklist{margin:4px 0 0 auto;line-height:1;width:140px}
li.sbaritem{padding: 1px 0 1px 12px; background: transparent url(http://i45.tinypic.com/2ecdi86.jpg) no-repeat scroll 0 50%;margin:0;display:block}
li.sbaritem:hover a{background-color:transparent;color:#17A3BF}
li.sbaritem:hover{background-color:#f4f4f4}
li.sbartitle, .sbarbody2,#sidebar_summary,#sidebar_tags , #sidebar_calendar{display:none}
li.sbartitle {margin-top:10px;font-size:1.1em;padding:2px;text-align:right}
#sidebar table.calendar {font-size:7pt;line-height:1}td.sbarcalendar, td.sbarcalendarposts {border:1px solid #eeeeee;padding:1px 1px;width:12px;height:16px;vertical-align:middle;text-align:center;} td.sbarcalendarposts {background-color:#f4f4f4}
/* FOOTER */
#footer { padding: 5px;margin:0 auto 0 40px;text-transform: uppercase; text-align:center;font-size: 1em; z-index: 100; clear: both;letter-spacing:-0.03em;width:650px}
ul.navfooter{ padding: 0px; margin:0}
ul.navfooter li {list-style: none; margin: 0 0 3px;display:inline}
div#footer li.viewing {color: #555555;display:none}
div#footer a, div#footer a:link, div#footer a:visited {padding: 5px;color:#000}
div#footer a:hover{background-color:#eeeeee}
div#footer li.viewing {display:none}
div#footer li,div#footer li + li{padding: 0 9px}
div#footer li{background:transparent url(http://i46.tinypic.com/25g8ox0.jpg) no-repeat scroll 0 50%}
div#footer li + li{background:transparent url(http://i47.tinypic.com/25grub6.png) no-repeat scroll 100% 50%}
.clearfoot {clear:both}
/* ARCHIVE PAGE */
ul.year { margin: 0px; margin: 0 auto 10px}
ul.year li {display: inline} ul.year li a{padding:0 3px}
ul.year li a:hover, table.yeartable a{background-color:#81C2CF;color:#FFFFFF;padding:0 3px}
table.yeartable {margin-left: auto; margin-right: auto;margin-left: auto; margin-right: auto; width:60%;padding: 30px;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}
table.yeartable td.yearday { background-color: #eee; text-align: center}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}
/* MINI ICONS by Julz and Brand Spanking New*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 12px 12px !important; background: transparent none no-repeat scroll 50% 50%}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url(http://i50.tinypic.com/8xu2jc.gif)}
img[src*="icon_private.gif"]{background-image: url(http://i50.tinypic.com/aw9sol.gif)}
img[src*="icon_groups.gif"]{background-image: url(http://i50.tinypic.com/2zpqp6v.gif)}
.ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"] {background: transparent none no-repeat 0 50%; padding: 9px 9px 0 2px !important}
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i48.tinypic.com/2f06gwk.png)}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i45.tinypic.com/14wuazs.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i45.tinypic.com/2v0ixvs.gif) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i50.tinypic.com/2m63g8w.gif) !important}
img[src*="btn_del.gif"]{background-image: url(http://i50.tinypic.com/2e5tt74.png)}
img[src*="btn_scr.gif"] {background-image: url(http://i48.tinypic.com/241weuu.png)}
img[src*="btn_unscr.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.png)}
img[src*="btn_freeze.gif"] {background-image: url(http://i45.tinypic.com/2im2hww.png)}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.jpg)}
img[src*="btn_track.gif"] {background-image: url(http://i48.tinypic.com/2a7z7v4.png)}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i49.tinypic.com/34oeb91.png)}
img[src*="anonymous.gif"] {background-image: url(http://i48.tinypic.com/n623yq.gif)}
img[src*="openid-profile.gif"] {background-image: url(http://i48.tinypic.com/24gt8jd.gif)}
img[src*="userinfo.gif"] {background-image: url(http://i52.tinypic.com/fnd6js.gif)}
img[src*="talk/none.gif"] {background-image: url(http://i46.tinypic.com/2ur1i4o.gif)}
img[src*="help.gif"] {background-image: url(http://i46.tinypic.com/2gtnner.gif)}
img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-image: url(http://i48.tinypic.com/ih5oh4.png)}
img[src*="upgrade-paid-icon.gif"] {background-image: url(http://i45.tinypic.com/2r7sm00.gif)}
.ljuser img {width: 0; height: 0; background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50%; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50% !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i48.tinypic.com/rte4wp.gif) no-repeat scroll 0 50% !important; padding: 10px 10px 0 2px !important}
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px}
HTML BODY img.i-ljuser-userhead {height:10px !important;width:0 !important}
/* CONTEXTUAL POP-UP */
div.ContextualPopup {position: relative; margin: 0px; text-align: left; font: normal 9px "Arial" !important; }
div.ContextualPopup div.Inner {color: #aaaaaa !important;border:1px solid #eeeeee;background: #f2f2f2 url() !important; padding: 0; width: 280px;}
div.ContextualPopup .Userpic { padding: 3px; margin: 5px 5px 0; border: 1px solid #eeeeee; background: #ffffff url();}
div.ContextualPopup .Content { padding: 5px;border-right: 1px solid #ececec; margin-right:68px;background: #ffffff url();}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important; font-weight: bold; color: #999999 !important}
div.ContextualPopup .Relation {font-size: 9pt;text-transform:uppercase}
/* MISC */
#lj_controlstrip_new {z-index:1}
.w-cs .w-cs-userinfo {padding-left:12px}
.w-cs .w-cs-userpic {display:none}
a img {border:none}
b, u { color: #111111}
i, s { color: #888888}
p, td {}
blockquote { padding:15px; border: 1px solid #eeeeee; background: #f7f7f7 url() repeat; color:#444444}
code {display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;}
.appwidget-qotd table td div{border:1px solid #eeeeee !Important;padding:5px 30px 5px 5px !important}
kbd, pre, tt {font-family: monospace;}
textarea { font-family: Georgia, Times New Roman, Times,serif;font-size: 12px; background-color: #f7f7f7; border: 1px solid #dddddd; color: #333333}
/* COLORS */
a, a:link, a:visited, .subject a:visited, h2, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
color: #000;
text-decoration: none}
.ljuser a b {font-variant:small-caps}
.entry_text a, .commentreply a{font-weight:bold}
a:hover, .datesubjectcomment a:hover, .ljuser a b:hover,div.ljtags a:hover {background-color:#C3DADF; text-decoration: none}
a img:hover{background:transparent}
a.lj_invisible{display:none}
.subject a, .subject a:link, .subject,h2, .subject a:visited, .subject a:hover, .subject a:link:hover,.subject a:visited:hover {background-color:transparent;text-decoration: none;color: #000000;font-weight:normal}
.userpicfriends a, .userpicfriends a font {color:#77B3BF} #sidebar a{color:#222}
version two (sidebar)
/*
carried to Ohio in a swarm of bees in sidebar (flexible squares; milou veronica)
*/
body {text-align: center; color: #ffffff; font-family:"Arial", Helvetica,serif; font-size: .77em; margin:0}
.headerimage {position: relative; background: transparent url() no-repeat scroll 0 0; height:;width:;margin:10px 0 0 280px}
#content{color: #222222;margin: 0 10px 0 0; border-width: 0px; padding:0;}
#maincontent { padding: 0; text-align: justify;margin: 10px 0 0 280px}
#sidebar {padding:5px 5px 0; text-align: left;background-color:#FFFFFF; color: #000000; font-size: .92em; line-height: 1;width: 260px;margin: 0 ;text-transform:lowercase;float:left;position:fixed;bottom:15px;left:0;overflow-y:scroll;height:80%}
/* HEADER */
#header {background-color: #FFF;height:20%;position:fixed;left:0;top:-20px;width:260px;overflow-y:scroll;margin: 0 auto 10px 0;text-align: left; padding:5px; line-height: 1; color: #111;font-family:Helvetica,Arial,sans-serif}
div#header a, div#header a:link, div#header a:visited {font-weight:normal;background-color:transparent;color:#111}
div#header li.view {padding:1px 5px}
ul.navheader{font-size: .8em;text-transform: uppercase;letter-spacing:-0.04em;margin:0;padding:25px 0 0;text-align:left}
ul.navheader li {margin:0 0 1px; list-style-type: none;display:block;padding:1px 5px;background-color:#f3f3f3}
ul.navheader li:hover,div#header li.view:hover{background-color:#e9e9e9} ul.navheader li:hover a{color:#aaaaaa}
.title {text-align:right;margin:10px 0 0;font-size:1.3em;text-transform: lowercase;padding:0 13px 0 0;line-height:0.8}
.subtitle{text-align:right;padding:3px 7px 0 0;text-transform: lowercase;color:#777;font-size:.9em}
/* ENTRIES */
.subcontent { min-height: 120px;padding:0;margin-left: auto; margin-right: auto}
.date {margin:0 10px 0 0; color:#888888; font-size:.8em;padding:2px;float:left;width:90px}
.subject {font-size: .95em;padding: 6px; letter-spacing:-0.04em;line-height: 1; color: #666666}
.subject a, .subject a:link, .subject a:visited {text-decoration: none}
.datesubject {text-align: left;padding:0;border-bottom:1px #e6e6e6 solid;border-top:1px #e6e6e6 solid;text-transform: uppercase}
.entry{margin:0; padding: 0;text-align: justify;line-height: 1.75}
.entry_text {margin:0 110px 0 0;padding:15px 20px;min-height:110px}
.entry ul li,.entry ol li{padding-left: 5px;margin-left: 15px}
/* USERPICS */
.userpic, .userpicfriends {margin:40px 0 10px 20px; position: relative;float:right;padding: 0;background-color: transparent !important;z-index: 15}
.userpicfriends {text-align: center;text-transform: uppercase;letter-spacing:-0.07em;font-size:.9em}
.userpicfriends img,.userpic {padding:5px 4px 0 0}
/* COMMENT BAR */
.comments {text-align:right;color: #fff;text-transform: uppercase; font-weight:bold;font-size:.85em;letter-spacing:-0.03em; padding:7px;margin:30px 0 0}
div.comments a, div.comments a:visited, div.comments a:link {padding:4px 7px 3px 12px;margin:0;clear:right;background: transparent url(http://i50.tinypic.com/2qkpkzl.jpg) no-repeat scroll 0 50%}
div.comments a:hover{color:#A8C8CF;background-color:#FFF}
.separator{height: 75px}
/* CURRENTS AND TAGS (icons by ?) */
.ljtags {padding: 4px 0 4px 12px; background: transparent url(http://i48.tinypic.com/28l6u8o.png) no-repeat scroll 0 50%;margin: 50px 0 0;width:350px; text-transform: lowercase; color: #ffffff; font-weight: bold;font-size: 0}
div.ljtags a {font-size: 7pt;background-color:#eeeeee;margin-left:5px;padding:0 2px;font-weight: normal}
.currents {text-align: left; margin:0; padding: 8px 0 8px 20px; text-transform: lowercase; font-size: 7pt; color: #646464}
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #000; display:none}
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 0 4px 18px; background: transparent none no-repeat scroll 0 50%}
.currentlocation {background-image: url(http://i46.tinypic.com/etzgjn.png)}
.currentmood{background-image: url(http://i49.tinypic.com/244nuw5.png)}
.currentgroups {background-image: url(http://i47.tinypic.com/21l05.png)}
.currentmusic {background-image: url(http://i46.tinypic.com/w15sut.png)}
/* TAG PAGE */
h2 { font-size: 1.3em; letter-spacing:-0.04em;line-height: 1; color: #666666;font-family:Helvetica,Arial,sans-serif;padding:5px;font-weight: normal;margin: 0px auto}
.ljtaglist {text-align: left; margin: 0; padding:10px; list-style:inside none square;}
.ljtaglist li {padding:2px 10px;border-bottom: 1px dotted #eeeeee} .ljtaglist li:hover{background-color:#f2f2f2}
/* COMMENT PAGE */
.box { text-align: left; padding:0; clear: right;margin-left: auto; margin-right: auto}
.datesubjectcomment {text-align: left; color: #000000;font-variant:small-caps;margin:0;padding:5px}
.datesubjectcomment strong{margin-left:20px;font-size:1.4em}
.userpiccomment {float:left;margin:0 10px 10px 0;padding:3px;border:1px solid #eee}
input { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa; border: 1px solid #cccccc}
textarea.textbox {width: 100% !important}
.reply{ border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left}
.replytosubject {font-weight: bold}
.replytoposter{padding:5px}
body.lj-view-reply .entry{padding:10px}
.replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 20px;color:#666666}
.commentreply {min-height:40px;text-align: left; position: relative; margin:5px 0;padding:10px;line-height:1.5}
.commentbox {padding: 10px 0;margin-top:20px;border-top:1px solid #eee}
.commentboxpartial {padding: 0;margin: 10px}
.commentinfo {margin-top: 10px;width: 100%}
form#postform{}form#qrform {}
form#qrform table {border-width: 0px !important}
.skiplinks {text-align: center;margin: 0 auto 30px;padding: 5px 0; font-size: 8pt; color: #ccc}
/* SIDEBAR */
.defaultuserpic {display:none;margin-bottom:3px;padding:10px;text-align:center}
.defaultuserpic img{width:70px;height:70px;padding:3px;border: 1px solid #eee}
#sidebar_linklist, .sbarbody2,#sidebar_summary,#sidebar_tags , #sidebar_calendar{margin-bottom:10px }
.sbarheader {}
.sbarbody {padding:10px;padding: 0;}
.sbarbody2 {padding:5px;line-height:1.2em}
ul.sbarlist{ margin: 0; padding: 0; list-style: none;line-height:1}
#sidebar_linklist{line-height:1}
li.sbaritem{padding: 1px 0 1px 16px; background: transparent url(http://i45.tinypic.com/2ecdi86.jpg) no-repeat scroll 5px 50%;margin:0;display:block}
li.sbaritem:hover a{background-color:transparent}
li.sbaritem:hover{background-color:#eeeeee}
ul.sbarlist.sbarcontent{padding-top:5px}
li.sbartitle {font-size:.95em;padding:3px 10px;text-transform:uppercase;border-top:1px solid #eee;border-bottom:1px solid #eee}
#sidebar table.calendar {font-size:.9em;line-height:1}
td.sbarcalendar, td.sbarcalendarposts {border:1px solid #eeeeee;padding:2px;vertical-align:middle;text-align:center}
td.sbarcalendarposts {background-color:#f4f4f4}
/* FOOTER */
#footer {padding:0 0 20px;margin:0;text-transform: uppercase; text-align:center;font-size: .8em; z-index: 100; clear: both;letter-spacing:0.03em;width:270px;position:fixed;bottom:-20px;left:0;overflow-y:scroll}
ul.navfooter{ padding: 2px 0;height:15px;margin:0;border-top:1px solid #e5e5e5;background-color:#f3f3f3}
ul.navfooter li {list-style: none; margin: 0 0 3px;display:inline}
div#footer li.viewing {color: #555555;display:none}
div#footer a, div#footer a:link, div#footer a:visited {color:#000}
div#footer li:hover{background-color:#e5e5e5}
div#footer li{padding:2px 6px 2px} div#footer li a:hover{background-color:transparent}
.clearfoot {clear:both}
/* ARCHIVE PAGE */
ul.year { margin: 0px; margin: 0 auto 10px}
ul.year li {display: inline} ul.year li a{padding:0 3px}
ul.year li a:hover, table.yeartable a{background-color:#81C2CF;color:#FFFFFF;padding:0 3px}
table.yeartable {margin-left: auto; margin-right: auto;margin-left: auto; margin-right: auto; width:60%;padding: 30px;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}
table.yeartable td.yearday { background-color: #eee; text-align: center}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}
/* MINI ICONS by Julz and Brand Spanking New*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 12px 12px !important; background: transparent none no-repeat scroll 50% 50%}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url(http://i50.tinypic.com/8xu2jc.gif)}
img[src*="icon_private.gif"]{background-image: url(http://i50.tinypic.com/aw9sol.gif)}
img[src*="icon_groups.gif"]{background-image: url(http://i50.tinypic.com/2zpqp6v.gif)}
.ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"] {background: transparent none no-repeat 0 50%; padding: 9px 9px 0 2px !important}
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i48.tinypic.com/2f06gwk.png)}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i45.tinypic.com/14wuazs.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i45.tinypic.com/2v0ixvs.gif) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i50.tinypic.com/2m63g8w.gif) !important}
img[src*="btn_del.gif"]{background-image: url(http://i50.tinypic.com/2e5tt74.png)}
img[src*="btn_scr.gif"] {background-image: url(http://i48.tinypic.com/241weuu.png)}
img[src*="btn_unscr.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.png)}
img[src*="btn_freeze.gif"] {background-image: url(http://i45.tinypic.com/2im2hww.png)}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.jpg)}
img[src*="btn_track.gif"] {background-image: url(http://i48.tinypic.com/2a7z7v4.png)}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i49.tinypic.com/34oeb91.png)}
img[src*="anonymous.gif"] {background-image: url(http://i48.tinypic.com/n623yq.gif)}
img[src*="openid-profile.gif"] {background-image: url(http://i48.tinypic.com/24gt8jd.gif)}
img[src*="userinfo.gif"] {background-image: url(http://i52.tinypic.com/fnd6js.gif)}
img[src*="talk/none.gif"] {background-image: url(http://i46.tinypic.com/2ur1i4o.gif)}
img[src*="help.gif"] {background-image: url(http://i46.tinypic.com/2gtnner.gif)}
img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-image: url(http://i48.tinypic.com/ih5oh4.png)}
img[src*="upgrade-paid-icon.gif"] {background-image: url(http://i45.tinypic.com/2r7sm00.gif)}
.ljuser img {width: 0; height: 0; background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50%; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50% !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i48.tinypic.com/rte4wp.gif) no-repeat scroll 0 50% !important; padding: 10px 10px 0 2px !important}
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px}
HTML BODY img.i-ljuser-userhead {height:10px !important;width:0 !important}
/* CONTEXTUAL POP-UP */
div.ContextualPopup {position: relative; margin: 0px; text-align: left; font: normal 9px "Arial" !important; }
div.ContextualPopup div.Inner {color: #aaaaaa !important;border:1px solid #eeeeee;background: #f2f2f2 url() !important; padding: 0; width: 280px;}
div.ContextualPopup .Userpic { padding: 3px; margin: 5px 5px 0; border: 1px solid #eeeeee; background: #ffffff url();}
div.ContextualPopup .Content { padding: 5px;border-right: 1px solid #ececec; margin-right:68px;background: #ffffff url();}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important; font-weight: bold; color: #999999 !important}
div.ContextualPopup .Relation {font-size: 9pt;text-transform:uppercase}
/* MISC */
#lj_controlstrip_new{z-index:0}
.w-cs .w-cs-userinfo {padding-left:220px;margin-right:10px}
.w-cs .w-cs-user-controls {}
.w-cs .w-cs-status {float:none;text-align:left;line-height:1}
.w-cs .w-cs-user-controls .w-cs-menu {position:relative;top:5px;left:0}
.w-cs FORM.w-cs-search {float:right;top:-25px}
a img {border:none}
#lj_controlstrip_statustext, b, u { color: #111111}
i, s { color: #888888}
p, td {}
blockquote { padding:15px;margin:10px;border-left: 5px solid #eeeeee; background-color: #f7f7f7;color:#444}
code {display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;}
.appwidget-qotd table td div{border:1px solid #eeeeee !Important;padding:5px 30px 5px 5px !important}
kbd, pre, tt {font-family: monospace;}
textarea { font-family: Georgia, Times New Roman, Times,serif;font-size: 13px; background-color: #f7f7f7; border: 1px solid #dddddd; color: #222;padding:4px}
/* COLORS */
a, a:link, a:visited, .subject a:visited, h2, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
color: #000;
text-decoration: none}
.ljuser a b {font-variant:small-caps}
.entry_text a, .commentreply a{font-weight:bold}
a:hover, .datesubjectcomment a:hover, .ljuser a b:hover,div.ljtags a:hover {background-color:#C3DADF; text-decoration: none}
a img:hover{background:transparent}
.subject a, .subject a:link, .subject,h2, .subject a:visited, .subject a:hover, .subject a:link:hover,.subject a:visited:hover {background-color:transparent;text-decoration: none;color: #000000;font-weight:normal}
.userpicfriends a, .userpicfriends a font {color:#77B3BF} #sidebar a{color:#222}
notes
credit mini icons by Brand Spanking New and graphicsbyjulz.
safe keeping
Upload images to your own server to be safe. Tinypic does delete its images after a while.
editing
♚ As per usual, feel free to add your own header/ edit bloody anything you want to.
F.A.Q.
If you have problems with a layout, please post them at the FAQ. I unfortunately I cannot help with stylistic edits, but as I said before, go nuts doing so.
release notes:
04/08/10 - Fixed code to display correctly in Internet Explorer
24/05/2011 - Re-uploaded userinfo graphic
image | live
image | live layout:carried to Ohio in a swarm of bees
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, sidebar/links list
browsers: IE7+, FF, Safari, Chrome
installation
01. Choose Journal Style
Select "Greys" Flexible Squares layout in "Select a New Theme"
02. Choose a Page Setup
i. Set Advertisement display to Horizontal or Between Entries
ii. Select 2 Column (sidebar on right) or 2 Column (sidebar on left).
03. Style
Change the "Background color of the outer table" to #FFFFFF.
04. Custom CSS
Ensure Use layout's stylesheet(s) is set to no
05.
Paste code into the Custom Stylesheet box.
version one: stripped (links list only)
/*
carried to Ohio in a swarm of bees in stripped (flexible squares; milou veronica)
*/
body {text-align: center; color: #ffffff; font-family:"Arial", Helvetica,serif; font-size: .77em; margin:0}
.headerimage {display:none;position: relative; background: transparent url() no-repeat scroll 0 0; height:;width:;margin: 0 auto}
#content{background-color: #FFFFFF; color: #222222;margin: 0 auto; border-width: 0px; padding:0;}
#maincontent { padding:90px 0 0;width: 650px;background: #FFF url() repeat scroll 0 0; text-align: justify;margin: 0 auto 0 40px}
#sidebar {padding:0; text-align: left; color: #000000; font-size: .92em; line-height: 1.75;width: 700px;margin: 0 auto 0 40px;text-transform:lowercase}
/* HEADER */
#header {margin: 0 auto;text-align: left; padding:0 0 0px; line-height: 1; color: #333;font-family:Helvetica,Arial,sans-serif}
div#header a, div#header a:link, div#header a:visited {font-weight:normal;background-color:transparent;color:#888888}
div#header li.view {padding:20px 10px}
ul.navheader{font-size: .8em;text-transform: uppercase;letter-spacing:-0.04em;margin:0;padding:10px 0;text-align:left;border-bottom:1px solid #eee;border-top:1px solid #eee}
ul.navheader li {margin:0 0 0 -3px; list-style-type: none;display:inline;padding: 0 10px}
ul.navheader li:hover,div#header li.view:hover{color:#222;border-bottom:4px solid #eee;padding-bottom: 10px} ul.navheader li:hover a{color:#aaaaaa}
ul.navheader li a{font-weight:normal;background-color:transparent;color:#888888}
.title {width: 700px;text-align:right;margin: 80px 0 0 40px;font-size:1.3em;text-transform: lowercase;padding:0 15px 0 0;line-height:0.8;background: transparent url(http://i50.tinypic.com/2qkpkzl.jpg) no-repeat scroll 100% 50%}
.subtitle{width: 700px;text-align:right;padding:0 10px 0 40px;text-transform: lowercase;color:#aaa;font-size:.9em}
/* ENTRIES */
.subcontent { min-height: 120px; background: #FFFFFF url() repeat scroll;margin-left: auto; margin-right: auto}
.date {margin:0; color:#888888;text-transform: uppercase; font-size:.8em;padding:0}
.subject {font-size: 1.3em;padding:0; letter-spacing:-0.04em;line-height: 1; color: #666666;font-family:Helvetica,Arial,sans-serif}
.subject a, .subject a:link, .subject a:visited {text-decoration: none;padding:5px}
.datesubject {text-align: left;padding:10px 0}
.entry{margin:0; padding: 0;text-align: justify;line-height: 1.75}
.entry_text {margin:0;padding:15px 0 10px 0}
.entry ul li,.entry ol li{padding-left: 5px;margin-left: 15px}
/* USERPICS */
.userpic, .userpicfriends {margin:10px 0 10px 20px; position: relative;float: right; padding: 0;background-color: transparent !important;z-index: 15;}
.userpicfriends {text-align: center;text-transform: uppercase;letter-spacing:-0.07em;font-size:.9em}
.userpicfriends img,.userpic img {display:none;width:80px;height:80px}
body.lj-view-entry .userpicfriends img{display:inline}
.userpicfriends a font {color:#111}
/* COMMENT BAR */
.comments {color: #fff;text-transform: uppercase; font-weight:bold;font-size:.85em;letter-spacing:-0.03em;text-align: left; padding:12px 6px;margin:30px 0 0;border-top:1px solid #eeeeee;border-bottom:1px solid #eeeeee}
div.comments a, div.comments a:visited, div.comments a:link {background-color:#;width:85px;padding:3px 7px 2px 12px;margin:0;clear:right;background: transparent url(http://i46.tinypic.com/dfk6ix.png) no-repeat scroll 0 0}
div.comments a:hover{color:#A8C8CF;background-color:#FFF}
.separator{height: 75px}
/* CURRENTS AND TAGS (icons by ?) */
.ljtags {text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i48.tinypic.com/28l6u8o.png) no-repeat scroll 100% 50%;margin: 50px 0 0 auto;width:350px; text-transform: lowercase; color: #ffffff; font-weight: bold;font-size: 0;clear:right}
div.ljtags a {font-size: 7pt;background-color:#eeeeee;margin-left:5px;padding:0 2px;font-weight: normal}
.currents {text-align: right; margin:0; padding-top:15px; padding: 8px 0px 8px 0; text-transform: lowercase; font-size: 7pt; color: #646464;clear:right}
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #000; display:none}
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%}
.currentlocation {background-image: url(http://i46.tinypic.com/etzgjn.png)}
}){kind=link}
.currentmood{background-image: url(http://i49.tinypic.com/244nuw5.png)}
}){kind=link}
.currentgroups {background-image: url(http://i47.tinypic.com/21l05.png)}
}){kind=link}
.currentmusic {background-image: url(http://i46.tinypic.com/w15sut.png)}
}){kind=link}
/* TAG PAGE */
h2 { font-size: 1.3em; letter-spacing:-0.04em;line-height: 1; color: #666666;font-family:Helvetica,Arial,sans-serif;padding:5px;font-weight: normal;margin: 0px auto}
.ljtaglist {text-align: left; margin: 0; padding:10px; list-style:inside none square;}
.ljtaglist li {padding:2px 10px;border-bottom: 1px dotted #eeeeee;} .ljtaglist li:hover{background-color:#f2f2f2}
/* COMMENT PAGE */
.box { text-align: left; padding:0; clear: right;margin-left: auto; margin-right: auto}
.datesubjectcomment {text-align: left; color: #000000;font-variant:small-caps;margin:0;border-bottom: 1px solid #eeeeee;border-top:1px solid #eee;padding:5px}
.datesubjectcomment strong{;margin-left:20px;font-size:1.4em}
.userpiccomment {display:none}
input { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa; border: 1px solid #cccccc}
textarea.textbox {width: 100% !important}
.reply{ border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left}
.replytosubject {font-weight: bold}
.replytoposter{padding:5px}
body.lj-view-reply .entry{padding:10px}
.replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 20px;color:#666666}
.commentreply {min-height:40px;text-align: left; position: relative; margin:5px 0;padding:10px;line-height:1.5}
.commentbox {padding: 20px 0;margin-top:10px}
.commentboxpartial {padding: 0;margin: 10px}
.commentinfo {margin-top: 10px;width: 100%}
form#postform{}form#qrform {}
form#qrform table {border-width: 0px !important}
.skiplinks {text-align: center;margin: 0 auto 30px;padding: 5px 0; font-size: 8pt; color: #ccc;border-top:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3}
/* SIDEBAR */
.defaultuserpic {display:none}
.sbarheader {}
.sbarbody {padding: 0}
.sbarbody2 {padding: 0 0 10px;line-height:1.5;float:left;width:300px;color:#999}
ul.sbarlist{ margin: 0; padding: 0; list-style: none;line-height:1}
#sidebar_linklist{margin:4px 0 0 auto;line-height:1;width:140px}
li.sbaritem{padding: 1px 0 1px 12px; background: transparent url(http://i45.tinypic.com/2ecdi86.jpg) no-repeat scroll 0 50%;margin:0;display:block}
li.sbaritem:hover a{background-color:transparent;color:#17A3BF}
li.sbaritem:hover{background-color:#f4f4f4}
li.sbartitle, .sbarbody2,#sidebar_summary,#sidebar_tags , #sidebar_calendar{display:none}
li.sbartitle {margin-top:10px;font-size:1.1em;padding:2px;text-align:right}
#sidebar table.calendar {font-size:7pt;line-height:1}td.sbarcalendar, td.sbarcalendarposts {border:1px solid #eeeeee;padding:1px 1px;width:12px;height:16px;vertical-align:middle;text-align:center;} td.sbarcalendarposts {background-color:#f4f4f4}
/* FOOTER */
#footer { padding: 5px;margin:0 auto 0 40px;text-transform: uppercase; text-align:center;font-size: 1em; z-index: 100; clear: both;letter-spacing:-0.03em;width:650px}
ul.navfooter{ padding: 0px; margin:0}
ul.navfooter li {list-style: none; margin: 0 0 3px;display:inline}
div#footer li.viewing {color: #555555;display:none}
div#footer a, div#footer a:link, div#footer a:visited {padding: 5px;color:#000}
div#footer a:hover{background-color:#eeeeee}
div#footer li.viewing {display:none}
div#footer li,div#footer li + li{padding: 0 9px}
div#footer li{background:transparent url(http://i46.tinypic.com/25g8ox0.jpg) no-repeat scroll 0 50%}
div#footer li + li{background:transparent url(http://i47.tinypic.com/25grub6.png) no-repeat scroll 100% 50%}
.clearfoot {clear:both}
/* ARCHIVE PAGE */
ul.year { margin: 0px; margin: 0 auto 10px}
ul.year li {display: inline} ul.year li a{padding:0 3px}
ul.year li a:hover, table.yeartable a{background-color:#81C2CF;color:#FFFFFF;padding:0 3px}
table.yeartable {margin-left: auto; margin-right: auto;margin-left: auto; margin-right: auto; width:60%;padding: 30px;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}
table.yeartable td.yearday { background-color: #eee; text-align: center}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}
/* MINI ICONS by Julz and Brand Spanking New*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 12px 12px !important; background: transparent none no-repeat scroll 50% 50%}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url(http://i50.tinypic.com/8xu2jc.gif)}
}){kind=link}
img[src*="icon_private.gif"]{background-image: url(http://i50.tinypic.com/aw9sol.gif)}
}){kind=link}
img[src*="icon_groups.gif"]{background-image: url(http://i50.tinypic.com/2zpqp6v.gif)}
}){kind=link}
.ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"] {background: transparent none no-repeat 0 50%; padding: 9px 9px 0 2px !important}
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i48.tinypic.com/2f06gwk.png)}
}){kind=link}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i45.tinypic.com/14wuazs.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i45.tinypic.com/2v0ixvs.gif) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i50.tinypic.com/2m63g8w.gif) !important}
img[src*="btn_del.gif"]{background-image: url(http://i50.tinypic.com/2e5tt74.png)}
}){kind=link}
img[src*="btn_scr.gif"] {background-image: url(http://i48.tinypic.com/241weuu.png)}
}){kind=link}
img[src*="btn_unscr.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.png)}
}){kind=link}
img[src*="btn_freeze.gif"] {background-image: url(http://i45.tinypic.com/2im2hww.png)}
}){kind=link}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.jpg)}
}){kind=link}
img[src*="btn_track.gif"] {background-image: url(http://i48.tinypic.com/2a7z7v4.png)}
}){kind=link}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i49.tinypic.com/34oeb91.png)}
}){kind=link}
img[src*="anonymous.gif"] {background-image: url(http://i48.tinypic.com/n623yq.gif)}
}){kind=link}
img[src*="openid-profile.gif"] {background-image: url(http://i48.tinypic.com/24gt8jd.gif)}
}){kind=link}
img[src*="userinfo.gif"] {background-image: url(http://i52.tinypic.com/fnd6js.gif)}
}){kind=link}
img[src*="talk/none.gif"] {background-image: url(http://i46.tinypic.com/2ur1i4o.gif)}
}){kind=link}
img[src*="help.gif"] {background-image: url(http://i46.tinypic.com/2gtnner.gif)}
}){kind=link}
img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-image: url(http://i48.tinypic.com/ih5oh4.png)}
}){kind=link}
img[src*="upgrade-paid-icon.gif"] {background-image: url(http://i45.tinypic.com/2r7sm00.gif)}
}){kind=link}
.ljuser img {width: 0; height: 0; background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50%; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50% !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i48.tinypic.com/rte4wp.gif) no-repeat scroll 0 50% !important; padding: 10px 10px 0 2px !important}
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px}
HTML BODY img.i-ljuser-userhead {height:10px !important;width:0 !important}
/* CONTEXTUAL POP-UP */
div.ContextualPopup {position: relative; margin: 0px; text-align: left; font: normal 9px "Arial" !important; }
div.ContextualPopup div.Inner {color: #aaaaaa !important;border:1px solid #eeeeee;background: #f2f2f2 url() !important; padding: 0; width: 280px;}
div.ContextualPopup .Userpic { padding: 3px; margin: 5px 5px 0; border: 1px solid #eeeeee; background: #ffffff url();}
div.ContextualPopup .Content { padding: 5px;border-right: 1px solid #ececec; margin-right:68px;background: #ffffff url();}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important; font-weight: bold; color: #999999 !important}
div.ContextualPopup .Relation {font-size: 9pt;text-transform:uppercase}
/* MISC */
#lj_controlstrip_new {z-index:1}
.w-cs .w-cs-userinfo {padding-left:12px}
.w-cs .w-cs-userpic {display:none}
a img {border:none}
b, u { color: #111111}
i, s { color: #888888}
p, td {}
blockquote { padding:15px; border: 1px solid #eeeeee; background: #f7f7f7 url() repeat; color:#444444}
code {display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;}
.appwidget-qotd table td div{border:1px solid #eeeeee !Important;padding:5px 30px 5px 5px !important}
kbd, pre, tt {font-family: monospace;}
textarea { font-family: Georgia, Times New Roman, Times,serif;font-size: 12px; background-color: #f7f7f7; border: 1px solid #dddddd; color: #333333}
/* COLORS */
a, a:link, a:visited, .subject a:visited, h2, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
color: #000;
text-decoration: none}
.ljuser a b {font-variant:small-caps}
.entry_text a, .commentreply a{font-weight:bold}
a:hover, .datesubjectcomment a:hover, .ljuser a b:hover,div.ljtags a:hover {background-color:#C3DADF; text-decoration: none}
a img:hover{background:transparent}
a.lj_invisible{display:none}
.subject a, .subject a:link, .subject,h2, .subject a:visited, .subject a:hover, .subject a:link:hover,.subject a:visited:hover {background-color:transparent;text-decoration: none;color: #000000;font-weight:normal}
.userpicfriends a, .userpicfriends a font {color:#77B3BF} #sidebar a{color:#222}
version two (sidebar)
/*
carried to Ohio in a swarm of bees in sidebar (flexible squares; milou veronica)
*/
body {text-align: center; color: #ffffff; font-family:"Arial", Helvetica,serif; font-size: .77em; margin:0}
.headerimage {position: relative; background: transparent url() no-repeat scroll 0 0; height:;width:;margin:10px 0 0 280px}
#content{color: #222222;margin: 0 10px 0 0; border-width: 0px; padding:0;}
#maincontent { padding: 0; text-align: justify;margin: 10px 0 0 280px}
#sidebar {padding:5px 5px 0; text-align: left;background-color:#FFFFFF; color: #000000; font-size: .92em; line-height: 1;width: 260px;margin: 0 ;text-transform:lowercase;float:left;position:fixed;bottom:15px;left:0;overflow-y:scroll;height:80%}
/* HEADER */
#header {background-color: #FFF;height:20%;position:fixed;left:0;top:-20px;width:260px;overflow-y:scroll;margin: 0 auto 10px 0;text-align: left; padding:5px; line-height: 1; color: #111;font-family:Helvetica,Arial,sans-serif}
div#header a, div#header a:link, div#header a:visited {font-weight:normal;background-color:transparent;color:#111}
div#header li.view {padding:1px 5px}
ul.navheader{font-size: .8em;text-transform: uppercase;letter-spacing:-0.04em;margin:0;padding:25px 0 0;text-align:left}
ul.navheader li {margin:0 0 1px; list-style-type: none;display:block;padding:1px 5px;background-color:#f3f3f3}
ul.navheader li:hover,div#header li.view:hover{background-color:#e9e9e9} ul.navheader li:hover a{color:#aaaaaa}
.title {text-align:right;margin:10px 0 0;font-size:1.3em;text-transform: lowercase;padding:0 13px 0 0;line-height:0.8}
.subtitle{text-align:right;padding:3px 7px 0 0;text-transform: lowercase;color:#777;font-size:.9em}
/* ENTRIES */
.subcontent { min-height: 120px;padding:0;margin-left: auto; margin-right: auto}
.date {margin:0 10px 0 0; color:#888888; font-size:.8em;padding:2px;float:left;width:90px}
.subject {font-size: .95em;padding: 6px; letter-spacing:-0.04em;line-height: 1; color: #666666}
.subject a, .subject a:link, .subject a:visited {text-decoration: none}
.datesubject {text-align: left;padding:0;border-bottom:1px #e6e6e6 solid;border-top:1px #e6e6e6 solid;text-transform: uppercase}
.entry{margin:0; padding: 0;text-align: justify;line-height: 1.75}
.entry_text {margin:0 110px 0 0;padding:15px 20px;min-height:110px}
.entry ul li,.entry ol li{padding-left: 5px;margin-left: 15px}
/* USERPICS */
.userpic, .userpicfriends {margin:40px 0 10px 20px; position: relative;float:right;padding: 0;background-color: transparent !important;z-index: 15}
.userpicfriends {text-align: center;text-transform: uppercase;letter-spacing:-0.07em;font-size:.9em}
.userpicfriends img,.userpic {padding:5px 4px 0 0}
/* COMMENT BAR */
.comments {text-align:right;color: #fff;text-transform: uppercase; font-weight:bold;font-size:.85em;letter-spacing:-0.03em; padding:7px;margin:30px 0 0}
div.comments a, div.comments a:visited, div.comments a:link {padding:4px 7px 3px 12px;margin:0;clear:right;background: transparent url(http://i50.tinypic.com/2qkpkzl.jpg) no-repeat scroll 0 50%}
div.comments a:hover{color:#A8C8CF;background-color:#FFF}
.separator{height: 75px}
/* CURRENTS AND TAGS (icons by ?) */
.ljtags {padding: 4px 0 4px 12px; background: transparent url(http://i48.tinypic.com/28l6u8o.png) no-repeat scroll 0 50%;margin: 50px 0 0;width:350px; text-transform: lowercase; color: #ffffff; font-weight: bold;font-size: 0}
div.ljtags a {font-size: 7pt;background-color:#eeeeee;margin-left:5px;padding:0 2px;font-weight: normal}
.currents {text-align: left; margin:0; padding: 8px 0 8px 20px; text-transform: lowercase; font-size: 7pt; color: #646464}
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #000; display:none}
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 0 4px 18px; background: transparent none no-repeat scroll 0 50%}
.currentlocation {background-image: url(http://i46.tinypic.com/etzgjn.png)}
.currentmood{background-image: url(http://i49.tinypic.com/244nuw5.png)}
.currentgroups {background-image: url(http://i47.tinypic.com/21l05.png)}
.currentmusic {background-image: url(http://i46.tinypic.com/w15sut.png)}
/* TAG PAGE */
h2 { font-size: 1.3em; letter-spacing:-0.04em;line-height: 1; color: #666666;font-family:Helvetica,Arial,sans-serif;padding:5px;font-weight: normal;margin: 0px auto}
.ljtaglist {text-align: left; margin: 0; padding:10px; list-style:inside none square;}
.ljtaglist li {padding:2px 10px;border-bottom: 1px dotted #eeeeee} .ljtaglist li:hover{background-color:#f2f2f2}
/* COMMENT PAGE */
.box { text-align: left; padding:0; clear: right;margin-left: auto; margin-right: auto}
.datesubjectcomment {text-align: left; color: #000000;font-variant:small-caps;margin:0;padding:5px}
.datesubjectcomment strong{margin-left:20px;font-size:1.4em}
.userpiccomment {float:left;margin:0 10px 10px 0;padding:3px;border:1px solid #eee}
input { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa; border: 1px solid #cccccc}
textarea.textbox {width: 100% !important}
.reply{ border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left}
.replytosubject {font-weight: bold}
.replytoposter{padding:5px}
body.lj-view-reply .entry{padding:10px}
.replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 20px;color:#666666}
.commentreply {min-height:40px;text-align: left; position: relative; margin:5px 0;padding:10px;line-height:1.5}
.commentbox {padding: 10px 0;margin-top:20px;border-top:1px solid #eee}
.commentboxpartial {padding: 0;margin: 10px}
.commentinfo {margin-top: 10px;width: 100%}
form#postform{}form#qrform {}
form#qrform table {border-width: 0px !important}
.skiplinks {text-align: center;margin: 0 auto 30px;padding: 5px 0; font-size: 8pt; color: #ccc}
/* SIDEBAR */
.defaultuserpic {display:none;margin-bottom:3px;padding:10px;text-align:center}
.defaultuserpic img{width:70px;height:70px;padding:3px;border: 1px solid #eee}
#sidebar_linklist, .sbarbody2,#sidebar_summary,#sidebar_tags , #sidebar_calendar{margin-bottom:10px }
.sbarheader {}
.sbarbody {padding:10px;padding: 0;}
.sbarbody2 {padding:5px;line-height:1.2em}
ul.sbarlist{ margin: 0; padding: 0; list-style: none;line-height:1}
#sidebar_linklist{line-height:1}
li.sbaritem{padding: 1px 0 1px 16px; background: transparent url(http://i45.tinypic.com/2ecdi86.jpg) no-repeat scroll 5px 50%;margin:0;display:block}
li.sbaritem:hover a{background-color:transparent}
li.sbaritem:hover{background-color:#eeeeee}
ul.sbarlist.sbarcontent{padding-top:5px}
li.sbartitle {font-size:.95em;padding:3px 10px;text-transform:uppercase;border-top:1px solid #eee;border-bottom:1px solid #eee}
#sidebar table.calendar {font-size:.9em;line-height:1}
td.sbarcalendar, td.sbarcalendarposts {border:1px solid #eeeeee;padding:2px;vertical-align:middle;text-align:center}
td.sbarcalendarposts {background-color:#f4f4f4}
/* FOOTER */
#footer {padding:0 0 20px;margin:0;text-transform: uppercase; text-align:center;font-size: .8em; z-index: 100; clear: both;letter-spacing:0.03em;width:270px;position:fixed;bottom:-20px;left:0;overflow-y:scroll}
ul.navfooter{ padding: 2px 0;height:15px;margin:0;border-top:1px solid #e5e5e5;background-color:#f3f3f3}
ul.navfooter li {list-style: none; margin: 0 0 3px;display:inline}
div#footer li.viewing {color: #555555;display:none}
div#footer a, div#footer a:link, div#footer a:visited {color:#000}
div#footer li:hover{background-color:#e5e5e5}
div#footer li{padding:2px 6px 2px} div#footer li a:hover{background-color:transparent}
.clearfoot {clear:both}
/* ARCHIVE PAGE */
ul.year { margin: 0px; margin: 0 auto 10px}
ul.year li {display: inline} ul.year li a{padding:0 3px}
ul.year li a:hover, table.yeartable a{background-color:#81C2CF;color:#FFFFFF;padding:0 3px}
table.yeartable {margin-left: auto; margin-right: auto;margin-left: auto; margin-right: auto; width:60%;padding: 30px;}
table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}
table.yeartable td.yearday { background-color: #eee; text-align: center}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}
/* MINI ICONS by Julz and Brand Spanking New*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 12px 12px !important; background: transparent none no-repeat scroll 50% 50%}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url(http://i50.tinypic.com/8xu2jc.gif)}
img[src*="icon_private.gif"]{background-image: url(http://i50.tinypic.com/aw9sol.gif)}
img[src*="icon_groups.gif"]{background-image: url(http://i50.tinypic.com/2zpqp6v.gif)}
.ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"] {background: transparent none no-repeat 0 50%; padding: 9px 9px 0 2px !important}
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i48.tinypic.com/2f06gwk.png)}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i45.tinypic.com/14wuazs.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i45.tinypic.com/2v0ixvs.gif) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i50.tinypic.com/2m63g8w.gif) !important}
img[src*="btn_del.gif"]{background-image: url(http://i50.tinypic.com/2e5tt74.png)}
img[src*="btn_scr.gif"] {background-image: url(http://i48.tinypic.com/241weuu.png)}
img[src*="btn_unscr.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.png)}
img[src*="btn_freeze.gif"] {background-image: url(http://i45.tinypic.com/2im2hww.png)}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i50.tinypic.com/23kymxi.jpg)}
img[src*="btn_track.gif"] {background-image: url(http://i48.tinypic.com/2a7z7v4.png)}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i49.tinypic.com/34oeb91.png)}
img[src*="anonymous.gif"] {background-image: url(http://i48.tinypic.com/n623yq.gif)}
img[src*="openid-profile.gif"] {background-image: url(http://i48.tinypic.com/24gt8jd.gif)}
img[src*="userinfo.gif"] {background-image: url(http://i52.tinypic.com/fnd6js.gif)}
img[src*="talk/none.gif"] {background-image: url(http://i46.tinypic.com/2ur1i4o.gif)}
img[src*="help.gif"] {background-image: url(http://i46.tinypic.com/2gtnner.gif)}
img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-image: url(http://i48.tinypic.com/ih5oh4.png)}
img[src*="upgrade-paid-icon.gif"] {background-image: url(http://i45.tinypic.com/2r7sm00.gif)}
.ljuser img {width: 0; height: 0; background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50%; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i52.tinypic.com/fnd6js.gif) no-repeat 0 50% !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i48.tinypic.com/rte4wp.gif) no-repeat scroll 0 50% !important; padding: 10px 10px 0 2px !important}
.Note .Inner { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal;} div.ljcmtmanage { background: #ffffff none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px}
HTML BODY img.i-ljuser-userhead {height:10px !important;width:0 !important}
/* CONTEXTUAL POP-UP */
div.ContextualPopup {position: relative; margin: 0px; text-align: left; font: normal 9px "Arial" !important; }
div.ContextualPopup div.Inner {color: #aaaaaa !important;border:1px solid #eeeeee;background: #f2f2f2 url() !important; padding: 0; width: 280px;}
div.ContextualPopup .Userpic { padding: 3px; margin: 5px 5px 0; border: 1px solid #eeeeee; background: #ffffff url();}
div.ContextualPopup .Content { padding: 5px;border-right: 1px solid #ececec; margin-right:68px;background: #ffffff url();}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important; font-weight: bold; color: #999999 !important}
div.ContextualPopup .Relation {font-size: 9pt;text-transform:uppercase}
/* MISC */
#lj_controlstrip_new{z-index:0}
.w-cs .w-cs-userinfo {padding-left:220px;margin-right:10px}
.w-cs .w-cs-user-controls {}
.w-cs .w-cs-status {float:none;text-align:left;line-height:1}
.w-cs .w-cs-user-controls .w-cs-menu {position:relative;top:5px;left:0}
.w-cs FORM.w-cs-search {float:right;top:-25px}
a img {border:none}
#lj_controlstrip_statustext, b, u { color: #111111}
i, s { color: #888888}
p, td {}
blockquote { padding:15px;margin:10px;border-left: 5px solid #eeeeee; background-color: #f7f7f7;color:#444}
code {display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;}
.appwidget-qotd table td div{border:1px solid #eeeeee !Important;padding:5px 30px 5px 5px !important}
kbd, pre, tt {font-family: monospace;}
textarea { font-family: Georgia, Times New Roman, Times,serif;font-size: 13px; background-color: #f7f7f7; border: 1px solid #dddddd; color: #222;padding:4px}
/* COLORS */
a, a:link, a:visited, .subject a:visited, h2, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
color: #000;
text-decoration: none}
.ljuser a b {font-variant:small-caps}
.entry_text a, .commentreply a{font-weight:bold}
a:hover, .datesubjectcomment a:hover, .ljuser a b:hover,div.ljtags a:hover {background-color:#C3DADF; text-decoration: none}
a img:hover{background:transparent}
.subject a, .subject a:link, .subject,h2, .subject a:visited, .subject a:hover, .subject a:link:hover,.subject a:visited:hover {background-color:transparent;text-decoration: none;color: #000000;font-weight:normal}
.userpicfriends a, .userpicfriends a font {color:#77B3BF} #sidebar a{color:#222}
notes
credit mini icons by Brand Spanking New and graphicsbyjulz.
safe keeping
Upload images to your own server to be safe. Tinypic does delete its images after a while.
editing
♚ As per usual, feel free to add your own header/ edit bloody anything you want to.
F.A.Q.
If you have problems with a layout, please post them at the FAQ. I unfortunately I cannot help with stylistic edits, but as I said before, go nuts doing so.
release notes:
04/08/10 - Fixed code to display correctly in Internet Explorer
24/05/2011 - Re-uploaded userinfo graphic