s2 layout ☂ bring something to feed the birds [flexible squares]

Jan 03, 2009 20:37

This was rather hastily thrown together today. I swear I had no intention of making yet another layout, but I made the mistake of checking up on the icons at Pinvoke and they had umbrella's. Fucking umbrella's.

layout: bring something to feed the birds
style: flexible squares
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, topbar
browsers: IE7, FF, Safari, and Opera


picture | live

/*

bring something to feed the birds ((flexible squares; basic, plus, & paid; milou veronica))

*/

body { background: #111111 url() repeat fixed 0 0; text-align: center; color: #ffffff; font-family: "Trebuchet MS", Arial, Tahoma, "Verdana", sans-serif; font-size: 8pt; margin: 0px 0; padding: 0px}
.headerimage {position: relative; background: #111111 url(http://i41.tinypic.com/15ee5gj.png) repeat scroll 0 0; width: auto; height: 55px; margin-left: auto;margin-right: auto;margin-bottom: 0px; border-bottom: 5px solid #171717; border-top: 2px solid #191919}
#content{ color: #555555; margin-left: auto; margin-right: auto; border-width: 0px; padding: 0px; min-width: auto; width: 100%; }
#maincontent { padding: 10px 0px 10px; margin-top: 0px; text-align: left; background: #eeeeee url(http://i37.tinypic.com/zj9iq0.png) repeat scroll 0 0; margin-left: auto; margin-right: auto; border-bottom: 4px solid #000000}
#sidebar { padding:0px 5px 10px; width: 750px; text-align: left; color: #888888; font-size: 7.5pt; margin: 0 auto; background-color: #; min-height: 120px; }

/* HEADER */

#header {background-color: #000000; font-family: "Trebuchet MS", Georgia, Times New Roman, Times, serif; margin: auto; text-align: center; font-size: 13pt; font-weight: normal; letter-spacing: -2px; text-transform: lowercase; color: #444444; padding: 10px; width: auto; border-bottom: 2px solid #0a0a0a}

div#header a, div#header a:link, div#header a:visited{ color: #; padding: 0px; margin:0px}
div#header li.view { padding: 0px; margin: 0px}
div#header li.view:hover { }
ul.navheader{ word-spacing: 5px; padding: 0px; margin: 0px; display:inline}
ul.navheader li {padding: 0px; margin: 0px; list-style-type: none; display: inline}

.title { margin: 0px; font-size: 24pt; color: #eaeaea; etter-spacing: -1px}
.subtitle{ color:#444444; font-size: 7pt; letter-spacing: 3px}

/* ENTRIES */

.subcontent { min-height: 130px; background-color: #ffffff;width: 760px; margin: auto; border: 1px solid #dddddd; border-top: none; min-height:220px}
.date { text-transform: uppercase; color: #444444; font-size: 7pt; letter-spacing: 9px; word-spacing: 5px; position:;padding-top: 0px}
.subject { background-color: transparent ; letter-spacing: -2px; font-size: 19pt; text-transform: lowercase; line-height: 100%; position:; padding: 0px 0 0 13px}
.subject a, .subject a:link, .subject a:visited {text-decoration: bold}
.datesubject { font-family: "Trebuchet MS", Georgia, Times New Roman, Times, serif; padding: 20px 20px 15px 20px; background-color: #111111; text-align: left}
.entry { margin: 0px; padding: 10px 25px 10px 25px; text-align: left; line-height: 1.75; margin-left: 120px}
.entry_text { font-family: "Trebuchet MS", Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; margin-bottom: 0px; padding-top: 0px}
.entry ul li {padding-left: 5px;margin-left: 15px}
.entry ol li{padding-left: 5px;margin-left: 15px}

/* USERPICS */

.userpic { position: absolute; float: left; padding: 2px; background: #ffffff url() repeat scroll 0 0; margin: 85px 10px 10px ; z-index: 15; border: 1px solid #eeeeee}
.userpicfriends { border: 1px solid #eeeeee; position: absolute; background-color: transparent !important; float: left; padding: 2px; margin: 85px 10px 10px; text-align: right; z-index: 15; font-size: 9pt}
.userpicfriends img {border: 0px; padding: 0px; border: 0px solid #eeeeee; background: #111111 url() repeat scroll 0 0}
.userpicfriends a font {color: #bbbbbb}

/* COMMENT BAR */

.comments {border: 0px solid #f1f1f1; word-spacing: 2px; font-style: italic; color: #dddddd; font-size: 9pt;letter-spacing: -1px; text-align: right; padding: 6px 5px 6px 5px; position: relative; top: 0px; text-transform: lowercase ; margin-top: 20px}

div.comments a, div.comments a:visited, div.comments a:link { padding: 0px; background-color:#0; border: 0px solid #eeeeee}
div.comments a:hover {background-color:#; border-width: 0; padding: 0px}
.separator{height: 25px; background-color: #; margin: auto; width: 760px}

/* CURRENTS AND TAGS */

.ljtags { text-align: left; padding: 2px 2px 2px 14px; margin-top: 50px; position: relative; text-transform: lowercase; font-size: 7.5pt; color: #777777; background: transparent url() no-repeat scroll 0% 50%; margin-left: 15px; font-weight: bold} div.ljtags a { font-weight: normal}

.currents {text-align: left; margin-top:0px; padding: 15px 0 0 15px; text-transform: lowercase; font-size: 7.5pt;color: #777777}
.currents strong {font-weight:; text-decoration: none; color: #}
.currentlocation {padding: 2px 2px 2px 14px; background: transparent url() no-repeat scroll 0 50%} .currentmood {padding:2px 2px 2px 14px; background: transparent url() no-repeat scroll 0% 50%} .currentgroups {padding: 2px 2px 2px 14px; background: transparent url() no-repeat scroll 0% 50%} .currentmusic {padding: 2px 2px 2px 14px; background: transparent url() no-repeat scroll 0% 50%}

/* TAG PAGE */

h2 { background-color: #111111; padding: 10px 10px 10px 30px; font-family: Arial, Georgia, Times New Roman, Times, serif; letter-spacing: -1px; font-size: 13pt; text-transform: lowercase; line-height: 100%; color: #444444; font-weight: normal; margin: 0px auto; border: 0px solid #dddddd; border-bottom: none; width: 720px}

.ljtaglist {text-align: left; margin: 0px auto 10px; padding: 3px 15px 15px 35px; background-color: #FFFFFF; width: 710px; font-size:10px; list-style: square ;border: 0px solid #dddddd; border-top: none} .ljtaglist li { margin: 3px; padding: 3px; border-bottom: 1px dotted #e6e6e6; }

/* COMMENT PAGE */

.box { text-align: left; padding: 0px; clear: left; width: 760px; background-color: #; margin: 0 auto}

.datesubjectcomment {text-align: left; color: #999999; margin-top: 0px}
.userpiccomment { position: relative; padding: 1px; 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}
.replytosubject {letter-spacing:2px; font-weight: bold}

.commentreply { line-height:1.75; min-height: 65px; text-align: left; position: relative; margin: 10px 10px 10px 120px}
.commentbox { border: 1px solid #dddddd; background-color: #FFFFFF; padding: 30px 10px 10px 20px;margin: 14px 0px 0px 0px}
.commentbox:hover, .commentboxpartial:hover {border-color: #ececec}
.commentboxpartial { border: 1px solid #eeeeee; background-color: #FFFFFF; padding: 10px; margin: 10px; -moz-border-radius: 7px}
.commentinfo { background-color: #ffffff; margin-top: 10px; width: 100%}

.skiplinks {text-align: center; padding: 9px 0 5px; color: #dddddd; margin: 0 auto; word-spacing: -4px} .skiplinks a { padding: 6px 19px; background-color: #111111; margin: 0px; word-spacing: 0px}
.skiplinks a:hover {background-color: #191919}

/* SIDEBAR */

.defaultuserpic { float: right; margin: 20px 0 0 10px; padding: 0px 0px 0px; text-align:center}
.defaultuserpic img {padding: 0px; border: 9px solid #090909; margin-top: 0px; background: #111111 url() repeat scroll 0 0; width: 70px; height: 70px}
.sbarheader {padding: 0px 5px 0px 5px}
.sbarbody {padding: 0px 5px 0px 5px}

.sbarbody2 { padding: 10px 5px 7px 5px; padding:15px 5px 7px 20px; width: 400px; float:right}

ul.sbarlist{ margin: 0px; padding: 0px; margin-left: 0px; list-style: none}
li.sbaritem{ padding: 5px; border-bottom: 1px solid #222222; margin:2px} li.sbaritem:hover {border-color: #2d2d2d; background-color: #161616}

li.sbartitle{ display:none;text-transform: uppercase; padding: 8px; font-family: Courier New, Courier, monospace; color: #777777}

#sidebar_linklist {width: 200px; font-size: 8pt; font-style: italic; text-transform: lowercase; padding-top:10px} #sidebar_summary { display: none} #sidebar_tags { display: none} #sidebar_calendar { display: none}

/* FOOTER */

#footer { background-color: #; margin:auto; font-style:italic; text-align: center; z-index: 100; clear: both; width: 760px}

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; border: 0px solid #eeeeee; background-color: #}
div#footer a, div#footer a:link, div#footer a:visited { color: #; padding: 7px; margin: 2px; border: 0px solid #eeeeee; background-color: #}
div#footer a:hover {background-color: #}

.clearfoot {clear: both; background-color: #; width: 760px; margin: auto}

/* ARCHIVE PAGE */

ul.year { margin: 0px auto; font-family: Arial, Georgia, Times New Roman, Times, serif; text-align: center; padding: 20px; background-color: #111111; width: 720px; border: 0px solid #dddddd; border-bottom: none; font-size: 14pt}
ul.year li {display: inline}
table.yeartable { border: 0px solid #dddddd; border-top:none; background-color: #FFFFFF; margin-left: auto; margin-right: auto; padding: 30px; width: 760px}

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 */

.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://i34.tinypic.com/v5zklz.png) no-repeat scroll 0 0}
img[src*="icon_private.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background: transparent url(http://i35.tinypic.com/2mqroux.png) no-repeat scroll 0 0}
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: transparent url(http://i38.tinypic.com/o7qfcg.png) no-repeat scroll 0 0}

.ljuser img { width: 0; height: 0; background: transparent url(http://i40.tinypic.com/33c56o1.png) no-repeat 0 0; padding: 16px 16px 0 2px !important}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i40.tinypic.com/33c56o1.png) no-repeat 0 0 !important; padding: 16px 16px 0 2px !important}

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

.ljuser img[src*="community.gif"] { width: 0; height: 0; background: transparent url(http://i43.tinypic.com/117bpqx.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="syndicated.gif"] { width: 0; height: 0; background: transparent url(http://i44.tinypic.com/14alt9g.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important; }
.ljuser img[src*="newsinfo.gif"] { width: 0; height: 0; background: transparent url(http://i43.tinypic.com/jb0551.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="partnercomm.gif"] { width: 0; height: 0; background: transparent url(http://i43.tinypic.com/qog8pc.png) no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="sponcomm.gif"] { width: 0; height: 0; background: transparent url(http://i44.tinypic.com/xt5qh.png) no-repeat scroll 0 0 !important; padding: 16px 16px 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}
img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i39.tinypic.com/144739d.png) no-repeat scroll 0 0}
img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i43.tinypic.com/358rj2a.png) no-repeat scroll 0 0}
img[src*="btn_unscr.gif"] { height: 0px; width: 0px;padding: 0px 0px 16px 16px !important; background: url(http://i39.tinypic.com/2drnh3.png) no-repeat scroll 0 0}
img[src*="btn_freeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i40.tinypic.com/17afb4.png) no-repeat scroll 0 0}
img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i44.tinypic.com/242zlet.png) no-repeat scroll 0 0}
img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i44.tinypic.com/5zmpvk.png) no-repeat scroll 0 0}
img[src*="btn_tracking.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i43.tinypic.com/aakt3q.png) no-repeat scroll 0 0}
img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i39.tinypic.com/71pcmf.png) no-repeat scroll 0 0}
img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i40.tinypic.com/2ngfymo.png) no-repeat scroll 0 0}
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i44.tinypic.com/35b5evp.png) no-repeat scroll 0 0}
.box img[src*="userinfo.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i40.tinypic.com/33c56o1.png) no-repeat scroll 0 0}
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url(http://i39.tinypic.com/2ry4o4k.png) no-repeat scroll 0 0}
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i44.tinypic.com/zwkxvc.png) no-repeat scroll 0 0}
img[src*="pencil.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i40.tinypic.com/2zibpg8.png) no-repeat scroll 0 0}

/* MISC */

b, u { color: #1a1a1a; } #sidebar b, #sidebar u { color: #ffffff}
i, s { color: #aaaaaa}
p, td {font-size: 11px}

blockquote { padding: 8px; border: 1px solid #eeeeee; background: #eeeeee url(http://i54.tinypic.com/befoch.png) repeat scroll 0 0; color: #444444; margin:7px 8px}
code { display:block; padding:5px; border:1px dashed #DDDDDD; font-size: 12px}
kbd, pre, tt {font-family: monospace} form#qrform table {border-width: 0px !important}
input, textarea { font-family: Arial, Arial, Tahoma, "Verdana", sans-serif; font-size: 11px; background: #ececec url() 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, div#sidebar a:hover, .subject a:visited, code, .datesubjectcomment a:link, .datesubjectcomment a:visited, div.ContextualPopup .Relation {
color: #9DA8AD;
text-decoration: none}

a:hover, .subject a:hover, div.comments a, div#sidebar a, .datesubjectcomment a:hover {color: #D1D1CB; background-color: #; text-decoration: none}
div#header a { color: #4A4F4F} div#header a:hover {color: #598B8F}
.subject a, .subject a:link, .subject a:visited, .subject a:hover, .subject, h2, ul.year {color: #ffffff}

installation
01.
Choose Journal Style
02.
Select "Autumn" Flexible Squares layout in "Select a New Theme"
03.
In Choose a Page Setup, set your add settings to Horizontal or Between Entries, 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 #111111.
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.
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 Pinvoke
>> Please address all questions to the F.A.Q.

style: flexible squares, wot: layout

Previous post Next post
Up