(LAYOUT 023 →) smooth sailing, undertow.
UNDERTOW; static | live
Browsers: Chrome, Firefox, IE, Safari
Accounts: Basic, Plus, Paid
INSTALLATION 101
Go to Customize -> Select a Smooth Sailing stylesheet.
Page setup -> 2 Column (sidebar on left) option selected.
Ad placement -> between entries* (ads don't show up for some reason)
Display tab -> Presentation -> Additional options -> user picture position should be set to right.
Custom CSS tab -> Set all dropdown menus to NO.
Active: Sidebar tags, calendar, blurb, comment pages look decent (for once), etc
Input corresponding code:
/* entitled: undertow */
/* stylesheet: smooth sailing */
/* maker: silentevocation @ fleeting_days */
/* for use at livejournal.com */
body {
font-family: Verdana, sans-serif;
color: #A3A3A3;
background-attachment: fixed;
}
textarea, input, select {
background:none repeat scroll 0 0 #111111;
border:1px solid #000000;
font-size:11px;
color: #B5B5B5;
line-height:15px;
padding:1px;
margin: 3px;
}
blockquote {
font-family: courier new;
background:black;
text-transform:uppercase;
padding: 7px;
color:#CECECE;
}
blockquote i, blockquote em, blockquote b {
font-family: courier new;
font-size: 11px;
}
.pageblock {
width: 100%;
background-color: #000000;
margin: auto;
margin-top:-10px;
margin-bottom:-10px;
padding: 0;
color: #E5D7E1;
background-attachment: fixed;
font-size: 9px;
background-image: url("http://i44.tinypic.com/zwdurs.png");
background-repeat:repeat-y;
}
a {
font-size: 12px;
color: #ffffff;
font-family: helvetica;
text-decoration: none;
border:none;
}
b, strong {
color: #96B8CE;
}
i, em {
color: #A3DBCD;
font-family: Times, serif;
font-size: 12px;
}
a:hover {
color:#8FAFC6;
}
.entryHeaderDate a {
color: #A3A3A3;
text-decoration: none;
}
.entryHeaderDate a:hover {
color: #A3A3A3;
text-decoration: none;
}
.header-title {
display: none;
}
/* FOR NAVIGATION */
.header-menu {
padding-top:40px;
padding-bottom:15px;
background: none;
padding-left:145px;
}
.header-menu a {
font-family: helvatica, sans-serif;
font-size:12px;
padding: 20px 15px 15px 12px;
letter-spacing: 1px;
text-transform: uppercase;
text-align: right;
}
.header-menu a:link, .header-menu a:active, .header-menu a:visited {
color: #96B8CE;
font-style: italic;
}
.header-menu a:hover {color: white;
font-style: italic;
}
.header-subtitle {
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 2;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
.pageheaderblock {
text-align: center;
}
.pagefooterblock {
display:none;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #111111;
}
/* ENRTY BODY */
.bodyblock {
padding: 12px 42px;
}
.bodyheaderblock {
margin: 0 auto;
padding-top: 10px;
}
.bodynavblock {
text-align: right;
}
.bodynavblock a, .bodynavblock a:visited {
color: #BCBCBC;
}
/* PAGE VIEW */
.body-title {
display: none;
}
.body-midtitle {
font-family:Arial, sans-serif;
font-size: 10px;
color: #AFAFAF;
text-align: center;
padding-left: 8px;
background-color: 000000;
}
/* JOURNAL ENTRIES */
.entryHolder {
color: #AAAAAA;
width:735px;
background-image:url("http://i44.tinypic.com/2j3qk3t.png");
padding: 15px;
font-family:verdana, sans-serif;
font-size: 11px;
border-top: 1px solid #333333;
text-align: justify;
z-index:1;
}
.entryUserinfo {
margin-top: 15px;
margin-left:-120px;
border: 1px solid #333333;
}
.entryUserinfo-usericon img {
background-color:#000000;
padding:6px;
border:none;
}
.entryText {
padding: 15px;
background: 151515;
line-height: 1.5em;
width: 595px;
min-height:170px;
}
/* DATE AND SUBJECT */
.entryHeaderDate {
background-color: black;
color: #606060;
font-family:times;
text-align:center;
font-style: italic;
font-size: 11px;
letter-spacing: 0px;
margin: 5px;
z-index:0;
}
.entryHeader {
background: black;
color:#828282;
font-family:Lucida Sans, sans-serif;
padding: 13px;
margin: 0;
z-index:0;
}
.entryHeader a {
color: white;
text-align:center;
font-family:Lucida Sans, serif;
font-size: 21px;
line-height: 22px;
letter-spacing: -2px;
text-transform: uppercase;
.entryHeader a:hover {}
}
/* SUBJECT LINE */
.entryHeaderSubject {
display: block;
font-size: 0px;
}
.entryMetadata {
padding:5px 0px 7px 7px;
text-align: left;
background: black;
z-index: -1;
width:728px;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
z-index: -1;
}
.entryMetadata li {padding: 2px 0 2px 15px; background: transparent url(http://i42.tinypic.com/w2kh6o.png) no-repeat scroll 0 50%;
list-style: none;list-style:none outside none;
}
.entryMetadata-label {
display:none;
}
/* ENTRY COMMENT LINKS */
.entryLinkbar {
background:none repeat scroll 0 0 black;
text-align: right;
align: right;
padding: 4px 0px 4px 0px;
margin-bottom:0;
text-transform: uppercase;
width: 735px;
}
.entryLinkbar a {
background:none repeat scroll 0 0 transparent;
color:#78A0A0;
font-family:courier new;
font-size: 11px;
letter-spacing:1px;
text-transform:lowercase;
}
.entryLinkbar a:hover {
color:#AAAAAA;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 2px;
margin: 0px;
background-color: #000000;
display: inline;
}
.commentHolder {
color: #A3A3A3;
background-image:url("http://i44.tinypic.com/2j3qk3t.png");
border-top: 1px dotted #96B8CE;
font-size: 11px;
margin: 4px 0px 4px 0px;
}
.commentUserinfo {
text-align: center;
margin: 0;
}
.commentUserinfo-usericon img {
text-align: center;
padding: 7px;
border: none;
border: 1px solid #333333;
background-color: #000000;
margin:0;
}
.commentText {
padding: 6px;
background-image:url("http://i44.tinypic.com/2j3qk3t.png");
width:100%;
min-height:144px;
margin-left:0;
}
.commentHeader {
background-color: #000000;
color: #939393;
font-family:Arial, sans-serif;
font-size: 13px;
padding: 4px 0px 4px 8px;
}
.commentHeader a {
color: #A3A3A3;
background-color:#000000;
}
.commentHeaderScreened {
font-family:Arial, sans-serif;
font-size: 11px;
background-color: #111111;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: none;
font-size: 14px;
background-color:#000000;
font-style: Arial, sans-serif;
}
.commentLinkbar {
font-family:Arial, sans-serif;
font-size: 11px;
color: #A3A3A3;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 5px 5px 5px 5px;
margin-bottom: 3px;
background-color: #000000;
display: inline;
}
#commenttext {
background-color:#000000;
}
.replyform {
padding-left: 10px;
}
.yearlinks {
text-align: right;
}
.yearlink {
padding-left: 4px;
padding-right: 4px;
}
.month {
width: 100%;
background: black;
border: 1px solid #333333;
margin: 4px 4px 4px 4px;
}
.daysubjects {
color: #efefef;
background: black;
padding: 4px 4px 4px 4px;
}
.daytitles {
text-align: center;
border: 0px solid #dddddd;
background: #96B8CE;
color: efefef;
}
.day-blank {
border: 0px solid #dddddd;
}
.day {
}
.day-date {
color: #73626E;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 14px;
font-weight: bold;
}
.day-count a {
text-decoration: none;
}
/* GENERAL SIDEBAR */
.sidebar {
color: #AAAAAA;
font-size: 11px;
line-height: 1.5em;
margin-left:163px;
width: 270px;
padding-right:6px; }
/* WITHIN SIDEBAR */
.sidebox {
color: #AAAAAA;
width: 270px;
background:url("http://i44.tinypic.com/2j3qk3t.png");
}
/* SIDEBOX TITLE */
.sideboxTitle {
font-family: lucida sans, serif;
font-size: 18px;
color: #ffffff;
background:black;
text-transform:uppercase;
letter-spacing:-2px;
line-height:40px;
text-align:center;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
}
.sideboxContent {
text-align: justify;
padding: 12px 4px 12px 4px;
}
.sidebox #profile, sidebox #latestmonth {
text-align: justify;
}
.sidebox #tags_sidebox {
padding-left: 5px;
line-height: .75em;
text-align: left;
color: white;
}
.sidebox #tags_sidebox a {
display: block;
background:black;
padding-left: 5px;
border-bottom: 1px solid #333333;
padding-bottom: 7px;
padding-top: 7px;
}
.sidebox #tags_sidebox a:hover {
color: #A3DBCD;
border-bottom: 1px solid #C9C9C9;
}
.sidebox #systemlinks {
text-align: center;
}
.sidebox #latestmonth table {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}
.latestmonth-active{
margin:1px;
padding:3px;
}
.latestmonth-inactive{
background:black;
color: #96B8CE;
margin:1px;
padding:3px;
}
.latestmonth-active a, .latestmonth-active a:link, .latestmonth-active a:active {
color:#A1DEF3;
text-decoration:none;
}
.latestmonth-active:hover {
background:#ffffff;
color:#33B8E0;
text-decoration:none;
}
.latestmonth-active a:hover
{
color: #999999;
}
.listtitle {
font-weight: none;
}
.profile-label {
font-weight: none;
}
#footer-menu {
padding: 3px;
font-size: 11px;
}
#footer-menu a {
display: none;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable {
width: 500px;
}
/* FOR TINY ICONS */
img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"] {
background-image:url("http://i39.tinypic.com/dd4sj.png");
background-repeat:no-repeat !important;
height:0;
padding:10px 11px 4px 0 !important;
width:0;
}
img[src*="anonymous.gif"] {
background-image:url("http://i46.tinypic.com/2i6jmnn.gif");
background-repeat:no-repeat !important;
height:0;
padding:17px 17px 0 0 !important;
width:0;
}
img[src*="community.gif"], img[src*="partnercomm.gif"] {
background-image:url("http://i42.tinypic.com/2a5nrj5.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:12px 12px 0 0px !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url("http://i47.tinypic.com/2rh8cwm.gif");
background-repeat:no-repeat !important;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg");
background-repeat:no-repeat !important;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url("http://i48.tinypic.com/2a9nwwl.gif") !important;
background-repeat:no-repeat !important;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url("http://i45.tinypic.com/2zpic05.jpg") !important;
background-repeat:no-repeat;
height:0;
padding:20px 18px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url("http://i47.tinypic.com/2i6gvac.gif") !important;
background-repeat:no-repeat;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
[ Details ]
This one has an interesting space/water themed background. I actually made it myself by blending images together.
EXTRANEOUS
→ Credit: N/A
→ Layout Archive: browse through my older layout designs
→ Resources: precarious and hasty outline of various resources used.
WATCH // AFFILIATE