Layout 026 : Go Green: fruitstyle

malionette in fruitstyle

Layout 026 : Go Green

Mar 17, 2009 21:40

Click for a Live Preview.

( Layout ) #026 : Go Green
Made for Last Layout Standing.

( 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

Sidebar

Add to the Blurb:

Reduce

Fusce eget odio. Curabitur eu metus. Morbi faucibus. Nulla volutpat congue magna. Donec vel urna. Mauris a nunc at ipsum laoreet iaculis. Curabitur quis pede ut elit lobortis semper

Reuse

Fusce eget odio. Curabitur eu metus. Morbi faucibus. Nulla volutpat congue magna. Donec vel urna. Mauris a nunc at ipsum laoreet iaculis. Curabitur quis pede ut elit lobortis semper

Recycle

Fusce eget odio. Curabitur eu metus. Morbi faucibus. Nulla volutpat congue magna. Donec vel urna. Mauris a nunc at ipsum laoreet iaculis. Curabitur quis pede ut elit lobortis semper

← 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 --- Go Green ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */

html {margin: 0 !important; padding: 0 !important; }
body {font: 7pt arial; color: #707070; background: #f1ebe0 url(http://img16.imageshack.us/img16/8484/cardboardbg.png); margin: 0; padding-top: 0 !important;}

a, a:link, a:visited{ color: #c9ff92; text-decoration: none; font-weight: normal;}
a:hover, #lj_controlstrip a:hover{color: #e0d5c3; cursor: help; text-decoration: none; }

select, input, .textbox, textarea, #lj_controlstrip select {background: #c9ff92; color: #707070; font: 10px arial; text-transforM: uppercase; border: 1px solid #e5e5e5; }
small {font: 9px arial;}

blockquote {border-left: 1px solid #e5e5e5; padding: 10px;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: L A Y O U T */

#content { width: 750px; background-color: #e5e5e5; margin: 0 auto; padding: 0 1px 0 1px; border-left: 15px solid #ffffff; border-right: 15px solid #ffffff; }

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: H E A D E R */

#header { padding: 20px 0 30px 0; margin: 0; background-color: #ffffff; border-bottom: 1px solid #e5e5e5; border-top: 20px solid #c9ff92; }
#header li{list-style: none; display: inline; margin: 0 2px 0 2px; }

.navheader {font: 36px arial; text-align: center; letter-spacing: -3px; text-transform: lowercase; }
.navheader a, .navheader a:visited {color: #aaaaaa; }
.navheader a:hover { color: #e0d5c3 !important; border-bottom: 1px solid #e5e5e5; }
.navheader a:active {color: #c9ff92; }

.view {color: #681609; color: #c9ff92; font-weight: bold; border-bottom: 1px solid #e5e5e5; }

.title, .subtitle, .defaultuserpic{ display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: S I D E B A R */

#sidebar { width: 750px; height: 170px; background-color: #ffffff; padding: 15px 0 0 0;}

.three {font: 10px arial; padding: 0 0 20px 0; border-bottom: 5px solid #c9ff92;}
.reuse, .reduce, .recycle {padding: 0 10px 20px 10px; vertical-align: top; color: #999999;
background: url(http://img16.imageshack.us/img16/3379/recyclebg.png) no-repeat center; width: 240px; }

.reuse, .reduce {border-right: 1px dotted #e5e5e5; }

.reh2 {color: #707070; font: 26px times new roman; letter-spacing: -2px; text-transform: lowercase; border-bottom: 1px solid #e5e5e5; text-align: center;}

.sbartitle, .tagcloud, .calendar, .sbarlist, .sbaritem {display: none !important;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: E N T R Y */

#maincontent {border-top: 1px solid #e5e5e5; padding: 30px 20px 20px 20px; background-color: #ffffff;}

.subcontent {background: url(http://img16.imageshack.us/img16/5273/slivleafbg.png) no-repeat 560px 150px;}

.entry { width: 520px; background: #f5f5f5; padding: 24px 10px 10px 10px; margin: 0 0 20px 0; border-right: 20px solid #ffffff; }
.entry_text { border: 1px solid #e5e5e5; padding: 40px 10px 10px 10px; background-color: #ffffff; font-size: 8pt; min-height: 72px;}

.datesubject {position: absolute; width: 710px; }
.date { margin: 10px 0 0 10px; background-color: #ffffff; width: 160px; text-transform: uppercase; text-align: center;
border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; padding: 2px 0 0 0; }
.subject {color: #707070; font: 26px times new roman; letter-spacing: -2px; text-transform: lowercase; border-bottom: 1px solid #e5e5e5; width: 500px; margin: 0 0 0 25px; }

.userpic, .userpicfriends {position: absolute; margin: 0 0 0 560px; padding: 1px; background-color: #ffffff !important; border: 13px solid #f5f5f5; text-align: center;
text-transform: uppercase;}
.userpic img, .userpicfriends img {background-color: #ffffff; padding: 1px; border: 10px solid #ffffff;}
.userpicfriends img {background-color: #e5e5e5; padding: 1px; border: 10px solid #ffffff;}
.userpicfriends a font{color: #bbbbbb !important;}
.userpicfriends br{ margin: 3px;}
.userpicfriends {color: transparent !important; padding: 0 0 5px 0;}

.entry ul li {padding:0; margin: 0;}
.entry ol li {padding:0; margin: 0;}

.clear, .separator {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: M E T A & C O M M E N T */

.currents, .ljtags, .comments {text-transform: uppercase; }
.ljtags {margin-top: 10px; font: 7pt arial;}
.currents {display: none;}
.currentmood strong, .currentmusic strong, .currentlocation strong, .ljtags{font-weight: normal; color: #999999;}

.comments { font: 7pt arial; color: #f5f5f5; margin: 10px 0px 0 0; letter-spacing: 1px;}
.comments a {background-color: #ffffff; padding: 1px 10px 0 10px; border: 1px solid #e5e5e5; color: #d6cab8;}
.comments a:hover {color: #999999; background-color: #ffffff;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: F O O T E R */

#footer { padding: 10px 0 10px 0; margin: 0; background-color: #ffffff; border-top: 1px solid #e5e5e5; border-bottom: 20px solid #c9ff92;}

.navfooter {font: 16px arial; text-align: center; text-transform: lowercase; }
.navfooter a, .navheader a:visited {color: #aaaaaa;}
.navfooter a:hover { border-bottom: 1px solid #e5e5e5;}
.navfooter a:active {color: #c9ff92; }

.navfooter li{ display: inline; margin: 0 5px 0 5px;}
.clearfoot {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: R E P L Y & C O M M E N T */

.skiplinks {text-transform: uppercase; color: #e5e5e5; padding: 2px 10px 0 10px; width: 518px; letter-spacing: 1px;
border-top: 1px solid #f5f5f5; border-left: 1px solid #f5f5f5; border-right: 1px solid #f5f5f5;}
.skiplinks a, .skiplinks a:visited {color: #aaaaaa;}
.skiplinks a:hover { border-bottom: 1px solid #e5e5e5; color: #c9ff92; }
.skiplinks a:active {color: #c9ff92; }

.box { background: #f5f5f5; width: 520px; padding: 0 10px 10px 10px;}
.box center { margin: 10px 0 10px 0;}
.box table {border: 1px solid #e5e5e5; background: #ffffff; width: 520px; text-transform: uppercase; margin: 10px 0 10px 0;}
.box table td{border: 1px solid #e5e5e5; }

.box center b {text-align: center; text-transform: uppercase;}

.box .ljuser img {width: 12px; height: 12px; }

.commentbox {border: 1px solid #e5e5e5; background: #ffffff; margin: 0 0 10px 0;}
.userpiccomment {width: 50px; height: 50px; margin: 0px 10px 10px -91px; padding: 5px; border: 5px solid #f5f5f5; background: #fafafa; position: absolute;}
.commentbox div {margin-left: 90px; border-left: 1px solid #e5e5e5; padding: 10px; font: 9px arial !important;}
.commentbox div div {border: 0; font: 9px arial; text-transform: uppercase; margin: -25px -10px 0 0; text-align: right !important; float: right;}
.commentbox div div img { height: 13px; width: 13px; }

.commentbox div + div + div a{text-transform: uppercase;}

.commentreply { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin: 0 0 -3px 0;}

.commentboxpartial {background: #552213; margin: 0 0 10px 0; background: #ffffff; padding: 5px; border: 1px solid #e5e5e5;}
.commentboxpartial a {text-transform: uppercase;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: A R C H I V E */

.year {font: 24px arial; text-align: center; letter-spacing: -2px; text-transform: lowercase; margin: 0 0 30px 0;; padding: 0; }
.year a, .navheader a:visited {color: #aaaaaa; }
.year a:hover { color: #e0d5c3 !important; border-bottom: 1px solid #e5e5e5; }
.year a:active {color: #c9ff92; }

.year .active {color: #681609; color: #c9ff92; font-weight: bold; border-bottom: 1px solid #e5e5e5; }
.year li {display: inline;}

.yeartable {width: 700px; border: 1px solid #e5e5e5; padding: 10px; background: #c9ff92;}

.yearmonth {font: 26px times new roman; text-transform: lowercase; letter-spacing: -2px; color: #707070; background: #ffffff; border: 1px solid #e5e5e5; text-align: center;}
.yearday {text-transform: uppercase; letter-spacing: 2px; background: #c9ff92; text-align: center;}
.yeardate { background: #ffffff;border: 1px solid #e5e5e5; text-align: right; height: 36px;}
.yeardate div:first-child {border-bottom: 1px solid #e5e5e5;}

.yeardate a{ font: 18px times new roman; color: #707070; display: block; text-align: right;}
.yeardate a:hover {color: #ffffff; background: #c9ff92;}

.lj-view-month #maincontent form center{color: #ffffff;}
.lj-view-month .subcontent{ background: none;}
.lj-view-month .entry{width: 690px; }
.lj-view-month dl{ background: #ffffff; padding: 10px; margin: 0 15px 15px 15px; border: 1px solid #e5e5e5;}
.lj-view-month dt{ font: 26px times new roman; border-bottom: 1px solid #e5e5e5;}
.lj-view-month dd { margin: 0 0 10px 0;}
.lj-view-month dd a{font: 26px times new roman; text-transform: lowercase; letter-spacing: -2px; color: #707070; border-bottom: 1px solid #c9ff92;}
.lj-view-month dd a:hover {color: #e0d5c3; border-color: #e5e5e5;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: T A G */

.lj-view-tags .ljtaglist h2{ display: none;}
.ljtaglist {border-left: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; padding: 10px;}
.lj-view-tags .ljtaglist{padding: 0; margin: 0;}

.lj-view-tags .ljtaglist li { display: inline-table; width: 156px; text-transform: uppercase; border-bottom: 1px solid #e5e5e5; padding: 10px; border-right: 1px solid #e5e5e5;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: O T H E R */

* html div.subcontent {height: 1%; clear: none; }
* html div.box#commentform {position: absolute; border-width: 1px; border-style: solid; border-color: #999999; background-color: #c2cde0;}

::-moz-selection { background: #d6cab8; color: #ffffff; }
::selection { background: #d6cab8; color: #ffffff; }
code::-moz-selection { background: #d6cab8; color: #ffffff; }
code::selection { background: #d6cab8; color: #ffffff; }

div.ContextualPopup { font: 7pt arial !important; }

div.ContextualPopup div.Inner { background-color: transparent !important; border: 0; text-align: right;}

div.ContextualPopup .Content { padding: 5px; color: #707070 !important; width: 120px; border: 1px solid #e5e5e5; background-color: #ffffff;}
div.ContextualPopup .Content .OnlineStatus {font-weight: normal;}

div.ContextualPopup .Userpic { padding: 10px; background-color: #f5f5f5; margin: 0 -25px 0 0;}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; color: #c9ff92 !important;}
div.ContextualPopup div.Inner a:hover { color: #999999 !important; cursor: help; }

#lj_controlstrip {display: none }

← 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 782px wide.
.headerimage {background: url(HTTP://URLHERE.PNG) no-repeat bottom center; height: ###px;}

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 | Replace Images

( Optional ) Replace Colours

#ffffff#f5f5f5#e5e5e5#e0d5c3#d6cab8#c9ff92#bbbbbb#aaaaaa#999999#707070
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

exclusive, layouts