this is the part where everybody says they love you so [flexible squares]

Oct 20, 2011 22:48





this is the part where everybody says they love you so
s2 flexible squares | plus/paid/free | firefox&chrome tested

installation
01. Choose Journal Style
Select the Flexible Squares layout "Greys" 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" #FFFFFF.
04. Custom CSS
Ensure Use layout's stylesheet(s) is set to no
05.
Paste code into the Custom Stylesheet box.

1.
/*

this is the part where everybody says they love you so (flexible squares; ephectic)

*/
body {text-align: center; background: #FFF url() repeat fixed 0 0; color: #ffffff; font-family:Arial, Helvetica, sans-serif; font-size: .75em; margin:0;padding-top:45px}

.headerimage {position: relative; background: transparent url() no-repeat scroll 50% 0; height:px;width:px;margin:0 auto}

#content{color: #222;margin: 0 auto 0; padding:0;width:auto}

#maincontent { background-color:#FFF;padding:0;text-align: justify;margin: 40px auto 0 240px;width:700px}

#sidebar {position:fixed;bottom:135px;padding:0 0 0 10px; text-align: left; color: #444; font-size: .86em; line-height: 1.75;background-color:#FFF;margin: 10px auto 0;width:200px;text-transform:lowercase;z-index:110;font-family:Arial, Helvetica, sans-serif;left:0}

/* HEADER */

#header {margin: 40px auto 0;text-align: left; padding:0 0 0; line-height: 1; color: #fff;text-transform: uppercase;z-index:108;position:fixed;width:220px;bottom:5px;left:0}

div#header a, div#header a:link, div#header a:visited {font-weight:normal;color:#333}
div#header li.view {color:#aaa;border:none;border-right:1px solid #eee}

ul.navheader{text-align: center; position:fixed;font-weight:normal;font-size: 7pt;letter-spacing:-0.01em;margin:0 auto;padding:0 0 0 5px;width:200px;text-transform:lowercase;z-index:197;bottom:80px}
ul.navheader li {line-height: 1.5;margin:0; list-style-type: none;display:inline;padding:0 2px 0 0;border-right:1px solid #eee}
ul.navheader li a{color:#000}
div#header li a:hover{color:#000}

div#header li.view, div#header a:hover{}

.title {max-height:55px;overflow:hidden;padding-bottom:3px;margin-top:30px} .title:hover {overflow:visible}
body.lj-view-entry .title {font-size:1.3em;overflow:visible}
.title, .subtitle{margin:30px 0 2px 10px;font-size:1.8em;letter-spacing:-0.09em;color:#000;text-shadow:1px 1px 4px #555;z-index:160;text-transform:lowercase}
.subtitle{color:#777;font-size:.8em;margin-top:0px;letter-spacing:0.03em;text-shadow:none}

/* ENTRIES */

.subcontent { min-height: 120px;padding:0;margin:0 auto;}

.date {margin:0;padding:2px 10px;color:#888; float:right; font-size:6pt}
.subject {margin:0;padding:3px 0 2px 18px;background:transparent url(http://i35.tinypic.com/2dsef85.png) no-repeat scroll 0 50%;line-height: 1; color: #000; font-size:7.5pt;letter-spacing:0.03em;font-weight:normal}
.subject a, .subject a:link, .subject a:visited {text-decoration: none}

.datesubject {background-color:#FFF;text-align: left;margin:0 110px 0 0;padding: 10px 10px 10px 0;text-transform: uppercase;border-bottom:1px solid #eee}

.entry{margin:0; padding: 20px 10px 5px;text-align: justify;line-height: 1.75;background-color:#FFF}
.entry_text {margin: 0 110px 0 0;padding:0;position:relative;z-index:5;overflow:}

.entry ul li,.entry ol li{padding-left: 5px;margin-left: 15px}

/* USERPICS */

.userpic, .userpicfriends {margin:4px 0 10px 10px; position: relative;float:right;padding: 0;background-color: transparent !important;z-index: 15}
.userpicfriends {text-align: left;text-transform: uppercase;letter-spacing:-0.04em;font-size:7pt}

.userpicfriends img,.userpic img {padding: 0}

/* COMMENT BAR */

.comments {color: #fff;text-transform:uppercase;font-weight:normal;line-height:.2;font-size:7.5pt;letter-spacing:-0.03em;text-align: right;padding: 15px 0 0;margin:0 0 0 auto;clear:right}

div.comments a, div.comments a:visited, div.comments a:link {display:inline;padding:2px 0 2px 12px;margin:0;line-height:.9;background: transparent url(http://i46.tinypic.com/dfk6ix.png) no-repeat scroll 0 0}
div.comments a:hover{;background-color:#FFEC1F}
.separator{height:60px}

/* CURRENTS AND TAGS (icons by ?) */

.ljtags {text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i.imgur.com/LpPE3.png) no-repeat scroll 100% 50%;margin: 50px -110px 0 auto;width:400px; 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: 1px 18px 1px 0; background: transparent none no-repeat scroll 100% 50%}
.currentlocation {background-image: url(http://i.imgur.com/XPRgg.png)}
.currentmood{background-image: url(http://i.imgur.com/3WlbK.png)} .currentmood img{display:none}
.currentgroups {background-image: url(http://i.imgur.com/doaM8.png)}
.currentmusic {background-image: url(http://i.imgur.com/thlcP.png)}

/* TAG PAGE */

h2 {text-transform:uppercase;font-size:1.2em;letter-spacing:0.08em;font-weight:normal; line-height: 1; padding:10px 0;margin: 0 auto 0 0;background-color:#FFFFFF;width:650px}
.ljtaglist {text-align: left; margin: 0 auto 0 0; padding:0; list-style:inside none decimal-leading-zero;background-color:#FFFFFF;width:650px}
.ljtaglist li {padding:4px 10px;border-bottom: 1px dotted #eeeeee}

/* COMMENT PAGE */

.box { text-align: left; padding:0; clear: right;margin:0 auto}

.datesubjectcomment {text-align: left; color: #000000;font-variant:small-caps;margin:0;padding:5px 0;border-bottom:1px solid #eee}
.datesubjectcomment strong{margin-left:20px;font-size:1.4em}
.userpiccomment {float: left;margin: -5px 5px 0 0;background-color:#FFF;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 20px; padding: 25px 10px 10px 10px; text-align: left}

.replytosubject {font-weight: bold}
.replytoposter{padding:5px}
body.lj-view-reply .entry{padding: 20px}
.replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 0px;color:#666666}

.commentreply {min-height:80px;text-align: left; position: relative; margin:5px 0 5px 120px;padding:10px;line-height:1.5}

.commentbox {padding: 10px 0px;background-color:#FFF;margin:20px 0 0}

.commentboxpartial {padding: 5px;background-color:#FFF;margin:10px 0;border-bottom:1px solid #eee}

.commentinfo {margin-top: 10px;width: 100%}

form#postform{background-color:#FFF;padding:10px}form#qrform {background-color:#FFF;padding:10px}
form#qrform table {border-width: 0px !important}

.skiplinks {text-align: center;margin: 0 auto 10px;padding: 10px; font-size: 8pt; color: #ccc;background-color:#FFF}

/* SIDEBAR */

.defaultuserpic {padding: 10px 5px;text-align:left;background-color:#FFF;position:fixed;top:0;left:0;width:210px;z-index:10}
.defaultuserpic img{width:30px;height:30px;-moz-border-radius:15px;-webkit-border-radius: 15px;border-radius: 15px}
.defaultuserpic img:hover{width:auto;height:auto;-moz-border-radius:50px;-webkit-border-radius: 50px;border-radius: 50px}
.defaultuserpic a{background-color:transparent !important}

.sbarheader {}
.sbarbody{}

#sidebar_linklist,#sidebar_summary,#sidebar_tags , #sidebar_calendar {height:30px;overflow:hidden;background-color:#eee;margin-bottom:5px;z-index:100}
#sidebar_linklist:hover,#sidebar_summary:hover,#sidebar_tags:hover , #sidebar_calendar:hover{height:155px;overflow:visible;padding-bottom:15px;background-color:#eee}
.sbarbody2{height:5px;overflow:hidden;font-size:0;position:relative;bottom:10px;z-index:10;opacity:0;z-index:20}
.sbarbody2:hover {font-size:7pt;background-color:#eee;padding:10px 10px 10px;height:140px;overflow-y:scroll;margin:0 0 -5px;opacity:1}

ul.sbarlist{ margin: 0; ;padding:0; list-style: none;line-height:1}
ul.sbarlist.sbarcontent {height:140px;overflow-y:scroll;background-color:#eee}
li.sbaritem{margin:1px 10px;display:block;padding:2px 10px;background-color:#e4e4e4}
li.sbaritem a{font-style:italic; padding: 0}
li.sbaritem:hover{background-color:#ddd}

li.sbartitle{background-color:#eee;padding: 10px 4px;height:10px;margin:0;z-index:100}

#sidebar table.calendar {font-size:7pt;line-height:1}
td.sbarcalendar, td.sbarcalendarposts {border:1px solid #ddd;background-color:#f2f2f2;padding:4px 5px;vertical-align:middle;text-align:center}
td.sbarcalendarposts {background-color:#e3e3e3}

/* FOOTER */

#footer {padding: 0 10px;margin:0 auto 0 0;text-transform: uppercase; text-align:right;font-size: 6pt;line-height:1; z-index: 100; clear: both;position:fixed; bottom:105px; left:0}

ul.navfooter{ padding: 4px 0 0; margin:0;width:200px;border-top:1px solid #eee;border-bottom:1px solid #eee;height:21px}
ul.navfooter li {list-style: none; margin: 0 0 3px;display:inline}

div#footer li.viewing {color:#000;float:left;width:75px;height:20px;overflow:hidden;margin-right:20px}
div#footer a, div#footer a:link, div#footer a:visited {}

div#footer a{font-size:0; color:#fff}
div#footer li a{padding: 9px 15px;background:transparent url(http://i31.tinypic.com/20tqdmt.png) no-repeat scroll 0 50%;float:right;}
div#footer li + li a{padding: 9px 15px;background:transparent url(http://i32.tinypic.com/y2qef.png) no-repeat scroll 0 50%;float:left}

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

/* ARCHIVE PAGE */

ul.year { margin: 0;background-color:#FFFFFF;padding:20px}

ul.year li {display: inline}
ul.year li a{padding:0 3px}
ul.year li a:hover, table.yeartable a{background-color:#FFEC1F;color:#FFFFFF;padding:0 3px}
table.yeartable {margin:0 auto;padding: 20px 60px;background-color:#FFFFFF}

table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px solid #dddddd}

table.yeartable td.yearday { background-color: #eee; text-align: center}

td.yearmonth {border-style: none}

.clear {display:none}

/* MINI ICONS by Julz and Icojoy*/

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

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], img[src*="btn_spam.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-16.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 16px 16px !important; background: transparent none no-repeat scroll 0 0;vertical-align:bottom !important}

.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url(http://i.imgur.com/8EYIE.png)}
img[src*="icon_private.gif"]{background-image: url(http://i.imgur.com/iTIiB.png)}
img[src*="icon_groups.gif"]{background-image: url(http://i.imgur.com/doaM8.png)}

.ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] {background: transparent none no-repeat 0 50%; padding: 12px 12px 0 2px !important}
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i.imgur.com/jsuZF.png)}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i.imgur.com/6E68f.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i.imgur.com/5REPV.png) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i.imgur.com/xfFeS.png) !important}

img[src*="btn_spam.gif"]{background-image: url(http://i.imgur.com/6zUIB.gif)}
img[src*="btn_del.gif"]{background-image: url(http://i.imgur.com/r3uXU.png)}
img[src*="btn_scr.gif"] {background-image: url(http://i.imgur.com/HJagL.png)}
img[src*="btn_freeze.gif"] {background-image: url(http://i.imgur.com/IGXDP.png)}
img[src*="btn_unfreeze.gif"], img[src*="btn_unscr.gif"] {background-image: url(http://i.imgur.com/drTTM.png)}
img[src*="btn_track.gif"] {background-image: url(http://i.imgur.com/ltAwT.png)}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i.imgur.com/FpOgl.png)}
img[src*="anonymous.gif"] {background-image: url(http://i.imgur.com/1vclb.png)}
img[src*="openid-16.gif"] {background-image: url(http://i.imgur.com/iKDYU.png)}
img[src*="userinfo.gif"], .b-postform-authtype-user .b-postform-login-services-current-pic {background-image: url(http://i.imgur.com/zqHfn.png)}
img[src*="talk/none.gif"] {background-image: url(http://i.imgur.com/xoq87.png)}
img[src*="help.gif"] {background-image: url(http://i.imgur.com/Nz2pX.png)}
img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-image: url(http://i.imgur.com/MvB34.png)}
img[src*="upgrade-paid-icon.gif"] {background-image: url(http://i.imgur.com/awGNL.png)}

.ljuser img {width: 0; height: 0; background: transparent url(http://i.imgur.com/zqHfn.png) no-repeat 0 50%; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i.imgur.com/zqHfn.png) no-repeat 0 50% !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i.imgur.com/q7uKz.png) 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}
.b-postform-login-services-current-pic {background-position: 6px 50%;border-color:#ccc !important;border-radius:0 !important}

/* CONTEXTUAL POP-UP */

div.ContextualPopup {margin: 0px; text-align: left; font: normal 9px "Arial" !important}
div.ContextualPopup div.Inner {color: #aaaaaa !important;border:none;background: transparent url() !important; padding: 0; width: 300px}
div.ContextualPopup .Userpic { padding: 12px; margin: 0; border: 1px solid #eeeeee; background: #ffffff url()}
div.ContextualPopup .Content { padding: 5px;border: 1px solid #ececec; margin-right:80px;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:101}
.w-cs .w-cs-userinfo {padding-left:220px;margin-right:10px}
.w-cs .w-cs-user-controls {margin-left:%}
.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:-18px}

a img {border:none}
b, u { color: #111111}
i, s { color: #888888}
p, td {}

blockquote { padding:15px; border: 1px solid #eeeeee; background-color: #f7f7f7; color:#444444;margin:10px}
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;font-weight:bold}
.ljuser a b {font-style:italic;text-decoration:none}
.entry_text a, .commentreply a, .ljuser a b,.currents a {}

a:hover, .datesubjectcomment a:hover, .ljuser a b:hover,div.ljtags a:hover {background-color:#FFEC1F;top:1px;left:1px;text-decoration: none;}
.ljuser a img:hover{background-color:transparent !important}
.ljuser a{;text-decoration:none}

.subject a, .subject a:link, .subject, .subject a:visited, .subject a:hover, .subject a:link:hover,.subject a:visited:hover,.userpicfriends a:hover {background-color:transparent;text-decoration: none;color: #000;font-weight:normal}
.userpicfriends a {color:#000}
#sidebar a{color:#333;font-weight:normal}
#sidebar a:hover{color:#000;background-color:#FFEC1F}
.ljcut-link {font-weight:normal;padding-left:10px;text-transform:lowercase;font-variant:small-caps}

2.
/*

this is the part where everybody says they love you so (flexible squares; ephectic)

*/
body {text-align: center; background: #FFF url() repeat fixed 0 0; color: #ffffff; font-family:Arial, Helvetica, sans-serif; font-size: .7em; margin:0;padding-top:45px}

.headerimage {position: relative; background: transparent url() no-repeat scroll 50% 0; height:px;width:px;margin:0 auto}

#content{color: #222;margin: 0 auto 0; padding:0;width:auto}

#maincontent { background-color:#FFF;padding:0;text-align: justify;margin: 10px auto 0 230px;max-width:880px}

#sidebar {position:fixed;bottom:150px;left:0;padding:0 0 0 10px; text-align: left; color: #444; font-size: .86em; line-height: 1.75;background-color:#FFF;margin: 10px auto 0;width:200px;text-transform:lowercase;z-index:110;font-family:Arial, Helvetica, sans-serif}

/* HEADER */

#header {margin: 40px auto 0;text-align: left; padding:0 0 0; line-height: 1; color: #fff;text-transform: uppercase;z-index:108;position:fixed;width:220px;left:0;bottom:5px}

div#header a, div#header a:link, div#header a:visited {font-weight:normal;color:#333}
div#header li.view {color:#aaa;border:none;border-right:1px solid #eee}

ul.navheader{text-align: center;;font-weight:normal;font-size: 7pt;letter-spacing:-0.01em;margin:0 auto;padding:0 0 0 5px;width:200px;text-transform:lowercase;z-index:197;}
ul.navheader li {line-height: 1.5;margin:0; list-style-type: none;display:inline;padding:0 2px 0 0;border-right:1px solid #eee}
ul.navheader li a{color:#000}
div#header li a:hover{color:#000}

div#header li.view, div#header a:hover{}

.title {max-height:65px;overflow:hidden;padding-bottom:3px}
.title:hover {overflow:visible}
body.lj-view-entry .title {font-size:1.3em;overflow:visible}
.title, .subtitle{margin:20px 0 2px 10px;font-size:2em;letter-spacing:-0.09em;color:#000;text-shadow:1px 1px 4px #555;z-index:160;text-transform:lowercase}
.subtitle{color:#777;font-size:.75em;margin-top:0px;letter-spacing:0.03em;text-shadow:none}

/* ENTRIES */

.subcontent { padding: 0 0;margin:0 15px 0 20px;width:400px;float:left;height:600px}
.date {margin:0;padding:0;color:#888; font-size:6pt}
.subject {margin:0;padding:3px 0 2px 0;line-height: 1; color: #000; font-size:7.5pt;letter-spacing:0.03em;font-weight:normal;height:7px}
.subject a, .subject a:link, .subject a:visited {text-decoration: none}

.datesubject {background-color:#FFF;text-align: left;margin:0 0 10px;padding: 10px 10px 30px 0;text-transform: uppercase;border-bottom:1px solid #eee}

.entry{margin:0; padding: 0 0 5px;text-align: left;line-height: 1.75;background-color:#FFF}
.entry_text {margin: 0 15px 0 0;width:380px;padding:10px 0 0;position:relative;z-index:5;height:400px;overflow:hidden}
.entry_text:hover {overflow-y:scroll;width:395px;padding: 10px 5px 0 0;margin-right:0}

.entry ul li,.entry ol li{padding-left: 5px;margin-left: 15px}

/* USERPICS */

.userpic, .userpicfriends {margin:0; position: relative;float:right;padding: 0;background-color: transparent !important;z-index: 15;display:non}
.userpicfriends {text-align: left;text-transform: uppercase;font-weight:normal;letter-spacing:-0.04em;font-size:6pt}
.userpicfriends a, .userpicfriends a font{font-weight:normal;background-color:#FFF}
.userpicfriends img,.userpic img {padding: 0;height:60px;width:60px}
.userpicfriends img{padding-bottom:5px}

/* COMMENT BAR */

.comments {color: #fff;text-transform:uppercase;font-weight:normal;line-height:.2;font-size:7.5pt;letter-spacing:-0.03em;text-align: right;padding: 15px 0 0;margin:0 0 0 auto;clear:right}

div.comments a, div.comments a:visited, div.comments a:link {display:inline;padding:2px 0 2px 12px;margin:0;line-height:.9;background: transparent url(http://i46.tinypic.com/dfk6ix.png) no-repeat scroll 0 0}
div.comments a:hover{;background-color:#FFEC1F}
.separator{height:0px}

/* CURRENTS AND TAGS (icons by ?) */

.ljtags {text-align: right; padding: 4px 18px 4px 0; background: transparent url(http://i.imgur.com/LpPE3.png) no-repeat scroll 100% 50%;margin: 50px 0 0 auto; 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: 1px 18px 1px 0; background: transparent none no-repeat scroll 100% 50%}
.currentlocation {background-image: url(http://i.imgur.com/XPRgg.png)}
.currentmood{background-image: url(http://i.imgur.com/3WlbK.png)} .currentmood img{display:none}
.currentgroups {background-image: url(http://i.imgur.com/doaM8.png)}
.currentmusic {background-image: url(http://i.imgur.com/thlcP.png)}

/* TAG PAGE */

h2 {text-transform:uppercase;font-size:1.2em;letter-spacing:0.08em;font-weight:normal; line-height: 1; padding:10px 0;margin: 0 auto 0 0;background-color:#FFFFFF;width:650px}
.ljtaglist {text-align: left; margin: 0 auto 0 0; padding:0; list-style:inside none decimal-leading-zero;background-color:#FFFFFF;width:650px}
.ljtaglist li {padding:4px 10px;border-bottom: 1px dotted #eeeeee}

/* COMMENT PAGE */

body.lj-view-reply .subcontent, body.lj-view-entry .subcontent{float:none;width:700px;height:auto;}
body.lj-view-reply .entry_text, body.lj-view-entry .entry_text {width:700px;height:auto;padding:10px;margin:0;font-size:1.1em}
body.lj-view-reply .entry_text:hover, body.lj-view-entry .entry_text:hover {width:700px;padding:10px;overflow:visible;margin-right:0}

body.lj-view-reply .datesubject, body.lj-view-entry .datesubject{padding:40px 0}
body.lj-view-reply .userpic img, body.lj-view-entry .userpicfriends img{width:auto;height:auto}

.box { text-align: left; padding:0; clear: right;margin:20px auto 0 0;width:700px}

.datesubjectcomment {text-align: left; color: #000000;font-variant:small-caps;margin:0;padding:5px 0;border-bottom:1px solid #eee}
.datesubjectcomment strong{margin-left:20px;font-size:1.4em}
.userpiccomment {float: left;margin: -5px 5px 0 0;background-color:#FFF;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 20px; padding: 25px 10px 10px 10px; text-align: left}

.replytosubject {font-weight: bold}
.replytoposter{padding:5px}
body.lj-view-reply .entry{padding: 20px}
.replytosubject{font-size:1.2em;font-weight:normal;padding:4px 4px 0 0px;color:#666666}

.commentreply {min-height:80px;text-align: left; position: relative; margin:5px 0 5px 120px;padding:10px;line-height:1.5}

.commentbox {padding: 10px 0px;background-color:#FFF;margin:20px 0 0}

.commentboxpartial {padding: 5px;background-color:#FFF;margin:10px 0;border-bottom:1px solid #eee}

.commentinfo {margin-top: 10px;width: 100%}

form#postform{background-color:#FFF;padding:10px}form#qrform {background-color:#FFF;padding:10px}
form#qrform table {border-width: 0px !important}

.skiplinks {text-align: center;margin: 0 auto 10px 0;padding: 10px; font-size: 8pt; color: #ccc;background-color:#FFF;width:700px}

/* SIDEBAR */

.defaultuserpic {padding: 10px 5px;text-align:left;background-color:#FFF;position:fixed;top:0;left:0;width:210px;z-index:10}
.defaultuserpic img{width:30px;height:30px;-moz-border-radius:15px;-webkit-border-radius: 43px;border-radius: 15px}
.defaultuserpic img:hover{width:auto;height:auto;-moz-border-radius:50px;-webkit-border-radius: 50px;border-radius: 50px}
.defaultuserpic a{background-color:transparent !important}

.sbarheader {}
.sbarbody{}

#sidebar_linklist,#sidebar_summary,#sidebar_tags , #sidebar_calendar {height:30px;overflow:hidden;background-color:#eee;margin-bottom:5px;z-index:100}
#sidebar_linklist:hover,#sidebar_summary:hover,#sidebar_tags:hover , #sidebar_calendar:hover{height:155px;overflow:visible;padding-bottom:15px;background-color:#eee}
.sbarbody2{height:5px;overflow:hidden;font-size:0;position:relative;bottom:10px;z-index:10;opacity:0;z-index:20}
.sbarbody2:hover {font-size:7pt;background-color:#eee;padding:10px 10px 10px;height:140px;overflow-y:scroll;margin:0 0 -5px;opacity:1}

ul.sbarlist{ margin: 0; ;padding:0; list-style: none;line-height:1}
ul.sbarlist.sbarcontent {height:140px;overflow-y:scroll;background-color:#eee}
li.sbaritem{margin:1px 10px;display:block;padding:2px 10px;background-color:#e4e4e4}
li.sbaritem a{font-style:italic; padding: 0}
li.sbaritem:hover{background-color:#ddd}

li.sbartitle{background-color:#eee;padding: 10px 4px;height:10px;margin:0;z-index:100}

#sidebar table.calendar {font-size:7pt;line-height:1}
td.sbarcalendar, td.sbarcalendarposts {border:1px solid #ddd;background-color:#f2f2f2;padding:4px 5px;vertical-align:middle;text-align:center}
td.sbarcalendarposts {background-color:#e3e3e3}

/* FOOTER */

#footer {padding: 0 10px;margin:0 auto 0 0;text-transform: uppercase; text-align:right;font-size: 6pt;line-height:1; z-index: 100; clear: both;position:fixed; bottom:120px; left:0}

ul.navfooter{ padding: 4px 0 0; margin:0;width:200px;border-top:1px solid #eee;border-bottom:1px solid #eee;height:21px}
ul.navfooter li {list-style: none; margin: 0 0 3px;display:inline}

div#footer li.viewing {color:#000;float:left;width:75px;height:20px;overflow:hidden;margin-right:20px}
div#footer a, div#footer a:link, div#footer a:visited {}

div#footer a{font-size:0}
div#footer li a{padding: 9px 15px;background:transparent url(http://i31.tinypic.com/20tqdmt.png) no-repeat scroll 0 50%;float:right}
div#footer li + li a{padding: 9px 15px;background:transparent url(http://i32.tinypic.com/y2qef.png) no-repeat scroll 0 50%;float:left}

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

/* ARCHIVE PAGE */

ul.year { margin: 0;background-color:#FFFFFF;padding:20px}

ul.year li {display: inline}
ul.year li a{padding:0 3px}
ul.year li a:hover, table.yeartable a{background-color:#FFEC1F;color:#FFFFFF;padding:0 3px}
table.yeartable {margin:0 auto;padding: 20px 0;background-color:#FFFFFF;width:650px}

table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px solid #dddddd}

table.yeartable td.yearday { background-color: #eee; text-align: center}

td.yearmonth {border-style: none}

.clear {display:none}

/* MINI ICONS by Julz and Icojoy*/

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

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], img[src*="btn_spam.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-16.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 16px 16px !important; background: transparent none no-repeat scroll 0 0;vertical-align:bottom !important}

.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url(http://i.imgur.com/8EYIE.png)}
img[src*="icon_private.gif"]{background-image: url(http://i.imgur.com/iTIiB.png)}
img[src*="icon_groups.gif"]{background-image: url(http://i.imgur.com/doaM8.png)}

.ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] {background: transparent none no-repeat 0 50%; padding: 12px 12px 0 2px !important}
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i.imgur.com/jsuZF.png)}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i.imgur.com/6E68f.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i.imgur.com/5REPV.png) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i.imgur.com/xfFeS.png) !important}

img[src*="btn_spam.gif"]{background-image: url(http://i.imgur.com/6zUIB.gif)}
img[src*="btn_del.gif"]{background-image: url(http://i.imgur.com/r3uXU.png)}
img[src*="btn_scr.gif"] {background-image: url(http://i.imgur.com/HJagL.png)}
img[src*="btn_freeze.gif"] {background-image: url(http://i.imgur.com/IGXDP.png)}
img[src*="btn_unfreeze.gif"], img[src*="btn_unscr.gif"] {background-image: url(http://i.imgur.com/drTTM.png)}
img[src*="btn_track.gif"] {background-image: url(http://i.imgur.com/ltAwT.png)}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i.imgur.com/FpOgl.png)}
img[src*="anonymous.gif"] {background-image: url(http://i.imgur.com/1vclb.png)}
img[src*="openid-16.gif"] {background-image: url(http://i.imgur.com/iKDYU.png)}
img[src*="userinfo.gif"], .b-postform-authtype-user .b-postform-login-services-current-pic {background-image: url(http://i.imgur.com/zqHfn.png)}
img[src*="talk/none.gif"] {background-image: url(http://i.imgur.com/xoq87.png)}
img[src*="help.gif"] {background-image: url(http://i.imgur.com/Nz2pX.png)}
img[src*="pencil.gif"], img[src*="btn_edit.gif"] {background-image: url(http://i.imgur.com/MvB34.png)}
img[src*="upgrade-paid-icon.gif"] {background-image: url(http://i.imgur.com/awGNL.png)}

.ljuser img {width: 0; height: 0; background: transparent url(http://i.imgur.com/zqHfn.png) no-repeat 0 50%; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://i.imgur.com/zqHfn.png) no-repeat 0 50% !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i.imgur.com/q7uKz.png) 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}
.b-postform-login-services-current-pic {background-position: 6px 50%;border-color:#ccc !important;border-radius:0 !important}

/* CONTEXTUAL POP-UP */

div.ContextualPopup {margin: 0px; text-align: left; font: normal 9px "Arial" !important}
div.ContextualPopup div.Inner {color: #aaaaaa !important;border:none;background: transparent url() !important; padding: 0; width: 300px}
div.ContextualPopup .Userpic { padding: 12px; margin: 0; border: 1px solid #eeeeee; background: #ffffff url()}
div.ContextualPopup .Content { padding: 5px;border: 1px solid #ececec; margin-right:80px;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:101}
.w-cs .w-cs-userinfo {padding-left:220px;margin-right:10px}
.w-cs .w-cs-user-controls {margin-left:%}
.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:-18px}

a img {border:none}
b, u { color: #111111}
i, s { color: #888888}
p, td {}

blockquote { padding:15px; border: 1px solid #eeeeee; background-color: #f7f7f7; color:#444444;margin:10px}
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;font-weight:bold}
.ljuser a b {font-style:italic;text-decoration:none}
.entry_text a, .commentreply a, .ljuser a b,.currents a {}

a:hover, .datesubjectcomment a:hover, .ljuser a b:hover,div.ljtags a:hover {background-color:#FFEC1F;top:1px;left:1px;text-decoration: none;}
.ljuser a img:hover{background-color:transparent !important}
.ljuser a{;text-decoration:none}

.subject a, .subject a:link, .subject, .subject a:visited, .subject a:hover, .subject a:link:hover,.subject a:visited:hover,.userpicfriends a:hover {background-color:transparent;text-decoration: none;color: #000;font-weight:normal}
.userpicfriends a {font-weight:normal;color:#000}
#sidebar a{color:#333;font-weight:normal}
#sidebar a:hover{color:#000;background-color:#FFEC1F}
.ljcut-link {font-weight:normal;padding-left:10px;text-transform:lowercase;font-variant:small-caps}

notes

credit mini icons by Icojoy 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. Or are capaple of.

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.
oh, and yeah:
The complicated set-up for the second variation I realise is not for everyone (hence no. 1) but for the spirited sorts of chaps to whom it appeals, it looks best with an even number of entries showing per page. The live preview only displays two entries (I really ought to change that) but it can have as many as you like. Hovering should display the scrollbar to explore the content.

Unfortunately I made this layout such a dashed long time ago I can't recall of the finer details of the layout.

07.04.12: Site died, so re-upped images. Live previews still down.
10.07.12: Small code edit for usericons

#style: flexible squares, #thing: layout, #feature: sidebar

Previous post Next post
Up