Layout 037 : Sky Mod (mod. Weathers)

Dec 04, 2009 19:30





The first layout request is finished! I hope you guys like it.



Click for a Live Preview.



( Layout ) #037 : Sky Mod (mod. Weathers)
Made on request. (:

( 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

← 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 --- 037 Sky Mod ~ Weathers ---
    Wingweaver22 @ Fruitstyle.livejournal.com
    Do not remove this note. */

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

    /* IMAGE skyrepbg.jpg */
    html {background: #000000 url(http://i48.tinypic.com/2lwox28.jpg) no-repeat fixed bottom center;}

    /* IMAGE skybg.jpg */
    body {background: transparent url(http://i48.tinypic.com/dwugro.jpg) repeat-y center fixed; font: 11px georgia; color: #ffffff; padding: 0; margin: 0; }

    a {color: #244b6e; text-decoration: none;}
    a:hover {color: #000000; cursor: crosshair;}

    blockquote {border: 1px dotted #ffffff; padding: 10px;}

    select, input, textarea {background: #244B6E; color: #ffffff; border: 1px dotted #9fb6c9; font: 11px georgia;}
    #lj_controlstrip select, #lj_controlstrip input, #qrform select, #qrform input, #qrform textarea
    {background: #244B6E !important; border: 1px dotted #9fb6c9; font: 11px georgia; color: #ffffff !important;}

    .header-menu a, .entryHeader a, .entryLinkbar a, .sidebar a , .entryUserinfo a, .commentLinkbar a, .commentUserinfo a
    {color: #ffffff;}
    .header-menu a:hover, .entryHeader a:hover, .entryLinkbar a:hover, .sidebar a:hover, .entryUserinfo a:hover, .commentLinkbar a:hover,
    .commentUserinfo a:hover {color: #9fb6c9; }

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

    .pageheaderblock { width: 900px; margin: 0 auto; height: 59px; overflow: hidden;
    background: url(http://i46.tinypic.com/icv0jq.jpg) no-repeat bottom right;}
    /* IMAGE topbg.gif */

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

    .header-menu { padding: 10px 0 0 0; }
    .header-menu ul {padding: 10px 0 0 0; margin: 0 10px 0 10px; }
    .header-menu li {display: inline; }
    .header-menu li a { border-left: 1px dotted #9fb6c9; padding: 0 7px 0 7px; }

    .header-title { margin: 0; letter-spacing: -1px; font: 30px georgia; color: #ffffff; float: left; padding: 10px 10px 0 10px; text-shadow: 1px 1px 0px #244b6e; }

    .header-menu li a[href*="?skip"] {display: none; }

    #lj_controlstrip td{background: #244B6E; font: 11px georgia !important; border-right: 1px dotted #9fb6c9; border-bottom: 1px dotted #9fb6c9; }
    #lj_controlstrip td a {color: #ffffff; text-decoration: none; font: 11px georgia !important;}
    #lj_controlstrip td a:hover {color: #6e9ac1; }
    #lj_controlstrip_statustext {color: #9fb6c9; }

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

    .bodyblock { width: 900px; margin: auto; }
    .bodyheaderblock {display: none;}
    .bodynavblock { width: 600px; 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: 157px; padding: 20px 10px 10px 0px; }
    .sidebox { margin-bottom: 20px; background: url(http://i46.tinypic.com/t98nqw.jpg) no-repeat bottom center; padding: 0 0 7px 0;}
    /* IMAGE sidetrbr.gif */

    .sideboxTitle {text-align: center; border-bottom: 1px dotted #9fb6c9; padding: 7px 0 9px 0; text-transform: uppercase;
    background: url(http://i46.tinypic.com/t98nqw.jpg) no-repeat top center; }
    /* IMAGE sidetrbr.gif */

    /* IMAGE sidebarbg.gif */
    .sideboxContent {background: url(http://i49.tinypic.com/160toh0.jpg) repeat-y; padding: 10px; }

    #latestmonth td{ padding: 2px; border-bottom: 1px dotted #9fb6c9; }
    .listitem a {border-bottom: 1px dotted #9fb6c9; display: block; }

    #search #SearchType {margin-bottom: 9px; }
    #profile {text-align: center;}

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

    .entryHolder { padding: 20px 0 0 0; width: 600px;}

    /* IMAGE userpic.gif */
    .entryUserinfo, .commentUserinfo {font-weight: normal; margin: -38px -130px 0 11px; position: absolute; }
    .entryUserinfo-usericon img, .profile-userpic, .commentUserinfo img { padding: 10px; background: url(http://i48.tinypic.com/2cypbmu.jpg); border: 0 !important;}
    .entryUserinfo-usericon img:hover, .profile-userpic:hover, .commentUserinfo img:hover {opacity: .7;}
    .entryUserinfo-username, .commentUserinfo-username {text-align: center;}

    /* IMAGE entrybg.gif */
    .entryText { background: url(http://i46.tinypic.com/214p74.jpg) repeat-y; padding: 10px; width: 580px; min-height: 62px; }
    .entryText img { border: 1px dotted #9fb6c9; padding: 4px; margin: 3px; }
    .entryText a img:hover {border-color: #6e9ac1;}

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

    /* IMAGE trbr.gif */
    .entryHeader { background: url(http://i47.tinypic.com/2lt0tc1.jpg) no-repeat top center; height: 40px; }
    .entryHeaderSubject {font-size: 0px; float: left; width: 420px; overflow: auto; height: 30px; padding: 10px 0 0 10px; text-shadow: 1px 1px 0px #244b6e; }
    .entryHeaderDate {float: right; border-left: 1px dotted #9fb6c9; margin-top: 13px !important; padding: 0 7px 0 7px; margin-top: 4px; }
    .entryHeader img {margin: 0 10px 8px 0 !important;}

    .subj-link {font: 18px georgia; color: #9fb6c9; }
    .subj-link:hover {color: #6e9ac1; }
    .subj-link:before {content: "& ";}

    .entryHeaderSubject .ljuser {font: 18px georgia; }

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

    /* IMAGE entrybg.jpg */
    .entryMetadata {background: url(http://i46.tinypic.com/214p74.jpg) repeat-y;}
    .entryMetadata ul { margin: 0; list-style: none; border-top: 1px dotted #9fb6c9; padding: 0; }
    .entryMetadata li {padding: 2px 0 2px 10px; margin: 0; border-bottom: 1px dotted #9fb6c9;}
    .entryMetadata-label { font: 10px georgia; text-transform: uppercase; margin-right: 9px; }

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

    /* IMAGE trbr.gif */
    .entryLinkbar { background: url(http://i47.tinypic.com/2lt0tc1.jpg) no-repeat bottom center; width: 600px; height: 40px; }
    .entryLinkbar ul { margin: 0; padding: 12px 0 0 0; list-style: none; }
    .entryLinkbar li {display: inline; }
    .entryLinkbar li a { border-right: 1px dotted #9fb6c9; padding: 0 5px 0 5px;}

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

    #footer-menu {margin: 0; padding: 10px; width: 580px;}
    #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 dotted #9fb6c9; }

    .pagefooterblock {display: none;}

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

    /* IMAGE trbr.gif */
    .commentHolder {background: url(http://i47.tinypic.com/2lt0tc1.jpg) no-repeat top center; width: 600px; margin: 20px 0 0 0;}
    .commentHeader {padding: 10px; }
    .commentHeaderScreened {padding: 10px; color: #000000; }

    /* IMAGE entrybg.jpg */
    .commentText {margin: -10px 0 0 0;}
    .commentHolder td .commentText {background: url(http://i46.tinypic.com/214p74.jpg) repeat-y; padding: 10px; margin: 0; min-height: 90px; width: 602px;}

    /* IMAGE trbr.gif */
    .commentLinkbar { text-transform: uppercase; font: 10px georgia;
    background: url(http://i47.tinypic.com/2lt0tc1.jpg) no-repeat bottom center; width: 600px;}
    .commentLinkbar ul { margin: 0; padding: 10px; }
    .commentLinkbar li { display: inline; padding: 0 2px 0 2px; }

    #qrform table { border: 0 !important; border-spacing: 0 !important;}

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

    #postform, #qrform {margin: 10px 0 0 0;}
    #postform table {border-spacing: 0;}
    #postform td, #qrform td { text-transform: uppercase; font: 9px georgia; letter-spacing: 2px; font-weight: bold;}
    #postform td + td , #qrform td + td { letter-spacing: 0; font-size: 12px; text-transform: lowercase; font-weight: normal;}

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

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

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

    .entryHeader > a { font-weight: bold; display: block; width: 580px; padding: 10px; border-bottom: 1px dotted #9fb6c9; }

    /* IMAGE trbr.gif */
    .month { width: 100%; background: url(http://i47.tinypic.com/2lt0tc1.jpg) no-repeat bottom right; padding: 0 0 9px 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;}

    /* IMAGE entrybg.jpg */
    .month tr td {border-bottom: 1px dotted #ffffff; padding: 0 10px 0 10px; background: url(http://i46.tinypic.com/214p74.jpg);}
    .month tr td + td {border-left: 1px dotted #ffffff;}

    .daysubjects {margin: 5px 0 0 0; background: #ffffff; padding: 10px;}

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

    .tagstable { }
    .tagstable td{ border-top: 1px dotted #9fb6c9; padding: 9px 7px 6px 7px; }

    .taglist {padding: 0; }
    .taglist li { padding: 9px 7px 6px 7px; list-style: none;}
    .taglist li + li { border-top: 1px dotted #9fb6c9;}

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

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

    div.ContextualPopup div.Userpic { margin: 0 -72px 0 0;}
    div.ContextualPopup div.Userpic a img { -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 10px solid #244b6e; }

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

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

    div.ContextualPopup div.Content, div.ljcmtmanage {-moz-border-radius: 10px; -webkit-border-radius: 10px; border: 10px solid #244b6e;
    background: #244b6e; width: 150px; text-transform: uppercase; color: #ffffff !important;}

    .bodyblock > table > tbody > tr > td + td + td {display: none;}
    .bodyblock > div {display: none;}

    .ljuser img {margin: 0; padding: 0;}
    .ljuser img:hover {opacity: .7;}
    .entryUserinfo .ljuser b {font-weight: normal; margin-left: 3px; text-transform: uppercase; font-size: 9px; }

    img[src*="anonymous.gif"] , img[src*="openid-profile.gif"], img[src*="none.gif"] , img[src*="help.gif"] , img[src*="userinfo.gif"] , img[src*="community.gif"],
    img[src*="newsinfo.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"] , img[src*="syndicated.gif"] ,img[src*="icon_protected.gif"] ,
    img[src*="icon_private.gif"] , img[src*="icon_groups.gif"]
    {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
    background: transparent url(http://i47.tinypic.com/b4yiyb.jpg) no-repeat; }
    /* IMAGE whitiy.gif */

    img[src*="anonymous.gif"] { padding: 8px 0 0 6px; background-position: -24px -72px;}
    img[src*="openid-profile.gif"] { padding: 6px 0 0 7px; background-position: -24px -96px;}
    img[src*="none.gif"] { padding: 6px 0 0 7px; background-position: -48px 0px;}
    img[src*="help.gif"] { padding: 8px 0 0 6px; background-position: -48px -24px;}
    img[src*="userinfo.gif"] { padding: 8px 0 0 6px; background-position: -108px 0px;}
    img[src*="community.gif"], img[src*="newsinfo.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"]
    { padding: 8px 0 0 9px; background-position: -108px -24px;}
    img[src*="syndicated.gif"] { padding: 6px 0 0 6px; background-position: -108px -48px;}
    img[src*="icon_protected.gif"] { padding: 8px 0 0 6px; background-position: -108px -72px;}
    img[src*="icon_private.gif"] { padding: 8px 0 0 6px; background-position: -108px -96px;}
    img[src*="icon_groups.gif"] { padding: 8px 0 0 10px; background-position: -132px 0px;}

    ::-moz-selection { background: #6e9ac1; color: #ffffff;}
    ::selection { background: #6e9ac1; color: #ffffff;}
    code::-moz-selection { background: #6e9ac1; color: #ffffff;}
    code::selection { background: #6e9ac1; 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 ) Replace Colours

#ffffff#9fb6c9#6e9ac1#244b6e#000000
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





layouts

Previous post Next post
Up