Layout 043 : Rainbow and Ash
Click for a Live Preview. | Generator
( Layout ) #043 : Rainbow and Ash
Got new shoelaces and they are snazzy! The navigation is like the shoelaces... or I could just be crazy. O:
( Install ) Step 1 - System
Select Theme
- Select any S2 Minimalism - Penguins layout.
← Previous Step | 1 | 2 | 3 | Next Step →
( Install ) Step 2 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 MINIMALISM --- 043 Rainbow and Ash ---
Wingweaver22 @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ----------------------------- PAGE ----------------------------- */
body {background: #f5f5f5; font: 10px arial; color: #666666; border-top: 15px solid #ffffff; padding: 0; margin: 0;}
#page {width: 650px; margin: 0 auto; margin-top: 50px; }
a {color: #000000; text-decoration: none;}
a:hover { color: #aaaaaa;}
/* ----------------------------- DEFAULTS ----------------------------- */
blockquote {padding: 10px; border: 1px solid #dddddd;}
b {font-family: tahoma;}
.hr {display: none;}
.ljuser b {font-weight: lighter; font-family: arial; }
.entry-content a img {border: 1px solid #aaaaaa; padding: 3px; }
.entry-content a img:hover {border-color: #dddddd ;}
.ljuser a img {border: 0; padding: 0 0 1px 8px; }
.imagepreview {text-align: center;}
/* ----------------------------- HEADER ----------------------------- */
.header .u-wrap, .header h3, .header .nav-sub, .item-rss {display: none;}
.header h2 {font: bold 30px arial; text-transform: uppercase; color: #dddddd; letter-spacing: -1px; margin: 0; padding: 0; }
.header .nav {margin: 5px 0 0 0; padding: 0; list-style: none; text-transform: uppercase; font-size: 10px; }
.header .nav li a {display: block; color: #666666; padding: 0 0 0 2px; margin-top: 2px; letter-spacing: 2px; }
.header .nav li a:hover { color: #000000; }
.item-recent {background: #8dd6db; } .item-friends {background: #fb8e8e; } .item-archive {background: #f4e57d; } .item-profile {background: #baff63; }
/* ----------------------------- SIDEBAR ----------------------------- */
.sidebar dt, .sidebar dd, .sidebar dl {padding: 0; margin: 0;}
.sidebar-cal, .sidebar-summary, .sidebar-tags, .sidebar-powered, .sidebar dt {display: none;}
.sidebar {height: 60px; overflow: hidden; padding: 10px; margin: 10px 0 10px 0; background: #ffffff; border-bottom: 10px solid #ffffff; }
.sidebar-links { float: left; width: 110px; }
.sidebar-links dd a {display: block; border-bottom: 1px solid #dddddd; color: #666666; padding: 0 0 0 2px; }
.sidebar-links dd a:hover { color: #aaaaaa;} .sidebar dd > div {display: none;}
.sidebar-custom { float: right; width: 510px; }
/* ----------------------------- CONTENT ----------------------------- */
.content {position: absolute; margin-top: 100px; }
.entry-wrap { border-right: 150px solid #f5f5f5;}.entry {background: #ffffff; margin: 10px 0 0 0; width: 650px; border-bottom: 20px solid #ffffff; }
.entry-title {background: #dddddd; padding: 5px 10px 5px 10px; color: #000000; font-size: 16px; }
.entry-text {padding: 10px; margin: 0; border-bottom: 1px solid #dddddd; }
.entry-content {width: 510px; margin-left: 120px; min-height: 140px; }
.entry-content a {border-bottom: 1px solid #dddddd;}
/* ----------------------------- META AND USERPIC ----------------------------- */
.vcard {position: relative; float: left;}
.vcard dd, .vcard dt, .vcard dl {padding: 0; margin: 0;}
.username {font-size: 0px; color: transparent;}
.username .ljuser {font-size: 9px; text-transform: uppercase; clear: both; float: left; margin: 0 0 0 5px; }
.username .ljuser img { margin-top: 3px; }
.vcard img {border: 1px solid #dddddd; padding: 3px; opacity: .7; }
.vcard img:hover {opacity: 1;}
.entry-date {display: none;}
.metadata dt {float: left; color: #aaaaaa; padding: 0 5px 0 0; }
.metadata {border-bottom: 1px solid #dddddd; padding: 0 0 5px 0; margin: 0 0 5px 0; }
/* ----------------------------- ENTRY MENU AND ENTRY TAGS ----------------------------- */
.entrymenu ul, .entrysubmenu ul {margin: 0; padding: 0; }
.entrymenu {margin: 0; padding: 0; clear: both; background: #ffffff; }
.entrysubmenu li, .entrymenu li {float: left; list-style: none; margin-top: 3px; }
.entrysubmenu li a {color: #666666; padding-right: 10px; }
.entrymenu li a {padding-left: 10px;}
.entrysubmenu {float: right; margin: 0; padding: 0; }
.entrysubmenu li a:hover { color: #aaaaaa;}
/* ----------------------------- FOOTER ----------------------------- */
.page-nav {padding: 10px 0 0 0; margin: 0; list-style: none; width: 650px; }
.page-nav .prev {float: left; padding-bottom: 10px;} .page-nav .next {float: right; padding-bottom: 10px;}
/* ----------------------------- ARCHIVE ----------------------------- */
.view-archive .entry-text ul {padding: 0; margin: 0; list-style: none; text-align: center; }
.view-archive .entry-text li {display: inline; }
.view-archive .entry-text .active {border-bottom: 1px solid #dddddd; }
.calendar-wrap table {width: 50%; margin: 0 auto;}
.calendar-wrap caption { text-transform: uppercase; padding: 10px; }
.calendar-wrap caption a {color: #aaaaaa; }
.calendar-wrap td a {font-size: 14px; font-weight: bold; display: block;}
/* ----------------------------- COMMENTS PAGE & REPLY ----------------------------- */
.entry-linkbar a {padding: 10px; }
.entry-linkbar a:hover { background: #f5f5f5; }
.screened {background: #f5f5f5; }
.comment-wrap {margin: 0 0 10px 0; border: 1px solid #dddddd; padding: 10px;}
.comment-head-in p + p a + a, .comment-head-in input + a {padding: 0 10px 0 10px; border-bottom: 0; }
.comment-head-in p + p {margin: 0 0 2px 0; font-size: 10px;}
.comment-upic img {float: right; border: 1px solid #dddddd; padding: 3px; background: #ffffff; }
.comment-text { padding: 10px 0 10px 0; border-top: 1px solid #dddddd; margin: 10px 0 0 0;}
.comment-menu { border-top: 1px solid #dddddd; padding-top: 5px; color: #aaaaaa; font-size: 10px;}
.comments-links {text-align: center; margin-bottom: 20px; font-weight: bold; }
#subjectIconList table, #qrform table {border: 0 !important;}
.ljcmtmanage { background: #ffffff !important; padding: 10px; border: 1px solid #dddddd !important; }
.ljcmtmanage span {font-size: 10px !important;}
#postform table, #qrform table { border: 1px solid #dddddd; padding: 10px; margin: 0 auto; }
#postform textarea, #postform input, #posform select, #qrform textarea, #qrform input, #qrform select, #lj_controlstrip input, #lj_controlstrip select,
select, input {border: 1px solid #dddddd;}
#postform textarea {width: 550px;}
/* ----------------------------- EXTRA ----------------------------- */
#lj_controlstrip td {background: #ffffff; border-right: 1px solid #dddddd; font: 12px arial; color: #666666; }
#lj_controlstrip span {color: #666666; }
#lj_controlstrip td a {color: #000000; border-bottom: 1px solid #dddddd; }
/* ----------------------------- IMAGES ----------------------------- */
img[src*="btn_del.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"] , img[src*="btn_freeze.gif"] , img[src*="btn_unfreeze.gif"] ,
img[src*="btn_track.gif"] , img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="pencil.gif"], img[src*="btn_edit.gif"],
img[src*="anonymous.gif"] , img[src*="openid-profile.gif"], img[src*="none.gif"] , img[src*="help.gif"] , img[src*="btn_prev.gif"] ,
img[src*="btn_edittags.gif"] , img[src*="btn_memories.gif"] , img[src*="btn_next.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"] , img[src*="btn_tellfriend.gif"], img[src*="userinfo-support.gif"], img[src*="button-flag.gif"]
{width: 0 !important; vertical-align: middle !important; margin: 0 auto;
background: transparent url(http://i48.tinypic.com/2dmh6ic.gif) no-repeat; }
img[src*="btn_del.gif"] { height: 10px; padding-left: 7px; background-position: 0px 0px;}
img[src*="btn_scr.gif"] { height: 8px; padding-left: 7px; background-position: 0px -24px;}
img[src*="btn_unscr.gif"] { height: 8px; padding-left: 7px; background-position: 0px -48px;}
img[src*="btn_freeze.gif"] { height: 8px; padding-left: 9px; background-position: 0px -72px;}
img[src*="btn_unfreeze.gif"] { height: 8px; padding-left: 9px; background-position: 0px -96px;}
img[src*="btn_track.gif"] { height: 8px; padding-left: 5px; background-position: -24px 0px;}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"]
{ height: 8px; padding-left: 5px; background-position: -24px -24px;}
img[src*="pencil.gif"], img[src*="btn_edit.gif"]
{ height: 7px; padding-left: 7px; background-position: -24px -48px;}
img[src*="anonymous.gif"] { height: 8px; padding-left: 6px; background-position: -24px -72px;}
img[src*="openid-profile.gif"] { height: 6px; padding-left: 7px; background-position: -24px -96px;}
img[src*="none.gif"] { height: 6px; padding-left: 7px; background-position: -48px 0px;}
img[src*="help.gif"] { height: 8px; padding-left: 6px; background-position: -48px -24px;}
img[src*="btn_prev.gif"] { height: 5px; padding-left: 9px; background-position: -72px -24px;}
img[src*="btn_edittags.gif"] { height: 10px; padding-left: 16px; background-position: -72px -48px;}
img[src*="btn_memories.gif"] { height: 6px; padding-left: 12px; background-position: -72px -72px;}
img[src*="btn_next.gif"] { height: 5px; padding-left: 9px; background-position: -72px -96px;}
img[src*="userinfo.gif"], img[src*="userinfo-support.gif"] { height: 8px; padding-left: 6px; background-position: -108px 0px;}
img[src*="community.gif"], img[src*="newsinfo.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"]
{ height: 8px; padding-left: 9px; background-position: -108px -24px;}
img[src*="syndicated.gif"] { height: 6px; padding-left: 6px; background-position: -108px -48px;}
img[src*="icon_protected.gif"] { height: 8px; padding-left: 6px; background-position: -108px -72px;}
img[src*="icon_private.gif"] { height: 8px; padding-left: 6px; background-position: -108px -96px;}
img[src*="icon_groups.gif"] { height: 8px; padding-left: 10px; background-position: -132px 0px;}
img[src*="btn_tellfriend.gif"] { height: 6px; padding-left: 10px; background-position: -132px -24px;}
img[src*="button-flag.gif"] { height: 8px; padding-left: 7px; background-position: -132px -48px;}
div.ContextualPopup div.Inner {border: 1px solid #dddddd !important;}
div.ContextualPopup div.Inner div.Content { color: #666666 !important;}
.ContextualPopup .Userpic a img {border: 1px solid #aaaaaa; padding: 3px; }
.ContextualPopup .Userpic a img:hover {border-color: #dddddd;}
div.ContextualPopup div.Inner div.Content span a, div.ContextualPopup div.Inner div.Content a {color: #000000 !important; font-weight:lighter;
text-decoration: none !important; border-bottom: 1px solid #dddddd;}
div.ContextualPopup div.Inner div.Content span a:hover, div.ContextualPopup div.Inner div.Content a:hover {color: #aaaaaa !important; }
Feel like customizing? Use the Custom CSS Generator
← Previous Step | 1 | 2 | 3 | Next Step →
( Install ) Step 3 - 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 | Next Step →
( Optional ) Add a Banner
The recommended banner size is 650px wide.
.header {background: url(HTTP://URLHERE.PNG) no-repeat top center; padding-top: ###px; } .header h2 {display: none;}
- Replace HTTP://URLHERE.PNG with your banner url
Replace ### with your banner height (pixels) - Add the code to the bottom of the Custom Stylesheet box
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#fb8e8e#f5f5f5#f4e57d#dddddd#baff63#aaaaaa#8dd6db#666666#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
