Layout 041 : Permafrost: fruitstyle

malionette in fruitstyle

Layout 041 : Permafrost

Feb 13, 2010 16:26

Click for a Live Preview.

( Layout ) #041 : Permafrost
Vancouver 2010 gogo Canada!

( Install ) Step 1 - System

Select Theme

Select any S2 Smooth Sailing layout.

Page Setup

Ad Placement: Vertical
(Ignore if you have a paid account.)
Sidebar: 2 Column (sidebar on left)

← Previous Step | 1 | 2 | 3 | 4 | Next Step →

( Install ) Step 2 - Display

Customize Display

Userinfo Position in Entries: Right
Userinfo Position in Comments: Right

← Previous Step | 1 | 2 | 3 | 4 | Next Step →

( Install ) Step 3 - Stylesheet

Custom CSS

Use layout's stylesheets: No. IMPORTANT!!
Custom Stylesheet: /* S2 SMOOTH SAILING --- 041 Permafrost ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */

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

html {margin: 0; padding: 0;}
body {font-family: lucida grande, arial narrow, arial, sans-serif; font-size: 11px; margin: 0; padding: 0; color: #666666;
background: #ffffff url(http://i45.tinypic.com/2h4l5bq.png);}
font, small {font-size: 11px; font-family: lucida grande, arial narrow, arial ;}

a, a:visited { color: #1bb7d2; padding: 0px; border: 0; text-decoration: none;}
a:hover { color: #8edce4; cursor: help;}

input, textarea, select { background-color: #B0E7EC; font-size: 10px; color: #ffffff; border: 1px dotted #ffffff; margin-top: 5px; }

input:focus, textarea:focus, select:focus { }

.pageblock{ padding: 0; border: 5px solid #ffffff; margin: 0 auto; margin-top: 50px; margin-bottom: 50px; width: 750px; background-color: #666666;}
.pagefooterblock { display: none; }

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

.pageheaderblock {}

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

.header-menu { margin: 0; }

.header-menu a, .header-menu a:visited { color: #ffffff; display: block; padding: 10px;}
.header-menu a:hover {background: #555555;}

.header-menu ul {display: inline; margin: 0 ; padding: 0; text-align: center;}
.header-menu li {display: inline; background-color: #666666; display: block; float: left; border-right: 1px solid #555555; }

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

.bodyblock { margin: 0 auto; background-color: #ffffff; border-left: 140px solid #8edce4; border-right: 140px solid #8edce4; clear: both;}
.bodyheaderblock {display: none;}
.bodynavblock { background-color: transparent; margin-top: 5px; text-align: left;}

.bodynavblock a, .bodynavblock a:visited {color: #666666; background-color: transparent;border: none;text-align: left;}

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

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

.sidebar {position: relative; margin: 0px 0 0 -140px; width: 140px; color: #ffffff;}
.sidebar a {margin: 0; padding: 0 3px 0 3px; color: #ffffff; border-bottom: 1px dotted #ffffff;}
.sidebar a:hover { color: #DDF4F7;}

.sidebar img{ border:0; padding: 0; margin: 0; background-color: transparent;}

.sidebox{display: block; padding: 10px; border-bottom: 1px dotted #ddf4f7;}

.sideboxTitle {font-size: 20px; text-transform: lowercase; font: 26px times new roman; letter-spacing: -1px; color: #ffffff;}
.sideboxContent {padding: 10px 0 10px 0;}

.latestmonth-inactive { padding: 0px; margin: 1px; }
.latestmonth-active { padding: 0px; margin: 0px; }

#tags_sidebox a, .listitem a { display: block; padding: 2px; font-size: 10px; border-bottom: 1px dotted #ffffff;}
#tags_sidebox, .listitem { font-size: 0; }
#tags_sidebox a:hover, .listitem a:hover{ background: #b0e7ec; color: #ffffff; }

.profile-label { display: none; }

/* ------------------------------ ENTRIES ------------------------------ */

.entryHolder { width: 610px; border-top: 1px dotted #ffffff; border-bottom: 1px dotted #8EDCE4; }
.entryHolder a img:hover, .entryHolder a:hover { border-color: #DDF4F7; color: #DDF4F7; }

.entryHeader {padding: 10px 10px 0 0px; width: 470px; }
.entryHeaderDate {color: #B0E7EC; padding-left: 10px; float: left; }
.entryHeaderSubject {display: block; color: #ffffff; padding: 0; text-align: left; clear: both;}
.entryHeaderSubject a { font: 26px times new roman; letter-spacing: -1px; padding: 0; margin: 0;}

.entryUserinfo { width: 140px; text-align: center; }
.entryUserinfo img { border: 5px solid #ffffff; }
.entryUserinfo a {color: #ffffff; }

.entryText {padding: 10px; width: 450px; }
.entryText img {max-width: 450px; }

.entryMetadata ul {padding: 0; margin: 0; list-style: none; width: 470px; }
.entryMetadata li { padding: 2px 10px 2px 10px; border-top: 1px dotted #DDF4F7; }
.entryMetadata-label {padding-right: 5px;}

.entryLinkbar ul {background: #DDF4F7; width: 470px; margin: 0; padding: 0; list-style: none; border-top: 1px dotted #8edce4; }
.entryLinkbar li {display: inline; }
.entryLinkbar li a {padding: 8px 10px 8px 10px; display: inline-block; color: #666666; border-right: 1px solid #ffffff; }
.entryLinkbar li a:hover { background: #ffffff; border-color: #ffffff; color: #8EDCE4; }

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

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

.commentHolder {border-top: 1px dotted #ffffff; border-bottom: 1px dotted #8EDCE4; border-left: 1px solid #B0E7EC; }

.commentHeader, .commentHeaderScreened { margin-right: 140px; padding: 10px; }
.commentHeaderScreened {background: #B0E7EC;}

.commentText {padding: 10px;}

.commentUserinfo {width: 140px; text-align: center; }
.commentUserinfo { width: 140px; text-align: center; color: #DDF4F7; font-size: 10px; }
.commentUserinfo img { border: 5px solid #ffffff; }
.commentUserinfo a {color: #ffffff; font-size: 11px; }

.commentLinkbar ul {padding: 0; margin: 0; list-style: none; border-top: 1px dotted #8EDCE4; }
.commentLinkbar li {display: inline; padding-left: 4px; float: left; }
.commentLinkbar li a {display: block; padding: 0px 4px 3px 0px; }

.bodynavblock {width: 470px; background: #DDF4F7; }

/* ------------------------------ REPLY ------------------------------ */

#qrform table , #postform table {border: 0 !important; width: 470px; }
#postform table textarea {width: 400px; }

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

#footer-menu a, .bodynavblock a:visited { display: inline-block; padding: 10px; border-right: 1px solid #8EDCE4; }
#footer-menu a:hover { background: #8EDCE4; color: #ffffff; }

#footer-menu ul { margin: 0; padding: 0; list-style: none; }
#footer-menu li {display: inline; }
#footer-menu {background: #B0E7EC; margin: 0; padding: 0; width: 470px; }

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

.month { width: 470px; text-align: center;}

.daytitles {background-color: #DDF4F7; padding: 10px; text-align: center; }

.entryHeader {text-align: center;}
.entryHeader a {font: 26px times new roman; }
.day-date {text-align: right;}

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

.tagstable td { font-size: 10px; padding: 0; margin:0;}
.tagstable { text-transform: lowercase; letter-spacing: 1px; width: 400px; padding: 0; margin: 0; }
.tagstable td a{display: block; padding: 2px 0px 2px 0px; border-bottom: 1px dotted #ffffff; margin: 0 5px 0 0;}
.tagstable td a:hover{ border-left: 3px solid #ffffff; padding: 2px 0px 2px 5px;}

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

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

#lj_controlstrip {border-bottom: 5px solid #ffffff; }
#lj_controlstrip td {background: #666666; border-right: 1px solid #555555; color: #ffffff; }
#lj_controlstrip td a {color: #8EDCE4; text-decoration: none;}
#lj_controlstrip td a:hover { text-decoration: none; color: #DDF4F7; }

div.ContextualPopup div.Inner {border: 0; background: transparent !important; font: 10px lucida grande !important; }
div.ContextualPopup div.Userpic {margin-right: -30px; padding: 10px; background: #ffffff; }
div.ContextualPopup div.Content { background: #8EDCE4; padding: 5px; border: 5px solid #ffffff; }
div.ContextualPopup div.Relation {background: #555555; color: #ffffff; padding: 5px; }
div.ContextualPopup div.Inner div.Content a {color: #ffffff !important; text-decoration: none !important;font-weight: lighter !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: #DDF4F7 !important;}

.ljuser img{margin: 0; padding: 0; border: 0; background-color: transparent;}
img[src*="pencil.gif"], 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/qz3tkz.gif) no-repeat; border: 0; }

.sidebar .ljuser img, .entryUserinfo .ljuser img{background-image: url(http://i47.tinypic.com/b4yiyb.gif)}

img[src*="pencil.gif"], img[src*="btn_edit.gif"]
{ padding: 7px 0 0 7px; background-position: -24px -48px;}
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;}

← 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 750px wide.
.pageheaderblock {background: url(HTTP://URLHERE.PNG) no-repeat top center; height: @@@px; }
.header-menu {padding-top: ###px;}

Replace HTTP://URLHERE.PNG with your banner url
Replace ### with your banner height (pixels)
Replace @@@ with the HEIGHT+33px.
Add the code to the bottom of the Custom Stylesheet box

Add a Banner | Replace Colours | Replace Images

( Optional ) Replace Colours

#ffffff#DDF4F7#B0E7EC#8edce4#666666#555555#1bb7d2

Add a Banner | Replace Colours | Replace Images

( Optional ) Replace Images

Get all the images at Box.net

Pattern used is by Crazy-Alice

Add a Banner | Replace Colours | Replace Images

Fruitstyle: Layouts and Winamp Skin Designs by Malionette

layouts