(layout 024 →) flexi sqs, citrus mix.
CITRUS MIX; static | live
Browsers: Chrome, Firefox, IE, Safari
Accounts: Basic, Plus, Paid
INSTALLATION 101
Go to Customize -> Select a Flexible Squares stylesheet.
Page setup -> 2 Column (sidebar on left) option selected.
Ad placement -> between entries* (ads don't show up for some reason)
Display tab -> Presentation -> Additional options -> user picture position should be set to right.
Custom CSS tab -> Set all dropdown menus to NO.
Active: Title, tags list, links list, blurb, calendar
Inactive: Sidebar headings, subtitle
Input corresponding code:
/* entitled: out of joint *//* maker: silentevocation @ fleeting_days *//* for use at livejournal.com */ /* BODY ---------------- */ body { background-color: #F2E7D2; background-attachment:fixed; } body, td, th {font: normal 11px "verdana", sans-serif;color: #AAAAAA;line-height:12px;text-align:justify;}/* PARENT LINKS, BLOCK QUOTE ---------------- */ a, a:link, a:visited, a:active {color: #000000; padding: 1px;text-decoration: none; } a:hover {color: #A6CE88;text-decoration: none; }blockquote { border:1px dotted #e2e2e2; font: 12px "Courier New", sans-serif;line-height:1em;background-image:url("http://i56.tinypic.com/11smu5j.png");padding: 20px; color:#000000;}b, strong {color:#3F3F3F;}em, i {color: #888888;}input, textarea, select {background-color: #ffffff;font: normal 11px "Courier New", monospace;color: #888888;}/* CONTENT FORMATTING ---------------- */ #content {width:75%;margin: 0 auto;border: 0px; padding: 0px;}#maincontent {float: left;width: 75%;margin-top: 0px;background-color: transparent;color: #000000;border: 0px;text-align: left;}.subcontent, .yeartable {background-color:#ffffff; padding:10px; width:96%;border-top:9px solid #DDE967;border-bottom:none;padding-top: 10px; }/* HEADER AND FOOTER ---------------- */ #header { text-align: center;background-color: #F4B375;padding-bottom: 20px; padding-top:20px;color: #555555;border: 10px solid #F4B375; text-transform:lowercase;font: normal 12px "Courier New", sans-serif;letter-spacing: 1px;border-radius: 60px;-moz-border-radius: 60px;-webkit-border-radius: 40px;margin-top:35px;}.title {position: relative;float: right;width:250px;text-transform:uppercase;background-color: #DDE967;font: normal 14px "Lucida console";color:#000000;padding:2px 0 2px 0;margin-top:-125px;opacity: .85;margin-right:20px;letter-spacing: 0px;}.subtitle { display:none; }#footer { width: 100%;text-align: left;z-index: 100;clear: both;font: normal 15px "Times", sans-serif;letter-spacing: 2px; }#footer a {color:#888888;background-color: #transparent; font: italic 15px "Times", sans-serif;padding: 5px;letter-spacing:0px;}div#header a, div#header a:link, div#header a:visited {color: #ffffff;background: #EA6F7C;padding: 22px;text-decoration: none;margin:0px; } div#header a:hover {color: #ffffff; font: normal 12px "courier new", sans-serif;text-decoration: none;margin:0px;opacity: .85;} ul.navheader { padding: 20px;margin: 0 0 0 0px;border-top: 15px solid #F4B375;background-color: #transparent;} ul.navheader li {padding: 20px;display: inline; margin:0 0px 0 0px;padding:0;}ul.navheader li.view { padding: 22px;margin:2px 0px 0 0px;background: #7F5579;border-radius: 60px;-moz-border-radius: 60px;-webkit-border-radius: 40px;color: #ffffff;} /* ENTRY, ENTRY-LISTS ---------------- */ .entry {margin: 0;padding: 10px 15px 10px 15px;background-color: #ffffff;line-height: 1.5em; text-align: justify;}.lj-view-recent .entry_text {min-height:220px; }.entry_text {color:#404040;padding: 0 0 12px 0;}.entry_text a:link, a:visited, a:active {color:68D9FF; }.entry_text a:hover {font-color:000;}.entry_text img {border-top: 1px dotted #eee;padding:5px;} .entry ul li {padding-left: 5px;margin-left: 5px;} .entry ol li {padding-left: 5px;margin-left: 5px;}/* USER PIC CRAP ---------------- */.userpic {position: relative;float: right;margin-right:-10px;margin-top:-19px;} .userpicfriends {text-align: center;font-family: Lucida Sans;font-size: 8pt;position: relative;float: right;}.userpic img, .userpicfriends img{width:100px;height:100px;padding:7px;border-top:9px solid #EA6F7C; background:#F2E7D2;margin: 0px 0px 14px 14px; } .userpic a, .userpicfriends a, .userpic font, .userpicfriends font{display:none; } /* DATE AND SUBJECT ---------------- */ .date { text-transform:uppercase;font: normal 9px "Trebuchet MS", sans-serif;color: #000000;padding: 7px 0 0 7;letter-spacing: 3px;text-align: right; background-color: #ffffff; } .subject, subject a, subject a:link {font: 14px "Lucida Console", sans-serif; color: #898989; background-color: #F2E7D2; padding: 12px 10px 10px 27px; border-bottom: 9px solid #F4B375;margin-left:-20px;letter-spacing:-1px;text-transform:uppercase;}.subject a:hover {color: #111111;} .datesubject { padding: 0px 10px 0px 0px;margin-left:-10px;background-color: #F2E7D2; text-align:left;}/* FORMAT THE SIDEBAR ------------------ */#sidebar {padding-top: 10px;font: normal 11px "courier new", sans-serif;color: #404040;width: 25%;float:right;margin-top:-5px;text-align: justify;line-height: 15px; }.defaultuserpic {display: none;}li.sbartitle {display:none;} .sbarbody { }.sbarbody2 {margin-top: 7px;font: normal 11px "Verdana", sans-serif; padding: 22px 10px 10px 10px; background:#ffffff;border-bottom:none;border-top:9px solid #DDE967;line-height: 1.5em; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited {color:#7F5579; font: normal 11px "courier new", sans-serif; text-transform:uppercase;}div#sidebar a:hover {color: #F4B375;font: normal 11px "courier new", sans-serif; text-decoration: none;line-height: 15px;}table.calendar {margin-right: auto;margin-left: auto;}.sbarcalendar {border: 1px solid #EAEAEA;text-align: center;font-family: "helvetica", sans-serif;font-size: 11px;background: #ffffff;color:#6B6B6B;padding: 6px;margin-bottom:4px;}.sbarcalendarposts {border: none;background-color: #F4f4f4;text-align: center;font-family: helvetica, sans-serif;font-size: 11px;padding: 6px;}ul.sbarlist{background-color: #ffffff;padding-left: 0px;margin-left: 0px;list-style: none;}li.sbaritem {padding: 5px 0 2px 5px;list-style: none;border-bottom: 1px dotted #DDDDDD;}li.sbaritem a{color:#000000;}li.sbaritem:hover {font: normal 9px "Verdana", sans-serif; line-height: 15px; background-color:#F9F9F9;padding: 5px 0 2px 5px; }#sidebar_linklist, #sidebar_calendar {background: #ffffff; padding: 5px; margin-top: 10px; border-bottom:none; border-top:9px solid #DDE967;} /* TAGS ------------------ */.ljtags { font: normal 9px "Trebuchet MS", sans-serif;color: #000000;text-transform:uppercase;padding-right: 5px;padding-top: 5px;padding-bottom: 5px;margin: 0; height: 10px;position:relative;text-align:left; }.ljtags a {font: normal 10px "courier new", sans-serif; color: #7F5579;}.ljtags a:hover {border-bottom: 1px dotted #CCCCCC;} ul.ljtaglist { width: 96%; border-top:9px solid #DDE967;border-bottom:none;background-color:#ffffff; padding: 10px; padding-top:30px; list-style:none; margin:0;} /* CURRENTS INFO ---------------- */.currents {padding:6px;background:white;margin-top:-20px;font: normal 9px "Trebuchet MS", sans-serif;text-transform: uppercase; color: #000000;}.currents strong {display: none;}.currentmood {background: url('http://img219.imageshack.us/img219/4487/044z.png') no-repeat left center; padding-left: 14px;}.currentmusic {background: url('http://img850.imageshack.us/img850/3669/060.png') no-repeat left center; padding-left: 14px;}.currentlocation {display:none;}/* COMMENT LINKS ---------------- */.comments {text-align: center;padding: 2px;font-size:0;margin: 0;color:#ffffff;}.comments a {font: normal 14px "Lucida Sans", sans-serif;text-transform:uppercase;letter-spacing:-1px;background:#F2E7D2;padding: 5px; color:#EA6F7C;margin: 0 2px 0px 0px;}.comments a:hover {font: normal 14px "Lucida Sans", sans-serif;text-transform:uppercase;letter-spacing:-1px;background:#F2E7D2;padding: 5px; color:#F4B375;margin: 0 2px 0px 0px;} /* COMMENT-PAGE ---------------- */ .datesubjectcomment { padding: 5px;background-color: #f4f4f4; border-bottom:5px solid #efefef;margin-top: 0px;} .userpiccomment {position: relative;top: -8px;left: 0px;margin: 0px 10px 15px 0px;z-index: 15;float: left;width:50px;height:50px;padding:5px;background-color: #BCEA9A; } .box {width:90%;float:left; } textarea.textbox {width: 100% !important; } .reply {position: relative;margin: 10px 30px 10px 30px;padding: 25px 10px 10px 10px;} .replytosubject {font-weight: bold;} .commentreply {position: relative;margin: 10px;} .commentbox { border:1px solid #e2e2e2;border-top:5px solid #e2e2e2;border-bottom:none;background:#ffffff;padding: 10px; margin: 0px 10px 10px 0px; }.datesubjectcomment a:link, .datesubjectcomment a:visited {} .datesubjectcomment a:hover {} .commentboxpartial {padding: 10px; margin: 10px; }.commentinfo {margin-top: 10px; width: 100%;} /* ARCHIVE PAGE ---------------- */ ul.year {text-align: center;padding-bottom: 20px;} ul.year li {display: inline; } table.yeartable {width: 595px; margin-left: auto;margin-right: auto;} table.yeartable td.yeardate, table.yeartable td.yearday {background-color: #ffffff;padding:10px;} table.yeartable td.yearday {background-color: #ffffff;text-align: center;} td.yearmonth {border-style: none;} /* FOOTER ---------------- */ ul.navfooter{text-align: center;padding: 5px; margin: 0px;} ul.navfooter li {text-align: center; display: inline; margin: 0 5px 0 5px;} .clearfoot { clear: both;height:0;} /* MISC, SPACE SEPARATOR ----------------*/ .clear { height: 5px;} .skiplinks {text-align: center;text-transform:uppercase;}.separator{height: 5px;}form#qrform table {border-width: 0px !important; }/* LJ USER IMG ICONS ---------------- */.ljuser img[src*="userinfo.gif"], .ljuser img[src*="/userhead/"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"] {width: 0;height: 0;background-repeat: no-repeat !important;background-image: url("http://img19.imageshack.us/img19/2576/160w.png") !important;padding: 15px 11px 0 0 !important;text-decoration: none;}.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"] {background-repeat: no-repeat !important;background-image:url("http://img807.imageshack.us/img807/3271/159j.png") !important;padding: 15px 11px 0 0 !important;width:0;height: 0;text-decoration: none;}img[src*="icon_protected.gif"] {background-repeat: no-repeat;background-image:url("http://img807.imageshack.us/img807/1817/181.png");padding: 19px 19px 0 0 !important;width:0;height: 0;text-decoration: none;}img[src*="icon_private.gif"] {background-repeat: no-repeat;background-image: url("http://img692.imageshack.us/img692/1787/183ou.png");padding: 17px 20px 0 0 !important;text-decoration: none;width:0;height: 0;}img[src*="newsinfo.gif"] {background-image:url("http://i47.tinypic.com/2rh8cwm.gif");background-repeat:no-repeat !important;height:0;padding:18px 18px 0 0 !important;width:0;}img[src*="syndicated.gif"] {background-image:url("http://i45.tinypic.com/2zpic05.jpg");background-repeat:no-repeat !important;height:0;padding:18px 18px 0 0 !important;width:0;}/* CONTEXTUAL POP-UP ---------------- */div.ContextualPopup div.Inner {padding: 10px 10px 8px 10px !important;background-color: #ffffff;font-family: "Lucida Sans", serif;color: #AAAAAA !important;font-size: 8px;text-transform:uppercase;width:210px;border:1px solid #DDDDDD;}div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:active {color: #A2E2A1 !important;font-weight: normal;text-decoration: none !important;}div.ContextualPopup div.Inner a:hover {color: #888888 !important;font-weight: normal;text-decoration: none !important;}div.ContextualPopup .Relation {color: #333333;font-weight: normal !important;}
[ Details ]
- In terms of aesthetics, the bright colors with the peach background made everything feel very whimsical, so I wanted to continue the whimsy in the way elements were positioned, stylized and spaced. It has sort of a disjointed, lilting feel, without losing neatness (I hope). Very playful yet polished. A toy box!
- Features: Rounded corners (not visible in IE), slightly transparent elements
- (more to be added as necessary)
EXTRANEOUS
→ Credit: N/A
→ Layout Archive: browse through my older layout designs
→ Resources: precarious and hasty outline of various resources used.
WATCH // AFFILIATE