s2 layout: the things I freely give (you stole) [smooth sailing]

Dec 02, 2008 10:16

layout: the things I freely give (you stole)
style: smooth sailing
accounts: Basic, Paid, and Sponsored
features:custom comment pages, siebar, mini icons
browsers: IE7, FF, Safari, and Opera



picture | live

/*

the things I freely give (you stole)
[[ smooth sailing; basic, plus and paid; milou veronica ]]

*/

/* PAGE */

html body {}
body { font-size: 8pt; margin: 0px 0px 0px 0px; background: #ffffff url() repeat scroll 0 0; color: #666666; font-family: Arial, Tahoma, Verdana, sans-serif; padding: 0px;}

a { color: #; text-decoration: none; }
a:visited { color: #; }
a:hover { color: #; }

.pageblock{ border: 0px #ececec solid; margin: 0 auto; }

blockquote { padding:15px; border-bottom: 1px solid #eeeeee; background: transparent url() repeat-x scroll 0 100%; color:#666666; }
code {font-family: monospace; display:block; padding:5px; border:1px dashed #eeeeee; font-size: 12px;}
input, textarea { background: #f3f3f3 url() no-repeat scroll 0 0; border: 1px solid #eeeeee; font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 11px; color: #777777; line-height: 1.5;}

/* HEADER */

.pageheaderblock { background-image: url("IMAGE_URL"); text-align: center; padding: 20px; border-bottom: 0px solid #fafafa; background-color: #f1f1f1; font-family: Tahoma, Verdana, sans-serif; margin-bottom:15px; font-size: 9pt;}

.header-title { display:none; color: #666666; text-transform: uppercase; font-size: 15pt; letter-spacing: 5px; padding: 0px 20px 0px 20px; }

.header-subtitle { display:none; text-transform: uppercase; font-size: 8px; padding: 0px 24px 0px 24px; }

.header-icon { top: 0px; right: 0px; position: absolute; z-index: 1; border-left: 0px solid #ffffff; border-bottom: 0px solid #ffffff;}

.header-menu { padding: 5px; border-top: 0px solid #ffffff; padding-left: 19px; letter-spacing: -1px; line-height: 20px;text-transform: lowercase;}

.header-menu a, .header-menu a:visited { background-color: #f6f6f6; white-space: nowrap; text-align: left; padding: 8px; margin-right:2px; color: #cccccc; text-decoration: bold; border: 1px #eeeeee solid; }
.header-menu a:hover { background-color: #e9e9e9; border: 1px #eeeeee solid; color: #aaaaaa; text-decoration: bold; }

.header-menu ul, #footer-menu ul { margin: 0px; padding: 0px; }
.header-menu li, #footer-menu li { display: inline; }

/* BODY */

.bodyblock {padding: 0px 15px; margin-right:auto; margin-left: auto; width: 760px; }

.bodyheaderblock { border: 0px; color: #888888;padding: 0px 0px 4px 0px; }

.bodynavblock { border: 0px solid #ffffff; color: #777777; margin: 10px 0px 4px 0px; padding: 8px;}
.bodynavblock a, .bodynavblock a:visited { color: #409CCF; }

.body-title { display:none; background-color: #000000 ; color: #f5989d; text-transform: uppercase; font-size: 9px; letter-spacing: 5px; text-align: center; padding: 0px 10px 10px 10px; font-family: Arial, Tahoma, Verdana, sans-serif; }

.body-midtitle { font-size: 15px; text-align: center; padding-left: 8px; font-family: Arial, Tahoma, Verdana, sans-serif; }

/*ENTRIES*/

.entryHolder { line-height: 1.75; border: 0px solid #ffffff; background-color:#ffffff; margin: 0px 0px 15px 0px; color: #;}

.entryUserinfo { text-align: center; margin: 0px 8px 8px 0px; }
.entryUserinfo-usericon img { border: 0px solid #BD3737 ; padding:2px; margin: 0px 0px 5px 15px; background-color: # }
.entryText { padding: 15px; min-height: 120px; }

.entryHeader { color: #666666; font-family: Arial, Tahoma, Verdana, sans-serif; text-decoration: none; text-align: right; padding: 10px; margin-bottom: 10px; margin-left: 140px; border-bottom:1px solid #EEEEEE; background-color:#; }

.entryHeader a{ color: #; }
.entryHeaderSubject {font-size: 9pt; letter-spacing: -1px; color: #aaaaaa; line-height: 1; text-transform: lowercase;}
.entryHeaderDate { text-transform: uppercase; font-size: 10px; letter-spacing: -1px; }
.entryHeaderDate a {color : #acacac; text-decoration : none;}
.entryHeaderDate a:hover { color : #dddddd; text-decoration : underline; }

.entryMetadata { padding-left: 36px; color: #999999; }
.entryMetadata ul { margin: 0px; padding: 0px; }

.entryMetadata li { list-style: none; display: block;padding: 0px; font-size: 7pt; }
.entryMetadata-label {font-weight: bold; padding-right: 10px; }

.entryLinkbar { font-family: Arial, Tahoma, Verdana, sans-serif; text-transform: uppercase; text-decoration: bold; font-size: 10px; text-align: right; padding: 6px; background-color:#; }
.entryLinkbar ul {margin: 0px; padding: 0px; }
.entryLinkbar li { padding: 0px 8px 0px 5px; margin: 0px; border-right: 1px solid #cccccc; display: inline; }

/*FOOTER*/

#footer-menu { font-size: 10px; }
#footer-menu a, .footer-menu a:visited {white-space: nowrap; padding: 6px; text-align: left; }
.pagefooterblock { border-top: 0px solid #ffffff; background-color: #f1f1f1; color: #777777; padding: 15px 4px 15px 24px; margin-top: 4px; }
.pagefooterblock a, .pagefooterblock a:visited { color: #69D2E7; }

/*SIDEBAR */

.sidebar {margin: 0px 0px 0px 0px; width: 120px; background-color: #; color: #999999; padding: 15px; line-height: 1.75; font-size: 7pt; }

.sidebox #profile {text-align: center; }
img.profile-userpic { width: 60px; height: 60px; border: 10px solid #ffffff;}
.sidebox { margin: auto; }
.sideboxTitle { text-transform: lowercase; text-decoration: none; font-size: 8pt; padding: 8px; color: #aaaaaa; text-align: right; letter-spacing: -1px;}

.sideboxContent { text-align: left; padding: 2px 4px 2px 4px;}
.sidebox #latestmonth { text-align: center; margin-left: auto; margin-right: auto; }
.sidebox #search { text-align: center; }
.sidebox #summary { text-align: left; }
.sidebox #tags_sidebox { text-align: left; }
.sidebox #freetext {text-align: left; }
.sidebox #systemlinks {text-align: center; ; }
.listitem {padding: 0px 5px 0px 5px; border-right: 0px solid #; font-size: 7pt; font-family: Arial, Tahoma, Verdana, sans-serif; text-align: left; }

.sidebox #latestmonth table{ text-align: center; padding: 0px; margin-left: auto; margin-right: auto;}
.latestmonth-inactive { background-color: #;margin:1px; padding: 1px;}
.latestmonth-active {background-color: #; margin:1px; padding: 1px;}

.listtitle {font-weight: bold; }

.profile-label {} .profile-content {}

/* COMMENT PAGE */

.commentHolder { border: 0px solid #ffffff; padding: 10px; margin: 15px 0; background-color:#ffffff; }

.commentUserinfo { text-align: center; margin: 0px 8px 8px 0px; }

.commentUserinfo-usericon img { border: 0px solid #FA0261; padding: 12px; background-color:#; }

.commentText { padding: 6px; text-align: left; }

.commentHeader { color: #aaaaaa; font-weight: bold; text-transform: lowercase; font-size: 12pt;padding: 4px 0px 4px 8px; }

.commentHeader a{ color: #45A8DF; }

.commentHeaderScreened { font-family: ; font-size: 12px; background-color: #ffffff; padding: 4px 0px 4px 8px; }

.commentHeaderSubject { font-weight: bold; }

.commentLinkbar { text-align: right; padding-top: 4px; padding-bottom: 4px; font-size: 7pt; }

.commentLinkbar ul { margin: 0px; padding: 0px; }

.commentLinkbar li { padding: 0px 5px 0px 5px; margin: 0px; display: inline;}

.replyform { padding-left: 10px; margin: auto; background-color: #ffffff; }

#commenttext{ width:100%; }

/*ARCHIVE PAGE*/

.yearlinks{ text-align: right; }

.yearlink{ padding-left:4px; padding-right: 4px; }

.month { text-align: center; margin-right: auto; margin-left:auto; width: 400px ; border-bottom: 1px solid #eeeeee;border-right: 1px solid #eeeeee; background-color: #ffffff;}
.daysubjects { color: #888888; padding: 8px 8px 8px 40px; }

.daytitles { text-align: center; text-transform: lowercase; text-decoration: bold; border-left: 1px solid #ffffff; background-color: #eeeeee }

.day-blank { border: 1px solid #eeeeee; border-right:none; border-bottom: none; }
.day { border: 1px solid #eeeeee; border-right:none; border-bottom: none; }
.day-date { border: 0px dashed #dddddd;width: 50%; text-align: center;}
.day-count { width: 50%; text-align: center; float: right; font-size: 20px; }
.day-count a { text-decoration: none; color: #74A6CF; }

/*TAGS PAGE*/

.tagstable, .tagstable td { border: 1px solid #f1f1f1; margin: 1px; }
.tagstable { width: 100%; }

/*--------------------------------------------
MINI ICONS by
-----------------------------------------*/

img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background-repeat: no-repeat; background: url(http://i33.tinypic.com/2aagfvq.png); background-position: center left; }
img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 16px 16px 0px 0px !important; background: url(http://i34.tinypic.com/343rdsp.png); background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i33.tinypic.com/2aagfvq.png); }

.ljuser img { width: 0; height: 0; background: transparent url(http://i34.tinypic.com/34tcykp.png) no-repeat center left; padding: 17px 16px 0 2px !important; }
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i34.tinypic.com/34tcykp.png) no-repeat center left; padding: 17px 16px 0 2px !important; }

.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i38.tinypic.com/z0ndx.png); padding: 17px 16px 0 2px !important; background-position: center left; background-repeat: no-repeat;}
img[src*="syndicated.gif"] {background-color:transparent; background-image: url(http://i34.tinypic.com/a0bbph.png); padding: 17px 16px 0 2px !important; background-position: center left;background-repeat: no-repeat; width: 0px; height: 0px;}
img[src*="newsinfo.gif"] {background: transparent url(http://i35.tinypic.com/20r6a86.png) no-repeat scroll 0% 50%; padding: 17px 16px 0 2px !important; background-repeat: no-repeat; width: 0px; height: 0px;}
img[src*="partnercomm.gif"] {background-color:transparent; background-image: url(http://i38.tinypic.com/9tjywh.png); padding: 17px 16px 0 2px !important; background-position: 0% 50%; background-repeat: no-repeat; width: 0px; height: 0px;}
img[src*="sponcomm.gif"] {background-color:transparent; background-image: url(http://i33.tinypic.com/6rugzc.png); padding: 17px 16px 0 2px !important; background-position: 0% 50%; background-repeat: no-repeat; width: 0px; height: 0px;}

img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/x35rpi.png) no-repeat scroll 50% 50%; }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i35.tinypic.com/14v69a9.png) no-repeat scroll 50% 50%; }
img[src*="userinfo.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i34.tinypic.com/34tcykp.png) no-repeat scroll 50% 50%;}
img[src*="talk/none.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i34.tinypic.com/iqifex.png) no-repeat scroll 50% 50%; }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/vovi8j.png) no-repeat scroll 50% 50%; }
img[src*="pencil.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i38.tinypic.com/j7eqvs.png) no-repeat scroll 50% 50%; }

/*--------------------------------------------
contexual pop-up
-----------------------------------------*/

div.ContextualPopup {position: relative; margin: 10px 0 0 30px; text-align: left; font: normal 9px "Tahoma" !important; }
div.ContextualPopup div.Inner { color: #999999 !important;border: 0px solid #eeeeee; background-color: transparent !important; padding: 0px; width: 310px;}
div.ContextualPopup .Userpic { padding: 10px; margin-left: 14px; margin-top: 0px; margin-bottom: 0px; border: 1px solid #dddddd; background-color:#ffffff; }
div.ContextualPopup .Content { padding: 10px 10px 0 10px; margin: 4px 89px 0px 4px; border: 1px solid #dddddd; background-color: #ffffff !important; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #999999 !important;}
div.ContextualPopup .Relation { font-family: Arial; font-size: 12pt; letter-spacing:-1px; border-bottom: 1px solid #eeeeee; text-transform: lowercase;}
div.ljcmtmanage {border: 1px solid #f2f2f2; background-color: #ffffff; color: #666666;}

#lj_controlstrip {}
table#lj_controlstrip td {background-color: #f7f7f7; background-image: url(); color: #666666;border: solid 1px #eeeeee; border-left: none; }
#lj_controlstrip a { color: #999999; } #lj_controlstrip_statustext { color: #666666; }

a, a:visited , .bodynavblock a, .bodynavblock a:visited, #footer-menu a, .footer-menu a:visited, .day-count a, .entryHeader a, div.ContextualPopup .Relation {color: #444444;}
a:hover {color: #aaaaaa; font-style:; position: relative; top:1px; left:1px; }

b,u {color:#444444;} s,i {color:#aaaaaa;} q { padding: 5px; font-style: italic; color: #999999; display:block; border: 0px solid #f1f1f1;}
.sidebar a {background-color: #FCFCFC;}

.entryHeader a, .entryHeader a:hover, .entryHeader a:visited, .entryHeader a:link { color:#aaaaaa; }

installation
>> Choose Journal Style
>> Select a Smooth Sailing layout in "Select a New Theme"
>> In Choose a Page Setup select 2 Column (sidebar on left) or 2 Column (sidebar on right).
>>Go to " Customize Journal Style". In Display, click the on Additional Options under Presentation. Set Wrap Entry text under userinfo to No. (or yes, if you prefer)
>> Then go to the "Sidebar " section. To add your free text, click on Free Text Sidebox and put your text in one of the boxes. Make sure that the box position is unique.
>>Still in "Customize Journal Style", go to "Custom CSS ". Ensure Use layout's stylesheet(s) is set to no
>> Paste code into the Custom Stylesheet box.

notes:
>> To add a header. add this to the bottom of your code: .pageheaderblock { padding-top: BANNERHEIGHT+20px; background-image: url(BANNERURL); background-repeat: no-repeat; background-position: 50% 0;}

>> mini icons by Ico Joy
>> Need help, or have questions? First check out the F.A.Q.

style: smooth sailing, wot: layout

Previous post Next post
Up