Layout 015 : Fruitstyle (3) Kanon | 016 : Cream Teal

[malionette]

Click for a Live Preview.


( Layout ) #015 : Fruitstyle (3) Kanon
Based on this icon by chopstickicons. The banner features Kanon from Air Gear and the font used is called "Renaissance".

( Install ) Step 1 - System

Select Theme

1. Select any S2 Flexible Squares layout.

Page Setup

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

← Previous Step | 1 | 2 | 3 | 4 | Next Step →


( Install ) Step 2 - Display

Customize Display

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

← Previous Step | 1 | 2 | 3 | 4 | Next Step →

( Install ) Step 3 - Stylesheet

Custom CSS

1. Use layout's stylesheets: No. IMPORTANT!!
   
   
2. Custom Stylesheet: /* S2 FLEXIBLE SQUARES --- Fruitstyle 3 Feat. Kanon ---
   Made by Wingweaver22 @ LJ (Malice!)
   More layouts at (http://community.livejournal.com/fruitstyle/) ...?!! */
   
   #header {background: url(http://i38.tinypic.com/1ylsew.jpg) no-repeat; background-position: top right; height: 320px; width: 650px;}
   
   body {background-color: #cac7c4;margin: 0;color: #77a8b7;font-family: tahoma;font-size: 9px;}a, a:link, a:visited {font: tahoma;font-size: 9px;color: #f26774;text-decoration: none;font-weight: normal;}a:hover {color: #cac7c4;cursor: help;}p, td {font: tahoma;font-size: 9px;color: #77a8b7;}blockquote {padding: 10px;background-color: #fbebe8;}input, textarea, code, kbd, pre, tt, select {background-color: #fbebe8;border: none;color: #77a8b7;font-family: tahoma;font-size: 9px;}#content {width: 650px;margin: 0 auto; padding: 0;background-color: #f8f5f4;border-left: 35px solid #79c0c2; border-right: 35px solid #79c0c2;}#header {font-family: georgia; font-size: 9px;letter-spacing: 2px;background-color: #79c0c2;padding: 5px 0 0 0; margin: 0;text-align: center; text-transform: lowercase;}div#header a, div#header a:link, div#header a:visited {color: #f26774;padding: 0 3px 0 3px;}.view {color: #f4e8e5;background-color: #f10437;padding: 0 3px 0 3px;}div#header a:hover {color: #f4e8e5;background-color: #f10437;}ul.navheader {margin: 295px 0 0 0; padding: 7px; padding-bottom: 11px;background-color: #f8f5f4;}ul.navheader li {display: inline;}.title, .subtitle { display: none; }#sidebar {background-color: transparent; color: #ffffff;width: 150px; height: 300px;text-align: left; float: left;margin-top: -325px; padding: 0px;}#sidebar a, #sidebar a:link, #sidebar a:visited{color: #ffffff;}div#sidebar a:hover {background-color: #f10437;text-decoration: none;}.defaultuserpic {display: none;}.sbarheader { padding: 0; margin: 0; }.sbarbody { padding: 0px; margin: 0px;}.sbartitle { display: none; }.sbarbody2 { border-bottom: 1px solid #cac4c7;}table.calendar, .sbarcalendar, .sbarcalendarposts {display: none;}#sidebar_tags {margin-left: -40px;position: absolute;width: 190px;} .sbarcontent{display:block}li.sbaritem {list-style: none;display: block;}li.sbaritem a{}#maincontent {font-size: 9px; font-family: tahoma; font-size: 9px;background-color: #f8f5f4; color: #77a8b7;text-align: justify;margin: 0 auto; padding: 0; width: 650px;}.subcontent {}.entry_text img{ padding: 5px;border: 1px solid #cac4c7;margin: 2px;}.entry_text {min-height: 85px;}.entry {padding: 10px;background-color: #f8f5f4;color: #77a8b7;font-family: tahoma;font-size: 9px;text-align: justify;}.entry ul li{ padding-left: 5px;margin-left: 15px; }.entry ol li { padding-left: 5px;margin-left: 15px; }.userpic {position: relative;float: right;margin: 10px 20px 10px 10px; background-color: #f8f5f4;}.userpic img{border: 1px solid #cac7c4;padding: 5px;}.userpicfriends img{border: 1px solid #cac7c4;padding: 5px;}.userpicfriends {position: relative;float: right;margin: 10px 20px 10px 10px; background-color: #f8f5f4 !important;color: #f8f5f4 !important;text-align: center;}.userpicfriends a font {font: tahoma;font-size: 9px;color: #f26774;text-decoration: none;font-weight: normal;}.userpicfriends a:hover font {color: #cac7c4;cursor: help;}.userpicfriends a{font-family: tahoma;font-size: 9px;text-align: right;}.datesubject {background-color: #f8f5f4;border-top: 1px solid #cac7c4;padding: 0px 0 5px 0;margin-left: 10px; margin-right: 10px; }.date {color: #f4e8e5;background-color: #f10437;font-family: georgia;letter-spacing: 1px;text-align: center;margin-right: 10px; padding: 0 3px 0 3px; float: left;}.subject {color: #f26774;letter-spacing: 1px;font-family: georgia;text-transform: lowercase;}.subject img{margin-right: 6px;padding: 0px;}.subject a, .subject a:link, .subject a:visited {color: #f26774;}.subject a:hover {color: #cac7c4;}.ljtags {border-left: 10px solid #f10437;padding-left: 5px;margin-top: 10px;letter-spacing: 2px;}.ljtags a{letter-spacing: 0px;}.currents {display: block;height: 12px;font-family: tahoma;font-size: 9px;}.currentmood {height: 12px;font-family: tahoma;font-size: 9px;}.currentmood img{float: right;}.currentmood strong img{float: none;}.currentmusic {height: 12px;margin-top: -1px;font-family: tahoma;font-size: 9px;}.currents strong, .currentmood strong, .currentmusic strong, .ljtags strong {font-weight: lighter;letter-spacing: 2px;border-left: 10px solid #f10437;padding-left: 5px;margin: 0;}.comments {text-align: right;background-color: #f8f5f4;padding: 0;font-family: georgia;margin-top: 30px;text-transform: lowercase;letter-spacing: 1px;border-top: 1px solid #cac7c4;word-spacing: 5px;color: #f8f5f4 !important;}div.comments a, div.comments a:link, div.comments a:visited{color: #f4e8e5;padding: 0px 6px 0px 6px;background-color: #f10437;}div.comments a:hover {background-color: transparent;color: #cac7c4;text-decoration: none;}#footer {text-align: center;padding-bottom: 10px; font-family: tahoma;font-size: 9px;font-weight: normal;letter-spacing: 1px;background-color: #f8f5f4;color: #77a8c7;}#footer a, #footer a:link, #footer a:visited { color: #f26774;}#footer a:hover {color: #cac7c4;text-decoration: none;}ul.navfooter{padding: 0px;margin: 0px;}ul.navfooter li {display: inline;margin: 0 5px 0 5px;}.clearfoot {clear: none;display: none;} #maincontent h2 { font-family: georgia; font-size: 9px;font-weight: normal;text-align: center;letter-spacing: 3px;padding-bottom: 2px;margin: 10px;border-bottom: 1px solid #cac4c7;}ul.ljtaglist {list-style: none;letter-spacing: 2px;padding-bottom: 10px;}ul.ljtaglist a{font-family: georgia;color: #f4e8e5;background-color: #f10437;padding: 0 3px 0 3px;}ul.ljtaglist a:hover{color: #f26774;background-color: transparent;}ul.ljtaglist li{ margin: 3px; }ul.ljtaglist li:hover{background-color: #fbebe8;}ul.year {text-transform: lowercase;padding: 15px 0 15px 0;color: #f26774;padding: 0 3px 0 3px;text-align: center;}ul.year li { display: inline; }ul.year li.active{font-family: georgia;padding: 0 4px 0 4px;display: inline;color: #f4e8e5;background-color: #f10437;margin: 3px;}ul.year li a{color: #f26774;background-color: transparent;font-family: georgia;margin: 3px;padding: 0 4px 0 4px;}ul.year li a:hover{display: inline;color: #f4e8e5;background-color: #f10437;}table.yeartable {width: 650px;padding: 10px !important;}table.yeartable {border-top: 1px solid #cac7c4;padding: 0; margin: 0;}table.yeartable td.yearday {color: #f26774;font-family: georgia;text-transform: lowercase;letter-spacing: 1px;text-align: center;}td.yearmonth {border: none; padding: 0; margin: 0;letter-spacing: 2px;color: #f26774;font-family: georgia;padding: 0 4px 0 4px;}td.yearmonth a{background-color: #f10437;color: #f4e8e5;font-family: georgia;text-transform: lowercase;letter-spacing: 1px;text-align: center;padding: 0 3px 0 3px;}td.yeardate {border: 1px dotted #cac7c4;}.clear {height: 0px;}.separator {margin: 0; padding: 0;height: 10px;}.datesubjectcomment {background-color: #fbebe8;padding: 5px;margin-top: 20px;line-height: 15px; }.datesubjectcomment a{background-color: #f10437; color: #f8f5f4;font-family: georgia; font-weight: lighter;letter-spacing: 1px;padding: 0 5px 0 5px;}.datesubjectcomment a:hover{ color: #cac7c4; background-color: #f8f5f4;}.datesubjectcomment span{ padding: 0 3px 0 3px; font-family: georgia; letter-spacing: 1px;}.userpiccomment {position: relative;top: -30px; left: 0px;padding: 5px; margin: 10px 10px -20px 10px;z-index: 15; float: right;border: 1px solid #cac7c4; background-color: #f8f5f4;}.box {clear: right;}textarea.textbox {width: 95% !important;}.reply {position: relative;margin: 20px 30px 10px 30px;padding: 25px 10px 10px 10px;text-align: left;font-family: tahoma;font-size: 9px;line-height: 125%;}.replytosubject {font-weight: bold;}.commentreply {position: relative;margin: 10px;}.commentbox {padding: 10px;margin: 10px;}label { font-size: 9px; }.commentboxpartial {background-color: #fbebe8;padding: 3px; margin: 10px 10px 10px 20px;font-family: georgia;letter-spacing: 1px;}.commentboxpartial span a{background-color: #f10437; color: #f8f5f4;font-family: georgia; font-weight: lighter;letter-spacing: 1px;padding: 0 5px 0 5px;}.commentboxpartial a:hover{ color: #cac7c4; background-color: #f8f5f4;}.commentinfo {margin-top: 10px;width: 100%;}.skiplinks {text-align: center;color: #cac7c4; }.headerimage {}* html div.subcontent {height: 1%;clear: none;}* html div.box#commentform {position: absolute;background-color: #c2cde0;}::-moz-selection { background: #79c0c2; color: #f8f5f4; }::selection { background: #79c0c2; color: #f8f5f4; }code::-moz-selection { background: #79c0c2; color: #f8f5f4;}code::selection { background: #79c0c2; color: #f8f5f4;}div.ContextualPopup {margin: 10px 0 0 0px;font: normal 9px "tahoma" !important;}div.ContextualPopup img {margin: 0 1px 0 5px !important;}div.ContextualPopup div.Inner {background-color: #f8f5f4 !important;color: #808080 !important;border: 1px solid #cac7c4;padding: 0px;width: 220px;text-align: right;}div.ContextualPopup .Content {padding: 2px 4px 6px 4px;}div.ContextualPopup .Relation {font-weight: normal !important;letter-spacing: 2px;div.ContextualPopup .Content .OnlineStatus {font-weight: normal;}div.ContextualPopup .Userpic {padding: 4px 4px 0 0;}div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: normal;color: #f26774 !important;}#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 500px wide and 300px high.
Replace the image in the CSS.
Add a Banner | Replace Colours | Replace Images


( Optional ) Replace Colours

#ffffff#fbebe8#f8f5f4#f4e8e5#f26774#f10437#cac7c4#808080#79c0c2#77a8b7
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







Click for a Live Preview.


( Layout ) #016 : Cream Teal
Not much.

( Install ) Step 1 - System

Select Theme

1. Select any S2 Smooth Sailing layout.

Page Setup

1. Ad Placement: Vertical
   (Ignore if you have a paid account.)
   
   
2. Sidebar: 2 Column (sidebar on left)

← Previous Step | 1 | 2 | 3 | 4 | Next Step →


( Install ) Step 2 - Display

Customize Display

1. Userinfo Position in Entries: Right
2. Wrap Entry text under userinfo: Yes
3. Userinfo Position in Comments: Right

← Previous Step | 1 | 2 | 3 | 4 | Next Step →

( Install ) Step 3 - Stylesheet

Custom CSS

1. Use layout's stylesheets: No. IMPORTANT!!
   
   
2. Custom Stylesheet: /* S2 SMOOTH SAILING --- Cream Teal ---
   Wingweaver22 @ Fruitstyle.livejournal.com
   Do not remove this note. */
   
   /* remove the line below to show your metadata */
   .entryMetadata { display: none;}
   
   body { font-family: tahoma, sans-serif; font-size: 10px; color: #888888; background-color: #f0e9d9; margin: 0; padding: 0; }a, a:visited { color: #6acdc9; background-color: transparent;text-decoration: none; padding: 0px; margin: 0; border: 0; }a:hover { color: #aaaaaa; cursor: help; }blockquote, textarea {border: 1px solid #dddddd; background-color: #ffffff;margin: 10px 140px 0 0; padding: 5px;}input, select {background-color: #ffffff; color: #888888;font-family: tahoma, sans-serif; font-size: 10px; border: 1px solid #dddddd; margin-top: 5px;}.pageblock{ padding: 0; margin: 0;}.pagefooterblock { display: none; }.pageheaderblock {border-left: 175px solid #6acdc9; padding: 0px; margin: 0;height: 15px; width: 530px; }.header-icon, .header-title, .header-subtitle { display: none;}.header-menu { font-family: times new roman; font-size: 10px; text-transform: uppercase; text-align: center;border-left: 15px solid #b4e6e4; height: 15px; padding: 1px 0 0 0; background-color: #b4e6e4; width: 515px; }.header-menu a, .header-menu a:visited { padding: 0 5px 0 5px; color: #ffffff;}.header-menu a:hover { color: #6acdc9;}.header-menu ul, #footer-menu ul { padding: 0; margin: 0;}.header-menu li, #footer-menu li { display: inline; }.bodyblock { background-color: #6acdc9; width: 705px;padding: 0; margin: 0;}.bodyheaderblock { display: none; } .bodynavblock { }.bodynavblock a, .bodynavblock a:visited {}.body-title { display: none; }.body-midtitle { display: none; }.sidebar {width: 175px; float: left; clear: left;}.sidebox{border: 2px solid #b4e6e4;margin: 0 15px 10px 15px; background-color: #ffffff;}.sideboxTitle { font-family: times new roman; font-size: 10px; text-transform: uppercase; text-align: center;background-color: #b4e6e4; color: #ffffff;} .sideboxContent {padding: 10px;}.sideboxContent .summaryList{ margin: 10px 0 10px 0;}.sidebox #freetext { text-align: left; }.sidebox #latestmonth, .sidebox #profile { text-align: center; }.sidebox #search { text-align: justify;}.latestmonth-inactive, .latestmonth-active { width: 16px;}#tags_sidebox {text-align: justify;}.profile-label {margin-right: 5px;}.entryHolder { background-color: #ffffff; width: 470px; padding: 15px; border-left: 15px solid #b4e6e4; border-bottom: 15px solid #b4e6e4; border-right: 15px solid #b4e6e4;}.entryUserinfo { margin: 0 0 10px 10px; } .entryUserinfo-usericon img { padding: 10px; border-right:0; border-top:0; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd;} .entryText { border: 1px solid #dddddd; padding: 15px; min-height: 110px;}.entryHeader { font-family: times new roman, serif; text-transform: uppercase; padding: 0 0 10px 0;}.entryHeaderSubject { color: #bbbbbb; }.entryHeaderDate{ font-size: 18px; font-weight: bold; letter-spacing: -1px; color: #b4e6e4; }.entryLinkbar {font-family: times new roman, serif; text-transform: uppercase; text-align: center; margin: 0; padding: 0;}.entryLinkbar ul { margin: 0; padding: 15px 0 0 0;}.entryLinkbar li { display: inline; margin: 0; padding: 0 1px 0 5px;}.entryMetadata ul { list-style: none;} .entryMetadata li, .entryMetadata ul {margin: 0; padding: 0;}.entryMetadata { margin: 15px 0 0 0;}#footer-menu {}#footer-menu a, .footer-menu a:visited { color: #ffffff; font-family: serif; text-transform: uppercase; margin-right:5px;}.commentHolder { background-color: #ffffff; padding: 10px; margin: 10px;}.commentUserinfo {font-weight: normal;text-align: center;} .commentUserinfo b{font-weight: lighter !important;}.commentUserinfo-usericon img { padding: 5px; margin: 5px;border: 1px dashed #dddddd;background-color: #f8f8f8;height: 50px; width: 50px;}#qrform table{ width: 500px;border: 1px solid #dddddd !important; background-color: transparent; margin: 0; padding: 0;}#qrform .textbox{ width: 400px !important;font-family: tahoma; font-size: 9px; border: 1px solid #dddddd !important; background-color: transparent !important;} #qrform .textbox:hover {background-color: #dddddd; color: #888888;border: 1px solid #bbbbbb;cursor: text;}.commentHeader { font-family: tahoma; font-size: 9px; font-weight: none;color: #bbbbbb;border-bottom: 1px dashed #dddddd; letter-spacing: 1px;text-transform: lowercase;}.commentHeader a{ color: #888888; }.commentHeaderScreened { background-color: #f8f8f8; padding: 2px 0 2px 5px;border: 1px dashed #dddddd; letter-spacing: 1px;} .commentHeaderSubject { font-weight: normal; font-family: tahoma; font-size: 9px; }.commentLinkbar {border: 0; font-family: tahoma; font-size: 9px; color: #888888;text-transform: lowercase; text-align: left; padding-bottom: 10px; }.commentLinkbar ul { margin: 0; padding: 0; text-align: center;}.commentLinkbar li { padding: 0px 0 0px 5px; margin: 0; display: inline; } .replyform { margin: 10px;border: 0px; background-color: #bbbbbb; color: #888888; }.commentText{ margin: 5px; }#postform{ background-color: #ffffff; }#commenttext { width: 100%;}.yearlinks { text-align: right; }.yearlink{ padding:0 4px 0 4px; }.entryHeader a{}.entryHeader a:hover{}.month { width: 100%; border: 1px solid #f8f8f8;margin: 10px 0 0 0; padding: 10px;}.daysubjects { color: #888888; letter-spacing: 1px; padding: 6px 0 6px 0; }.daytitles { text-align: center; margin: 0; padding: 0;background-color: #f8f8f8; color: #bbbbbb; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; border-bottom: 5px solid #ffffff;}.day-blank { padding: 2px 2px 1px 2px; }.day { padding: 2px 2px 1px 2px; }.day-date { color: #888888; text-align: right; padding: 0px 3px 0 0;border-right: 1px dashed #dddddd; border-top: 1px dashed #dddddd;} .day-count { width: 50%; float: right; }.tagstable td { padding: 5px 0px 5px 0px; }.tagstable { text-transform: lowercase; letter-spacing: 1px; width: 400px; }::-moz-selection { background: #bbbbbb; color: #ffffff; }::selection { background: #bbbbbb; color: #ffffff; }code::-moz-selection { background: #bbbbbb; color: #ffffff;}code::selection { background: #bbbbbb; color: #ffffff;}/*------ Look of contextual Popup ------*//* general positioning */div.ContextualPopup {margin: 10px 0 0 0px;font: normal 10px "tahoma" !important;}/* userpic */div.ContextualPopup img {border-left: 1px dashed #dddddd;border-right: 1px dashed #dddddd;padding: 0 5px 0 5px;margin: 0 1px 0 5px !important;}/* defines general look, font color/size/background color*/div.ContextualPopup div.Inner {background-color: #f8f8f8 !important;color: #888888 !important;border: 1px dashed #dddddd;padding: 0px;width: 220px;text-align: right;}/* defines left side of popup without the user icon*/div.ContextualPopup .Content {padding: 2px 4px 6px 4px;}/* defines the text that shows the relation to the user (XYZ is your mutual friend) */div.ContextualPopup .Relation {font-weight: normal !important;letter-spacing: 2px;}/* look of words LJ Talk */div.ContextualPopup .Content .OnlineStatus {font-weight: normal;}/* element that contains the user icon */div.ContextualPopup .Userpic {padding: 4px 4px 0 0;}/* defines the look of the links */div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: normal;color: #0096c7 !important;}div.ContextualPopup div.Inner a:hover {color: #b4e6e4 !important;}/* so that IE users will see a new image */* html span.ljuser{background-image: url(http://img291.imageshack.us/img291/4575/useryb4.png) !important;background-repeat: no-repeat;background-position: left middle;padding: 10px 8px 0px 0px !important;}* html span.ljuser img{ visibility: hidden; }.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {width: 0;height: 0;background-repeat: no-repeat;background-image: url(http://img291.imageshack.us/img291/4575/useryb4.png) !important;padding: 10px 8px 0 4px !important;}.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {width:0;height: 0;background-repeat: no-repeat;background-image: url(http://img401.imageshack.us/img401/7833/communityei5.png) !important;padding: 11px 8px 0 4px !important;}img[src="http://stat.livejournal.com/img/icon_protected.gif"]{width: 0;height: 0;padding: 0 0 10px 10px;background: url(http://img72.imageshack.us/img72/4144/lockedib8.png);}img[src="http://stat.livejournal.com/img/icon_private.gif"]{width: 0;height: 0;padding: 0 0 10px 10px;background: url(http://img329.imageshack.us/img329/4985/privatevy7.png);}.pageheaderblock, .bodyblock { margin: auto;}
   

← 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 ) Replace Colours

#ffffff#f8f8f8#f0e9d9#dddddd#bbbbbb#b4e6e4#aaaaaa#888888#6acdc9
How do I replace layout colours?

Replace Colours | Replace Images

( Optional ) Replace Images

Get all the images at Box.net

How do I replace layout images?

Replace Colours | Replace Images

Fruitstyle: Layouts and Winamp Skin Designs by Malionette