Layout 048 : Hunny Bunny
Click for a Live Preview.
( Layout ) #048 : Hunny Bunny
For Tawny's three legged bunny, Hunny!♥ ♥ It was born without a leg ):
( 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: Left
- Wrap Entry text under userinfo: No
- Userinfo Position in Comments: Left
← 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 --- 048 Hunny Bunny ---
Malionette @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ------------ PAGE ------------ */
body {font: 12px century gothic; background: #effcff; margin: 0; color: #888888; padding: 0 0 10px 0; }
a {text-decoration: none; color: #df6093; }
a:hover {color: #e580a9; }
b, strong {font-family: trebuchet ms; }
.pageblock { width: 750px; margin: 0 auto; overflow: hidden; margin-top: 60px; }
.repost, blockquote { margin: 5px 0 5px 0; padding: 5px; border-top: 1px solid #effcff; border-bottom: 1px solid #effcff; }
input, select, textarea { border: 1px solid #effcff; font: 12px arial; color: #888888; margin: 0 2px 0 2px; }
input[type=submit], input[type=button] {background: #fff0f1; }
input[type=submit]:hover, input[type=button]:hover {background: #effcff}
/* ------------ HEADER ------------ */
.header-title {font-size: 30px; text-align: center; margin: 0; padding: 5px; color: #e580a9; }
.header-subtitle, .body-title, .body-midtitle, .pagefooterblock { display: none; }
.header-menu { margin: 0; padding: 1px; }
.header-menu ul { text-align: center; }
.header-menu li {display: inline; }
.header-menu li:first-child a {border-left: 0;}
.header-menu a {color: #ffffff; text-transform: uppercase; font-size: 9px; background: #e580a9; padding: 5px; border-left: 1px solid #df6093; }
.header-menu a:hover {background: #df6093; }
/* ------------ SIDEBAR ------------ */
.sidebox {background: #ffffff; width: 170px; margin: 0 10px 10px 0; }
.sideboxTitle {background: #fff0f1; font-size: 16px; padding: 5px; }
.sideboxContent { padding: 10px;}
#profile div:first-child {text-align: center; padding: 10px; }
.profile-label {font-size: 9px; text-transform: uppercase; background: #fff0f1; padding: 2px; margin: 0 10px 0 0; }
.profile-userpic {border: 1px solid #effcff; padding: 3px; width: 75px; height: 75px;}
#latestmonth table {width: 100%; }
#latestmonth td { background: #effcff; border: 1px solid #ffffff; padding: 2px; text-align: center; font-size: 9px; }
.summaryList, .listitem { padding: 0 5px 0 0;}
.summaryList:hover, .listitem:hover { background: #effcff; padding: 0 5px 0 5px; }
/* ------------ ENTRY / COMMENT ------------ */
.entryHeader, .commentHeader, .commentHeaderScreened { margin: 0 0 10px 0; color: transparent; background: #fff0f1; padding: 5px; letter-spacing: -1px; min-height: 13px; }
.entryHeaderDate, .commentHeader span, .commentHeaderScreened span {font-size: 9px; color: #888888; float: right; letter-spacing: 0; padding: 0 0 0 10px; }
.entryHeader a {font-size: 24px; }
.commentHeaderScreened {background: #e580a9; }
.entryHolder, .commentHolder {background: #ffffff; width: 550px; margin: 0 0 10px 0; }
.entryUserinfo-usericon img, .commentUserinfo-usericon img {border: 1px solid #effcff; padding: 3px; width: 75px; height: 75px;}
.entryUserinfo-usericon img:hover, .commentUserinfo-usericon img:hover {border-color: #fff0f1; }
.entryUserinfo, .commentUserinfo {font-weight: lighter; font-size: 9px; margin-left: 10px; }
.entryText, .commentText { padding: 10px; }
.entryMetadata ul {margin: 0 0 0 10px; list-style: none; border-top: 1px solid #fff0f1; padding: 10px 0 0 0; }
.entryMetadata-label {font-size: 9px; text-transform: uppercase; background: #fff0f1; padding: 2px; margin: 0 10px 0 0; }
.entryLinkbar, .commentLinkbar {background: #fff0f1; margin: 10px 0 0 0; font-size: 9px; }
.entryLinkbar ul, .commentLinkbar ul {padding: 0; list-style: none; margin: 0; }
.entryLinkbar li, .commentLinkbar li {display: inline; text-transform: uppercase; }
.entryLinkbar li a, .commentLinkbar a {color: #df6093; display: inline-block; padding: 5px; border-right: 1px solid #ffffff; }
.entryLinkbar li a:hover, .commentLinkbar a:hover { background: #ffffff; }
/* ------------ FOOTER ------------ */
#footer-menu ul {padding: 0; margin: 0; list-style: none; }
#footer-menu li {display: inline; }
#footer-menu li:first-child a {border-left: 0;}
#footer-menu li { background: #e580a9; float: left; }
#footer-menu a { display: block; color: #ffffff; padding: 5px; font-size: 9px; text-transform: uppercase; border-left: 1px solid #df6093; }
#footer-menu a:hover {background: #df6093; }
/* ------------ ARCHIVE ------------ */
.month {text-align: center; width: 80%; margin: 10px auto; margin-top: 0; }
.month td {background: #effcff; border: 1px solid #ffffff;}
/* ------------ REPLY ------------ */
#qrform table, #postform table {width: 100%; border: 1px solid #effcff !important; margin: 10px 0 0 0; }
.replyform {background: #ffffff; }
#postform table table {border: 0 !important; margin: 0; }
/* ------------ EXTRAS ------------ */
::-moz-selection { background: #df6093; color: #ffffff;}
::selection { background: #df6093; color: #ffffff;}
code::-moz-selection { background: #df6093; color: #ffffff;}
code::selection { background: #df6093; color: #ffffff;}
#lj_controlstrip td {background: #ffffff; border-right: 1px solid #effcff; color: #888888; }
#lj_controlstrip_statustext {color: #888888; }
#lj_controlstrip td a {text-decoration: none; color: #df6093; }
#lj_controlstrip td a:hover {color: #e580a9; }
#lj_controlstrip input {color: #888888; }
#lj_controlstrip input[type=submit] {background: #fff0f1; }
#lj_controlstrip input[type=submit]:hover {background: #effcff; }
div.ContextualPopup div.Inner {border: 0; background: transparent !important; font: 12px century gothic !important; }
div.ContextualPopup div.Userpic {margin-right: -20px; padding: 5px; background: #fff0f1; }
div.ContextualPopup div.Content { background: #ffffff; padding: 5px; }
div.ContextualPopup div.Relation {color: #888888; }
div.ContextualPopup div.Inner div.Content a {color: #df6093 !important; text-decoration: none !important; font-weight: lighter !important; }
div.ContextualPopup div.Inner div.Content span.alias-unavailable a {color: #df6093 !important}
div.ContextualPopup div.Inner div.Content a:hover,
div.ContextualPopup div.Inner div.Content .alias-unavailable a:hover {color: #e580a9 !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"], img[src*="userinfo-support.gif"], img[src*="user_ontd.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; }
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"], img[src*="userinfo-support.gif"], img[src*="user_ontd.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.
.header-menu { background: url(HTTP://URLHERE.PNG) no-repeat top center; padding-top: ###px; }
- 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#fff0f1#effcff#e580a9#df6093#888888
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get them at Box.net
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
