s2 layout:just because the sky turned from gray [smooth sailing]

Jan 19, 2009 21:42

Frequenters of milou_veronica (hello) may have noticed that I've given it a new Minimalism layout. As consequence, I've lost my layout-making mojo and this may be my last post for a while.

layout: just because the sky turned from gray
style: smooth sailing
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, sidebar
browsers: IE7, FF, Safari, and Opera


picture | live

/*

just because the sky turned from gray
[ smooth sailing; basic, plus, and paid; by milou veronica ]

*/

/* PAGE */

html body {}
body { font-size: 8.5pt; margin: 0px 0px 0px 0px; background: #eeeeee url() repeat scroll 0 0; color: #555555; font-family: "Trebuchet MS", 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:10px 15px; margin: 10px; border-left: 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: #f7f7f7 url() no-repeat scroll 0 0; border: 1px solid #eeeeee; font-family: Georgia, Tahoma, Verdana, sans-serif; font-size: 11px; color: #777777; line-height: 1.5;}

/* HEADER */

.pageheaderblock { background: #1a1a1a url(http://i43.tinypic.com/ddtaf.png) repeat scroll 50% 0; text-align: center; padding: 95px 0 0;font-family:verdana; margin:0 auto 15px; font-size: 6pt;}

.header-title { display:none; text-align: right; color: #1a1a1a; text-transform: uppercase; font-size: 2.8em; letter-spacing: -0.09em; padding: 0px 20px 0px 20px; }

.header-subtitle {display:none; text-align: right; text-transform: uppercase; font-size: 1em; letter-spacing: 0.09em; color: #1a1a1a; 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: 0px; border-top: 0px solid #ffffff; background-color: #1a1a1a;text-transform: uppercase; letter-spacing: 2px;}

.header-menu a, .header-menu a:visited {white-space: nowrap; text-align: left; padding: 0px; margin-right:2px; color: #ffffff; }
.header-menu a:hover { color: #99A7AF; }

.header-menu ul, #footer-menu ul { margin: 0px; list-style:none; padding: 11px 0; }
.header-menu li{ display: inline; border-left: 1px solid #393939; padding: 11px 8px;} .header-menu li:hover {background-color: #222222;} #footer-menu li {display: inline; margin-right: 3px;}
#footer-menu li a {background-color: #ffffff; padding: 8px 6px; border-width: 0 1px 1px 0;border-style:solid; border-color: #dddddd;} #footer-menu li a:hover {border-width: 1px 0 0 1px; background-color: #f2f2f2;}

/* BODY */

.bodyblock {padding: 0px 15px; width: 95%; max-width: 960px; margin-right:auto; margin-left: auto; }

.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; margin: 0px 0px 35px 0px; color: #;}

.entryUserinfo { text-align: center; margin: 0px 4px 8px 0px; }
.entryUserinfo-usericon img { border: 1px solid #d8d8d8 ; padding:4px; margin: 0px; background-color: #ffffff; position:relative;}
.entryText { padding: 15px; min-height: 120px; font-family: Arial, Tahoma, Verdana, sans-serif; background-color:#ffffff; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; margin-top: 0px; }
.entryText img { max-width:500px;}

.entryHeader { color: #666666; text-decoration: none; margin-left: 114px; text-align: left; padding: 10px 10px 0 10px; border: 1px solid #dddddd; border-bottom:1px solid #EEEEEE; background-color:#ffffff; }

.entryHeader a{ color: #409CCF; }
.entryHeaderSubject {font-size: 9pt; font-family: Verdana; color: #6BA1BF; 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: 0 0 10px 36px; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; background-color:#ffffff;}

.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 { border-top: 1px solid #dddddd; text-transform: ; font-family: Verdana; font-size: 9px; text-align: right; padding: 6px 0; margin-left:114px; }
.entryLinkbar ul {margin: 0px; padding: 0px; }
.entryLinkbar li { padding: 4px; margin: 0px; background-color:#ffffff; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; margin: 0 1px; display: inline; }
.entryLinkbar li:hover { background-color:#f6f6f6; border-color: #dddddd; border-style: solid; border-width: 1px 0 0 1px; }

/*FOOTER*/

#footer-menu { font-size: 10px; }
#footer-menu a, .footer-menu a:visited {white-space: nowrap; padding: 6px; text-align: left; }
.pagefooterblock { border-top: 30px solid #111111; background: #1a1a1a url(http://i43.tinypic.com/ddtaf.png) repeat scroll 50% 0; color: #ffffff; padding: 15px 4px 15px 24px; margin-top: 4px; }
.pagefooterblock a, .pagefooterblock a:visited { color: #69D2E7; }

/*SIDEBAR */

.sidebar {margin: 0px 0px 0px 10px; width: 140px; color: #555555; padding: 0px; line-height: 1.75; font-size: 7pt; }

.sidebox #profile {text-align: center; }
img.profile-userpic { padding: 3px; margin: 3px; border: 1px solid #eeeeee;}
.sidebox { margin: auto; background-color:#ffffff; border: 1px solid #dddddd; margin: 0 0 6px 0; padding: 0;}
.sideboxTitle { text-transform: lowercase; border-bottom: 1px solid #dddddd; text-decoration: none; font-size: 9pt; padding: 0px 8px 4px 0px; color: #dea461; text-align: right;letter-spacing:-1px;}

.sideboxContent { text-align: left; padding: 4px 4px 4px 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 #333333; 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: #eeeeee;margin:1px; padding: 1px 3px;}
.latestmonth-active {background-color: #eeeeee; margin:1px; padding: 1px 3px;}

.listtitle {font-weight: bold; }

.profile-label {display:none; } .profile-content {display: none;}

/* COMMENT PAGE */

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

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

.commentUserinfo-usericon img { border: 1px solid #eeeeee; padding: 2px; background-color:#ffffff; }

.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; border: 1px solid #dddddd; padding: 10px; margin: 15px 0 0 118px; background-color: #ffffff; }

#commenttext{ width:100%; }

/*ARCHIVE PAGE*/

.yearlinks{ text-align: right; }

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

.month { text-align: center; max-width: 636px; width:85%; border: 1px solid #dddddd;border-top: none; margin: 0px 0px 8px 114px; background-color: #ffffff;}
.daysubjects { color: #888888; padding: 8px 8px 8px 8px; }

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

.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; text-align: left;}
.day-count { line-height:1; 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%; }

ul.taglist {list-style: outside circle none; color: #aaaaaa;}
.taglist li {border-bottom: 1px dotted #eeeeee; padding: 3px 0px;}

/*--------------------------------------------
MINI ICONS by Pinvoke and FamFamFam
-----------------------------------------*/
.sideboxTitle img { vertical-align: middle !Important; }
img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background-repeat: no-repeat; background: url(http://i40.tinypic.com/2sbss5v.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://i41.tinypic.com/2evuot3.png); background-position: center left; }
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i40.tinypic.com/6rk7br.png); }

HTML BODY img.i-ljuser-userhead {height:6px !important;width:0 !important; padding: 16px 16px 0 2px !important}

.ljuser img { width: 0; height: 0; background: transparent url(http://i39.tinypic.com/2wfph5g.png) no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !Important; }
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i39.tinypic.com/2wfph5g.png) no-repeat 0 0 !important; padding: 16px 16px 0 2px !important; }

.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i40.tinypic.com/1zmldh3.png) !important; padding: 16px 16px 0 2px !important; background-position: center left; background-repeat: no-repeat;}
img[src="http://p-stat.livejournal.com/img/syndicated.gif"] {background-color:transparent; background-image: url(http://i43.tinypic.com/wk1tno.png) !important; padding: 16px 16px 0 2px !important; background-position: center left;background-repeat: no-repeat; width: 0px; height: 0px;}
img[src*="newsinfo.gif"] {background: transparent url(http://i40.tinypic.com/b5p84p.png) no-repeat scroll 0% 50% !important; padding: 16px 16px 0 2px !important; background-repeat: no-repeat; width: 0px; height: 0px;}
img[src*="partnercomm.gif"] {background-color:transparent; background-image: url(http://i39.tinypic.com/263vwaq.png) !important; padding: 16px 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://i40.tinypic.com/24v8aia.png) !important; padding: 16px 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://i44.tinypic.com/okcrbk.png) no-repeat scroll 50% 50%; }
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i43.tinypic.com/34pjqz5.png) no-repeat scroll 50% 50%; }
.replyform img[src*="userinfo.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i39.tinypic.com/2wfph5g.png) no-repeat scroll 50% 50%;}
img[src*="none.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i42.tinypic.com/osqudt.png) no-repeat scroll 50% 50%; }
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i44.tinypic.com/efgqjk.png) no-repeat scroll 50% 50%; }
img[src*="pencil.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i41.tinypic.com/2vd4fgl.png) no-repeat scroll 50% 50%; }
img[src*="btn_edit.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url(http://i39.tinypic.com/1sdt0h.png) no-repeat scroll 50% 50%; }

/*--------------------------------------------
the rest
-----------------------------------------*/
#lj_controlstrip {}
table#lj_controlstrip td {background-color: #1a1a1a; background-image: url(); color: #666666;border: solid 1px #111111; border-left: none; }
#lj_controlstrip a { color: #999999; } #lj_controlstrip_statustext { color: #666666; }
form#qrform table {border-width: 0px !important; background-color: #; padding-right: 6px;}

a, a:visited , .bodynavblock a, .bodynavblock a:visited, #footer-menu a, .footer-menu a:visited, .day-count a, .entryHeader a, div.ContextualPopup .Relation {color: #77919F;}
a:hover, .ljuser a b:hover {color: #DFD7B5;}

b,u {color:#444444;} .ljuser a b {color:#4D595F; font-weight:normal; font-family:"georgia"; font-style:italic;letter-spacing:-0.04em;} 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:#6BA1BF; }

installation
01.
Choose Journal Style
02.
Select a Smooth Sailing layout in "Select a New Theme"
03.
In Choose a Page Setup, set your add settings to Horizontal or Between Entries, then select 2 Column (sidebar on right)
04.
Go to " Display ".Under in Basic Options, set "Userinfo Position in Entries" to Left side of the entry text. Then click the on Additional Options. Set "Wrap Entry text under userinfo" to No.
05.
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.
06.
Still in "Customise your Theme", go to "Custom CSS ". Ensure Use layout's stylesheet(s) is set to no
07.
Paste code into the Custom Stylesheet box.

notes:

♚ mini icons mostly by Pinvoke. The raincloud is from FamFamFam.
♚ Please address all questions to the F.A.Q.
♚ Feel free to edit anything you want (as always)

♔ Commenting and crediting always appreciated, but not necessary

style: smooth sailing, wot: layout

Previous post Next post
Up