030 - reincarnation [Flexible Squares]

[kill_zombie]

Guess who's baaack? 8D



reincarnation ►LIVE | STATIC | FAQ


Layout Information
TESTED BROWSERS Mozilla Firefox, Safari, Internet Explorer
PROBLEMS? Journal title is misaligned in IE of course though it doesn't look too bad
FEATURES Topbar, tiny icons, contextual pop ups, custom nav-strip
DISABLED Journal subtitle, entry date, sidebar modules: profile icon, calendar.
AD-PLACEMENT Between Entries
FINAL NOTES I should've subtitled this (Revenge of the Flexi-Squares), lol. This was a request for timeasmymeasure as a part of a Christmas-induced layout request thread for my f-list. Though Flexi-Squares isn't my thing, I had a lot of fun coding for that sidebar.


Layout Installation
SELECT JOURNAL STYLE 01. Select any Flexible Squares theme (by Yati Mansor).

02. Pick an ad placement you prefer (Between Entries tends to look best in general).

03. Make sure that you enable the sidebar!
CUSTOM CSS Use layout's stylesheet(s) → NO
Use layout's stylesheet(s) when including custom external stylesheet → NO
Use external stylesheet → NO

Use CTRL + A inside the textbox to select everything, and then copy and paste into the CUSTOM CSS box.
/*

LJ STYLE: Flexible Squares
LAYOUT: Reincarnation
MAKER: jessilestrange // kill_zombie
FOR: timeasmymeasure

PLEASE CREDIT:
http://community.livejournal.com/kill_brainz/
OR
http://jessilestrange.livejournal.com/

*/

