Layout 051 : Slippr
Click for a Live Preview.
( Layout ) #051 : Slippr
Commissioned. Featuring Rose & Maruga from Dragon Crisis.
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares layout.
Page Setup
- Ad Placement: Horizontal
(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 Flexible Squares --- 051 Slippr ---
Malionette @ Fruitstyle.livejournal.com
Do not remove this note. */
/* -------------------------------------- PAGE -------------------------------------- */
body {font: 11pt calibri; color: #606060; background: #ededed; }
a { color: #61a4f3; font-weight: bold; text-decoration: none; }
a:visited {color: #ffbab5; }
a:hover { color: #f09f6a; }
blockquote {border: 1px solid #ededed; padding: 10px;}
#content-outer {width: 940px; margin: 0 auto; border: 12px solid #e3e3e3; background: #ffffff no-repeat bottom right url(http://img197.imageshack.us/img197/3474/slipprpic.jpg); display: block;}
#maincontent {border-right: 4px solid #ededed; width: 690px; padding-top: 15px; display: block; min-height: 380px; }
/* -------------------------------------- HEADER -------------------------------------- */
#header {width: 255px; position: absolute; height: 90px; overflow:hidden; margin-left: 690px; }
.navheader {padding: 15px 20px 0 20px; margin: 0; }
.navheader li {list-style: none; margin-bottom: 1px;}
.navheader li a {display: block; background: #e3e3e3; color: #ffffff; font: bold 8pt arial; text-transform: uppercase; padding: 0 15px 0 15px; }
.navheader li a:hover {color: #aaaaaa; }
.navheader li.view {display: block; color: #aaaaaa; font: bold 8pt arial; text-transform: uppercase; padding: 0 15px 0 15px;}
.title, .subtitle, .defaultuserpic {display: none;}
/* -------------------------------------- SIDEBAR -------------------------------------- */
#sidebar {width: 215px; float: right; margin-top: 104px; margin-right: 15px; position: relative; font: 8pt arial; border-top: 4px solid #ededed; padding: 15px 0 0 0; }
.sbarlist { padding: 0; margin: 0; }
.sbartitle {list-style: none; color: #aaaaaa; text-transform: uppercase; font: bold 8pt calibri; letter-spacing: 2px; }
.sbarcontent {padding: 10px 0 10px 0;}body > div {display: none;}
.sbarbody2 {border: 1px solid #ededed; padding: 10px; margin: 10px 0 10px 0; }
.tagcloud {list-style: none;}
.sbaritem {list-style: none; margin-bottom: 1px;}
.sbaritem a {display: block; border-bottom: 1px solid #ededed; font: 8pt arial; color: #aaaaaa; }
.sbaritem a:hover {color: #606060; }
#sidebar_summary .sbaritem a {display: inline; }
table.calendar {width: 100%; }
table.calendar td {text-align: center; background: #ededed; font-weight: bold; color: #ffffff; }
/* -------------------------------------- ENTRY -------------------------------------- */
.userpic, .userpicfriends {float: right; background: #ededed !important; border: 4px solid #ededed; border-right: 0; text-align: center; color: #ededed; margin-left: 4px;
-moz-border-radius: 4px; border-radius: 4px; -moz-border-radius-bottomright: 0px; border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; bordertop-right-radius: 0px; }
.userpic img, .userpicfriends img {border: 1px solid #ffffff;}
.userpicfriends img {margin-bottom: 4px;}
.userpicfriends font, .userpicfriends a {font: bold 8pt calibri !important; text-transform: uppercase; letter-spacing: 1px; color: #606060 !important;}
.userpicfriends font:hover, .userpicfriends a:hover {color: #aaaaaa !important;}
.date {float: left; padding: 15px 0 0 10px ; color: #f09f6a; font: bold 8pt calibri; text-transform: uppercase; letter-spacing: 2px;}
.subject {padding: 0 10px 0 10px; text-align: right; border-bottom: 1px solid #ededed; }
.subject a {font: 18pt century gothic; color: #aaaaaa; min-height: 24px; }
.subject a:hover {color: #606060; }
.skiplinks {text-align: center; }
.lj-view-entry .subject {font: 18pt century gothic; color: #aaaaaa; min-height: 24px; }
.entry {padding-bottom: 10px;}
.entry_text {padding: 10px;}
.clear {display: none;}
.currentlocation, .currentmusic {display: none;}
.currentmood {margin: 0 10px 1px 10px; font: 8pt arial; text-align: right;}
.currents div strong {font: bold 8pt calibri; text-transform: uppercase; letter-spacing: 2px; padding: 0 3px 0 10px;}
.currents div img {padding: 0 5px 0 5px;}
.comments {color: #ffffff; margin: 10px;}
.comments a {border-radius: 7px; padding: 0 10px 0 10px; background: #ffbab5; color: #ffffff; font: bold 12pt century gothic; border: 1px solid transparent; }
.comments a[href*="mode=reply"] {background: #ededed; color: #aaaaaa;}
.comments a:hover {color: #606060; background: #ffffff; border: 1px solid #dddddd; }
/* -------------------------------------- COMMENTS -------------------------------------- */
.box {border-top: 1px solid #ededed; }
.userpiccomment {background: #ededed !important; border: 4px solid #ededed; float: left; text-align: center; color: #ededed; margin: 5px; -moz-border-radius: 4px; border-radius: 4px; }
.commentbox, .commentboxpartial {border: 1px solid #ededed; margin: 5px;}
/* -------------------------------------- TAGS / ARCHIVE -------------------------------------- */
.year {text-align: center;}
.year li {display: inline; }
.yeartable td{background: #ededed; color: #ffffff; font-weight: bold; text-align: center;}
.yeardate div {text-align: left; color: #606060; }
h2 {font: 18pt century gothic; padding: 0 0 0 15px;}
.ljtaglist {padding: 0 15px 0 15px; margin: 0 0 10px 0 ;}
.ljtaglist li {border-bottom: 1px solid #ededed; list-style: none;}
/* -------------------------------------- FOOTER -------------------------------------- */
.clearfoot {display: none; }
#footer { width: 680px; border-right: 4px solid #ededed; border-top: 1px solid #ededed; padding: 5px;}
.navfooter {padding: 0; margin: 0; text-align: center; }
.navfooter li {list-style: none; display: inline; margin: 0 5px 0 5px;}
#lj_controlstrip_new {display: block; }
/* ---------- Add any new code under this line. ---------- */
;){kind=link}
← 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 250px wide and 400px high.
Replace the banner in the layout with your own.
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#ffbab5#f09f6a#ededed#e3e3e3#dddddd#aaaaaa#61a4f3#606060
How do I replace layout colours?
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
How do I replace layout images?
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
