![](http://i274.photobucket.com/albums/jj270/jessica0293/kill%20brainz/lay20small.jpg)
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 StyleSelect any Smooth Sailing theme and pick an ad placement you prefer.
Don't forget to set the sidebar to the left.
02.
Customize Journal StyleCopy 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 > PresentationBasic 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.