Layout 039 : Jess (light mod) | 040 : Jess (dark mod)

Dec 18, 2009 20:27

Quickly, one last post for 2009!! Thank you for 3500 watchers!



Click for a Live Preview.
| Generator


( Layout ) #039 : Jess (light mod)
Jess (ver. light) with a topbar! Made on request (:

( Install ) Step 1 - System

Select Theme
  1. Select any S2 Flexible Squares layout.

Page Setup
  1. Ad Placement: Between Entries
    (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 --- 039 Light Mod ~ Jess ---
    Wingweaver22 @ Fruitstyle.livejournal.com
    Do not remove this note. */

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

    body { background: #ffffff; margin: 0; padding: 0; font: 9px arial; color: #666666;}

    #content {width: 700px; margin: 0 auto; }
    #content {background: #fafafa; }
    #maincontent {background: #ffffff; }

    /* ------------------------------------------------ MARKUP AND VARIABLES ------------------------------------------------ */

    a {text-decoration: none;}
    a:hover {cursor: help; }
    abbr {border-color: #ec086b; }
    b {font: bold 11px arial; color: #000000;}
    blockquote {border: 1px solid #dddddd; padding: 5px; margin: 10px; }
    caption {color: #dddddd; text-transform: uppercase;}
    cite {font: italic 11px arial; }
    code {font: italic 11px georgia;}
    dt {border-bottom: 1px solid #dddddd; font: bold 11px arial; }
    dd {padding: 2px;}
    em {font: italic 11px arial;}
    h1 {font: 20px arial black;}
    h2 {font: bold 18px arial;}
    h3 {font: bold 16px arial;}
    h4 {font: bold 14px arial;}
    h5 {font: bold 12px arial;}
    h6 {font: bold 11px arial;}
    hr {border: 0; border-bottom: 1px solid #dddddd;}
    i {font: italic 11px arial; color: #16afc5; }
    input {border: 1px solid #dddddd; font: 9px arial; color: #666666; background: #fafafa;}
    input[type="submit"] {background: #fafafa; }
    input[type="submit"]:hover {background: #ec086b; color: #ffffff; cursor: help; }
    ol li {list-style: decimal-leading-zero; }
    pre {font: 9px arial;}
    q {font: italic 11px georgia;}
    select {font: 9px arial; border: 1px solid #dddddd; color: #666666; background: #fafafa;}
    small {font: 9px silkscreen, arial;}
    strong {font: bold 11px arial;}
    sub, sup {font-size: 9px; color: #a5e025; }
    textarea {border: 1px solid #dddddd; padding: 2px; font: italic 11px georgia; color: #666666; background: #fafafa;}
    tt {font: 11px monospace; }
    ul li {list-style: circle;}

    #sidebar_summary b{font: bold 11px arial; color: inherit;}
    .ljuser b {color: inherit; }
    .subject .ljuser b {font-size: inherit;}
    #maincontent a:hover, #footer a:hover, #header a:hover {color: #aaaaaa;}

    .LJ_Placeholder_Container A { position: absolute; top:50%; left:50%; visibility: hidden;}

    /* ------------------------------------------------ LOOKS HOT ;) ------------------------------------------------ */

    li a, a {color: #ec086b;}
    li+li a {color: #aaaaaa;}
    li+li+li a, a+a {color: #a5e025;}
    li+li+li+li a, a+a+a {color: #16afc5;}
    li+li+li+li+li a, a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li a, a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li a, a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #ec086b;}

    /* ------------------------------------------------ HEADER ------------------------------------------------ */

    .subtitle {display: none;}
    .title { padding: 0 0 5px 5px; margin: 0; text-transform: uppercase; color: #aaaaaa;}

    .navheader { padding: 12px 0 0 5px; margin: 0; font: 18px arial black; text-transform: uppercase; }
    .navheader li {display: inline; }

    .navheader li a, .navheader li {color: #ec086b;}
    .navheader li+li a, .navheader li+li {color: #a5e025; }
    .navheader li+li+li a, .navheader li+li+li {color: #16afc5;}
    .navheader li+li+li+li a, .navheader li+li+li+li {color: #ec086b;}
    .navheader li+li+li+li+li a, .navheader li+li+li+li+li {color: #a5e025; }

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

    #sidebar { padding: 10px; color: #aaaaaa; border-top: 1px solid #dddddd; }

    .sbarbody, .sbarbody2 {float: left; width: 20%; }

    .defaultuserpic {text-align: right; float: left; margin-bottom: 10px; }
    .defaultuserpic img{border: 1px solid #dddddd; padding: 4px; }

    .sbartitle {display: none;}

    .sbarbody2 { padding: 5px; width: 40%;}

    .sbarbody > ul.sbarlist {padding: 0; margin: 0;}

    #sidebar_tags .sbaritem {border-bottom: 1px solid #dddddd; list-style: none; }
    #sidebar_tags .sbaritem a {display: block; padding: 2px 5px 2px 0;}
    #sidebar_tags .sbaritem a:hover {background: #ffffff; }

    .tagcloud {margin: 0; padding: 0 5px 5px 0; list-style: none; }
    .tagcloud a:hover {color: #dddddd; }
    .tagcategory0 {font-size: 9px; color: #aaaaaa;}
    .tagcategory1 {font-size: 11px; color: #ec086b;}
    .tagcategory2 {font-size: 12px; color: #a5e025;}
    .tagcategory3 {font-size: 12px; font-weight: bold; color: #16afc5;}
    .tagcategory4 {font-size: 14px; color: #16afc5;}
    .tagcategory5 {font-size: 14px; font-weight: bold; color: #ec086b;}
    .tagcategory6 {font-size: 16px; color: #ec086b;}
    .tagcategory7 {font-size: 16px; font-weight: bold; color: #a5e025;}
    .tagcategory8 {font-size: 18px; color: #a5e025;}
    .tagcategory9 {font-size: 20px; color: #16afc5; }

    #sidebar_linklist .sbartitle {margin-bottom: 2px;}
    #sidebar_linklist .sbaritem {border-bottom: 1px solid #dddddd; list-style: none; }
    #sidebar_linklist .sbaritem a {display: block; padding: 2px 5px 2px 0;}
    #sidebar_linklist .sbaritem a:hover {background: #ffffff; }

    #sidebar_calendar .calendar {width: 100%; }
    #sidebar_calendar .calendar td {border-top: 1px solid #dddddd; text-align: center; font: 9px silkscreen, arial;}
    #sidebar_calendar .calendar td a {color: #16afc5; display: block;}
    #sidebar_calendar .calendar td a:hover {color: #a5e025; }

    #sidebar_summary .sbaritem{ margin: 0; padding: 2px 5px 2px 0;
    border-bottom: 1px solid #dddddd; list-style: none; color: #dddddd; }
    #sidebar_summary .sbaritem a:hover { color: #dddddd;}

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

    #maincontent {width: 100%; clear: both; border-top: 1px solid #dddddd; }
    .clear {display: none;}

    .subcontent {clear: right; border-bottom: 1px solid #dddddd;}

    .subject , .subject a{font: 14px arial; color: #000000; letter-spacing: -1px; }
    .subject {padding: 5px 5px 0 5px;}
    .date {color: #ffffff; background: #dddddd; width: 200px; font: 9px silkscreen, arial; padding: 0 0 1px 5px; text-transform: uppercase;}

    .userpic, .userpicfriends {float: right; background: #ffffff !important; color: transparent; text-align: center;}
    .userpic img, .userpicfriends img {margin: 5px; border: 1px solid #dddddd; padding: 4px;}
    .userpicfriends a font{ color: #16afc5 !important; }

    .lj-view-friends .entry_text {min-height: 110px; }
    .entry_text {padding: 10px 0 0 0; min-height: 85px; padding: 5px 5px 0 5px;}
    .entry_text img {max-width: 420pxpx; border: 1px solid #dddddd; padding: 4px; }

    .ljtags {margin-top: 10px; }
    .currents strong { font: 9px arial; text-transform: uppercase; color: #dddddd; }
    .currents {padding: 5px;}

    .comments { margin: 5px 0 5px 0; padding: 0px 0 0 5px; color: #dddddd; }

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

    .lj-view-tags h2{ font: 9px silkscreen, arial; background: #dddddd; margin: 0; padding: 2px 0 1px 5px; color: #ffffff; width: 250px;}
    .lj-view-tags .ljtaglist {margin: 0; padding: 5px 0 0 30px;}

    .lj-view-tags .ljtaglist li {list-style: decimal-leading-zero;}

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

    .year { padding: 5px 5px 0 0; margin: 0;}
    .year li {display: inline; border-right: 1px solid #dddddd; padding: 0 5px 0 5px;}

    .yeartable { margin: 10px 0 0 0; width: 100%; border-collapse: collapse;}
    .yearmonth {background: #dddddd; text-transform: uppercase; color: #ffffff; font: 9px silkscreen, arial; padding: 1px 0 2px 5px; }
    .yearmonth + .yearmonth {background: #ffffff;}

    .yearday {text-transform: uppercase; text-align: center; padding: 5px;}

    .yeardate {border-top: 1px solid #dddddd;}

    .yeardate a {background-color: #ec086b; color: #ffffff; display: block;}
    .yeardate + .yeardate a {background-color: #a5e025; }
    .yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
    .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
    .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a{background-color: #a5e025; }
    .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
    .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
    .yeardate a:hover {background: #dddddd !important; color: #ffffff !important; }

    .lj-view-month .entry{padding: 5px;}
    .lj-view-month dd a {color: #000000; font: bold 14px arial; letter-spacing: -1px;}

    /* ------------------------------------------------ COMMENT PAGES ------------------------------------------------ */

    .skiplinks {padding: 2px 0 2px 5px; color: #dddddd;}

    .box center{ padding: 5px;}
    .box center b {font: normal 9px arial;}
    .box center table {border-collapse: collapse; text-transform: uppercase; }

    .box b a {color: #16afc5;}

    .box td a b, .box td a+a+a+a b, .box td a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a b {color: #ec086b;}
    .box td a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a b {color: #a5e025;}
    .box td a+a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a+a b {color: #16afc5;}

    .box > div + div {background: #fafafa;}

    .commentbox { border-top: 1px solid #dddddd; padding: 5px; min-height: 110px;}
    .commentbox .userpiccomment {float: right; border: 1px solid #dddddd; padding: 4px; }

    .commentboxpartial {border-top: 1px solid #dddddd; padding: 2px 0 2px 5px;}

    .datesubjectcomment {color: #aaaaaa; text-transform: uppercase; margin-bottom: 10px;}
    .datesubjectcomment a {text-transform: lowercase;}
    .datesubjectcomment strong {color: #000000; text-transform: capitalize; font: normal 12px arial; letter-spacing: -1px; }

    .commentbox div + div + div {font: 9px arial !important; color: #dddddd; }
    .commentbox div + div + div div {display: inline; text-transform: uppercase; color: #aaaaaa; }

    .box + .box {padding: 5px; border-top: 1px solid #dddddd; }

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

    .clearfoot {display: none;}
    .navfooter {margin: 0; padding: 5px; }
    .navfooter li {display: inline; list-style: none; border-right: 1px solid #dddddd; padding: 0 5px 0 5px;}

    /* ------------------------------------------------ EXTRAS ------------------------------------------------ */

    div.ContextualPopup {display: block !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;}

    .subject .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { margin-left: 5px; }
    .subject .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { margin-left: 5px;}

    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://img329.imageshack.us/img329/4985/privatevy7.png) no-repeat;}

    img[src="http://l-stat.livejournal.com/img/btn_del.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img189.imageshack.us/img189/6336/deleteewh.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_scr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img207.imageshack.us/img207/2286/unscreenme.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img387.imageshack.us/img387/7264/screenme.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img95.imageshack.us/img95/1418/freeze.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img374.imageshack.us/img374/1844/unfreeze.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_track.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img95.imageshack.us/img95/1002/tracku.png) no-repeat; }

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

    div.ContextualPopup div.Inner div.Content { font: 9px arial !important; }
    div.ContextualPopup div.Inner div.Content a { text-decoration: none !important; color: #ec086b !important;}
    div.ContextualPopup div.Inner div.Content .RemoveFriend a { text-decoration: none !important; color: #16afc5 !important;}
    div.ContextualPopup div.Inner div.Content .SetBan a { text-decoration: none !important; color: #a5e025 !important;}
    div.ContextualPopup div.Inner div.Content a:hover { color: #aaaaaa !important; cursor: help; }

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

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

    div.ContextualPopup .Userpic { padding: 4px; border: 1px solid #dddddd; background-color: #ffffff; margin: 0 -55px 0 0;}

    #lj_controlstrip td {border-right: 1px solid #aaaaaa; font: 9px arial; background: #ffffff; color: #000000;}

    #lj_controlstrip td a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a+a+a+a {color: #ec086b;}
    #lj_controlstrip td a+a {color: #a5e025;} #lj_controlstrip td a+a+a+a+a+a+a {color: #16afc5;}
    #lj_controlstrip td a+a+a {color: #16afc5;} #lj_controlstrip td a+a+a+a+a+a {color: #a5e025;}
    #lj_controlstrip td a+a+a+a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a {color: #ec086b;}

    #lj_controlstrip td a b {color: #a5e025;}

    Feel like customizing? Use the Custom CSS Generator

← 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 700px wide.
.headerimage {background: url(HTTP://URLHERE.PNG) no-repeat center; height: ###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#fafafa#ec086b#dddddd#aaaaaa#a5e025#666666#16afc5#000000

Add a Banner | Replace Colours | Replace Images

( Optional ) Replace Images

Get all the images at Box.net

Add a Banner | Replace Colours | Replace Images

Fruitstyle: Layouts and Winamp Skin Designs by Malionette







Click for a Live Preview.
| Generator


( Layout ) #040 : Jess (dark mod)
Jess (ver. dark) with a topbar! Made on request (:

( Install ) Step 1 - System

Select Theme
  1. Select any S2 Flexible Squares layout.

Page Setup
  1. Ad Placement: Between Entries
    (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 --- 040 Dark Mod ~ Jess ---
    Wingweaver22 @ Fruitstyle.livejournal.com
    Do not remove this note. */

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

    body { background: #000000; margin: 0; padding: 0; font: 9px arial; color: #aaaaaa;}

    #content {width: 700px; margin: 0 auto;}
    #content {background: #222222; }
    #maincontent {background: #000000; }

    /* ------------------------------------------------ MARKUP AND VARIABLES ------------------------------------------------ */

    a {text-decoration: none;}
    a:hover {cursor: help; }
    abbr {border-color: #ec086b; }
    b {font: bold 11px arial; color: #ffffff;}
    blockquote {border: 1px solid #444444; padding: 5px; margin: 10px; }
    caption {color: #444444; text-transform: uppercase;}
    cite {font: italic 11px arial; }
    code {font: italic 11px georgia;}
    dt {border-bottom: 1px solid #444444; font: bold 11px arial; }
    dd {padding: 2px;}
    em {font: italic 11px arial;}
    h1 {font: 20px arial black;}
    h2 {font: bold 18px arial;}
    h3 {font: bold 16px arial;}
    h4 {font: bold 14px arial;}
    h5 {font: bold 12px arial;}
    h6 {font: bold 11px arial;}
    hr {border: 0; border-bottom: 1px solid #444444;}
    i {font: italic 11px arial; color: #16afc5; }
    input {border: 1px solid #444444; font: 9px arial; color: #aaaaaa; background: #222222;}
    input[type="submit"] {background: #222222; }
    input[type="submit"]:hover {background: #ec086b; color: #000000; cursor: help; }
    ol li {list-style: decimal-leading-zero; }
    pre {font: 9px arial;}
    q {font: italic 11px georgia;}
    select {font: 9px arial; border: 1px solid #444444; color: #aaaaaa; background: #222222;}
    small {font: 9px silkscreen, arial;}
    strong {font: bold 11px arial;}
    sub, sup {font-size: 9px; color: #a5e025; }
    textarea {border: 1px solid #444444; padding: 2px; font: italic 11px georgia; color: #aaaaaa; background: #222222;}
    tt {font: 11px monospace; }
    ul li {list-style: circle;}

    #sidebar_summary b{font: bold 11px arial; color: inherit;}
    .ljuser b {color: inherit; }
    .subject .ljuser b {font-size: inherit;}
    #maincontent a:hover, #footer a:hover, #header a:hover {color: #aaaaaa;}

    .LJ_Placeholder_Container A { position: absolute; top:50%; left:50%; visibility: hidden;}

    /* ------------------------------------------------ LOOKS HOT ;) ------------------------------------------------ */

    li a, a {color: #ec086b;}
    li+li a {color: #aaaaaa;}
    li+li+li a, a+a {color: #a5e025;}
    li+li+li+li a, a+a+a {color: #16afc5;}
    li+li+li+li+li a, a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li a, a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li a, a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #ec086b;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #aaaaaa;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #a5e025;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a, a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a+a {color: #16afc5;}
    li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li a {color: #ec086b;}

    /* ------------------------------------------------ HEADER ------------------------------------------------ */

    .subtitle {display: none;}
    .title { padding: 0 0 5px 5px; margin: 0; text-transform: uppercase; color: #666666;}

    .navheader { padding: 12px 0 0 5px; margin: 0; font: 18px arial black; text-transform: uppercase; }
    .navheader li {display: inline; }

    .navheader li a, .navheader li {color: #ec086b;}
    .navheader li+li a, .navheader li+li {color: #a5e025; }
    .navheader li+li+li a, .navheader li+li+li {color: #16afc5;}
    .navheader li+li+li+li a, .navheader li+li+li+li {color: #ec086b;}
    .navheader li+li+li+li+li a, .navheader li+li+li+li+li {color: #a5e025; }

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

    #sidebar { padding: 10px; color: #666666; border-top: 1px solid #444444; }

    .sbarbody, .sbarbody2 {float: left; width: 20%; }

    .defaultuserpic {text-align: right; float: left; margin-bottom: 10px; }
    .defaultuserpic img{border: 1px solid #444444; padding: 4px; }

    .sbartitle {display: none;}

    .sbarbody2 { padding: 5px; width: 40%;}

    .sbarbody > ul.sbarlist {padding: 0; margin: 0;}

    #sidebar_tags .sbaritem {border-bottom: 1px solid #444444; list-style: none; }
    #sidebar_tags .sbaritem a {display: block; padding: 2px 5px 2px 0;}
    #sidebar_tags .sbaritem a:hover {background: #000000; }

    .tagcloud {margin: 0; padding: 0 5px 5px 0; list-style: none; }
    .tagcloud a:hover {color: #444444; }
    .tagcategory0 {font-size: 9px; color: #aaaaaa;}
    .tagcategory1 {font-size: 11px; color: #ec086b;}
    .tagcategory2 {font-size: 12px; color: #a5e025;}
    .tagcategory3 {font-size: 12px; font-weight: bold; color: #16afc5;}
    .tagcategory4 {font-size: 14px; color: #16afc5;}
    .tagcategory5 {font-size: 14px; font-weight: bold; color: #ec086b;}
    .tagcategory6 {font-size: 16px; color: #ec086b;}
    .tagcategory7 {font-size: 16px; font-weight: bold; color: #a5e025;}
    .tagcategory8 {font-size: 18px; color: #a5e025;}
    .tagcategory9 {font-size: 20px; color: #16afc5; }

    #sidebar_linklist .sbartitle {margin-bottom: 2px;}
    #sidebar_linklist .sbaritem {border-bottom: 1px solid #444444; list-style: none; }
    #sidebar_linklist .sbaritem a {display: block; padding: 2px 5px 2px 0;}
    #sidebar_linklist .sbaritem a:hover {background: #000000; }

    #sidebar_calendar .calendar {width: 100%; }
    #sidebar_calendar .calendar td {border-top: 1px solid #444444; text-align: center; font: 9px silkscreen, arial;}
    #sidebar_calendar .calendar td a {color: #16afc5; display: block;}
    #sidebar_calendar .calendar td a:hover {color: #a5e025; }

    #sidebar_summary .sbaritem{ margin: 0; padding: 2px 5px 2px 0;
    border-bottom: 1px solid #444444; list-style: none; color: #444444; }
    #sidebar_summary .sbaritem a:hover { color: #444444;}

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

    #maincontent {width: 100%; clear: both; border-top: 1px solid #444444; }
    .clear {display: none;}

    .subcontent {clear: right; border-bottom: 1px solid #444444;}

    .subject , .subject a{font: 14px arial; color: #ffffff; letter-spacing: -1px; }
    .subject {padding: 5px 5px 0 5px;}
    .date {color: #000000; background: #444444; width: 200px; font: 9px silkscreen, arial; padding: 0 0 1px 5px; text-transform: uppercase;}

    .userpic, .userpicfriends {float: right; background: #000000 !important; color: transparent; text-align: center;}
    .userpic img, .userpicfriends img {margin: 5px; border: 1px solid #444444; padding: 4px;}
    .userpicfriends a font{ color: #16afc5 !important; }

    .lj-view-friends .entry_text {min-height: 110px; }
    .entry_text {padding: 10px 0 0 0; min-height: 85px; padding: 5px 5px 0 5px;}
    .entry_text img {max-width: 420pxpx; border: 1px solid #444444; padding: 4px; }

    .ljtags {margin-top: 10px; }
    .currents strong { font: 9px arial; text-transform: uppercase; color: #444444; }
    .currents {padding: 5px;}

    .comments { margin: 5px 0 5px 0; padding: 0px 0 0 5px; color: #444444; }

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

    .lj-view-tags h2{ font: 9px silkscreen, arial; background: #444444; margin: 0; padding: 2px 0 1px 5px; color: #000000; width: 250px;}
    .lj-view-tags .ljtaglist {margin: 0; padding: 5px 0 0 30px;}

    .lj-view-tags .ljtaglist li {list-style: decimal-leading-zero;}

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

    .year { padding: 5px 5px 0 0; margin: 0;}
    .year li {display: inline; border-right: 1px solid #444444; padding: 0 5px 0 5px;}

    .yeartable { margin: 10px 0 0 0; width: 100%; border-collapse: collapse;}
    .yearmonth {background: #444444; text-transform: uppercase; color: #000000; font: 9px silkscreen, arial; padding: 1px 0 2px 5px; }
    .yearmonth + .yearmonth {background: #000000;}

    .yearday {text-transform: uppercase; text-align: center; padding: 5px;}

    .yeardate {border-top: 1px solid #444444;}

    .yeardate a {background-color: #ec086b; color: #000000; display: block;}
    .yeardate + .yeardate a {background-color: #a5e025; }
    .yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
    .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
    .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a{background-color: #a5e025; }
    .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #16afc5;}
    .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate + .yeardate a {background-color: #ec086b;}
    .yeardate a:hover {background: #444444 !important; color: #000000 !important; }

    .lj-view-month .entry{padding: 5px;}
    .lj-view-month dd a {color: #ffffff; font: bold 14px arial; letter-spacing: -1px;}

    /* ------------------------------------------------ COMMENT PAGES ------------------------------------------------ */

    .skiplinks {padding: 2px 0 2px 5px; color: #444444;}

    .box center{ padding: 5px;}
    .box center b {font: normal 9px arial;}
    .box center table {border-collapse: collapse; text-transform: uppercase; }

    .box b a {color: #16afc5;}

    .box td a b, .box td a+a+a+a b, .box td a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a b {color: #ec086b;}
    .box td a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a b {color: #a5e025;}
    .box td a+a+a b, .box td a+a+a+a+a b, .box td a+a+a+a+a+a+a+a b, .box td a+a+a+a+a+a+a+a+a+a+a b {color: #16afc5;}

    .box > div + div {background: #222222;}

    .commentbox { border-top: 1px solid #444444; padding: 5px; min-height: 110px;}
    .commentbox .userpiccomment {float: right; border: 1px solid #444444; padding: 4px; }

    .commentboxpartial {border-top: 1px solid #444444; padding: 2px 0 2px 5px;}

    .datesubjectcomment {color: #aaaaaa; text-transform: uppercase; margin-bottom: 10px;}
    .datesubjectcomment a {text-transform: lowercase;}
    .datesubjectcomment strong {color: #ffffff; text-transform: capitalize; font: normal 12px arial; letter-spacing: -1px; }

    .commentbox div + div + div {font: 9px arial !important; color: #444444; }
    .commentbox div + div + div div {display: inline; text-transform: uppercase; color: #aaaaaa; }

    .box + .box {padding: 5px; border-top: 1px solid #444444; }

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

    .clearfoot {display: none;}
    .navfooter {margin: 0; padding: 5px; }
    .navfooter li {display: inline; list-style: none; border-right: 1px solid #444444; padding: 0 5px 0 5px;}

    /* ------------------------------------------------ EXTRAS ------------------------------------------------ */

    div.ContextualPopup {display: block !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;}

    .subject .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { margin-left: 5px; }
    .subject .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { margin-left: 5px;}

    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://img329.imageshack.us/img329/4985/privatevy7.png) no-repeat;}

    img[src="http://l-stat.livejournal.com/img/btn_del.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img189.imageshack.us/img189/6336/deleteewh.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_scr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img207.imageshack.us/img207/2286/unscreenme.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img387.imageshack.us/img387/7264/screenme.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img95.imageshack.us/img95/1418/freeze.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img374.imageshack.us/img374/1844/unfreeze.png) no-repeat; }
    img[src="http://l-stat.livejournal.com/img/btn_track.gif"]{width: 0; height: 0; padding: 0 0 10px 10px !important;
    background: url(http://img95.imageshack.us/img95/1002/tracku.png) no-repeat; }

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

    div.ContextualPopup div.Inner div.Content { font: 9px arial !important; }
    div.ContextualPopup div.Inner div.Content a { text-decoration: none !important; color: #ec086b !important;}
    div.ContextualPopup div.Inner div.Content .RemoveFriend a { text-decoration: none !important; color: #16afc5 !important;}
    div.ContextualPopup div.Inner div.Content .SetBan a { text-decoration: none !important; color: #a5e025 !important;}
    div.ContextualPopup div.Inner div.Content a:hover { color: #aaaaaa !important; cursor: help; }

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

    div.ContextualPopup .Content { padding: 5px; color: #aaaaaa !important; width: 200px; border: 1px solid #444444; background-color: #000000;}
    div.ContextualPopup .Content .OnlineStatus {font-weight: normal;}

    div.ContextualPopup .Userpic { padding: 4px; border: 1px solid #444444; background-color: #000000; margin: 0 -55px 0 0;}

    #lj_controlstrip td {border-right: 1px solid #666666; font: 9px arial; background: #000000; color: #ffffff;}

    #lj_controlstrip td a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a+a+a+a {color: #ec086b;}
    #lj_controlstrip td a+a {color: #a5e025;} #lj_controlstrip td a+a+a+a+a+a+a {color: #16afc5;}
    #lj_controlstrip td a+a+a {color: #16afc5;} #lj_controlstrip td a+a+a+a+a+a {color: #a5e025;}
    #lj_controlstrip td a+a+a+a {color: #ec086b;} #lj_controlstrip td a+a+a+a+a {color: #ec086b;}

    #lj_controlstrip td a b {color: #a5e025;}

    Feel like customizing? Use the Custom CSS Generator

← 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 700px wide.
.headerimage {background: url(HTTP://URLHERE.PNG) no-repeat center; height: ###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#ec086b#aaaaaa#a5e025#444444#222222#16afc5#000000

Add a Banner | Replace Colours | Replace Images

( Optional ) Replace Images

Get all the images at Box.net

Add a Banner | Replace Colours | Replace Images

Fruitstyle: Layouts and Winamp Skin Designs by Malionette





layouts, generators

Previous post Next post
Up