s2 layout: on a bird's strong wing [flexible squares]

Feb 23, 2009 10:55

Out with my old layout, so here it is, with a weird manly version because I do post mostly girly layouts. And by manly I mean, 'I used Impact', and by girly I usually mean, 'I used Georgia".



picture | live

picture | live layout: on a bird's strong wing
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, topbar/linkbar
browsers: IE7, FF, Safari, and Opera

tartan,linkbar
/*

on a bird's strong wing ((flexible squares;basic,plus,paid;milou veronica))

*/
body { background: url(http://i45.tinypic.com/2qdpt0i.png) #111111 repeat scroll 0 0; text-align: center; color: #ffffff; font-family: Georgia, Times New Roman, Times,serif; font-size: 11px; margin: 0px 0 0; }
.headerimage {position: relative; background: #FFFFFF url() no-repeat 50% 50%; height: 0px; width: 650px; margin-left: auto;margin-right: auto;margin-bottom: 0px; border-right: 1px solid #eeeeee; border-left: 1px solid #eeeeee;}
#content{ color: #555555; width:90%;background-color: #ffffff; margin: 0 auto; border-width:0px; border-style: solid; border-color: #eeeeee; padding:0 0 30px;}
#maincontent { padding: 6px 0 0; margin-top: 0px; text-align: left;margin-left: 0px; }
#sidebar { padding:10px 0; margin: 0; background-color:#000000; width: 100%;position:fixed; bottom:0;left:0;z-index:100;text-align: left; color: #777777; font-size: 0.85em;border-top:none; line-height: 1.5;}

/* HEADER */
#header {margin: 0; text-align: right; font-size: 1.1em; letter-spacing: -0.04em; text-transform: lowercase; color: #111111; padding: 4px 0 0px 20px; }

div#header a, div#header a:link, div#header a:visited{ color: #444444; padding: 5px 7px; display: block;margin: 2px;text-decoration: none; border:1px solid #eeeeee;border-right: 15px solid #f3f3f3;} div#header a:hover {color: #777777;}
div#header li.view { padding:5px 7px;margin: 2px; border: 1px solid #eeeeee;background-color: #f4f4f4;border-right: 15px solid #e3e3e3;}
div#header li.view:hover, div#header a:hover { position:relative; right:10px;border-right: 15px solid #e4e4e4;}
ul.navheader{ padding: 0px; margin: 3px 10px 0 0; width:170px;float:right;}
ul.navheader li {padding: 0px 0px 0px 0px; margin: 0px; list-style-type: none; display: block;}

.title { margin:0; text-align: left; font-size: 4em; padding-top:100px;line-height: 1; letter-spacing: -0.07em; }
.subtitle{ text-align: left; color:#555555; line-height: 1; font-size: 1em; }

/* ENTRIES */
.subcontent { min-height: 140px; margin: 0 20px; background: transparent url() repeat scroll 0 0; padding:10px 0;}
.date { text-transform: uppercase; color: #aaaaaa; font-size: 6pt; letter-spacing: 9px; word-spacing: 8px;}
.subject { background-color: transparent ;padding-left: 15px; font-size: 18pt; text-transform: lowercase; line-height: 100%; letter-spacing: -2px; }
.subject a, .subject a:link, .subject a:visited {text-decoration: bold;}
.datesubject {padding: 10px 5px 5px 23px; background-color: #ffffff; text-align: right; border-top:1px solid #ececec;}
.entry { margin: 0px; padding: 0px; text-align: left; line-height: 1.75; }
.entry_text { font-size: 11px; padding: 10px 30px; margin-bottom: 0px;}
.entry ul li {padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}

/* USERPICS */
.userpic { position: relative; float: right; padding: 6px; background-color: #FFFFFF; margin: 10px 0px 10px 10px ; z-index: 15; border: 1px solid #eeeeee;}
.userpicfriends { border: 0px solid #eeeeee; position: relative; background-color: transparent !important; float: right; padding: 0px; margin: 10px 0px 10px 10px; text-align: right; z-index: 15; font-size: 8pt;}
.userpicfriends img {border: 0px; padding: 7px; border: 1px solid #eeeeee; background-color: #FFFFFF; }
.userpicfriends a font {color: #bbbbbb;}

/* COMMENT BAR */
.comments {color: #dddddd; text-transform:uppercase; font-size: 1.1em; text-align: center; padding: 2px 0 3px 0; position: relative; top: 0px; margin-top: 20px;}

div.comments a, div.comments a:visited, div.comments a:link { padding: 6px; }
div.comments a:hover {}
.separator{height:25px;}

/* CURRENTS AND TAGS */
.ljtags {text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i43.tinypic.com/34eaick.png) no-repeat scroll 100% 50%; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7pt; color: #888888; font-weight: bold; }
.ljtags:hover {} div.ljtags a {font-weight: normal; }

.currents {text-align: right; padding-top:15px; padding: 8px 30px 8px 0; text-transform: lowercase; font-size: 7pt; color: #646464; }
.currents:hover { border-color: #f1f1f1;}
.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #888888; display:none;}
.currentlocation, .currentmood, .currentgroups , .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%; }
.currentlocation {background-image: url(http://i44.tinypic.com/29lh6bq.png);} .currentmood{background-image: url(http://i41.tinypic.com/2lsf7dh.png);} .currentgroups {background-image: url(http://i39.tinypic.com/24piccl.png);} .currentmusic {background-image: url(http://i39.tinypic.com/bfg6mp.png);}

/* TAG PAGE */
h2 { padding: 10px 10px 10px 30px; font-family: Trebuchet MS, Geneva, sans-serif; letter-spacing: 0px; font-size: 13pt; text-transform: uppercase; line-height: 100%; color: #444444; font-weight: normal; margin: 0px; border-top: 2px solid #1a1a1a;border-bottom: 1px solid #1a1a1a; margin-left: 20px; margin-right: 20px; }

.ljtaglist { text-align: left; margin: 0px 20px; padding: 5px 15px 15px 35px; font-size:10px; list-style: inside none square ; } .ljtaglist li { margin: 3px; padding: 3px; border-bottom: 1px dotted #e6e6e6; }

/* COMMENT PAGE */
.box { text-align: left; margin:0 20px 1px; padding:0; clear: left; }

.datesubjectcomment {text-align: left; color: #999999; margin-top: 0px; }
.userpiccomment { position: relative; padding: 3px; border: 1px solid #eeeeee; background-color: #ffffff; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}
textarea.textbox {width: 100% !important;}

.reply { border: 0px ; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.75;min-height:80px;}
.replytosubject {letter-spacing:2px; font-weight: bold;}

.commentreply { line-height:1.75; min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 20px;}
.commentbox { border-bottom: 1px solid #eeeeee; background-color: #FFFFFF; padding: 20px 30px 5px 20px;margin: 7px 0px 7px 0px;}
.commentbox:hover, .commentboxpartial:hover {border-color: #e6e6e6;}
.commentboxpartial { border-bottom: 1px solid #eeeeee; background-color: #FFFFFF; padding: 10px; margin: 10px 120px 0 0;}
.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%;}
div.box form#postform, form#qrform {background-color: #FFFFFF; padding: 10px 0;}
.skiplinks {text-align: left; margin: 0 20px; padding:0px; font-size: 7pt; letter-spacing: 1px; color: #dddddd; background-color: #ffffff; }

/* SIDEBAR */
.defaultuserpic { margin: 0; padding:0px; text-align:center;display:none;}
.defaultuserpic img {padding: 15px 15px 10px 10px; border: 0px solid #eeeeee; margin: 0px 0 10px 10px; width: 60px; height: 60px; float: right; }

.sbarheader {padding: 0px 5px 0px 5px;}
.sbarbody {padding: 0px 5px 0px 5px; }

.sbarbody2 { padding: 15px 5px 10px 20px; display:none}

ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none;}
li.sbaritem{ padding: 4px 5px; border-right: 1px solid #222222;border-bottom: 0px solid #eeeeee; margin:0px; display: inline; } li.sbaritem:hover {background-color: #1a1a1a;}
li.sbartitle{ text-transform: uppercase; padding: 4px ; margin: 3px 0; border-bottom: 1px solid #eeeeee; font-family: Georgia, Times, serif; color: #777777; display:none;}

#sidebar_linklist { font-size:.85em;text-transform: uppercase; text-align:center;letter-spacing:.08em; padding:0; margin-bottom: 0px;} #sidebar_summary { display:none; } #sidebar_tags { display:none; } #sidebar_calendar { display:none; }

/* FOOTER */
#footer { padding:10px 0; width: auto; text-align: left; text-transform: uppercase; font-size: 6pt; letter-spacing: 1px; z-index: 100; clear: both;}

ul.navfooter{ padding: 0px; margin: 0px;}
ul.navfooter li {list-style: none; margin: 0 5px 0 5px; display:inline; }

div#footer li.viewing { display:none; padding: 7px; margin: 2px; }
div#footer a, div#footer a:link, div#footer a:visited {background-color: #ffffff; border: 0px solid #eeeeee; color: #111111; padding: 7px; margin: 2px; }
div#footer a:hover {; }

.clearfoot {clear: both;background-color: #; }

/* ARCHIVE PAGE */
ul.year {margin: 0 0 10px; font-family: Trebuchet MS, Geneva, sans-serif; border-top: 2px solid #1a1a1a;border-bottom: 1px solid #1a1a1a;text-align: center; padding: 20px;margin-left: 20px; margin-right: 20px; }
ul.year li {display: inline;}
table.yeartable { width:90%;background-color: #ffffff; margin-left: auto; margin-right: auto; padding: 10px;margin-left: auto; margin-right: auto; }

table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}
table.yeartable td.yearday { background-color: #fafafa; text-align: center;}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}

/* MINI ICONS BY PINVOKE and FAMFAMFAM */
.ljuser img { width: 0; height: 0; background: transparent url(http://i43.tinypic.com/2ekofp1.png) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: text-bottom !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i43.tinypic.com/2ekofp1.png) no-repeat 0 0 !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i43.tinypic.com/105a0ef.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}

HTML BODY img.i-ljuser-userhead {height:4px !important;width:0 !important}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.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"], .box img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 2px 16px 16px !important; background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{background-image: url(http://i43.tinypic.com/2mp0nk7.png); }
img[src*="icon_private.gif"]{background-image: url(http://i43.tinypic.com/25im9td.png); }
img[src*="icon_groups.gif"] {background-image: url(http://i43.tinypic.com/2wn4dxs.png); }

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i43.tinypic.com/zmjhqg.png) !important; }
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i41.tinypic.com/25u7kvc.jpg) !important; }
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i43.tinypic.com/1220lsp.png) !important; }
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i41.tinypic.com/116l7hg.png) !important; }
img[src*="btn_del.gif"] {background-image: url(http://i39.tinypic.com/344tr80.png); }
img[src*="btn_scr.gif"] {background-image: url(http://i44.tinypic.com/zwhr7n.png); }
img[src*="btn_unscr.gif"] {background-image: url(http://i41.tinypic.com/34g0jrs.png); }
img[src*="btn_freeze.gif"] {background-image: url(http://i44.tinypic.com/jfgaqx.png); }
img[src*="btn_unfreeze.gif"] {backgroun-image: url(http://i39.tinypic.com/minxxt.png); }
img[src*="btn_track.gif"] {background-image: url(http://i43.tinypic.com/2hehi1l.png); }
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i44.tinypic.com/2aindvs.png); }
img[src*="anonymous.gif"] {background-image: url(http://i44.tinypic.com/wqpv9v.png); }
img[src*="openid-profile.gif"] {background-image: url(http://i39.tinypic.com/1z4kbb5.png); }
.box img[src*="userinfo.gif"] {background-image: url(http://i43.tinypic.com/2ekofp1.png); }
img[src*="talk/none.gif"] {background-image: url(http://i43.tinypic.com/2d6nxtu.png); }
img[src*="help.gif"] {background-image: url(http://i39.tinypic.com/2n0kbwh.png); }
img[src*="pencil.gif"] {background-image: url(http://i43.tinypic.com/34taijn.png); }
img[src*="btn_edit.gif"] {background-image: url(http://i43.tinypic.com/rkoc45.png); }
.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; }

/* MISC */

b, u { color: #333333;}
i, s { color: #aaaaaa;}
p, td {}
a img {border:none;}

blockquote { padding:15px; border: 1px solid #eeeeee; background: transparent url(http://i41.tinypic.com/2uyqag3.png) repeat scroll 0 0; color: #777777; margin: 10px 7px;}
code { font-family: Courier New, Courier, monspace; display:block; padding:5px;border:1px dashed #DDDDDD; font-size: 12px;}

kbd, pre, tt {font-family: monospace;} form#qrform table {border-width: 0px !important;} q {color:#999999; font-family: Georgia, Times, serif;font-style: italic;letter-spacing: -0.05em; }
input, textarea { font-size: 11px; background: transparent url(http://i41.tinypic.com/2uyqag3.png) repeat scroll 0 0; border: 1px solid #eeeeee; color: #777777;}

/* COLORS */
a, a:link, a:visited, .subject a, div.comments a:hover,.subject a:link, .subject a:visited, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation {
color: #222222;
text-decoration: none;}

a:hover, .subject a:hover, div.comments a, div#sidebar a:hover, .datesubjectcomment a:hover {color: #aaaaaa; text-decoration: none;} .ljuser a b {color: #8EA6AF; font-weight: normal; font-style: italic; font-family:Georgia; letter-spacing: -0.05em;}
.subject a, .subject a:link, .subject a:visited, .subject a:hover, .subject, h2, ul.year {color: #111111; text-decoration: none;} div#sidebar a {color:#ffffff}
wooden, topbar
/*

on a bird's strong wing ((flexible squares; basic, plus, and paid; by milou veronica ))

*/
body { background: url(http://i43.tinypic.com/261clzd.png) #111111 repeat scroll 0 0; text-align: center; color: #ffffff; font-family: Impact, Charcoal, sans-serif; font-size: 11px; margin: 0px 0 0; }
.headerimage {position: relative; background: #FFFFFF url() no-repeat 50% 50%; height: 0px; width: 80%; margin-left: auto;margin-right: auto;margin-bottom: 0px; border-right: 1px solid #eeeeee; border-left: 1px solid #eeeeee;}
#content{ color: #555555; width:80%;background-color: #ffffff; margin: 0 auto; border-width: 0 0px; border-style: solid; border-color: #eeeeee; padding: 0px;}
#maincontent { padding: 6px 0 0; margin-top: 0px; text-align: left;margin-left: 0px; }
#sidebar {padding: 0 20px 10px; margin:0;font-family: Arial, Helvetica, sans-serif;background-color:#000000;width: auto; text-align: left; color: #777777; font-size: 0.85em;border-top:none; line-height: 1.5;}

/* HEADER */
#header {margin: 0; text-align: right; font-size: 1.15em;text-transform: lowercase; color: #ffffff;background-color:#000000; padding: 4px 0 6px 20px;}

div#header a, div#header a:link, div#header a:visited{ color:#4F4A4A;letter-spacing:.1em; padding: 5px 7px; display: block;margin: 2px;text-decoration: none; background-color:#161616;} div#header a:hover {color: #6294AF;}
div#header li.view { padding:5px 7px;margin: 2px; background-color:#6294AF;}
div#header li.view:hover, div#header a:hover { position:relative; right:10px;border-right: 15px solid #111111;}
ul.navheader{ padding: 0px; margin: 6px; width:170px;float:right;}
ul.navheader li {padding: 0px 0px 0px 0px; margin: 0px; list-style-type: none; display: block;}

.title { margin:0;text-align: left; font-size: 4em; padding-top:15px; line-height: .8; letter-spacing: -0.00em; }
.subtitle{ text-align: left; color:#222; line-height: 1; font-size: 1.8em; }

/* ENTRIES */
.subcontent { min-height: 140px; margin: 0 20px; background: transparent url() repeat scroll 0 0; padding:10px 0;}
.date { text-transform: uppercase; color: #aaaaaa; font-size: 6pt; letter-spacing: 9px; word-spacing: 8px;}
.subject { background-color: transparent ;padding-left: 15px; font-size: 18pt; text-transform: lowercase; line-height: 100%; letter-spacing: px; }
.subject a, .subject a:link, .subject a:visited {text-decoration: bold;}
.datesubject {padding: 10px 5px 5px 23px; background-color: #ffffff; text-align: right;}
.entry {font-family: Arial, Helvetica, sans-serif;margin: 0px; padding: 0px; text-align: left; line-height: 1.75; }
.entry_text { font-size: 8.5pt; padding: 10px 30px; margin-bottom: 0px;}
.entry ul li {padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}

/* USERPICS */
.userpic { position: relative; float: right; padding:7px; background-color: #FFFFFF; margin: 10px 0px 10px 10px ; z-index: 15; border: 1px solid #eeeeee;}
.userpicfriends { border: 0px solid #eeeeee; position: relative; background-color: transparent !important; float: right; padding: 0px; margin: 10px 0px 10px 10px; text-align: right; z-index: 15; font-size: 8pt;}
.userpicfriends img {border: 0px; padding: 7px; border: 1px solid #eeeeee; background-color: #FFFFFF; }
.userpicfriends a font {color: #bbbbbb;}

/* COMMENT BAR */
.comments {font-family: Impact, Charcoal, sans-serif;color: #dddddd; text-transform:uppercase; font-size: 1.3em; text-align: center; padding: 2px 0 3px 0; position: relative; top: 0px; margin-top: 20px;}

div.comments a, div.comments a:visited, div.comments a:link { padding: 6px; }
div.comments a:hover {}
.separator{height:25px;}

/* CURRENTS AND TAGS */
.ljtags {text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i44.tinypic.com/2ppg6eb.png) no-repeat scroll 100% 50%; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7pt; color: #888888; font-weight: bold; }
.ljtags:hover {} div.ljtags a {font-weight: normal; }

.currents {text-align: right; padding-top:15px; padding: 8px 30px 8px 0; text-transform: lowercase; font-size: 7pt; color: #646464; }
.currents:hover { border-color: #f1f1f1;}

.currents strong, .currentlocation strong, .currentmood strong, .currentgroups strong, .currentmusic strong {text-decoration: none; color: #888888; display:none;}
.currentlocation, .currentmood, .currentgroups, .currentmusic {padding: 4px 18px 4px 0; background: transparent none no-repeat scroll 100% 50%;}
.currentlocation {background-image: url(http://i44.tinypic.com/34esugj.jpg);}
.currentmood{background-image: url(http://i43.tinypic.com/2n01mvt.png);}
.currentgroups {background-image: url(http://i42.tinypic.com/33m8m8o.png);}
.currentmusic {background-image: url(http://i42.tinypic.com/ra9gmt.png);}

/* TAG PAGE */
h2 { padding: 10px 10px 10px 30px; letter-spacing: 0px; font-size: 18pt; text-transform: uppercase; line-height: 100%; color: #444444; font-weight: normal; margin: 0px;margin-left: 20px; margin-right: 20px; }

.ljtaglist { text-align: left; margin: 0px 20px; padding: 5px 15px 15px 35px; font-size:10px; list-style: inside none square; font-family: Arial, Helvetica, sans-serif;} .ljtaglist li { margin: 3px; padding: 3px; border-bottom: 1px dotted #e6e6e6; }

/* COMMENT PAGE */
.box { text-align: left; padding:0; clear: left; margin: 0 20px 1px;font-family: Arial, Helvetica, sans-serif;}

.datesubjectcomment {text-align: left; color: #999999; margin-top: 0px; }
.userpiccomment { position: relative; padding: 3px; border: 1px solid #eeeeee; background-color: #ffffff; left: 0px; margin: 0px 10px 0px 0px; z-index: 15; float: left;}
textarea.textbox {width: 100% !important;}

.reply { border: 0px; position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: left; line-height: 1.75;min-height:80px;font-family: Arial, Helvetica, sans-serif;}
.replytosubject {letter-spacing:2px; font-weight: bold;}

.commentreply { line-height:1.75; min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 20px;}
.commentbox { border-bottom: 1px solid #eeeeee; background-color: #FFFFFF; padding: 20px 30px 5px 20px;margin: 7px 0px 7px 0px;}
.commentbox:hover, .commentboxpartial:hover {border-color: #e6e6e6;}
.commentboxpartial { border-bottom: 1px solid #eeeeee; background-color: #FFFFFF; padding: 10px; margin: 10px 120px 0 0;}
.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%;}
div.box form#postform, form#qrform {background-color: #FFFFFF; border: none; padding: 10px 0;}
.skiplinks {text-align: right; margin: 0 0 6px 0; padding: 10px; font-size: 7pt; letter-spacing: 1px; color: #dddddd; background-color: #ffffff; margin-left: auto; margin-right: auto; }

/* SIDEBAR */
.defaultuserpic {display:none;}
.defaultuserpic img {}

.sbarheader {padding: 0px 5px 0px 5px;}
.sbarbody {padding: 0px 5px 0px 5px; }

.sbarbody2 { padding: 10px 5px 10px 10px;}

ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none;}
li.sbaritem{ padding: 4px 5px; border-right: 1px solid #222222;border-bottom: 0px solid #eeeeee; margin:0px; display: inline; } li.sbaritem:hover {background-color: #1a1a1a;}
li.sbartitle{ text-transform: uppercase; padding: 4px ; margin: 3px 0; border-bottom: 1px solid #eeeeee; font-family: Georgia, Times, serif; color: #777777; display:none;}

#sidebar_linklist { font-size:.75em;text-transform: uppercase; text-align:right;letter-spacing:.12em; padding:0; margin-bottom: 0px;} #sidebar_summary { display:none; } #sidebar_tags { display:none; } #sidebar_calendar { display:none; }

/* FOOTER */
#footer { padding:10px 0; width: auto; text-align: left; text-transform: uppercase; font-size: 8pt; letter-spacing: 1px; z-index: 100; clear: both;background-color: #000000;}

ul.navfooter{ padding: 0px; margin: 0px;}
ul.navfooter li {list-style: none; margin: 0 5px 0 5px; display:inline; }

div#footer li.viewing { display:none; padding: 7px; margin: 2px; }
div#footer a, div#footer a:link, div#footer a:visited {color: #ffffff; padding: 7px; margin: 2px; }
div#footer a:hover {color: #444444; }

.clearfoot {clear: both;background-color: #000000; }

/* ARCHIVE PAGE */
ul.year {margin: 0 0 10px;font-size:18pt; text-align: center; padding: 5px 20px;margin-left: 20px; margin-right: 20px; }
ul.year li {display: inline;}
table.yeartable { width:90%;background-color: #ffffff; margin-left: auto; margin-right: auto; padding: 10px;margin-left: auto; margin-right: auto; font-family: Arial, Helvetica, sans-serif;}

table.yeartable td.yeardate, table.yeartable td.yearday { border-width: 1px; border-style: solid; border-color: #dddddd;}
table.yeartable td.yearday { background-color: #fafafa; text-align: center;}
td.yearmonth {border-style: none;}
.clear {display:none; height: 8px;}

/* MINI ICONS BY PINVOKE and FAMFAMFAM */
.ljuser img { width: 0; height: 0; background: transparent url(http://i40.tinypic.com/2h55vrt.png) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: text-bottom !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i40.tinypic.com/2h55vrt.png) no-repeat 0 0 !important; padding: 16px 16px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i41.tinypic.com/jgl45h.jpg) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important; }

HTML BODY img.i-ljuser-userhead {height:4px !important;width:0 !important}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.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"], .box img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 2px 16px 16px !important; background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{background-image: url(http://i43.tinypic.com/2mp0nk7.png); }
img[src*="icon_private.gif"]{background-image: url(http://i43.tinypic.com/2a8fakj.png); }
img[src*="icon_groups.gif"] {background-image: url(http://i43.tinypic.com/2wn4dxs.png); }

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i43.tinypic.com/zmjhqg.png) !important; }
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i41.tinypic.com/25u7kvc.jpg) !important; }
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i43.tinypic.com/1220lsp.png) !important; }
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i41.tinypic.com/116l7hg.png) !important; }
img[src*="btn_del.gif"] {background-image: url(http://i39.tinypic.com/344tr80.png); }
img[src*="btn_scr.gif"] {background-image: url(http://i44.tinypic.com/zwhr7n.png); }
img[src*="btn_unscr.gif"] {background-image: url(http://i41.tinypic.com/34g0jrs.png); }
img[src*="btn_freeze.gif"] {background-image: url(http://i44.tinypic.com/jfgaqx.png); }
img[src*="btn_unfreeze.gif"] {backgroun-image: url(http://i39.tinypic.com/minxxt.png); }
img[src*="btn_track.gif"] {background-image: url(http://i43.tinypic.com/2hehi1l.png); }
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i44.tinypic.com/2aindvs.png); }
img[src*="anonymous.gif"] {background-image: url(http://i44.tinypic.com/wqpv9v.png); }
img[src*="openid-profile.gif"] {background-image: url(http://i39.tinypic.com/1z4kbb5.png); }
.box img[src*="userinfo.gif"] {background-image: url(http://i40.tinypic.com/2h55vrt.png); }
img[src*="talk/none.gif"] {background-image: url(http://i43.tinypic.com/2d6nxtu.png); }
img[src*="help.gif"] {background-image: url(http://i39.tinypic.com/2n0kbwh.png); }
img[src*="pencil.gif"] {background-image: url(http://i43.tinypic.com/34taijn.png); }
img[src*="btn_edit.gif"] {background-image: url(http://i43.tinypic.com/rkoc45.png); }
.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; }

/* MISC */

b, u { color: #333333;}
i, s { color: #aaaaaa;}
p, td {}
a img {border:none;}

blockquote { padding:10px; border-left: 10px solid #ddd; background: transparent url() repeat scroll 0 0; color: #777777; margin: 7px 15px;}
code { font-family: Courier New, Courier, monspace; display:block; padding:5px;border:1px dashed #DDDDDD; font-size: 12px;}

kbd, pre, tt {font-family: monospace;} form#qrform table {border-width: 0px !important;} q {color:#999999; font-family: Georgia, Times, serif;font-style: italic;letter-spacing: -0.05em; }
input, textarea {font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: transparent url(http://i41.tinypic.com/2uyqag3.png) repeat scroll 0 0; border: 1px solid #eeeeee; color: #777777;}

/* COLORS */
a, a:link, a:visited, .subject a, div.comments a:hover,.subject a:link, .subject a:visited, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation {
color: #222222;
text-decoration: none;}

a:hover, .subject a:hover, div.comments a, div#sidebar a:hover, .datesubjectcomment a:hover {color: #6294AF; text-decoration: none;} .ljuser a b {color: #6294AF; font-weight: normal; font-family: Impact, Charcoal, sans-serif;}
.subject a, .subject a:link, .subject a:visited, .subject a:hover, .subject, h2, ul.year {color: #111111; text-decoration: none;} div#sidebar a{color:#999999;}

installation
01.
Choose Journal Style
02.
Select "Grays" Flexible Squares layout in "Select a New Theme"
03.
In Choose a Page Setup, set your add settings to Horizontal or Between Entries if using the topbar, then select 2 Column (sidebar on right) or 2 Column (sidebar on left) .
04.
Go to " Customise your Theme " and then "Style ". Change the "Background color of the outer table" to #FFFFFF.
05.
Then go to the "Sidebar " section. Make sure that the Links List and Blurb are enabled. This is also where you add the free text (topbar only)
06.
Still in "Customise your Theme", go to "Custom CSS ". Ensure Use layout's stylesheet(s) is set to no
07.
Paste code into the Custom Stylesheet box.

notes:

♚ mini icons by FamFamFam and Pinvoke
♚ As per usual, feel free to add your own header/ edit bloody anything you want to.
♚Please address all questions to the F.A.Q.

style: flexible squares, wot: layout

Previous post Next post
Up