Smooth Sailing; It's an Adventure ...Right?

Aug 06, 2009 11:30



smooth sailing: it's an adventure ...right?

→ Preview: LIVE
→ Problems: FAQ

Please credit kill_brainz

About This Layout

ACCOUNT  All (Basic/Paid/Plus)
TESTED ON  Mozilla Firefox, Internet Explorer 8
AD-PLACEMENT  Between Entries
DISABLED  Journal title, menu, sidebar (tags, summary, links, calendar, search)
FEATURES  Contextual pop-up, tiny icons, nav-strip, rounded corners, opacity
FINAL NOTES  FireFox for the rounded corners of course.

Installation
01. Select Journal Style
Select any Smooth Sailing theme and pick an ad placement you prefer.
Don't forget to set the sidebar to the left.

02. Customize Journal Style
Copy and paste the CSS stylesheet below and make sure that you select no for all of the drop-down menus.

/*

LJ STYLE: Smooth Sailing
LAYOUT: It's An Adventure ...Right?
MAKER: kill_zombie

PLEASE CREDIT:
http://community.livejournal.com/kill_brainz/
http://kill_zombie.livejournal.com/

*/

body { background-color: #F6F4F5; font-family: Verdana; font-size: 11px; color: #333333; margin: 0px; }
a, a:visited { font-weight: bold; color: #111111; text-decoration: none; }
a:hover { color: #694866; text-decoration: none; }

.pageblock { width: 827px; margin: 0 auto; }
.pagefooterblock, .header-icon, .header-title, .header-menu, .bodyheaderblock, .entryHeaderDate, .sideboxTitle, .sidebox #systemlinks, .sidebox #latestmonth, .profile-content, .profile-label, .sidebox #search, .sidebox #tags_sidebox { display: none; }
.pageheaderblock { text-align: left; margin: 0px auto; }
.header-subtitle { width: 827px; height: 467px; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/kill%20brainz/Haruhi2header.jpg); background-repeat: no-repeat; font-size: 0px; color: #F6F4F5; -moz-border-radius: 12px; margin: 0px 0px 70px 0px; }

.bodyblock { padding: 0px; margin: 240px auto 0px auto; }
.bodynavblock { background-color: #694866; -moz-border-radius: 12px; color: #000000; margin: 80px 0px 50px 0px; padding: 10px 20px; }
.bodynavblock, #footer-menu { font-family: Verdana; font-size: 11px; font-weight: bold; color: #FFFFFF; text-align: center; }
.bodynavblock a, #footer-menu a { color: #FFFFFF; }
.bodynavblock a:hover, #footer-menu a:hover { color: #FAFAFA; text-decoration: none; }
#footer-menu a { font-size: 14px; text-transform: uppercase; letter-spacing: -1px; }
#footer-menu ul { margin: 0px; padding: 0px; }
#footer-menu li { padding: 0px; margin: 0px 15px 0px 0px; display: inline; }

.entryHolder { padding: 0px; margin: 10px 0px 30px 0px; }
.entryUserinfo { text-align: right; margin: 0px 0px 0px 20px; }
.entryUserinfo a { font-family: Georgia; font-size: 15px; }
.entryUserinfo-usericon img { border: 13px solid #694866; -moz-border-radius-topleft: 12px; -moz-border-radius-bottomright: 12px; padding: 1px; margin: 0px 0px 2px 0px }
.entryUserinfo-usericon img:hover { border: 13px solid #FFFFFF; }
.entryText { background-color: #FFFFFF; font-family: Verdana; font-size: 10.5px; color: #222222; text-align: justify; line-height: 1.3em; -moz-border-radius-topleft: 12px; padding: 20px 25px 30px 25px; }
.entryText .ljuser a b { letter-spacing: 0px; }
.entryHeaderSubject { font-size: 0px; }
.entryHeader { line-height: 14px; padding: 0px 140px 0px 5px; }
.entryHeader a { font-family: Verdana; font-weight: bold; font-size: 16px; color: #694866; letter-spacing: -1px; text-align: left; text-transform: uppercase; padding: 0px 0px 1px 0px; margin: 0px 0px 0px 5px; }
.entryHeader a:hover { color: #555555; }
.entryMetadata { background-color: #FFFFFF; font-family: Tahoma; font-size: 9px; color: #555555; line-height: 1.5em; text-transform: uppercase; -moz-border-radius-bottomright: 12px; padding: 20px 30px 20px 25px; }
.entryMetadata a { font-weight: normal; color: #555555; text-decoration: none; }
.entryMetadata a:hover { color: #555555; border-bottom: 1px dotted #444444; text-decoration: none; }
.entryMetadata-label { font-weight: normal; padding: 0px 3px 0px 0px; }
.entryMetadata ul { margin: 0px; padding: 0px; }
.entryMetadata li { margin: 0px; padding: 0px; list-style: none; display: block; }
.entryLinkbar { text-align: left; padding: 0px; margin: 0px 0px 30px 0px; }
.entryLinkbar a { background-color: #FFFFFF; font-family: Verdana; font size: 7px; font-weight: bold; color: #222222; text-decoration: none; text-transform: uppercase; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; padding: 10px 7px 10px 7px; }
.entryLinkbar a:hover { color: #555555; text-decoration: none; }
.entryLinkbar ul { margin: 0px; padding: 0px; }
.entryLinkbar li { padding: 0px; margin: 0px 10px 0px 0px; display: inline; }

.sidebar { position: absolute; width: 827px; height: 160px; top: 540px; background-color: #694866; -moz-border-radius: 12px; padding: 0px; margin: 0 auto; }
.sidebar .ljuser a b { color: #FFFFFF; letter-spacing: 0px; }
.sidebar .ljuser a b:hover { color: #FAFAFA; }
.sidebar i, .sidebar em, .sidebar b, .sidebar strong { color: #FAFAFA; }
.sidebox, .sideboxContent { padding: 0px; margin: 0px; }
.sidebox { float: left; }
.sidebox #profile { width: 80px; text-align: left; padding: 0px 0px 0px 20px; }
.sidebox #freetext { width: 825px; text-align: left; padding: 15px 10px 15px 20px; }
.sidebox #freetext a { font-family: Georgia; font-size: 20px; color: #FFFFFF; letter-spacing: -3px; text-transform: uppercase; padding: 1px 3px 2px 0px; margin: 0px 7px 0px 0px; }
.sidebox #freetext a:hover { color: #999999; }
.sidebox #freetext2, .sidebox #freetext3, .sidebox #freetext4, .sidebox #freetext5, .sidebox #freetext6, .sidebox #freetext7, .sidebox #freetext8, .sidebox #freetext9, .sidebox #freetext10, .sidebox #freetext_private { width: 680px; font-family: Verdana; font-size: 10px; color: #FFFFFF; text-align: justify; line-height: 1.2em; padding: 0px 20px 20px 20px; }
img.profile-userpic { height: 80px; width: 80px; }

.commentHolder { padding: 0px; margin: 0px 0px 30px 0px; }
.commentUserinfo { font-family: Verdana; font-size: 9px; color: #333333; text-align: left; margin: 0px 20px 0px 0px; }
.commentUserinfo .ljuser a b { letter-spacing: 0px; text-transform: uppercase; }
.commentUserinfo-usericon img { height: 85px; width: 85px; border: 10px solid #FFFFFF; -moz-border-radius-bottomleft: 12px; -moz-border-radius-bottomright: 12px; margin: 0px 0px 2px 0xp; }
.commentText { background-color: #FFFFFF; font-family: Verdana; font-size: 10px; color: #222222; line-height: 1.25em; text-align: left; -moz-border-radius-bottomleft: 12px; -moz-border-radius-bottomright: 12px; padding: 10px 15px 10px 15px; }
.commentHeader, .commentHeaderScreened { background-color: #694866; font-family: Verdana; font-size: 11px; color: #FFFFFF; text-align: center; -moz-border-radius-topright: 12px; -moz-border-radius-topleft: 12px; padding: 15px 10px 2px 10px; margin: 0px; }
.commentHeaderScreened { font-style: italic; }
.commentHeader { color: #000000; font-family: ; font-size: 12px; padding: 4px 0px 4px 8px; }
.commentHeader a { color: #FFFFFF; }
.commentHeader a:hover { color: #FAFAFA; }
.commentHeaderSubject { font-weight: bold; }
.commentLinkbar { font-family: Verdana; font-size: 9px; font-weight: bold; color: #222222; text-align: right; text-transform: uppercase; padding: 0px; }
.commentLinkbar a { color: #694866; }
.commentLinkbar a:hover { color: #222222; }
.commentLinkbar ul { margin: 0px; padding: 0px; }
.commentLinkbar li { padding: 0px 5px 0px 0px; margin: 0px; display: inline; }
.replyform { background-color: #FAFAFA; color: #222222; padding-left: 10px; }
#commenttext { width: 100%; }

.yearlinks{ text-align: right; }
.yearlink{ padding: 0px 4px 0px 4px; }

.month { width: 90%; background-color: #FFFFFF; -moz-border-radius: 12px; padding: 5px; margin: 10px 0px 0px 30px; }
.daysubjects { color: #000000; padding: 8px 8px 8px 40px; }
.daysubjects img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/018.png); filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.daysubjects img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{ width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/006-1.png); filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.daysubjects img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/013.png); filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.daysubjects img { width: 0; height: 0; background-repeat: no-repeat; /* so that IE users will still see an image */ background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/018.png); padding: 16px 48px 0 0; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.daytitles { font-size: 12px; font-weight: bold; color: #222222; text-transform: uppercase; text-align: center; padding: 5px 2px 8px 2px; }
.day-blank, .day { min-height: 50px; border: 0px }
.day-date { width: 40%; background-color: #694866; font-family: Georgia; font-size: 13px; color: #FFFFFF; text-align: center; }
.day-count { width: 50%; float: right; }
.day-count a { font-family: Arial; font-size: 15px; font-weight: normal; color: #222222; text-align: right; text-decoration: none; }
.day-count a:hover { color: #694866; }

.tagstable, .tagstable td { border: 0.5px solid #F6F4F5; }
.tagstable { width: 90%; font-family: Verdana; font-size: 9px; text-align: center; }

blockquote { font-family: Georgia; color: #555555; border-left: 10px solid #555555; padding: 3px 20px 3px 20px; }
textarea, input, select { font-size 9px; border: 1px solid #999999; }
textarea { background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/kill%20brainz/Untitled-5.jpg); font-family: Verdana; font-size: 9px; color: #888888; text-align: left; line-height: 12px; border: 1px solid #E0E0E0; padding: 2px; margin: 1px; }
input, select { background-color: #F7F7F7; font-family: Verdana; color: #444444; text-transform: uppercase; text-align: left; padding: 1px; margin: 1px; }
b, strong { color: #666666; }
i, em { color: #694866; }
u { text-decoration: none; border-bottom: 1px dotted #694866; }
strike { font-weight: bold; color: #555555; }
img, img a { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
img:hover, img a:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; !important }

.entryHeader img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/018.png); filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.entryHeader img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{ width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/006-1.png); filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.entryHeader img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; padding: 0 16px 16px 0; background: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/013.png); filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.entryHeader img { width: 0; height: 0; background-repeat: no-repeat; /* so that IE users will still see an image */ background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/018.png); padding: 16px 48px 0 0; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; /* so that IE users will still see an image */ background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/008.png); padding: 16px 16px 0 1px !important; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/userinfo-purple-1.png); padding: 12px 12px 0 1px !important; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { background-color:transparent; background-image: url(http://i274.photobucket.com/albums/jj270/jessica0293/tiny%20icons/comm-purple.png); padding: 12px 12px 0 1px !important; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; !important }
.ljuser a b { font-family: Georgia; font-weight: bold; letter-spacing: -1px; color: #694866; }
.ljuser a b:hover { color: #444444; }

div.ContextualPopup { position: relative; font: normal 9px "Verdana" !important; text-align: left; margin: 0px; }
div.ContextualPopup div.Inner { background: transparent url(http://i274.photobucket.com/albums/jj270/jessica0293/kill%20brainz/Untitled-5.jpg) !important; color: #444444 !important; border: 1px solid #4D2852; padding: 0; width: 280px; }
div.ContextualPopup .Userpic { background-color: #EEEEEE; padding: 3px; margin: 5px 5px 0; border: 1px solid #4D2852; }
div.ContextualPopup .Content { background-color: #FBF2FC; padding: 5px; border-right: 1px solid #4D2852; margin-right:68px; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner a:hover, div.ContextualPopup div.Inner a:active { font-weight: bold; color: #6C4C70 !important; text-decoration: none !important; }
div.ContextualPopup .Relation { font-size: 9pt; text-transform: uppercase; }

#lj_controlstrip { filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; !important }
#lj_controlstrip:hover { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; !important }
#lj_controlstrip a, #lj_controlstrip a:visited { font-family: Tahoma; font-size: 9px; font-weight: lighter; color: #FFFFFF; text-decoration: none; text-transform: uppercase; }
#lj_controlstrip a:hover { font-weight: lighter; color: #F51D57; text-decoration: underline; }
#lj_controlstrip_statustext { font-family: Verdana; size: 9px; color: #F2F2F2; text-transform: uppercase; }
table#lj_controlstrip td { background-color: #111111; font-family: Georgia; font-size: 10px; border: 1px solid #111111; border-left: none; }
form#qrform table { border-width: 0px !important; padding-right: 6px; }

03. Display > Presentation
Basic Options
Userinfo Position in Entries → Right side of the Entry Text

04. Topbar → Module Positions
I designed the topbar specifically, so to have it look like the image and live preview just make sure all the other boxes are hidden and in this specific order:
1 → Freetext #1
2 → Profile
3 → Freetext #2

The header-menu is disabled and instead, the links in freetext #1 and only that module have been designed to appear in the large Georgia font. Freetext #1 acts are your menu links so go crazy with it.

05. Header Image
Upload to your own servers as always → featuring The Melancholy of Haruhi Suzumiya

Make sure you have something written in your journal subtitle so that the header shows up.

style: smooth sailing, maker: kill_zombie

Previous post Next post
Up