044 - Friday Blues [Smooth Sailing]

[kill_zombie]

Friday Blues ► LIVE | STATIC | FAQ


Layout Information
TESTED BROWSERS Mozilla Firefox, Safari, Internet Explorer
PROBLEMS? All clear!
FEATURES Topbar, tiny icons, contextual pop ups, custom nav-strip
DISABLED I think nearly everything is in this actually.
AD-PLACEMENT Between Entries
FINAL NOTES Made for gardevoirs, who requested something with wood patterns, topbars and lots of Georgia font. I actually had this finished like a week ago, but I was too lazy to code its installation page~ lol


Layout Installation
SELECT JOURNAL STYLE 01. Select any Smooth Sailing.

02. Pick an ad placement you prefer (Between Entries tends to look best in general).
CUSTOM CSS Use layout's stylesheet(s) → NO
Use layout's stylesheet(s) when including custom external stylesheet → NO

Use CTRL + A inside the textbox to select everything, and then copy and paste into the CUSTOM CSS box.

/*

LJ STYLE: Smooth Sailing
LAYOUT: Friday Blues
MAKER: jessilestrange // kill_zombie
FOR: gardevoirs

PLEASE CREDIT:
http://community.livejournal.com/kill_brainz/
OR
http://jessilestrange.livejournal.com/

*/

