Layout 014 : Stylin' BF

[malionette]

Click for a Live Preview.


( Layout ) #014 : Stylin' BF
This was named after the manhwa The Kidnapping of Minja Jo's BF.

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

← 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 --- Stylin' BF ---
   Wingweaver22 @ Fruitstyle.livejournal.com
   Do not remove this note. */
   
   .entry_text img { border: 3px solid #ffbb64; }
   
   body {
   background-color: #f3f9f9; color: #aaaaaa;
   font-family: arial, sans-serif; font-size: 10px;
   margin: 0; padding: 0;
   background-image: url();
   background-attachment: fixed;
   }
   
   b { font-family: tahoma;}
   
   a, a:link, a:visited {
   color: #ffbb64;
   text-decoration: none;
   }
   
   a:hover {
   color: #888888;
   cursor: help;
   }
   
   blockquote{
   background-color: #fafafa; color: #bbbbbb;
   font-size: 9px;
   margin: 0; padding: 5px;
   }
   
   blockquote:hover { background-color: #ffffff; cursor: text; }
   
   input, select {
   background-color: #fafafa; color: #bbbbbb;
   font-family: tahoma; font-size: 9px;
   border: 1px solid #dddddd;
   margin-top: 5px;
   }
   
   input:hover, select:hover {
   background-color: #ffffff; color: #bbbbbb;
   border: 1px solid #dddddd;
   cursor: help;
   }
   
   textarea {
   width: 200px; padding: 5px;
   border: 1px solid #dddddd;
   background-color: #fafafa; color: #bbbbbb;
   font-size: 9px; font-family: tahoma;
   }
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: L A Y O U T */
   
   #content {
   padding: 0px; margin: auto; margin-top: 50px;
   width: 900px;
   }
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: H E A D E R */
   
   #header {display: none;}
   
   ul.navheader li a{
   padding: 0px;
   }
   
   li.view{
   background-color: #ffbb64; color: #ffffff;
   padding: 0px;
   }
   
   ul.navheader{ padding: 0px; margin: 0px;}
   
   ul.navheader li {
   display: inline;
   }
   
   .title, .subtitle, .defaultuserpic{ display: none;}
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: S I D E B A R */
   
   #sidebar {
   text-align: left; text-transform: lowercase;
   padding: 0; margin: 0;
   width: 170px;
   float: right;
   }
   
   #sidebar a {color: #aab8b8;}
   #sidebar a:hover {color: #888888;}
   
   .sbartitle, .sbarheader {
   letter-spacing: 1px;
   font-size: 16px;
   padding: 5px 0 5px 0;
   }
   
   .sbarbody { margin: 0; padding: 0; }
   
   .sbarbody2 { margin: 0; padding: 0; }
   
   #sidebar_summary li.sbaritem { margin: 0; padding: 0;}
   
   table.calendar { margin-left: 0;}
   
   .sbarcalendar { text-align: center; }
   
   .sbarcalendarposts { text-align: center; }
   
   ul.sbarlist {
   padding: 0; margin: 0;
   list-style: none;
   }
   
   li.sbaritem { list-style: decimal-leading-zero; margin-left: 25px;}
   
   .tagcloud {display: none;}
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: E N T R Y */
   
   #maincontent {
   margin: 0; padding: 30px 30px 24px 30px;
   width: 650px;
   border: 6px solid #ffffff;
   background-color: #e9f4f4;
   }
   
   .subcontent {
   background-color: #ffbb64;
   border-bottom: 6px solid #e9f4f4;
   }
   
   .date {
   font-size: 9px; font-family: tahoma, sans-serif;
   text-transform: lowercase;
   padding: 0 0 0 10px; margin: 0;
   color: #dddddd;
   }
   
   .subject {
   font-size: 16px;
   padding: 0 0 0 10px; margin: 0;
   letter-spacing: 1px;
   background-color: #fafafa;
   }
   
   .datesubject {
   text-align: left; background-color: #ffffff;
   padding: 5px 0 0 0; margin-left: auto;
   width: 520px;
   border-left: 6px solid #e9f4f4;
   }
   
   .entry {
   background-color: #ffffff;
   width: 510px;
   margin-left: auto; padding: 5px;
   min-height: 100px; overflow: visible;
   border-left: 6px solid #e9f4f4;
   
   }
   
   .entry_text {min-height: 100px;}
   
   .entry ul li {padding:0; margin: 0;}
   
   .entry ol li {padding:0; margin: 0;}
   
   .userpic {
   float: left; overflow: hidden;
   background-color: #ffbb64;
   padding: 0px; margin: 0px;
   width: 124px;
   text-align: center;
   }
   
   .userpic img {
   border: 1px solid #ffffff;
   margin: auto; margin-top: 11px; }
   
   .userpicfriends {
   float: left; overflow: hidden;
   background-color: #ffbb64 !important;
   padding: 0px; margin: 0px;
   text-align: center;
   color: #ffbb64;
   width: 124px;
   }
   
   .userpicfriends a font{
   color: #ffffff !important;
   }
   
   .userpicfriends img{
   margin: auto; margin-top: 11px; border: 1px solid #ffffff;
   }
   
   .clear, .separator {display: none;}
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: M E T A & C O M M E N T */
   
   .currents, .ljtags {font-size: 9px;}
   
   .currentmood, .currentmusic, .currentlocation, .ljtags {
   background-color: #fafafa;
   margin: 5px 0 0 0; padding: 1px 0 1px 5px;
   width: 215px;
   }
   
   .currentmood strong, .currentmusic strong, .currentlocation strong{
   font-weight: normal;
   }
   
   .comments {
   font-size: 9px; font-family: tahoma, sans-serif;
   text-align: center; text-transform: lowercase;
   margin: 5px 0 0 0; padding: 0;
   color: #dddddd;
   }
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: F O O T E R */
   
   #footer {
   padding: 5px 0 5px 0; margin-right: 0;
   width: 710px;
   text-align: center; text-transform: lowercase;
   font-size: 16px;
   color: #bbbbbb;
   }
   
   #footer a {color: #aab8b8;}
   #footer a:hover {color: #888888;}
   
   ul.navfooter {
   padding: 0px; margin: 0px;
   }
   
   ul.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-align: right; color: #dddddd;}
   
   .skiplinks a {color: #aab8b8;}
   .skiplinks a:hover {color: #888888;}
   
   .box {
   margin: 0; padding: 0px;
   color: #888888;
   }
   
   .box a {color: #aab8b8;}
   .box a:hover {color: #888888;}
   
   .datesubjectcomment {
   margin: 0; padding: 0;
   text-align: left;
   }
   
   .userpiccomment {
   float: left;
   background-color: #ffffff;
   padding: 0px; margin: 0 6px 0 0;
   border: 11px solid #ffbb64;
   }
   
   .commentreply {
   margin: 0; padding: 0px;
   min-height: 100px;
   }
   
   .commentbox {
   margin: 0; padding: 0px;
   }
   
   label{ font-size: 9px;}
   
   textarea.textbox {
   width: 95% !important;
   }
   
   .reply {
   margin: 0; padding: 0;
   }
   
   .replytosubject {
   margin: 0; padding: 0;
   }
   
   .commentboxpartial {
   margin: 10px 0 10px 0; padding: 0;
   }
   
   .commentinfo {
   margin: 0; padding: 0;
   width: 100%;
   }
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: A R C H I V E & T A G*/
   
   ul.year {
   text-align: center; text-transform: lowercase;
   padding: 0; margin: 0;
   background-color: #ffffff;
   }
   
   ul.year li { display: inline; }
   
   table.yeartable {
   margin: auto; padding: 0;
   }
   
   table.yeartable a{ color: #aab8b8;}
   table.yeartable a:hover{ color: #888888;}
   
   table.yeartable td.yearday {
   background-color: #ffbb64; color: #ffffff;
   text-align: center;
   border: 0; margin: 0; padding: 0;
   }
   
   table.yeartable td.yeardate {background-color: #ffffff;}
   
   table.yeartable td.yeardate a{ color: #ffbb64;}
   table.yeartable td.yeardate a:hover{ color: #888888;}
   
   #maincontent h2 {
   font-size: 16px; font-weight: normal;
   text-transform: lowercase; text-align: center;
   padding: 3px;
   }
   
   .ljtaglist {
   list-style: decimal-leading-zero;
   margin: 10px; padding: 0;
   }
   
   .ljtaglist a{ color: #aab8b8;}
   .ljtaglist a:hover{ color: #888888;}
   
   /* :::::::::::::::::::::::::::::::::::::::::::::::::::: O T H E R */
   
   * html div.subcontent {
   /* fixes an IE reply page bug */
   height: 1%;
   clear: none;
   }
   
   * html div.box#commentform {
   /* fixes an IE reply page bug */
   position: absolute;
   border-width: 1px;
   border-style: solid;
   border-color: #999999;
   background-color: #c2cde0;
   }
   
   ::-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 ------*/
   
   div.ContextualPopup {
   margin: 10px 0 0 0px;
   font: normal 10px "tahoma" !important;
   }
   
   div.ContextualPopup img {
   margin: 0px !important;
   }
   
   div.ContextualPopup div.Inner {
   background-color: #f3f9f9 !important; color: #aaaaaa !important;
   border: 0;
   padding: 0px; margin: 0;
   width: 220px;
   text-align: left;
   }
   
   div.ContextualPopup .Content {
   padding: 5px 0 0 5px; margin-right: 0px;
   }
   
   div.ContextualPopup .Relation, div.ContextualPopup .Content .OnlineStatus {
   font-weight: normal !important;
   }
   
   div.ContextualPopup .Userpic {
   padding: 0; margin: 0 0 0 20px;
   border: 5px solid #ffbb64;
   }
   
   div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
   text-decoration: none !important;
   font-weight: normal;
   color: #ffbb64 !important;
   }
   
   #lj_controlstrip table { margin: 0; padding: 0; background-color: #e9f4f4 !important;}
   
   #lj_controlstrip td {
   background-color: #e9f4f4 !important;
   font-family: tahoma;
   color: #aaaaaa;
   border-bottom: 5px solid #ffffff !important;
   }
   
   #lj_controlstrip a {
   color: #aab8b8 !important;
   font-family: tahoma; font-size: 9px;
   text-transform: lowercase;
   }
   
   #lj_controlstrip a:hover {
   color: #888888 !important;
   cursor: help;
   border: 0;
   text-decoration: none;
   }
   
   #lj_controlstrip a img, #lj_controlstrip form {
   padding: 0; margin: 0; border: 0;
   }
   
   #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
   font-family: tahoma; font-size: 9px;
   background-color: #ffffff; color: #aaaaaa;
   padding: 0; margin: 0;
   border: 1px solid #eeeeee;
   }
   
   #lj_controlstrip_userpic, #lj_controlstrip_userpic img{ width: 50px; height: 50px; }
   
   #lj_controlstrip_statustext {
   font-size: 9px;
   color: #bbbbbb !important;
   font-weight: normal;
   letter-spacing: 2px;
   }
   
   #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; }
   

← 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 900px wide.
#content {margin: auto;}
.headerimage{
height: ###px; width: 900px;
margin: auto; padding: 0; margin-top: 50px;
background-image: url(HTTP://URLHERE.PNG);
background-position: bottom left; background-repeat: no-repeat;
}

1. Replace HTTP://URLHERE.PNG with your banner url
   Replace ### with your banner height (pixels)
2. Add the code to the bottom of the Custom Stylesheet box

Add a Banner | Replace Colours


( Optional ) Replace Colours

#ffffff#ffbb64#fafafa#f3f9f9#e9f4f4#dddddd#bbbbbb#aaaaaa#999999#888888
How do I replace layout colours?

Add a Banner | Replace Colours

Fruitstyle: Layouts and Winamp Skin Designs by Malionette