Post Friends My journal
malionette in fruitstyle

layout 027 : Voixy

May 02, 2009 19:40




Click for a Live Preview.


( Layout ) #027 : Voixy
Opacity ♥

( 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. Userinfo Position in Comments: Right

Bio
  1. Define a WebPage link.

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

    /* ------------------------------ COLOUR SETTINGS ------------------------------ */

    .entryText a img { border-color: #a4cacb;}
    a, a:visited, a:active, .commentLinkbar a { color: #0a81b0;}
    .header-menu a, .entryLinkbar a, body, #tags_sidebox a:hover, .listitem a:hover, .commentHeaderScreened { background-color: #0a81b0;}
    .bodyblock { background: #e4ebf0;}

    div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { color: #0a81b0 !important;}
    div.ContextualPopup div.Inner a:hover { color: #666666 !important; }

    .entryHeaderSubject, blockquote, textarea, input, textarea, select, .entryHeader > a, .commentHeader { background: #eef3f7;}
    .entryHeader, .day-count a:hover, .commentHolder { background: #f8fafc; }

    .sidebox {background: #badbe8; }
    .sidebox + .sidebox {background: #c3deea;}
    .sidebox + .sidebox + .sidebox {background: #cde2ec;}
    .sidebox + .sidebox + .sidebox + .sidebox {background: #d6e6ee;}
    .sidebox + .sidebox + .sidebox + .sidebox + .sidebox {background: #dde8ef;}
    .sidebox + .sidebox + .sidebox + .sidebox + .sidebox + .sidebox {background: #e1eaf0;}

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

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

    html { background: url(http://img126.imageshack.us/img126/7008/208cb7.gif) repeat;}

    body {font: 12px georgia; color: #666666; margin: 0; padding: 0 !important; top: 0 !important;
    background: url(http://img23.imageshack.us/img23/6619/gradientblue.png) repeat-x; }

    a, a:visited, a:active{ border: 0; text-decoration: none;}
    a:hover { color: #666666; }

    .ljuser a { font: 9px georgia; text-transform: uppercase;}

    input, select {border: 1px solid #dddddd; padding: 1px; font: 9px georgia; color: #666666;}
    select {text-transform: uppercase;}
    blockquote, textarea { padding: 4px; border: 1px solid #dddddd; font: 10px georgia; min-width: 200px; min-height: 55px; color: #666666;}
    small {font: 9px georgia; }

    li {opacity: 1; filter:alpha(opacity=100); width:100%;}
    li + li {opacity: .9; filter:alpha(opacity=90); width:100%;}
    li + li + li {opacity: .8; filter:alpha(opacity=80); width:100%;}
    li + li + li + li {opacity: .7; filter:alpha(opacity=70); width:100%;}
    li + li + li + li + li {opacity: .6; filter:alpha(opacity=60); width:100%;}
    li + li + li + li + li + li {opacity: .5; filter:alpha(opacity=50); width:100%;}
    li + li + li + li + li + li + li {opacity: .4; filter:alpha(opacity=40); width:100%;}
    li + li + li + li + li + li + li + li {opacity: .3; filter:alpha(opacity=30); width:100%;}

    .pageblock { width: 864px; margin: 0 auto; border-right: 1px solid #dddddd;}
    .pagefooterblock { display: none; }

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

    .pageheaderblock { }

    .header-title, .header-subtitle, .header-icon { display: none;}

    .header-menu {position: absolute; width: 180px; margin: 0 0 0 11px; background: #b6d9e7; height: 247px;}
    .header-menu ul {padding: 0; margin: 0; background: #ffffff;}
    .header-menu li {list-style: none; font: 9px georgia; text-transform: uppercase; letter-spacing: 2px; line-height: 10px; text-align: right; border-bottom: 1px solid #ffffff;}
    .header-menu a { color: #ffffff; display: block; padding: 10px;}
    .header-menu a:hover {background: #666666; }

    .header-menu li + li + li + li + li + li + li + li { border-bottom: 0;}

    /* ------------------------------ BODY ------------------------------ */

    .bodyblock { border-left: 1px solid #dddddd; }
    .bodyheaderblock {display: none;}
    .bodynavblock { background-color: transparent; margin-top: 5px; text-align: center; text-transform: uppercase;}

    .bodynavblock a, .bodynavblock a:visited { background-color: transparent; border: none;}

    .body-title { display: none; }
    .body-midtitle { display: none; }

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

    .sidebar { width: 180px; padding: 247px 0 0 0; margin: 0 10px 0 10px; text-align: right; }

    .sideboxTitle { font: 9px georgia; text-transform: uppercase; letter-spacing: 3px; line-height: 10px; color: #ffffff;
    border-bottom: 1px solid #ffffff; padding:10px; border-top: 1px solid #ffffff;}

    .sideboxContent{ padding: 10px;}

    #profile {text-align: center;}
    #profile .profile-userpic { border: 1px solid #cccccc; padding: 4px; background: #f5f5f5;}
    #profile div + div {padding-top: 5px;}

    #summary {padding: 0; font: 0px georgia; }
    #summary div {padding: 5px; }
    #summary div + div {border-top: 1px solid #ffffff;}
    .summaryList > a {font: 9px georgia; display: inline-table; padding: 0 3px 0 0;}
    .summaryList > a + a {border-left: 1px solid #666666; padding: 0 3px 0 5px;}

    #latestmonth {padding: 0;}
    #latestmonth table {width: 100%;}

    #latestmonth tr td { padding: 8px 13px 8px 8px; font-size: 12px; text-align: right; }
    #latestmonth tr + tr td{ background: transparent; border-top: 1px solid #ffffff; padding: 3px; font-size: 9px; text-align: center;}
    #latestmonth td + td {border-left: 1px solid #ffffff; }

    #tags_sidebox { font: 0 arial; }
    #tags_sidebox a, .listitem a{ display: block; font: 9px georgia; text-transform: uppercase; letter-spacing: 3px; border-bottom: 1px solid #ffffff; padding: 0 5px 0 0;}
    #tags_sidebox a:hover, .listitem a:hover { color: #ffffff; padding: 5px; font-size: 10px; letter-spacing: 1px;}

    #search label {font: 9px georgia; text-transform: uppercase; padding: 0 2px 0 0;}

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

    .entryHolder { padding: 0; margin: 0 !important; background-color: #ffffff; text-align: justify; width: 650px;
    border-right: 1px solid #dddddd; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd;}

    .entryText { min-height: 130px; padding: 10px; border-right: 1px solid #dddddd; width: 501px; border-top: 1px solid #dddddd; }
    .entryText img { border: 1px solid #cccccc; padding: 4px; margin: 3px; }
    .entryText a img:hover {border-color: #666666;}

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

    .entryUserinfo {font-weight: normal; }
    .entryUserinfo-usericon { padding: 10px; background-color:#f5f5f5; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd;}
    .entryUserinfo-usericon img { padding: 3px; border: 1px solid #cccccc; background-color: #ffffff;}

    .entryUserinfo-username { padding: 10px 0 0 10px; }

    .entryHeader { font: 9px georgia; text-transform: uppercase; letter-spacing: 3px; line-height: 10px; height: 61px; }
    .entryHeader img {border:0; margin: 0; padding: 0; background-color: transparent;}

    .entryHeaderSubject {position: absolute !important; border-bottom: 1px solid #dddddd; width: 630px; padding: 10px; height: 10px; font-weight: bold;}
    .entryHeaderSubject:first-letter {color: #ffffff;}
    .entryHeaderDate{ text-transform: uppercase; position: absolute; margin: 41px 0 0 20px;}

    /* ------------------------------ META ------------------------------ */

    .entryMetadata { border-right: 1px solid #dddddd; width: 521px; margin: 0;}
    .entryMetadata li, .entryMetadata ul {padding: 0; margin: 0; }
    .entryMetadata li { list-style: none; padding: 2px 2px 2px 10px; border-top: 1px solid #dddddd;}

    .entryMetadata-label {text-transform: uppercase; font: 9px georgia; margin: 0 10px 0 0; }

    .entryMetadata img { position: absolute; }

    /* ------------------------------ COMMENT BAR ------------------------------ */

    .entryLinkbar { text-transform: uppercase; font: 9px georgia; border-top: 1px solid #dddddd; border-right: 1px solid #dddddd; width: 521px; height: 27px; padding: 10px 0 0 0;}
    .entryLinkbar ul { margin: 0 0 0 10px; padding: 0; }
    .entryLinkbar li { display: inline; }

    .entryLinkbar a { display: block; float: left; margin: 0 10px 0 0 ; padding: 2px 5px 2px 5px; color: #ffffff; }
    .entryLinkbar a:hover {background-color: #666666;}

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

    #footer-menu {margin: 0; padding: 10px; background: #ffffff; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; width: 630px;}
    #footer-menu ul{ margin: 0; padding: 0; font-size: 10px; }
    #footer-menu li {display: inline; }
    #footer-menu a {margin: 0 5px 0 5px; }
    #footer-menu li + li {border-left: 1px solid #666666; }

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

    .commentHolder {border: 1px solid #dddddd; margin: 10px 0 0 0;}
    .commentHolder tr td + td {width: 130px; border-left: 1px solid #dddddd; background: #f5f5f5; padding: 0 0 10px 0;}

    .commentText {padding: 10px;}

    #qrform table { border: 0 !important; border-spacing: 0 !important;}
    #qrform td { border-right: 1px solid #dddddd; border-top: 1px solid #dddddd !important; padding: 5px; text-transform: uppercase; font: 9px georgia; letter-spacing: 2px;}
    #qrform td + td { border-right: 0; letter-spacing: 0; font-size: 12px; text-transform: lowercase;}
    .textbox {width: 80% !important; font-size: 12px;}

    #prop_picture_keyword { margin: 0 0 0 10px;}
    #submitpost, #submitmoreoptsm, #postform input { letter-spacing: 1px;}

    #postform {background: #ffffff; border: 1px solid #dddddd; border-top: 0;}
    #postform table {border-spacing: 0;}
    #postform td { border-right: 1px solid #dddddd; text-transform: uppercase; font: 9px georgia; letter-spacing: 2px; font-weight: bold;}
    #postform td + td { border-right: 0; letter-spacing: 0; font-size: 12px; text-transform: lowercase; font-weight: normal;}
    #postform tr + tr td { border-top: 1px solid #dddddd; padding: 5px; }

    #postform #userpics label{ margin: 0 3px 0 3px;}

    #postform table table {width: 100%; }
    #postform table table td {padding: 3px;}

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

    .commentHeader, .commentHeaderScreened { font: 9px georgia; text-transform: uppercase; letter-spacing: 3px; line-height: 10px; padding: 10px; border-bottom: 1px solid #dddddd;}
    .commentHeaderScreened {color: #ffffff;}

    .commentUserinfo {font-weight: normal; text-align: center; font-size: 9px; width: 130px; }
    .commentUserinfo-usericon { padding: 10px; }
    .commentUserinfo-usericon img { padding: 3px; border: 1px solid #cccccc; background-color: #ffffff; width: 50px; height: 50px;}

    /* ------------------------------ COMMENT COMMENT BAR ------------------------------ */

    .commentLinkbar { text-transform: uppercase; font: 9px georgia; }
    .commentLinkbar ul { margin: 0; padding: 0; background: #ffffff; padding: 10px; border-top: 1px solid #dddddd;}
    .commentLinkbar li { display: inline; padding: 0 2px 0 2px; }

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

    .entryHeader > a { font-weight: bold; display: block; width: 630px; padding: 10px;}

    .month { width: 100%; margin: -31px 0 0 0; }
    .daytitles {height: 31px; font: 9px georgia; text-transform: uppercase; text-align: center; }
    .day-date {text-align: right; padding: 0 2px 0 0;}
    .day-count a {display: block; text-align: center;}

    .month tr td {border-top: 1px solid #dddddd;}
    .month tr td + td {border-left: 1px solid #dddddd;}

    .daysubjects {margin: -31px 0 0 0; padding: 8px;}

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

    .tagstable {margin: -11px 0 0 0; }
    .tagstable td{ border-top: 1px solid #dddddd; padding: 9px 7px 6px 7px; }

    .taglist {padding: 0; margin: -10px 0 0 0;}
    .taglist li { padding: 9px 7px 6px 7px; list-style: none;}
    .taglist li + li { border-top: 1px solid #dddddd;}

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

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

    div.ContextualPopup div.Userpic { border: 1px solid #dddddd; background: #f5f5f5; padding: 10px; margin: 0 -82px 0 0;}
    div.ContextualPopup div.Userpic a img {border: 1px solid #cccccc; background: #ffffff; padding: 4px;}

    div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-size: 9px; font-weight: normal;}

    div.ContextualPopup div.Content {border: 1px solid #dddddd; background: #ffffff; width: 180px; text-transform: uppercase;}

    #lj_controlstrip {display: none; }

    a[href*="entry.bml"], a[href*="tellafriend.bml"], a[href*="content_flag.bml"], a[href*="vgift.bml"]{display:none; padding: 0 !important;}

    * html span.ljuser{ background-image: url(img/useryb4.png) !important no-repeat left middle; padding: 10px 8px 0px 0px !important;}

    * html span.ljuser img{ visibility: hidden; }

    .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://i38.tinypic.com/2r6crih.png) no-repeat;}

    .entryText .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { padding: 7px 5px 2px 4px !important;}
    .entryText .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { padding: 6px 5px 0 2px !important;}

    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;}

← 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 652px wide and 248px high.
.bodyblock > table > tbody > tr > td + td {padding-top: ###px; background: url(HTTP://URLHERE.PNG) no-repeat !important;}
  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#f8fafc#f5f5f5#eef3f7#e4ebf0#e1eaf0#dde8ef#dddddd#d6e6ee#cde2ec#cccccc#c3deea#badbe8#b6d9e7#a4cacb#666666#208cb7#0a81b0
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 56
Previous post Next post
Up
Homepage Read journal... Full version Help Русская версия
© 1999-2025 LiveJournal, Inc.