body { background-color: #F3F3F3; font-family: Arial, sans-serif; font-size: 11px; font-color: #666666; text-align: left; }
a, a:visited { color: #555555; text-decoration: none; }
a:hover { color: #007E84; }

#content { width: 880px; margin: 20px 0px 0px 0px; padding: 10px; }
#header, #sidebar { padding: 10px; }
#header { top: 80px; position: absolute; height: 150px; width: 250px; font-family: Tahoma; font-size: 38px; color: #888888; text-transform: lowercase; text-align: right; letter-spacing: -2px; line-height: 30px; margin: 0px; }
.headerimage { /* WANT A HEADER? EDIT THIS AND TRY AND MAKE HEADS AND TAILS OF THIS STUFF~ */ }
div#header a { letter-spacing: -2px; text-transform: lowercase; }
div#header a, li.sbaritem a { color: #777777; text-decoration: none; }
div#header a:hover, li.sbaritem a:hover, .subject a:hover { color: #999999; }
ul.navheader { padding: 0px; margin: 0px; }
ul.navheader li { list-style-type: none; margin: 0px; padding: 0px 0px 0px 5px; display: block; }
.title { top: 0px; position: absolute; font-family: Tahoma; font-size: 28px; color: #888888; letter-spacing: -2px; text-align: right; margin: 0px 0px 0px 270px;}
.subtitle, .date, .defaultuserpic, table.calendar, li.sbartitle, .currents strong { display: none; }

#sidebar { top: 110px; position: absolute; height: 130px; font-family: Verdana; color: #777777; margin: 0px 0px 0px 270px; }
#sidebar, .title { width: 580px; }
.sbarbody { padding: 0px; }
.sbarbody2 { font-family: Arial; font-size: 12px; text-align: justify; line-height: 15px; padding: 0px 0px 15px 0px; }
ul.sbarlist { list-style: none; margin: 0px; padding: 0px; }
li.sbaritem { list-style: none; padding: 0px 14px 0px 0px; display: inline; }
li.sbaritem a { font-size: 11px; text-transform: uppercase; letter-spacing: -1px; }
li.sbaritem a:hover { border-bottom: 1px dotted #888888; }

#maincontent { margin: 220px 0px 0px 0px; padding: 10px; }
.subcontent { font-family: Verdana; }
.datesubject { padding: 10px 0px 0px 0px; }
.subject, .subject a { font-family: Tahoma; font-size: 27px; color: #888888; letter-spacing: -2px; text-align: left; text-transform: lowercase; line-height: 18px; padding: 0px 0px 0px 5px; }
.subject a:hover, .userpicfriends a:hover, div.comments a:hover, div#footer a:hover, .skiplinks a:hover, .datesubjectcomment a:hover, ul.year a:hover { color: #007E84; }
.userpic, .userpicfriends { position: relative; float: right; background-color: #F3F3F3 !important; z-index: 15; }
.userpic { margin: 40px 0px 10px 10px; }
.userpicfriends { font-family: Tahoma; font-size: 11px; color: #888888; text-align: center; text-transform: uppercase; margin: 15px 10px 15px 15px; }
.userpicfriends a font { color: #888888; }
.userpic img, .userpicfriends img { height: 95px; width: 95px; background-color: #F7F7F7; border-right: 10px solid #888888; margin: 0px 0px 5px 0px; padding: 0px 3px 0px 0px; }
.userpic img:hover, .userpicfriends img:hover { border-right: 10px solid #007E84; }
.entry { min-height: 100px; margin: 20px 125px 10px 10px; }
.entry ul li, .entry ol li { padding-left: 5px; margin-left: 15px; }
.entry_text { font-size: 12px; color: #555555; padding: 0px 5px 0px 0px; }
.entry_text a { font-weight: bold; text-transform: uppercase; }
.entry_text img { border: 1px solid #777777; margin: 1px; }
.entry_text img:hover { border: 1px solid #999999; }

.ljtags { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/right_arrow.png) no-repeat; font-family: Tahoma; font-size: 0px; }
.ljtags { margin: 25px 0px 0px 0px; padding: 0px 0px 0px 25px; }
.ljtags a { margin: 0px 7px 0px 0px; }
.ljtags a, .currents, .currents a { font-weight: normal; font-size: 11px; text-transform: uppercase; }
.ljtags a:hover, .currents a:hover { border-bottom: 1px dotted #333333; }
.currents { font-family: Tahoma; font-size: 11px; color: #555555; padding: 0px 0px 0px 10px; }
.currentmood { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/favorite.png) no-repeat; }
.currentmusic { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/headphones.png) no-repeat; }
.currentlocation { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/home.png) no-repeat; }
.currentgroups { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/comment_bubble.png) no-repeat; }
.currentmood, .currentmusic, .currentlocation, .currentgroups { margin: 0px 0px 1px 0px; padding: 2px 0px 5px 23px; }

.comments { position: relative; width: 40px; font-family: Tahoma; font-size: 0px; text-align: center; margin: 10px 10px 0px 0px; }
div.comments a, div#footer a { font-size: 35px; color: #888888; line-height: 25px; letter-spacing: -2px; }
div.comments a { display: block; }

.skiplinks { font-size: 0px; color: #FFFFFF; text-align: center; margin: 0px 0px 15px 0px; }
.skiplinks a { font-family: Verdana; font-size: 12px; color: #888888; text-transform: uppercase; margin: 0px 6px 0px 6px; }
.skiplinks a:hover { border-bottom: 1px dotted #888888; }

#footer { width: 100%; font-family: Tahoma; text-align: center; text-transform: lowercase; margin: 30px 0px 5px 0px; padding: 0px; clear: both; }
ul.navfooter { padding: 0px; margin: 0px; }
ul.navfooter li { display: inline; margin: 0px 5px 0px 5px; }
li.viewing { font-size: 12px; color: #555555; text-transform: uppercase; letter-spacing: 1px; }
.separator { /* for formatting separators between entries */ height: 40px; }
.clearfoot { clear: both; }
.clear { height: 15px; }

.box { padding: 5px; clear: left; }
.reply { position: relative; font-family: Tahoma; font-size: 11px; color: #000000; text-align: left; line-height: 250%; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; }
.replytoposter, .replytosubject { background: transparent; font-family: Tahoma; font-size: 11px; font-weight: bold; color: #000000; text-align: left; }
.userpiccomment { float: left; max-width: 75px; max-height: 75px; border-left: 10px solid #888888; margin: 0px 20px 10px 0px; }
.userpiccomment:hover { border-left: 10px solid #007E84; }
.datesubjectcomment { background-color: #F7F7F7; color: #777777; -moz-border-radius: 10px; padding: 10px; margin: 10px 0px 0px 0px; }
.datesubjectcomment a:link { color: #888888; }
.commentreply { font-size: 12px; color: #555555; padding: 10px 10px 15px 10px; }
.commentbox { margin: 10px; padding: 5px; }
.commentboxpartial { font-family: Tahoma; font-size: 11px; color: #777777; text-transform: lowercase; border-left: 10px solid #B3E8E6; margin: 13px 0px 13px 0px; padding: 13px 30px 13px 10px; }
.commentinfo { width: 100%; margin: 10px 0px 0px 0px; }

ul.year { font-family: Tahoma; font-size: 28px; color: #888888; letter-spacing: -2px; text-align: center; line-height: 23px; padding: 0px 0px 30px 0px; }
ul.year a { color: #777777; }
ul.year li { display: block; }
td.yearmonth { font-family: Tahoma; font-size: 12px; color: #777777; text-transform: uppercase; border-style: none; }
table.yeartable { width: 90%; font-family: Verdana; color: #8888888; margin: 0px auto 0px auto; }
table.yeartable td.yearday { font-size: 13px; text-align: center; text-transform: uppercase; }
table.yeartable td.yeardate, table.yeartable td.yearday { border: 1px solid #EBEBEB; padding: 1px; }
table.yeartable td.yeardate, table.yeartable td.yearday { background-color: #F7F7F7; color: #888888; }
table.yeartable td.yeardate:hover { background-color: #F9F9F9; }
table.yeartable td.yeardate a:hover { #555555; }
dl, dt { font-family: Tahoma; text-align: left; }
dl { font-size: 11px; line-height: 1.5em; }
dl a { font-weight: bold; text-transform: uppercase; }
dl a:hover { color: #666666; }
dt { font-size: 17px; font-weight: lighter; }

.ljtaglist { font-family: Tahoma; color: #888888; list-style-position: outside; list-style-type: decimal-leading-zero; }
.ljtaglist li { font-size: 11px; }
.ljtaglist a { font-weight: bold; font-size: 15px; text-transform: lowercase; letter-spacing: -1px; }

b, strong { color: #007E84; }
i, em { color: #333333; }
u, strike { color: #777777; }
small { font-size: 9px; }
h1, h2, h3, h4, h5 { font-family: Tahoma; font-weight: normal; color: #999999; text-transform: lowercase; letter-spacing: -2px; }
h1 { font-size: 30px; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
h4 { font-size: 17px; }
h5 { font-size: 15px; }
p, td, blockquote { font-size: 11px; }
code, kbd, pre, tt { font-family: Monospace; }
blockquote { background-color: #F7F7F7; font-size: 13px; font-style: italic; line-height: 15px; -moz-border-radius: 10px; padding: 9px; }
textarea { background-color: #F7F7F7; font-family: Monospace; font-size: 10px; color: #777777; border: 1px solid #888888; padding: 2px;}

.ljuser a b { font-weight: bold; color: #007E84; text-transform: lowercase; }
.ljuser a b:hover { border-bottom: 1px dotted #888888; }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/userinfo-gray.png); padding: 9px 9px 1px 1px !important; background-position: center left;}
.ljuser img[src*="userinfo.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/userinfo-gray.png); padding: 9px 9px 1px 1px !important; background-position: center left; }
.ljuser img[src*="community.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/community-gray.png); padding: 8px 9px 1px 1px !important; background-position: center left; }
.subject img[src*="icon_protected.gif"]{ width: 0; height: 0; background-repeat: no-repeat; padding: 24px 24px 0px 0px; margin: 0px 2px 0px 0px; !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/lock-2.png); background-position: center left; }
.subject img[src*="icon_private.gif"]{ width: 0; height: 0; background-repeat: no-repeat; padding: 24px 24px 0px 0px; margin: 0px 2px 0px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/light_bulb.png); background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 24px 24px 0px 0px !important; margin: 0px 2px 0px 0px; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/star.png); }
img[src*="btn_del.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/delete.png); }
img[src*="btn_scr.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/screen.png);}
img[src*="btn_unscr.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/unfreezeorunscreen.png); }
img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/link-1.png); }
img[src*="btn_track.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/track-2.gif); }
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/reply.png); }

img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/private-gray.gif); }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/private-blue.gif); }
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/readcomments.gif); }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 12px 12px !important; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/flag.gif); }
.Note .Inner { background: #FFFFFF none repeat scroll 0 0; border: none; }

div.ContextualPopup div.Inner { width: 260px; background: #F7F7F7 !important; font: 10px Arial; color: #555555 !important; border: 1px solid #F0F0F0 }
div.ContextualPopup div.Userpic img { background-color: #F7F7F7 border-right: 10px solid #007E84; padding: 0px 2px 0px 0px; margin: 10px; }
div.ContextualPopup div.Userpic img:hover { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; !important }
div.ContextualPopup .Relation { font-family: Georgia; font-style: italic !important; font-weight: bold !important; font-size: 14px !important; color: #007E84 !important; text-transform: lowercase; border-bottom: 1px solid #F0F0F0; margin-bottom: 3px; padding-bottom: 5px; }
div.ContextualPopup div.Inner div.Content a { font-weight: normal; color: #444444 !important; text-decoration: none !important; text-transform: uppercase; }
div.ContextualPopup div.Inner div.Content a:hover { color: #007E84 !important; }
div.ContextualPopup div.Inner div.Content img a:hover { background: none !important; }
div.Relation, div.FriendStatus { font-size: 11px; text-transform: uppercase; letter-spacing: -1px; border-bottom: 1px solid #907878; padding: 2px 2px 5px 2px; margin: 0px 0px 8px 0px; }

#lj_controlstrip { border-bottom: 1px solid #FFFFFF; }
#lj_controlstrip img { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; !important }
#lj_controlstrip td { background: #212121; color: #FFFFFF; text-transform: uppercase; border-right: 0px; }
#lj_controlstrip select, #lj_controlstrip input { background-color: #111111 !important; font: 9px Arial !important; color: #FFFFFF !important; text-transform: uppercase; border: 1px solid #3D3D3D; margin: 1px; }
#lj_controlstrip select:hover, #lj_controlstrip input:hover { background-color: #353535; border: 1px solid #007E84; }
#lj_controlstrip td a { color: #FFFFFF; }
#lj_controlstrip td a:hover {color: #007E84; text-decoration: none; }
#lj_controlstrip .ljuser img { display: none; }
#lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"], #lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { display: none; }
#lj_controlstrip .ljuser a b { font-size: 16px; font-weight: bold; color: #007E84; text-transform: lowercase; letter-spacing: -1px; }
#lj_controlstrip .ljuser a b:hover { border-bottom: 1px dotted #999999; }
SIDEBAR Expand SETUP + ORDERING
Show the blurb and link list, but have everything else set to no.
IMAGES Save these to your own servers to ensure that the images don't die on you when my Photobucket explodes :D

Tiny Icons → User - Community
Entry Header - Protected - Private - Groups
Metadata + Tags - Tags - Mood - Music - Location - Groups
Comments → Delete - Screen - Unscreen - Freeze - Track - Tracking - Anonymous - Open ID - Talk/None - Help