Layout 050 : Iso
Click for a Live Preview.
( Layout ) #050 : Iso
The 50th layout from Fruitstyle! (:
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares layout.
Page Setup
- Ad Placement: Vertical
(Ignore if you have a paid account.)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Set the user picture position for each entry: Left
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 MINIMALISM --- 050 Iso ---
Malionette @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ---------- BODY ---------- */
body { font: 12px lucida sans; color: #505050; margin: 0; padding: 0; }
a {color: #888888; text-decoration: none; }
a:hover, a img:hover {color: #333333; border-color: #888888; }
a img {border: 5px solid #ededed; }
.subtitle, .clear, .clearfoot, .title {display: none; }
input, select, textarea {border: 1px solid #ededed; font: 10px lucida sans; color: #888888; background: #ffffff; }
textarea {font: 12px lucida sans; padding: 3px;}
dd, dl, dt, ul, li {margin: 0; padding: 0; list-style: none;}
h2, h1, h3 {clear: both; font-family: georgia; width: 900px; padding: 10px; margin: 0 auto; font-weight: lighter;}
.navheader{-moz-border-radius-topleft: 15px; border-top-left-radius: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px;}
.navfooter {-moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px;}
.userpic, .userpicfriends, .datesubject, .navheader li a, .navfooter li a, .datesubjectcomment, .userpiccomment, .commentboxpartial, div.ContextualPopup div.Inner {-moz-border-radius-topleft: 10px; border-top-left-radius: 10px;}
.datesubject, .defaultuserpic, .navheader li a, .navfooter li a, .userpic, .userpicfriends, .datesubjectcomment, .userpiccomment, .commentboxpartial, div.ContextualPopup div.Inner {-moz-border-radius-bottomright: 10px; border-bottom-right-radius: 10px;}
.sbaritem, .skiplinks a, a img, .year a { -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px;}
/* ---------- HEADER FOOTER ---------- */
#header { background: #333333; padding-top: 50px;}
#footer { background: #333333; padding-bottom: 50px;}
.navfooter {position: relative; width: 900px; margin: 0 auto; background: #525252; padding: 15px 15px 15px 5px; color: #ededed; text-align: center;}
.navfooter li {display: inline; }
.navfooter a {color: #ffffff; padding: 5px 25px 5px 25px; margin: 0 5px 0 5px; background: #e14674; font-size: 10px; }
.navheader {position: relative; text-align: center; width: 900px; margin: 0 auto; padding: 154px 15px 15px 5px; }
.navheader li {display: inline; }
.navheader li.view {display: none; }
.navheader a {color: #ffffff; padding: 5px 25px 5px 25px; margin: 0 5px 0 5px; background: #e14674; font-size: 10px; }
.navheader li + li a, .navfooter li + li a {background: #df885c; }
.navheader li + li + li a{background: #819898; }
.navheader li + li + li + li a{background: #df885c; }
.navheader li + li + li + li + li a{background: #e14674; }
.lj-view-archive .navheader li + li + li + li a{background: #819898; }
.lj-view-archive .navheader li + li + li + li + li a{background: #e14674; }
/* ---------- SIDEBAR ---------- */
#sidebar {clear: both; width: 920px; margin: 0 auto; }
.sbartitle, #sidebar div {display: none; } #sidebar div#sidebar_linklist, #sidebar div.sbarbody2, #sidebar div.defaultuserpic {display: block;}
.defaultuserpic {float: left; border: 10px solid #888888; }
.defaultuserpic img, .commentbox div div a img {border: 0;}
#sidebar div#sidebar_linklist {float: right; width: 130px; padding: 10px 0 0 0; height: 110px; overflow: hidden; }
#sidebar div.sbarbody2 {width: 650px; float: left; padding: 10px; height: 120px; overflow: auto;}
.sbaritem {text-align: center; margin: 0 0 5px 0; background: #ededed; }
.sbaritem a {display: block; padding: 2px 0 2px 0; font-size: 10px; }
.sbarlist li + li + li + li + li + li {display: none;}
/* ---------- ENTRY ---------- */
.subcontent {clear: both; width: 920px; margin: 0 auto;}
.userpic, .userpicfriends {float: left; border: 10px solid #ededed; margin: 0 10px 10px 0;}
.userpicfriends {background: #ededed !important; font-size: 10px; text-align: center; color: #ededed; }
.userpicfriends img {padding: 0 0 10px 0;}
.datesubject {background: #ededed; padding-right: 100px; }
.date {display: none; }
.subject, .subject a {font: 22px georgia; color: #333333; padding: 5px 0 5px 0; text-align: center; margin: 0 0 10px 0;}
.entry_text { }
.currents div { font-size: 10px; float: left; margin: 10px 0 10px 0; border-left: 5px solid #ededed; padding: 0 10px 0 5px; }
.ljtags { font-weight: bold; border-left: 5px solid #ededed; padding: 2px 10px 2px 5px; font-size: 10px; margin: 10px 0 0 0; }
.ljtags a {font-weight: lighter; }
.comments {margin: 10px 0 20px 0; clear: both; border-top: 1px solid #ededed; text-align: center; font-size: 10px; padding: 5px 0 5px 0}
/* ---------- ARCHIVE YEAR ---------- */
.year {clear: both; margin: 0 auto; text-align: center; width: 900px; padding: 10px; font-size: 0; }
.year li {display: inline; }
.year a { margin: 0 5px 0 5px; font-size: 10px; background: #ededed; padding: 1px 20px 1px 20px; }
.yeartable {width: 920px; marign: 0 auto; }
.yearmonth {font: 28px georgia; }
.yearmonth a {font-size: 12px; }
.yearday {text-align: center; font-weight: bold; border-bottom: 1px solid #ededed; }
.yeardate {border-bottom: 1px solid #ededed; border-left: 1px solid #ededed; }
.yeardate a {display: block; color: #333333; font: 28px georgia;}
.yeardate div:first-child {background: #ededed; float: right; padding: 10px;}
/* ---------- ARCHIVE MONTH ---------- */
.lj-view-month #maincontent center {clear: both; }
.entry dt {font: 28px georgia; font-weight: lighter; border-bottom: 1px solid #ededed; }
.entry dd {padding: 0 0 0 80px; }
.lj-view-month {padding-bottom: 30px;}
/* ---------- TAGS ---------- */
.ljtaglist {width: 900px; margin: 0 auto; padding: 10px;}
/* ---------- COMMENTS ---------- */
.skiplinks {clear: both; margin: 0 auto; text-align: center; width: 900px; padding: 10px; font-size: 0; }
.skiplinks a { margin: 0 5px 0 5px; font-size: 10px; background: #ededed; padding: 1px 20px 1px 20px; }
.box {width: 920px; margin: 0 auto; }
.box center { font-size: 10px; margin: 20px;}
.commentbox { clear: both;}
.commentboxpartial {background: #ededed; padding: 5px; margin: 10px ;}
.userpiccomment {float: left; border: 10px solid #ededed; margin: 0 10px 10px 0;}
.datesubjectcomment {background: #ededed; font-size: 10px; color: #333333; margin: 0 0 10px 0;}
.currents div { font-size: 10px; float: left; margin: 10px 0 10px 0; border-left: 5px solid #ededed; padding: 0 10px 0 5px; }
/* ---------- REPLY AND DELETE ---------- */
#qrform table {border: 1px solid #ededed !important; margin: 0 auto; margin-bottom: 20px;}
#qrform table a img {border: 0;}
/* ---------- EXTRA ---------- */
#lj_controlstrip td {background: #000000; border: 0; }
div.ContextualPopup div.Inner {border: 0 !important; background: #ededed !important; }
div.ContextualPopup div.Inner div.Content a { font-weight: lighter; color: #888888 !important; text-decoration: none !important; }
div.ContextualPopup div.Inner div.Content a:hover {color: #333333 !important; border-color: #888888; }
.navheader {background: #525252 url(http://i52.tinypic.com/2u59c3a.png) no-repeat center 15px; }
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 4 - Link Back
Please link back to fruitstyle so others can find my layouts. Put either a button or the code in your Userinfo.
ButtonCode
View available buttonsLayout by fruitstyle
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Optional ) Add a Banner
The recommended banner size is 900px wide and 125px high.
The header is declared in the last line of the CSS. Swap out the url with your header if you wish.
Add a Banner | Replace Colours
( Optional ) Replace Colours
#ffffff#ededed#e14674#df885c#888888#819898#525252#505050#333333#000000
Add a Banner | Replace Colours
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
