( Install ) Step 1 — System

Select Theme

1. Select any S2 Flexible Squares layout.

Page Setup

1. Ad Placement: Vertical
   (Ignore if you have a paid account.)
   
   

( Install ) Step 2 — Display

Customize Display

1. Set the user picture position for each entry: Left

( Install ) Step 3 — Stylesheet

Custom CSS

1. Use layout's stylesheets: No. IMPORTANT!!
   
   
2. 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; }
   

( 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.

Button	Code
View available buttons	Layout by <lj user="fruitstyle">

( Optional ) Add a Banner

The recommended banner size is 900px wide and 125px high.

( Optional ) Replace Colours