Post Friends My journal
malionette in fruitstyle

Layout 033 : Washing Chrome

Oct 17, 2009 14:44




Click for a Live Preview.


( Layout ) #033 : Washing Chrome
Got the colour idea when I was washing cars. The slider sidebar idea came from my slide phone.

( 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 --- 033 Washing Chrome ---
    Wingweaver22 @ Fruitstyle.livejournal.com
    Do not remove this note. */

    /* -------------------------------------- PAGE -------------------------------------- */

    body, html {font: 12px arial; color: #606060; padding: 0; margin: 0; background: #eeeeee; z-index: 0; position: relative; }

    a {color: #888888; text-decoration: none; border-bottom: 1px dotted #bbbbbb;}
    a:hover {color: #bbbbbb; border-color: #dddddd;}

    #content {width: 758px; margin: 0 auto; margin-top: 85px; margin-bottom: 35px; background: #333333;}

    /* -------------------------------------- MARK'M UP! -------------------------------------- */

    blockquote {background: #eeeeee; padding: 10px; }
    textarea {border: 1px solid #dddddd; font: 11px monospace; padding: 2px; color: #888888; }

    input, select {border: 1px solid #dddddd; font: 9px arial; color: #606060 !important; background: #ffffff !important; }
    input:hover, select:hover { color: #333333 !important; border-color: #888888;}

    dd { border-top: 1px solid #dddddd; padding: 10px; }
    dt { float: left; background: #eeeeee; font-size: 9px; padding: 5px 10px 5px 10px; }
    dt a { border: 0; }
    /* -------------------------------------- HEADER -------------------------------------- */

    #header { background: #eeeeee; margin: 10px 0 0 0; padding: 0;}

    #header ul {margin: 0; padding: 0; text-align: center; padding: 10px; text-transform: uppercase; font-size: 9px; background: #8f9ba5;
    border-top: 10px solid #dddddd; }
    #header li {display: inline; padding: 10px 0 10px 0; margin: 0; }
    #header li a {padding: 0 10px 0 10px; border: 0; color: #dddddd;}
    #header li a:hover {color: #ffffff;}
    #header li:hover {background: #888888;}

    #header li.view {color: #ffffff; background: #6A7A87; padding: 10px;}

    .title, .subtitle {display: none;}

    /* -------------------------------------- SIDEBAR -------------------------------------- */

    #sidebar { margin: 0; padding: 0; border-top: 2px solid #606060; background: #333333; height: 148px; min-height: 148px; overflow: hidden; }

    /* ############################## SDHOVER ################################## */
    /* ############################## SDHOVER ################################## */
    #sidebar:hover {height: auto;} /* Sidebar hover effect! Feel free to delete. */
    /* ############################## SDHOVER ################################## */
    /* ############################## SDHOVER ################################## */

    #sidebar_summary {display: none;}

    .defaultuserpic { width: 25%; text-align: center; }
    .defaultuserpic img {border: 0; padding: 10px; background: #444444; margin: 13px 0 0px 0;}
    .defaultuserpic img:hover {background: #404040;}
    .defaultuserpic a {border: 0;}

    .sbarlist {padding: 0; margin: 0; list-style: none;}
    .sbartitle { padding: 10px 5px 10px 20px; color: #dddddd; margin: 0; position: absolute; font-size: 16px; }

    div + .sbarbody .sbartitle {margin-left: 190px;}
    div + div + .sbarbody .sbartitle {margin-left: 380;}

    #sidebar_linklist .sbartitle, #sidebar_tags .sbartitle, #sidebar_calendar .sbartitle {margin-left: 0; z-index: 5; position: relative; }
    .sbarbody2, #sidebar_summary {width: 44%; float: left; color: #aaaaaa; }
    #sidebar_linklist, #sidebar_tags, #sidebar_calendar, .defaultuserpic {width: 25%; padding: 0; margin: 0; float: left; }

    .sbarcontent, .sbarbody2 { border-top: 1px solid #606060; padding: 10px 0 10px 0; margin-left: 10px; }
    .sbarbody2 {padding: 10px; margin-top: 39px; }

    .sbaritem {display: block; font-size: 9px;}
    .sbaritem a {border: 0; background: #444444; display: block; margin: 0 0 1px 0; padding: 1px 0px 1px 10px; color: #aaaaaa; }
    .sbaritem a:hover {background: #404040; color: #ffffff;}

    #sidebar .tagcloud a {border: 0; }
    #sidebar .tagcloud {line-height: 16px;}

    #sidebar_calendar .calendar {width: 100%; padding: 0; margin: 0;}
    #sidebar_calendar .calendar td {padding: 0; text-align: center; font-size: 10px;}
    #sidebar_calendar .calendar a {border: 0; display: block; background: #444444; color: #aaaaaa; }
    #sidebar_calendar .calendar a:hover {color: #ffffff; background: #404040;}

    /* -------------------------------------- ENTRY -------------------------------------- */

    #maincontent {background: #8f9ba5; clear: both; z-index: 10; position: relative; width: 758px; border-top: 2px solid #606060; }

    .LJ_Placeholder_Container a {margin-right: 100%; }

    .userpic br, .userpicfriends br {display: none;}
    .userpic, .userpicfriends { background: #6a7a87 !important; float: left; padding: 0; margin: 0 10px 0 0; text-align: center; width: auto; }

    .userpic img {border: 10px solid #dddddd; width: 50px; height: 50px; }

    .userpicfriends a { color: #ffffff; display: block; padding: 10px; border: 0; font-size: 9px;}
    .userpicfriends a:hover { background: #888888; }
    .userpicfriends img {display: none;}

    .userpicfriends {font-size: 0px;}

    .userpicfriends a {float: left;}
    .userpicfriends a + br + a {border-left: 1px solid #dddddd; float: right;}

    .datesubject { padding: 0; margin: 0; }
    .date {text-transform: uppercase; font-size: 9px; color: #dddddd; float: right; padding: 10px;}
    .subject { margin: 0; font-size: 16px; color: #ffffff; padding: 7px 0 0 10px;}
    .subject a { border: 0; color: #ffffff; }
    .subject a:hover { border-bottom: 1px dotted #dddddd;}

    .subject img {margin-right: 10px;}

    .entry {background: #ffffff; clear: both; padding: 10px 10px 0 10px;;}
    .entry_text { position: relative;}

    .ljtags {margin: 25px 0 10px 0; font-size: 0px; color: #ffffff; width: 340px; float: right; text-align: right; }
    .ljtags a {font-size: 9px; width: 150px; display: inline-block; margin-left: 10px; text-align: left;}

    .currents {float: left; }
    .currents div {margin: 10px 0 10px 0; }
    .currents strong {font-weight: normal; font-size: 9px; text-transform: uppercase; background: #eeeeee; padding: 5px; }

    .comments {margin-top: 10px; text-align: center; border-top: 1px solid #dddddd; padding: 5px; clear: both; color: #ffffff;}
    .comments a {border: 0; padding: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: 1px;}
    .comments a:hover {}

    .clear {display: none;}

    /* -------------------------------------- COMMENTS -------------------------------------- */

    .skiplinks {background: #606060; text-align: center; padding: 5px; font-size: 9px; color: #606060; border-bottom: 2px solid #606060; }
    .skiplinks a {color: #aaaaaa; border: 0; padding: 5px; }
    .skiplinks a:hover { color: #ffffff; }

    .box {text-align: center;}

    .box center {padding: 5px; color: #ffffff;}
    .box center b {font-weight: normal; }
    .box center a {color: #dddddd; }
    .box center a:hover {color: #ffffff; }

    .box center table {margin-bottom: 5px;}
    .box center table td {padding: 0px;}

    .commentbox {background: #ffffff; padding: 10px; border: 1px solid #dddddd; border-top: 0; text-align: left; }
    .commentreply { padding: 10px 0 10px 0; }

    .datesubjectcomment strong {font-weight: normal; font-size: 16px; border-bottom: 1px solid #dddddd; }

    .userpiccomment {float: right; background: #dddddd; padding: 10px; width: 50px; height: 50px; margin: 0 0 10px 10px;}

    .commentbox div div { margin-top: 10px; padding: 0px 10px 0px 0px !important; }
    .commentbox div div a {border: 0; }
    .commentbox div div a img { width: 14px; height: 14px; opacity: .8;}
    .commentbox div div a img:hover {opacity: .5; }

    .commentboxpartial {background: #ffffff; border: 1px solid #dddddd; border-top: 0; padding: 5px; text-align: left; }

    .box select, .box input {margin-top: 10px;}

    #qrform table {border: 1px solid #dddddd !important; width: 100%; padding-right: 10px; background: #ffffff;}
    .lj-view-reply #maincontent div[style*="overflow: hidden;"]{ display: none;}
    .lj-view-reply #postform {padding-top: 10px;}
    .lj-view-reply #postform table {border: 1px solid #dddddd !important; width: 100%; padding: 10px 10px 10px 0; background: #ffffff;}
    .lj-view-reply #postform table td {padding: 0 0 0 10px; text-align: left;}
    .lj-view-reply #postform table table {border: 0 !important; padding: 0;}

    /* -------------------------------------- ARCHIVE/TAG -------------------------------------- */

    .lj-view-archive #maincontent br {display: none;}

    .year {margin: 0; padding: 0; text-align: center; padding: 10px; text-transform: uppercase; font-size: 9px; }
    .year li {display: inline; padding: 10px 0 10px 0; margin: 0; }
    .year li a {padding: 0 10px 0 10px; border: 0; color: #dddddd;}
    .year li a:hover {color: #ffffff;}
    .year li:hover {background: #888888;}

    .year li.active {color: #ffffff; background: #6A7A87; padding: 10px;}

    .yeartable {background: #ffffff; width: 100%; margin: 0; border-spacing: 0px; border-collapse: collapse; border-right: 1px solid #dddddd; }
    .yearmonth {background: #dddddd; padding: 10px; text-align: right; font-size: 16px;}
    .yearmonth a {font-size: 9px; text-transform: uppercase;}

    .yearday {text-transform: uppercase; font-size: 9px; padding: 5px; text-align: center; border-left: 1px solid #dddddd; }

    .yeardate { border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; padding-right: 2px;}
    .yeardate a {display: block; border-bottom: 0; border-top: 1px dotted #dddddd; }

    .lj-view-month #maincontent br {display: none;}
    .lj-view-month form {padding: 5px; color: #ffffff; }
    .lj-view-month form a {border: 0; color: #dddddd; }
    .lj-view-month form a:hover {color: #ffffff; }

    .lj-view-tags h2 {margin: 0; padding: 0; font-weight: normal; font-size: 16px; padding: 7px 7px 7px 20px; color: #ffffff; }
    .lj-view-tags .ljtaglist {background: #ffffff; margin: 0; padding: 10px; list-style-type: decimal-leading-zero; }
    .lj-view-tags .ljtaglist li {border-bottom: 1px dotted #dddddd; list-style-position: inside; padding: 5px 5px 5px 10px;}
    .lj-view-tags .ljtaglist li a {border-bottom: 0; margin: 0 5px 0 0px; padding: 5px;}

    /* -------------------------------------- FOOTER -------------------------------------- */

    .clearfoot {display: none;}

    #footer {padding: 10px; background: #8f9ba5; border-bottom: 10px solid #dddddd; }

    #footer ul {margin: 0; padding: 0; list-style: none; text-align: center; font-size: 9px; text-transform: uppercase; }
    #footer li {display: inline; padding: 10px 0 10px 0; margin: 0; }
    #footer li a {padding: 0 10px 0 10px; border: 0; color: #dddddd;}
    #footer li a:hover {color: #ffffff;}
    #footer li:hover {background: #888888;}

    #footer li.viewing {color: #ffffff; background: #6A7A87; padding: 10px;}

    /* -------------------------------------- EXTRA -------------------------------------- */

    div.ContextualPopup div.Inner {border: 0; background: transparent !important; }
    div.ContextualPopup div.Userpic {margin-right: -20px; padding: 10px; background: #dddddd; }
    div.ContextualPopup div.Content { background: #8f9ba5; color: #333333; opacity: .9;}
    div.ContextualPopup div.Inner div.Content a {color: #ffffff !important; border-bottom: 1px dotted #dddddd; text-decoration: none !important;}
    div.ContextualPopup div.Inner div.Content span.alias-unavailable a {color: #ffffff !important}
    div.ContextualPopup div.Inner div.Content a:hover,
    div.ContextualPopup div.Inner div.Content .alias-unavailable a:hover {color: #333333 !important;}

    .imagepreview a img {border: 1px dotted #bbbbbb; padding: 10px;}
    .imagepreview a img:hover {border-color: #dddddd; opacity: .8;}
    .imagepreview {text-align: center; }
    .imagepreview + br + b, .imagepreview + br + br + b {text-align: center; display: block;}

    .tagcloud a { margin: 0 5px 0 0;}

    #lj_controlstrip td {background: #333333; border-right: 1px solid #606060;}
    #lj_controlstrip td a {color: #8F9BA5; border-bottom: 1px dotted #888888;}
    #lj_controlstrip td a:hover { color: #6a7a87; text-decoration: none; border-color: #606060;}
    #lj_controlstrip td select, #lj_controlstrip td input {background: #444444 !important; color: #dddddd !important; border: 1px solid #606060;}
    #lj_controlstrip td select:hover, #lj_controlstrip td input:hover {background: #333333 !important; color: #ffffff !important; }

    .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; padding: 12px 8px 0 2px !important;
    background: url(http://img291.imageshack.us/img291/4575/useryb4.png) no-repeat;}
    .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {width:0; height: 0; padding: 9px 8px 0 2px !important;
    background: url(http://img176.imageshack.us/img176/6571/userinfopk2.png) no-repeat;}
    img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img72.imageshack.us/img72/4144/lockedib8.png) no-repeat;}
    img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://i34.tinypic.com/14kkvpz.jpg) no-repeat;}

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

← 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 758px wide.
#header {background-image: url(HTTP://URLHERE.PNG); background-position: top center; background-repeat: no-repeat; padding-top: ###px;}
  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 | Replace Images


( Optional ) Replace Colours

#ffffff#eeeeee#dddddd#bbbbbb#aaaaaa#8f9ba5#888888#6a7a87#606060#444444#404040#333333

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



layouts

Leave a comment

Read comments 77
Previous post Next post
Up
Homepage Read journal... Full version Help Русская версия
© 1999-2024 LiveJournal, Inc.