s2 layout: and I believe we were friends, valentine [flexible squares]

Feb 13, 2009 09:17

And to cap it off, something a little more restrained. Preemptive Happy St. Valentine's Day, people, ♥



picture | live layout:and I believe we were friends, valentine
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, sidebar
browsers: IE7, FF, Safari, Chrome, and Opera

/*

and I believe we were friends, valentine by milou veronica
flexible squares // basic, plus and paid

*/

body { background: #DFDCDC none repeat fixed 0 0; text-align: center; color: #ffffff; font-family: Georgia, Times New Roman, Times, serif; font-size: .8em; margin:0px;}

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

#content{ color: #333333; width: 780px; margin-left: auto; margin-right: auto; margin-top: 0px; border-width: 0px; padding: 0px;}

#maincontent { padding:0; margin-right:170px; background: transparent url() repeat scroll 0 0; text-align: justify; }

#sidebar {background-color: #F3F3F3; padding:0; float:right; width: 160px; text-align: left; color: #444444; font-size: .8em; line-height: 1.75; min-height:87px;margin-left: auto; margin-right: auto}

/* HEADER */
#header { background-color: #BB2026; margin: 0px; text-align: center; font-size: .7em; letter-spacing: 2px; text-transform: uppercase; color: #666666; padding: 0; }

div#header a, div#header a:link, div#header a:visited{postion:relative; color: #EFB3B5;text-transform: uppercase;;padding: 16px 6px;margin-left:-4px;}
div#header a:hover {background-color: #DF373E; color:#ffffff;}
div#header li.view {color: #111111;padding: 16px 6px;background-color:#DF373E;margin-left:-4px;} div#header li.view:first-letter {color:#ffffff;}
div#header li.view:hover{ background-color: #DF373E;}
ul.navheader{ padding: 16px 6px; margin:0; }
ul.navheader li {margin: 0px; list-style-type: none; padding: 3px 0px;display:inline;}

.title {padding: 15px 0 0;letter-spacing: -1px;line-height:.8;margin: 0px; text-align: center;line-height:;font-size:15pt;color:#000000;display:none}
.subtitle{text-transform: lowercase;line-height:1; text-align: center;letter-spacing: 6px;display:none}

/* ENTRIES */
.subcontent { min-height: 120px; background: #F3F3F3 url() repeat scroll;margin-left: auto; margin-right: auto;border: 0px solid #F3F3F3;}

.date {text-transform: uppercase; color: #dddddd; font-size:.75em; letter-spacing:.8em;}

.subject { background-color: transparent ; letter-spacing: 0px; font-size: 1.6em; letter-spacing:-0.07em;font-style:italic; line-height: 1; color: #aaaaaa; }
.subject a, .subject a:link, .subject a:visited {text-decoration: none;color: #aaaaaa;}

.datesubject {padding: 10px 5px 10px 10px;text-align:right;border-bottom:1px solid #DFDCDC; margin-right:20px;}

.entry { margin: 0px; padding: 0; text-align: justify; line-height: 1.75; border-width: 0px;}
.entry_text { min-height: 50px; padding: 10px 20px 0 20px;font-size:.95em}

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

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

/* COMMENT BAR */
.comments {color: #dddddd; font-size: 8pt; text-align: center; padding: 6px; position: relative; margin:0; text-transform: uppercase;}

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

/* CURRENTS AND TAGS */
.ljtags {text-align: right; padding: 5px 20px;margin:50px -20px 0;position: relative; text-transform: lowercase; font-size: .9em; color: #888888;font-family: Times New Roman, Times, Georgia, serif; }

.currents {text-align: right;margin:0 0 0 auto;margin-top:0px; padding: 5px 20px;text-transform: lowercase; font-size: .85em; color: #646464;}
.currents strong {font-weight: normal; text-decoration: none; color: #888888; }

/* TAG PAGE */
h2 { padding: 10px 10px 10px 30px; border: 1px solid #ececec; border-bottom:none;background-color: #F3F3F3;font-weight: normal;margin: 0px auto;}

.ljtaglist {text-align: left;margin: 0px auto; padding:20px; background-color: #F3F3F3;font-size:10px; list-style:inside none square; border: 1px solid #ececec; border-top:none;}
.ljtaglist li {padding:5px 30px;border-bottom: 1px dotted #eeeeee;} .ljtaglist li:hover{background-color:#f8f8f8;}

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

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

input { font-family: Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background-color: #fafafa; border: 1px solid #cccccc; color: #999999;}
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.25;}
.replytosubject {letter-spacing:2px; font-weight: bold;}

.commentreply { min-height: 75px; text-align: left; position: relative; margin: 10px 10px 10px 120px;}
.commentbox { border: 1px solid #eeeeee; background-color: #F3F3F3; padding: 30px 10px 10px 20px;margin: 7px 0px 7px 0px;}
.commentbox:hover, .commentboxpartial:hover {border-color: #dddddd;}
.commentboxpartial { background-color: #F3F3F3; border: 1px solid #eeeeee;padding: 10px; margin: 10px;}

.commentinfo { background-color: #f3f3f3; margin-top: 10px; width: 100%;}

.skiplinks {margin-left: auto; margin-right: auto;background-color: #f3f3f3; text-align: center; margin: 0 0 10px;padding: 10px; font-size: 7pt; letter-spacing: 1px; color: #777777;}

/* SIDEBAR */
.defaultuserpic {text-align: center; margin: 0;padding:10px 2px;}
.defaultuserpic img {padding: 2px; border: 1px solid #dddddd; width:60px;height:60px;}

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

.sbarbody2 { padding: 10px 5px 10px 15px;line-height:1.5;}

ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none;}
li.sbaritem{display:block; padding: 4px; border-bottom: 1px solid #dddddd;} li.sbaritem:hover {background-color: #E7E7E7;}
li.sbartitle{ font-size: 9pt; padding: 8px; font-style:italic; letter-spacing;-1px;color: #DF373E;text-transform: lowercase; }

#sidebar_linklist {transform: lowercase; margin:0; padding:0}
.sbarcalendar {padding: 2px 3px; border: 1px solid #eeeeee; text-align: center; font-size: 9px;} .sbarcalendarposts{vertical-align: middle !important; background-color: #f7f7f7; text-align: center;}
.sbarcalendarposts:hover {background-color: #ececec;}

/* FOOTER */
#footer { background-color: #BB2026;padding: 5px; text-align: left; margin:auto;text-transform: uppercase; font-size: .7em; letter-spacing: 3px; z-index: 100; clear: both; }

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

div#footer li.viewing {color: #555555;display:none;}
div#footer a, div#footer a:link, div#footer a:visited {padding: 3px; display:inline; color: #ffffff; }
div#footer a:hover { color:#bbbbbb; }

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

/* ARCHIVE PAGE */
ul.year { margin: 0px;margin: 0 auto 42px;background-color: #F3F3F3; text-align: center; padding: 20px;border: 1px solid #ececec; border-bottom:none;}
ul.year li {display: inline;}

table.yeartable {margin-left: auto; margin-right: auto;background-color: #F3F3F3;border: 1px solid #ececec; border-top:none; margin-left: auto; margin-right: auto; margin-top:-42px;width:100%;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: #FBFBF8; text-align: center;}
td.yearmonth {border-style: none;}

.clear {display:none; height: 8px;}

/* MINI ICONS BY BRANDSPANKING NEW */
.ljuser img { width: 0; height: 0; background: transparent url(http://i43.tinypic.com/330h2s6.jpg) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i43.tinypic.com/330h2s6.jpg) no-repeat 0 0 !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i44.tinypic.com/256wh9l.jpg) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }

HTML BODY img.i-ljuser-userhead {height:6px !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 10px 10px !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/1z1da8y.png); }
img[src*="icon_private.gif"]{background-image: url(http://i43.tinypic.com/j79ukw.png); }
img[src*="icon_groups.gif"] {background-image: url(http://i40.tinypic.com/4udx5e.png); }

.ljuser img[src*="syndicated.gif"]{background-image: url(http://i44.tinypic.com/1iiutv.jpg) !important; }
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i42.tinypic.com/33c96pw.jpg) !important; }
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i40.tinypic.com/15gxvro.png) !important; }
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i39.tinypic.com/2hyxw7r.png) !important; }
img[src*="btn_del.gif"] {background-image: url(http://i41.tinypic.com/m7ztok.jpg); }
img[src*="btn_scr.gif"] {background-image: url(http://i40.tinypic.com/30auv5y.jpg); }
img[src*="btn_unscr.gif"] {background-image: url(http://i41.tinypic.com/vfxurp.jpg); }
img[src*="btn_freeze.gif"] {background-image: url(http://i39.tinypic.com/xm3l7r.jpg); }
img[src*="btn_unfreeze.gif"] {background-image: url(http://i41.tinypic.com/28reatl.jpg); }
img[src*="btn_track.gif"] {background-image: url(http://i41.tinypic.com/viecqo.jpg); }
img[src*="btn_tracking.gif"],img[src*="btn_tracking_thread.gif"] {background-image: url(http://i42.tinypic.com/f9m79s.jpg); }
img[src*="anonymous.gif"] {background-image: url(http://i40.tinypic.com/2n7r5uo.jpg); }
img[src*="openid-profile.gif"] {background-image: url(http://i40.tinypic.com/2hd0a5v.jpg); }
.box img[src*="userinfo.gif"] {background-image: url(http://i43.tinypic.com/330h2s6.jpg);}
img[src*="talk/none.gif"] {background-image: url(http://i40.tinypic.com/20ppj6o.jpg); }
img[src*="help.gif"] {background-image: url(http://i41.tinypic.com/ztyn80.jpg); }
img[src*="pencil.gif"] {background-image: url(http://i41.tinypic.com/xo03zt.jpg); }
img[src*="btn_edit.gif"] {background-image: url(http://i39.tinypic.com/15cnkg5.jpg); }
.Note .Inner { background: #f3f3f3 none repeat scroll 0 0; border: 1px solid #eeeeee; color: #666666;} .ippu .track_title {color: #444444; font-weight: normal;} div.ljcmtmanage { background: #f3f3f3 none repeat scroll 0 0; border: 1px solid #eeeeee; padding:10px; }

/* MISC */
b, u { color: #111111;}
i, s { color: #bbbbbb;}
p, td {} form#postform, form#qrform table {border-width: 0px !important; background-color:#f3f3f3}

blockquote { padding:15px; border: 1px solid #eeeeee; background: #ededed url() repeat; color:#666666; }
code {display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px;}

kbd, pre, tt {font-family: monospace;}
textarea { font-family: Times New Roman, Georgia,Book Antiqua, serif;font-size: 11px; background: #ededed url() repeat; border: 1px solid #cccccc; color: #999999;}

/* COLORS */
a, a:link, a:visited, .subject a, div.comments a:hover,.subject a:link, .subject a:visited, h2, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation, .ljuser a b {
color: #DF6161;
text-decoration: none;}
.ljuser a b {font-family:Georgia, serif;font-weight:normal;font-style:italic}
a:hover, .subject a:hover, div.comments a, .datesubjectcomment a:hover {color: #222222; text-decoration: none;}
.subject a, .subject a:link, .subject a:visited, .subject {text-decoration: none;color: #CF3333; }
div#sidebar a { color: #aaaaaa;} div#sidebar a:hover, div#sidebar li.sbaritem:hover a{ color: #DF8B8E;}

installation
01.
Choose Journal Style
02.
Select "Blue Gray" Flexible Squares layout in "Select a New Theme"
03.
In Choose a Page Setup, select 2 Column (sidebar on right).
04.
Go to " Customise your Theme " and then "Style ". Change the "Background color of the outer table" to #DFDCDC.
05.
Then go to the "Sidebar" section. Make sure all the sidebar elements you wish to show are enabled. This is also where you add the free text.
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:Q&A
♚ mini icons by 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.
♔ Commenting and crediting not necessary, but always appreciated :)

Also, I pimp:




Photocons is your one-stop shop for graphics made from photography. While 'icon' is in the name, this is a place for all graphics. Banners, wallpapers, headers, etc are all welcome alongside icons and avatars.
JOIN & WATCH

style: flexible squares, wot: layout, babbling

Previous post Next post
Up