smooth sailing: palaven
I actually made another layout! It's been more than a year, geez. Long story short, I was hit by some pretty hefty IRL problems and it killed off my creativity, big time. I hope this means the end of that era and a return to regular layout updates!
This layout was actually created a few months ago for my personal journal, and now I've finally taken the time to refine the code for public consumption. :) I'm super rusty so yeah, do let me know if any bugs pop up. It is designed for a widescreen monitor, so I wouldn't recommend using it if you're still using a monitor from 1997. :P
Garrrruuuuusssss ♥
EDIT: Found the first bug! If the userpic is waaaaaaay off to the right, check under the newly-added "Display" heading in the instructions below.
EDIT 2: Added a fix for the same problem in the comment pages.
EDIT 3: Made the comment username font match up with the one used on the friend page usernames. Yeah you can tell I coded the comment pages in a hurry.
layout notes
account types
Basic, Plus*, Paid
(Ads on vertical.)
compatible browsers
Internet Explorer 8, Mozilla Firefox, Opera, Safari, Google Chrome
minimum resolution
1200px+ wide recommended
comment pages
Yes
navstrip
Optional
disabled
All sidebar stuff but the Links List and Free Text.
css stylesheet
stylesheet
/*---------------------------------------------------
STYLESHEET CREATOR: scythe.livejournal.com
STYLESHEET NAME: Palaven
S2 STYLE: Smooth Sailing
DOWNLOAD: thrashmetal.livejournal.com
****Please remember to credit!****
-----------------------------------------------------*/
body {
color:#333333;
font-family:Courier New;
font-size:12px;
line-height:1.3em;
margin:0;
}
textarea, input, select {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #CCCCCC;
color:#333333;
font-size:11px;
padding:2px 3px;
}
a, a:visited {
color:#17CBDC;
text-decoration:none;
}
a:hover {
color:#555555;
}
a img {
border:medium none;
}
li {
-moz-background-inline-policy:continuous;
background:url("http://lj.irondevil.org/components/grayli.png") no-repeat scroll 0 7px transparent;
color:#555555;
list-style-type:none;
margin:4px 0;
padding:0 0 0 13px;
}
blockquote {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #EEEEEE;
padding:15px;
}
.header-title {
color:#000000;
font-size:53px;
letter-spacing:-4px;
margin-left:51px;
text-transform:uppercase;
}
.header-title:first-letter {
color:#17CBDC;
}
.header-subtitle {
display:none;
}
.pagefooterblock {
display:none;
}
.bodyblock {
margin:0 auto;
padding-left:35px;
padding-top:26px;
}
.bodynavblock {
font-size:11px;
margin-bottom:10px;
padding:0;
text-transform:uppercase;
width:491px;
}
.body-title {
display:none;
}
.body-midtitle {
display:none;
}
.entryHolder {
color:#333333;
margin-bottom:40px;
margin-left:22px;
margin-top:10px;
width:491px;
}
.entryUserinfo {
margin-left:510px;
margin-top:-51px;
position:absolute;
}
.entryUserinfo-username {
margin-top:6px;
text-align:center;
}
.entryUserinfo-username .ljuser a b, .commentUserinfo-username .ljuser a b {
color:#000000;
font-size:11px;
font-weight:normal;
text-transform:uppercase;
font-family:"Courier New";
}
.entryUserinfo-usericon img, .commentUserinfo-usericon img {
border:1px solid #DDDDDD;
padding:7px;
}
.entryText {
font-family:Helvetica,Arial,Sans-serif;
font-size:11px;
min-height:50px;
text-align:justify;
}
.entryText img {
max-width:300px;
}
.entryHeader {
border-bottom:0 none;
border-top:5px solid #000000;
color:#666666;
font-size:0;
padding:11px 0 6px;
}
.entryHeader a {
color:#000000;
font-size:17px;
}
.entryHeaderSubject {
color:#FFFFFF;
display:block;
}
.entryHeaderDate {
color:#000000;
float:right;
font-size:10px;
margin:-30px 0 0 425px;
position:absolute;
text-align:right;
text-transform:uppercase;
width:66px;
}
.entryLinkbar {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #EEEEEE;
color:#000000;
margin-top:12px;
padding:4px 11px;
text-align:right;
text-transform:lowercase;
}
.entryLinkbar a {
color:#555555;
font-size:11px;
margin-left:12px;
text-transform:uppercase;
}
.entryLinkbar ul {
margin-bottom:0 !important;
margin-left:0 !important;
margin-top:0 !important;
padding:0;
}
.entryLinkbar li {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
display:inline;
margin:0;
padding:0;
}
.entryMetadata ul {
font-size:11px;
margin:15px 0 0;
padding:0;
text-transform:uppercase;
}
.entryMetadata li {
background:none repeat scroll 0 0 transparent;
margin:0;
padding:0;
}
.entryMetadata-label {
color:#000000;
margin-right:3px;
text-transform:uppercase;
}
.entryMetadata a {
color:#555555;
}
.entryMetadata a:hover {
color:#000000;
}
.yearlinks {
text-align:right;
}
.yearlink {
padding-left:4px;
padding-right:4px;
}
.month {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
margin:13px auto;
padding:0 0 12px;
width:420px;
}
.daysubjects {
padding:0 8px 10px 40px;
}
.daytitles {
border:1px solid #FFFFFF;
color:#000000;
text-align:center;
text-transform:uppercase;
}
.day {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #EEEEEE;
border:1px solid #FFFFFF;
margin-bottom:0;
padding:3px;
}
.day-date {
font-family:Helvetica,Arial,Sans-serif;
font-size:10px;
text-align:center;
width:50%;
}
.day-count {
float:right;
font-size:20px;
text-align:center;
width:50%;
}
.day-count a {
color:#000000;
font-family:Helvetica,Arial,Sans-serif;
font-size:19px;
font-weight:normal;
padding:3px;
}
.sidebar {
margin-left:20px;
width:309px;
}
.sidebox {
float:left;
font-family:Helvetica,Arial,Sans-serif;
font-size:11px;
margin-right:12px;
margin-top:0;
text-align:justify;
}
.sideboxTitle {
display:none;
}
.sidebox #freetext {
width:160px;
}
.sidebox #systemlinks {
width:100px;
}
.sidebox #systemlinks a:link, .sidebox #systemlinks a:active, .sidebox #systemlinks a:visited {
color:#000000;
font-family:"Courier New";
text-transform:uppercase;
}
.sidebox #systemlinks a:hover {
color:#555555 !important;
}
.sidebox #profile, .sidebox #summary, .sidebox #latestmonth, .sidebox #search, .sidebox #tags_sidebox {
display:none;
}
.listtitle {
display:none;
}
.pageblock {
}
.pageheaderblock {
margin:65px auto 0;
}
.header-menu {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #000000;
margin-top:20px;
padding-bottom:10px;
padding-left:77px;
padding-top:9px;
}
.header-menu a {
color:#FFFFFF;
font-size:12px;
text-transform:lowercase;
}
.header-menu a:hover {
color:#17CBDC;
}
#footer-menu {
border-top:5px solid #000000;
font-size:11px;
margin-bottom:10px;
margin-left:22px;
text-align:right;
width:491px;
}
#footer-menu a, .footer-menu a:visited {
color:#000000;
margin-left:19px;
text-transform:uppercase;
}
#footer-menu ul {
margin:0;
padding:5px 0 0;
}
#footer-menu li {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
display:inline;
margin:0;
padding:0;
}
.header-menu ul {
margin:0 auto;
padding:0;
}
.header-menu li {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
display:inline;
list-style:none outside none;
margin-right:11px;
}
.taglist {
padding-bottom:10px;
}
.ljuser a b {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 transparent;
color:#000000;
}
img[src*="userinfo.gif"], img[src*="userinfo-support.gif"], img[src*="user_ontd.gif"] {
background-image:url("http://irondevil.org/icon/categories/tutorial9/user.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:13px 12px 0 0 !important;
width:0;
}
img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-image:url("http://irondevil.org/icon/categories/tutorial9/community.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:12px 11px 0 0 !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url("http://irondevil.org/icon/categories/tutorial9/community.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:12px 12px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url("http://irondevil.org/icon/categories/tutorial9/rss.png");
background-repeat:no-repeat !important;
height:0;
padding:13px 13px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url("http://irondevil.org/icon/categories/tutorial9/locked.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:11px 14px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url("http://irondevil.org/icon/categories/tutorial9/groups.png") !important;
background-repeat:no-repeat;
height:0;
padding:11px 14px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url("http://irondevil.org/icon/categories/tutorial9/private.png") !important;
background-repeat:no-repeat;
height:0;
padding:11px 14px 0 0 !important;
width:0;
}
div.ContextualPopup img {
border:0 none;
}
div.ContextualPopup div.Inner {
border:medium none;
color:#000000 !important;
font-family:Helvetica;
font-size:11px;
padding:7px;
width:20em;
}
div.ContextualPopup .Content {
line-height:1.4;
margin-right:50px;
padding:2px 4px 6px;
}
div.ContextualPopup .Relation {
font-weight:bold !important;
}
div.ContextualPopup .Content .OnlineStatus {
font-weight:bold;
}
div.ContextualPopup .Userpic {
padding:8px 8px 0 0;
}
div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {
color:#000000 !important;
font-weight:normal;
text-decoration:none !important;
}
.entryLinkbar a[href*="subscriptions"], .entryLinkbar a[href*="tellafriend"], .entryLinkbar a[st_page*="home"] {
display:none;
}
#lj_controlstrip {
-moz-background-inline-policy:continuous !important;
background:none repeat scroll 0 0 transparent !important;
}
#lj_controlstrip_statustext {
color:#333333;
}
#lj_controlstrip a {
color:#333333;
}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic {
border-right:0 none;
}
#lj_controlstrip_userpic {
background-image:url("http://stat.livejournal.com/palimg/controlstrip/ljlogo.gif/ptd4dce8000000");
}
#lj_controlstrip_loggedout_userpic {
background-image:url("http://stat.livejournal.com/palimg/controlstrip/ljlogo-loggedout.gif/ptd4dce8000000");
}
#lj_controlstrip_search_input_text, #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
-moz-background-inline-policy:continuous !important;
background:none repeat scroll 0 0 transparent !important;
border:0 none;
color:#17CBDC !important;
}
#lj_controlstrip_search {
visibility:hidden;
}
.commentHeader, .commentHeaderScreened {
border-bottom:5px solid #000000;
color:#000000;
font-family:"Courier New";
font-size:10px;
margin-bottom:11px;
text-transform:uppercase;
}
.commentHolder {
font-family:Helvetica,Arial,Sans-serif;
font-size:11px;
margin:22px;
min-height:149px;
text-align:justify;
width:491px;
}
.commentText {
margin-left:12px;
}
.commentUserinfo {
color:#FFFFFF;
margin-left:-129px;
margin-top:-27px;
position:absolute;
text-align:center;
}
.commentUserinfo-username {
margin-top:3px;
}
.commentLinkbar {
margin-top:12px;
padding:4px 11px;
}
.commentLinkbar ul {
margin:0;
padding:0;
text-align:right;
}
.commentLinkbar li {
background:none repeat scroll 0 0 transparent;
display:inline;
}
.commentLinkbar a {
color:#555555;
font-family:"Courier New";
font-size:10px;
text-transform:uppercase;
}
form#qrform table {
border:0 none !important;
margin-top:10px;
}
how to install
select journal style
1. Apply any Smooth Sailing theme.
2. Scroll down to Choose a Page Setup and select 2 Column (sidebar on left).
displayMake sure Userinfo Position in Entries and Userinfo Position in Comments (if using custom comment pages) is set to Left Side of Entry Text.
entry textPaste the code into its respective boxes:
Format for Date and Time (Recent/Friends/Entry/Reply page) and Format for Date and Time (Day page only)
%%dd%% %%mon%% %%yyyy%%
sidebarSet these drop down boxes to the following:
- Links Visibility - 1
- Free Text Position - 2
links listDefine your links. Define your links. These are the links that show up in the left sidebar.
custom css
Make sure any drop-down boxes are set to No, paste the code into the box, and click Save Changes.
appendix
credit and comment
• Please credit thrashmetal somewhere public. (Profile, Links List, Friends Only post, etc.)
• Comments aren't required, but are appreciated!
resources
• Mini icons by Tutorial9.
• Garrus icon by mesmerise!
read the layout faq before asking questions!