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