body { background: url(http://i46.tinypic.com/s62dzc.jpg) repeat #E6E6E6; font-family: Verdana, Arial, Lucida Sans Unicode; font-size: 10px; color: #333333; text-align: center; }
a, a:visited, a:hover { font-weight: bold; color: #C7D1C0; text-decoration: none; }
a:hover { cursor: help; }

.pageblock { width: 680px; margin: 40px auto 40px auto; padding: 0px; }
.pagefooterblock, .bodyheaderblock, .header-icon, .sideboxTitle, .sidebox #profile .ljuser img, .profile-label, .profile-content, .sidebox #summary img, .sidebox #summary .lj user img, .entryMetadata img, .entryLinkbar a[href*="subscriptions"], .entryLinkbar a[href*="content_flag"], .entryLinkbar a[href*="tellafriend"], .entryLinkbar a[st_page="home"], .commentUserinfo .ljuser img { display: none; }
.pagheaderblock { text-align: left; margin: 0px auto; }
.header-title, .header-subtitle { font-family: Palatino; color: #9E9E9E; text-transform: uppercase; text-align: left; }
.header-title { font-size: 31px; letter-spacing: -1px; }
.header-title:first-letter { color: #3DCBBF; }
.header-subtitle { font-style: italic; font size: 11px; letter-spacing: 1px; margin: -45px 0px 0px 20px; }

.sidebar { position: absolute; top: 160px; height: 145px; margin: 0px; padding: 0px; }
.sidebar .ljuser a b { color: #C7D1C0; }
.sidebox { float: left; min-height: 140px; margin: 10px; padding: 0px; }
.sideboxContent { width: 240px; height: 140px; /* DON'T EDIT UNLESS YOU KNOW WHAT YOU'RE DOING */ over-flow: auto; overflow-x: hidden; overflow-y: auto; /* ALL DONE! */ font-size: 11px; color: #9E9E9E; }
.sideboxContent, .sidebox #profile, .sidebox #summary { text-align: left; }
.sidebox #latestmonth, .sidebox #search { text-align: center; }
.sidebox #profile { width: 135px; font-size: 0px; }
img.profile-userpic { -moz-border-radius: 4px; padding: 15px; }
img.profile-userpic, .sidebox #search input, .sidebox #search select, .latestmonth-inactive, .latestmonth-active { background: url(http://i45.tinypic.com/29n9te0.png); border: 1px solid #DDDDDD; }
.sidebox #summary { font-family: Helvetica; color: #9E9E9E; }
.sidebox #summary a { font-weight: bold; }
.sidebox #summary a, .listitem a:hover, .sidebox #tags_sidebox a:hover, .daysubjects a:hover { color: #999999; }
.sidebox #summary img[src*="icon_protected.gif"], .sidebox #summary img[src*="icon_groups.gif"], .sidebox #summary img[src*="icon_private.gif"] { margin: 0px !important; }
.sidebox #systemlinks, .sidebox #tags_sidebox { font-family: Helvetica; font-size: 0px; color: #9E9E9E; }
.listtitle { width: 100%; font-style: italic; font-size: 11px; letter-spacing: 1px; text-align: left; text-transform: uppercase; padding: 5px 0px 1px 5px; }
.listtitle, .listitem, .sidebox #tags_sidebox a { float: left; margin: 2px; display: block; }
.listitem, .sidebox #tags_sidebox a { width: 47%; }
.listitem a, .sidebox #tags_sidebox a { font-size: 11px; text-transform: lowercase; }
.sidebox #latestmonth table { width: 100%; font-family: Helvetica; text-transform: lowercase; margin: 0px auto 0px auto; }
.latestmonth-inactive, .latestmonth-active { font-size: 10px; margin: 1px; padding: 2px; }
.sidebox #search { font-family: Helvetica; font-size: 12px; font-style: italic; text-transform: uppercase; }
.sidebox #search input, .sidebox #search select { font-family: Helvetica; font-style: normal; font-size: 10px; color: #9E9E9E; }

.bodyblock { background: #FFFFFF; border-left: 1px solid #EBEBEB; border-right: 1px solid #EBEBEB; margin: 0px; }
.bodyblock, .header-menu, .header-title, .header-subtitle, .sidebar { width: 680px; }
.header-menu { border: 1px solid #EBEBEB; margin: 252px 0px 0px 0px; }
.header-menu, .entryLinkbar, #footer-menu { background: #F8F8F8; font-family: Arial; letter-spacing: -1px; text-transform: uppercase; text-align: left; padding: 10px 0px 2px 0px; }
.header-menu a, .entryLinkbar, #footer-menu a { font-size: 15px; }
.header-menu a, .entryLinkbar a, #footer-menu a, .ljuser a b { color: #3DCBBF; }
.header-menu a:hover, .entryHeader a:hover, .entryLinkbar a:hover, #footer-menu a:hover, .commentLinkbar a:hover, .ljuser a b:hover { color: #C7D1C0; }
.header-menu ul, .entryLinkbar ul, #footer-menu ul, .commentLinkbar ul { margin: 0px; padding: 0px; }
.header-menu li, .entryLinkbar li, #footer-menu li { list-style-type: none; margin: 0px 2px 0px 10px; padding: 0px; display: inline; }

.entryHolder { background: #FFFFFF; margin: 0px; padding: 0px; }
.entryHolder, .bodynavblock, .commentHolder, .commentHeader, .commentHeaderScreened { border-bottom: 1px solid #EBEBEB; }
.entryHeader { font-size: 0px; text-align: right; margin: 0px; padding: 10px 20px 0px 10px; }
.entryHeaderDate, .commentHeader, .commentHeaderScreened { font-family: Palatino; font-size: 10px; font-style: italic; color: #9E9E9E; letter-spacing: 1px; text-transform: uppercase; display: block; }
.entryHeader a { font-family: Georgia; font-size: 18px; font-style: italic; color: #3DCBBF; letter-spacing: -1px; line-height: 16px; margin: -3px 0px; }
.entryHeaderSubject { padding: 0px 0px 0px 5px; z-index: 30; }
.entryUserinfo { position: relative; background: #F8F8F8; color: #333333; text-align: center; border: 1px solid #EBEBEB; -moz-border-radius: 4px; margin: -20px 10px 0px -150px; padding: 10px 10px 5px 10px; z-index: 50; }
.entryUserinfo-usericon img { border: 1px solid #EBEBEB; margin: 0px 0px 5px 0px; padding: 0px; }
.entryUserinfo .ljuser a b { font-size: 11px; text-transform: uppercase; margin: 0px; }
.entryText { min-height: 90px; font-size: 11px; text-align: justify; margin: 0px 10px 10px 10px; padding: 10px; }
.entryText img { max-width: 630px; background: #F8F8F8; border: 1px solid #EBEBEB; -moz-border-radius: 4px; padding: 7px; }
.entryText li { color: #444444; }
.entryMetadata { font-size: 10px; color: #666666; text-align: left; margin: 0px; padding: 20px 10px 10px 0px; }
.entryMetadata-label { font-weight: bold !important; color: #777777; text-transform: uppercase; margin: 0px 3px 0px 5px; }
.entryMetadata a, .entryMetadata a:hover { font-weight: normal; color: #6A6A6A; }
.entryMetadata ul { margin: 0px; padding: 0px; }
.entryMetadata li { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/button2.gif) no-repeat 0px 2px; list-style-type: none; display: block; }
.entryMetadata img { margin: 0px 0px 0px 10px !important; }
.entryLinkbar { border-top: 1px solid #EBEBEB; }
.ljcut-link a { font-family: Georgia; font-size: 12px; font-style: italic; color: #C7D1C0; letter-spacing: -1px; }
.ljcut-link a:hover { color: #3DCBBF; }

#footer-menu { text-align: center; border-top: 0px; }
.bodynavblock { background: #F8F8F8; color: #9E9E9E; text-align: center; border-top: 1px solid #EBEBEB; margin: 0px; padding: 20px 20px 7px 20px; }

.commentHolder { background: #FFFFFF; border: 1px solid #EBEBEB; margin: 10px; padding: 14px 0px 0px 0px; }
.commentHeader, .commentHeaderScreened { text-align: left; margin: 0px 0px 10px 0px; padding: 0px 10px 4px 10px; }
.commentHeaderScreened { font-style: normal; }
.commentUserinfo { font-family: Georgia; font-size: 10px; color: #999999; margin: 0px 10px 10px 10px; }
.commentUserinfo-usericon img { height: 80px; width: 80px; border: 1px solid #EBEBEB; margin: 0px 0px 3px 0px; padding: 3px; }
.commentUserinfo .ljuser a b { font-size: 10px; text-transform: lowercase; margin: 0px 0px 5px 0px; }
.commentText { font-size: 11px; color: #9E9E9E; text-align: left; margin: 0px 10px 10px 10px; }
.commentLinkbar { background: #F8F8F8; font-family: Arial; font-weight: bold; font-size: 11px; color: #3DCBBF; text-align: right; text-transform: uppercase; border-top: 1px solid #EBEBEB; margin: 0px; padding: 3px 10px 5px 10px; }
.commentLinkbar a { color: #3DCBBF; }
.commentLinkbar li { list-style-type: none; margin: 0px 0px 0px 10px; padding: 0px; display: inline; }
.replyform { background-color: #FFFFFF; color: #9E9E9E; padding: 17px; }
#qrform { color: #FFFFFF; border: medium none !important; padding: 16px; }
#qrform table { width: 98%; color: #AAAAAA; border:0 none !important; }

.yearlinks { text-align: right; }
.yearlink { padding: 0px 5px 0px 5px; }
.month { margin: 20px 30px 30px 30px; }
.month, .tagstable { width: 90%; }
.daytitles { font-weight: bold; font-size: 10px; color: #9E9E9E; text-align: center; text-transform: uppercase; padding: 0px 10px 4px 10px; }
.daysubjects { font-family: Helvetica; font-size: 11px; color: #9E9E9E; text-align: left; padding: 10px 50px 30px 30px; }
.daysubjects a { font-size: 12px; font-style: italic; text-transform: uppercase; }
.daysubjects img[src*="icon_protected.gif"], .daysubjects img[src*="icon_groups.gif"], .daysubjects img[src*="icon_private.gif"] { margin: 0px !important; }
.day-blank, .day { margin-bottom: 0px; padding: 3px; }
.day-blank, .day, .tagstable, .tagstable td { border: 0px; }
.day-date { width: 30%; background-color: #F8F8F8; font-size: 10px; color: #AAAAAA; text-align: center; border: 1px solid #EBEBEB; padding: 2px; }
.day-count { float: right; width: 50%; font-family: 25px; text-align: center; }
.day-count a { font-family: Georgia; font-size: 20px; color: #3DCBBF; }

.tagstable { width: 90%; margin: 20px auto; }
.tagstable td { font-size: 11px; color: #999999; text-transform: uppercase; }
.tagstable a { font-size: 9px; text-transform: lowercase; }
ul.taglist { padding: 0px 15px 0px 0px; }
ul.taglist li { font-size: 9px; padding: 0px 3px 3px 9px; }
ul.taglist a { font-size: 12px; }

blockquote { font-family: Lucida Sans Unicode; color: #9E9E9E; padding: 5px; }
input, textarea, select { background-color: #FFFFFF; font-size: 11px; border: 1px solid #EBEBEB; -moz-border-radius: 2px; margin: 1px !important; padding: 2px !important; }
textarea { font-family: Helvetica; font-size: 10px; color: #9E9E9E; text-align: left; }
code { font-family: Monospace; color: #9E9E9E; }
b, strong { color: #565656; }
i, em, strike { color: #666666; }
li { list-style-position: inside; list-style-type: decimal-leading-zero; margin: 2px 0px 0px 20px; padding: 0px 0px 2px 9px; }
h1, h2, h3, h4, h5 { font-family: Helvetica; font-style: italic; color: #9E9E9E; text-transform: uppercase; }

.ljuser a b { font-family: Helvetica; color: #3DCBBF; text-transform: lowercase; }
.ljuser img { width: 0px; height: 0px; background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/user-6.gif) no-repeat center left; padding: 12px 10px 0px 0px !important; vertical-align: baseline !Important; }
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="user_ontd.gif"], .ljuser img[src*="community.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"], img[src*="icon_protected.gif"], img[src*="icon_groups.gif"], img[src*="icon_private.gif"], img[src*="syndicated.gif"], img[src*="newsinfo.gif"], div.ContextualPopup img[src="http://l-stat.livejournal.com/horizon/upgrade-paid-icon.gif"] { width: 0px; height: 0px; }
.ljuser img[src*="userinfo.gif"], .ljuser img[src*="user_ontd.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/user-6.gif) no-repeat center left !important; padding: 12px 7px 0px 2px !important; }
.ljuser img[src*="community.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/house.gif) no-repeat center left !important; padding: 11px 10px 0px 2px !important; }
img[src*="icon_protected.gif"], img[src*="icon_groups.gif"], img[src*="icon_private.gif"] { margin: 0px 3px 0px 0px; }
img[src*="icon_protected.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/lock-7.gif) no-repeat center left !important; padding: 13px 9px 0px 0px !important; }
img[src*="icon_groups.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/house.gif) no-repeat center left !important; padding: 11px 10px 0px 0px !important; }
img[src*="icon_private.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/user-6.gif) no-repeat center left !important; padding: 12px 7px 0px 0px !important; }
img[src*="syndicated.gif"], img[src*="newsinfo.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/button2.gif) no-repeat center left !important; padding: 10px 10px 0px 2px !important; }
img[src*="anonymous.gif"],img[src*="openid-profile.gif"], .replyform img[src*="userinfo.gif"], img[src*="none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="btn_edit.gif"] { height: 0px; width: 0px; background: no-repeat scroll 50% 50%; }
img[src*="anonymous.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/computer.gif); padding: 0px 0px 11px 12px !important; }
img[src*="openid-profile.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/speechcloud3.gif); padding: 0px 0px 13px 13px !important; }
.replyform img[src*="userinfo.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/user1.gif); padding: 0px 0px 14px 12px !important; }
img[src*="none.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/heart-1.gif); padding: 0px 0px 9px 8px !important; }
img[src*="help.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/thumbtack.gif); padding: 0px 0px 10px 9px !important; }
img[src*="pencil.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/pencil.gif); padding: 0px 0px 7px 6px !important; }
img[src*="btn_edit.gif"] { background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/note-1.gif); padding: 0px 0px 12px 10px !important; }
div.ContextualPopup img[src="http://l-stat.livejournal.com/horizon/upgrade-paid-icon.gif"] { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/arrow_up-3.gif) no-repeat center left; vertical-align: baseline !important; }

div.ContextualPopup div.Inner { width: 270px; background: none !important; font: 10px Arial; color: #555555 !important; border: 0px; }
div.ContextualPopup div.Userpic img { background-color: #F8F8F8; margin: 10px; }
div.ContextualPopup div.Userpic img, div.ContextualPopup div.Inner div.Content { border: 1px solid #EBEBEB; -moz-border-radius: 6px; padding: 5px; }
div.ContextualPopup .Relation { font-family: Arial; font-weight: bold !important; font-size: 14px !important; color: #3DCBBF !important; text-transform: lowercase; line-height: 12px; border-bottom: 1px solid #F0F0F0; margin-bottom: 3px; padding-bottom: 7px; }
div.ContextualPopup div.Inner div.Content { background-color: #FFFFFF; }
div.ContextualPopup div.Inner div.Content a, div.ContextualPopup div.Inner div.Content a:hover { font-weight: normal; color: #3DCBBF !important; text-decoration: none !important; }
div.ContextualPopup div.Inner div.Content img a:hover { background: none !important; }
div.Relation, div.FriendStatus { font-size: 11px; text-transform: uppercase; letter-spacing: -1px; border-bottom: 1px solid #3DCBBF; padding: 2px 2px 5px 2px; margin: 0px 0px 8px 0px; }

#lj_controlstrip { border-bottom: 1px solid #9E9E9E; }
#lj_controlstrip_statustext { font-family: Palatino; font-size: 10px; color: #9E9E9E; text-transform: uppercase; }
#lj_controlstrip td { background-color: #C7D1C0; border-right: 0px; }
#lj_controlstrip select, #lj_controlstrip input, .bodynavblock select, .bodynavblock input, .replyform input, .replyform select { background-color: #FAFAFA !important; font: 10px Helvetica !important; color: #9E9E9E !important; text-transform: uppercase; }
#lj_controlstrip select, #lj_controlstrip input, .bodynavblock select, .bodynavblock input { border: 1px solid #9E9E9E; }
#lj_controlstrip td a { font-weight: bold; color: #FFFFFF; }
#lj_controlstrip td a:hover { text-decoration: none; }
#lj_controlstrip .ljuser img { display: none; }
#lj_controlstrip .ljuser a b, #lj_controlstrip .ljuser a b:hover { font-size: 14px; color: #FAFAFA; letter-spacing: -1px; border-bottom: 0px; }
DISPLAY > PRESENTATION Expand BASIC OPTIONS and ADDITIONAL OPTIONS

Userinfo Position in Entries → Left side of the Entry Text
Wrap Entry text under userinfo → No
SIDEBAR As you can see from the previews, the sidebar only holds up to 3 boxes.

Feel free to mix it up however you want, but just keep in mind that the sidebar is coded to fit around the profile box, so make sure that the profile box is enabled to have it work properly.
IMAGES Save these to your own servers to ensure that the images don't die on you when my Photobucket explodes :D

Tiny Icons → User - Commmunity - News/Syndicated (and bullet points)
Entry Header → Protected - Private - Groups
Comment Pages → Anonymous - Open ID - User - None - Help - Pencil - Edit
Background → Pattern - Transparent #1 - white

An easy way to replace all of the old URLs listed below with the new is to use CTRL + H when editing in a program like Notepad.