Layout 052 : Claire
Click for a Live Preview.
( Layout ) #052 : Claire
Claire: A minimalist's layout.
( 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 --- 052 Claire ---
Malionette @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ---------- BODY ---------- */
body { font: 12px lucida grande, arial; color: #505050; margin: 0; padding: 0; }
a {color: #75d0e2; text-decoration: none;}
a:active {color: #bce9ef; }
a:visited {color: #35bad9; }
a:hover {color: #026d99; }
input, select, textarea {border: 1px dotted #aaaaaa; background: #ffffff; color: #606060; font: 9px arial; padding: 1px 5px 1px 5px; }
input:hover, select:hover, textarea:hover {border-color: #dddddd; }
blockquote { border-top: 1px dotted #dddddd; border-bottom: 1px dotted #dddddd; margin-top: 0px; margin-bottom: 0px; padding: 10px 0 10px 0; }
#content {width: 960px; margin: 0 auto; border-top: 12px solid #fafafa; padding: 20px 0 0 0;}
/* ---------- HEADER ---------- */
#header {border-bottom: 1px dotted #aaaaaa; padding-bottom: 40px; margin: 0 0 30px 0;}
.navheader { float: right; margin-top: 15px; }
.navheader li {display: inline; font: 14pt arial; text-transform: lowercase; letter-spacing: -1px; padding: 0 5px 0 5px; }
.navheader a {color: #888888; }
.navheader a:hover {color: #bce9ef; }
.navheader li.view {color: #75d0e2;}
.title {font: 22pt cambria, georgia, times new roman; letter-spacing: -1px; padding: 0px 7px 0 0; }
.subtitle { float: left; font: bold 9pt cambria, georgia, times new roman; padding: 0px 0 20px 0px; text-transform: uppercase; color: #aaaaaa; }
/* ---------- SIDEBAR ---------- */
#sidebar {clear: both; width: 200px; float: right; padding: 0 0 10px 0; font: 9px arial; }
.sbarbody, .sbarbody2 {border-bottom: 1px dotted #aaaaaa; padding: 10px 0 10px 0;}
.sbartitle {display: none;}
.defaultuserpic {text-align: center; background: #fafafa; padding: 10px;}
.defaultuserpic img {border: 1px dotted #dddddd; padding: 5px; background: #ffffff;}
.defaultuserpic img:hover {border-color: #35bad9; opacity: .7; }
.sbarlist {padding: 0; margin: 0;}
.sbarlist li {list-style: none; margin: 0 0 1px 0;}
.sbarlist li a {display: block; background: #fafafa; padding: 2px 5px 2px 5px;}
li.tagcloud a { display: inline ; background: transparent; }
#sidebar_summary li a {display: inline; background: transparent; padding: 0;}
#sidebar_summary li {padding: 3px 0 3px 0; border-bottom: 1px dotted #dddddd;}
.calendar {width: 100%;}
.calendar td {background: #fafafa; text-align: center; }
/* ---------- ENTRY ---------- */
#maincontent {width: 740px; float: left; }
.subcontent {clear: both;}
.entry {border-bottom: 1px dotted #aaaaaa; padding: 0 130px 10px 0; margin: 0 0 10px 0; }
.date {font: 9px arial; color: #aaaaaa;}
.entry_text {line-height: 200%; padding: 10px 0 0 0; min-height: 40px; }
.subject {font: 22pt cambria, georgia, times new roman; letter-spacing: -1px;}
.subject img {opacity: 0.5; float: right; padding: 10px;}
.userpic, .userpicfriends {float: right; padding: 10px; background: #fafafa !important; color: #fafafa; text-align: center; font: 9px arial; }
.userpicfriends img {margin: 0 0 10px 0; border: 1px dotted #dddddd; padding: 5px; background: #ffffff;}
.userpicfriends:first-child a font { color: #35bad9;}
.userpicfriends:first-child a font:hover { color: #026d99;}
.ljtags {font: 9px arial; margin: 10px 0 0 0; border-left: 10px solid #b4e3ec; padding: 0 0 0 10px;}
.currents {font: 9px arial; }
.currents > div {margin: 1px 0 0 0; }
.currents strong {font-weight: lighter; border-left: 10px solid #dddddd; padding: 0 0 0 10px; }
.currents img {float: right;}
.comments { padding: 20px 0 10px 0; color: #ffffff; }
.comments a {background: #75d0e2; padding: 5px; color: #ffffff; }
.comments a:hover {background: #35bad9; }
.clear, .clearfoot {display: none;}
.entry dt {margin: 1px 0 1px 0; padding: 0 0 0 10px; font: 16pt cambria, georgia, times new roman; letter-spacing: -1px; }
.skiplinks {border-bottom: 1px dotted #dddddd; padding: 0 0 10px 0; margin: 0 0 10px 0;}
/* ---------- COMMENTS PAGE ---------- */
.userpiccomment {float: left; padding: 0 10px 0 0; background: #ffffff; opacity: .7; width: 50px; height: 50px; }
.commentbox {clear: both; border-bottom: 1px dotted #aaaaaa; padding: 10px 0 0px 0;}
.commentboxpartial {padding: 5px; border-bottom: 1px dotted #aaaaaa; }
.commentreply { padding: 10px 0 0 0; }
.datesubjectcomment {}
.commentbox > div[style*="margin-top"] {text-align: left !important; color: #ffffff; margin-top: 10px !important; }
.commentbox > div[style*="margin-top"] > a {background: #75d0e2; padding: 3px; color: #ffffff; }
.commentbox > div > div > a > img {width: 14px; height: 14px;}
.commentbox > div > div > a > img:hover {opacity: .7;}
.commentbox > div > div[style*="text-align"] {text-align: left !important; padding: 10px 0 5px 0 !important; color: #505050; }
.box {padding: 10px 0 10px 0;}
#qrform table {border: 1px dotted #aaaaaa !important; margin: 10px 0 10px 0;}
#qrform textarea {padding: 5px 0 5px 0; }
/* ---------- FOOTER ---------- */
#footer {clear: both; padding: 30px 0 30px 0;}
.navfooter {padding: 0 200px 0 0; margin: 0; }
.navfooter li {display: inline; }
.navfooter li.viewing {display: none;}
.navfooter li a {margin: 0 10px 0 0; padding: 5px; background: #75d0e2; color: #ffffff; }
.navfooter li a:hover {background: #35bad9; }
/* ---------- ARCHIVE & TAGS ---------- */
.year {text-align: center;}
.year li {display: inline; padding: 0 0 0 10px; font: 22pt cambria, georgia, times new roman; letter-spacing: -1px;}
.yeartable {width: 80%;}
.yeartable td {background: #fafafa; text-align: center; padding: 3px; }
td.yearmonth {font: bold 10pt arial; text-align: left; background: #ffffff; font: 22pt cambria, georgia, times new roman; letter-spacing: -1px; }
td.yearmonth a {font: 12px lucida grande, arial; letter-spacing: 0px; float: right;}
td.yearday {border: 1px dotted #aaaaaa; background: #ffffff; font: 9px arial; }
.ljtaglist {padding: 0; margin: 0;}
.ljtaglist li {list-style: none; padding: 3px 0 3px 10px;}
.ljtaglist li:hover {background: #fafafa; }
body > div[style*="border"] {background: #ffffff !important; border-color: #ffffff !important; }
div.ContextualPopup div.Inner {border: 1px dotted #aaaaaa; color: #505050; padding: 0; margin: 0;}
div.ContextualPopup div.Userpic img { border: 10px solid #75d0e2; margin: -5px 0 0 -290px; }
div.ContextualPopup div.Inner div.Content {padding: 5px ; margin: 0;}
div.ContextualPopup div.Inner div.Content a {color: #75d0e2 !important; text-decoration: none !important; }
div.ContextualPopup div.Inner div.Content a:hover {color: #026d99 !important; }
/* ---------- ADD MODIFICATIONS HERE ---------- */
← 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 960px wide.
.headerimage {background: url(HTTP://URLHERE.PNG); height: ###px; width: 960px; margin: 0 auto;}
;){kind=link}
- Replace HTTP://URLHERE.PNG with your banner url
Replace ### with your banner height (pixels) - Add the code to the bottom of the Custom Stylesheet box
Add a Banner | Replace Colours
( Optional ) Replace Colours
#ffffff#fafafa#dddddd#bce9ef#b4e3ec#aaaaaa#888888#75d0e2#505050#35bad9#026d99
How do I replace layout colours?
Add a Banner | Replace Colours
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
