smooth sailing: the end is nigh
Yes, this is the old community layout, which I'm throwing up for the 1000 watchers thing. I've fixed it up to make it better for public consumption, but there is one important thing I want to emphasize.
Do not use this unless you're willing to follow the instructions to the letter. Because this layout was designed for a community, I made it so I could customize all of the links and text via the sidebar. Setting this layout up might be confusing unless you're accustomed to using the Smooth Sailing sidebar settings.
Just a warning so I don't get 2394824 poorly written comments asking about a messed up layout. :D
And yes I have recently been reading a lot of Watchmen.
EDIT: Tiny icons for news, partner comms, RSS, etc. did not match userinfo and community icons. Fixed.
layout notes
account types
Basic, Plus, Paid
compatible browsers
Internet Explorer 7, Mozilla Firefox, Opera, Safari, Google Chrome
minimum resolution
800x600
comment pages
Yes
navstrip
Optional
Currently needs the Navstrip to display properly, this will be fixed eventually.
disabled
• Default navigation (Recent, Friends, Archive, etc.)
css stylesheet
stylesheet
/*---------------------------------------------------
STYLESHEET CREATOR: scythe.livejournal.com
STYLESHEET NAME: The End is Nigh
S2 STYLE: Smooth Sailing
DOWNLOAD: thrashmetal.livejournal.com
****Please remember to credit!****
-----------------------------------------------------*/
body {
background:black url(http://i39.tinypic.com/2vhw66g.jpg) repeat scroll 0 0;
color:#343434;
font-family:arial;
font-size:11px;
margin:0;
}
table {
border:none !important;
}
.pageblock {
margin-bottom:20px;
margin-top:20px;
}
a, a:visited {
color:#6D6D6D;
letter-spacing:0;
text-decoration:none;
}
a:hover {
color:#909090;
}
a img {
border:medium none;
}
ul {
list-style-type:square;
}
blockquote {
color:#B9B9B9;
font-family:courier new;
font-size:12px;
line-height:16px;
padding:8px;
}
.body-title, .body-midtitle {
display:none;
}
.entryHeaderDate {
display:block;
font-size:34px !important;
line-height:27px;
margin-right:9px;
}
.header-title {
display:none;
}
.header-subtitle {
display:none;
}
.pageheaderblock {
margin:0 auto;
text-align:center;
}
.pagefooterblock, .bodyheaderblock {
display:none;
}
.bodyblock {
margin:0 auto;
padding:194px 0 0;
width:770px;
}
.bodynavblock {
color:white;
font-family:georgia;
margin:13px 0 5px 179px;
padding:0;
}
.bodynavblock a, .bodynavblock a:visited {
color:#3A7295;
}
.entryHolder {
border-left:medium none;
color:#878787;
font-size:11px;
margin-bottom:25px;
margin-top:25px;
}
.entryUserinfo {
margin:0 9px 0 0;
width:144px;
}
.entryUserinfo-username {
background:transparent none repeat scroll 0 0;
font-size:11px;
line-height:18px;
margin-top:0;
padding:4px;
position:absolute;
text-align:left;
}
.entryUserinfo-username .ljuser a b {
background:transparent none repeat scroll 0 0;
color:white;
font-family:georgia;
font-size:17px;
font-style:normal;
font-weight:normal;
letter-spacing:0;
text-decoration:none !important;
}
.entryUserinfo-usericon img {
background:transparent url(http://www.cdupload.com/files/36469_b3snu/transbg.png) repeat scroll 0 0;
padding:19px;
}
.entryText {
background:white none repeat scroll 0 0;
color:black;
font-family:arial;
font-size:11px;
line-height:20px;
min-height:195px;
padding:12px 22px 0;
text-align:justify;
}
.entryText img {
max-width: 575px;
}
.entryHeader {
color:white;
font-family:georgia;
font-size:0;
font-weight:normal;
letter-spacing:1px;
line-height:13px;
padding:23px 11px 3px;
text-align:right;
text-transform:lowercase;
}
.entryHeader a {
color:white;
font-size:19px !important;
letter-spacing:1px;
}
.entryHeader a:hover {
text-decoration:none;
}
.entryHeaderSubject {
font-weight:normal;
padding-top:3px;
}
.entryHeaderSubject .ljuser a b {
color:white;
}
.entryMetadata {
background:white none repeat scroll 0 0;
color:black;
margin-bottom:0;
padding:16px 38px 5px;
}
.entryMetadata a, .entryMetadata a:visited {
color:black;
font-size:9px;
text-transform:uppercase;
}
.entryMetadata a:hover {
border-bottom:0 none;
color:#909090;
text-decoration:none;
}
.entryMetadata ul {
margin:0;
padding:0;
}
.entryMetadata li {
display:block;
font-family:arial,sans-serif;
font-size:9px;
list-style-type:none;
padding-right:10px;
}
.entryMetadata-label {
color:black;
font-family:georgia;
font-size:10px;
font-weight:bold;
padding-right:4px;
text-transform:uppercase;
}
.entryLinkbar {
background:white none repeat scroll 0 0;
color:#000000;
font-size:12px;
margin-left:153px;
margin-top:0;
padding:10px 0 0;
text-align:right;
text-transform:lowercase;
}
.entryLinkbar a {
background:transparent none repeat scroll 0 0;
color:black;
font-family:courier new;
font-size:11px;
font-weight:normal;
letter-spacing:0;
padding:0;
text-transform:uppercase;
}
.entryLinkbar a:hover {
border-bottom:3px solid black;
color:#474747;
text-decoration:none;
}
.entryLinkbar ul {
margin:0;
padding-bottom:10px;
padding-right:10px;
}
.entryLinkbar li {
display:inline;
margin:0;
padding:0 5px;
}
.commentHolder {
background:white none repeat scroll 0 0;
border-left:0 none;
margin:26px 0 0 153px;
padding:10px 0 0;
}
.commentUserinfo {
background:transparent none repeat scroll 0 0;
color:#000000;
font-family:georgia;
font-size:0;
margin:-32px 8px 8px -122px;
position:absolute;
text-align:center;
}
.commentUserinfo .ljuser a b {
background:transparent none repeat scroll 0 0;
color:white;
font-family:georgia;
font-size:17px;
font-style:normal;
font-weight:normal;
letter-spacing:0;
text-decoration:none !important;
}
.commentUserinfo-usericon img {
background:transparent url(http://www.cdupload.com/files/36469_b3snu/transbg.png) repeat scroll 0 0;
height:70px;
padding:17px;
width:70px;
}
.commentText {
background:transparent none repeat scroll 0 0;
color:black;
font-family:arial;
font-size:11px;
line-height:20px;
min-height:93px;
padding:0 16px;
text-align:justify;
}
.commentHeader {
background:transparent none repeat scroll 0 0;
border-bottom:0 none;
color:black;
font-family:georgia;
font-size:16px;
letter-spacing:2px;
line-height:13px;
padding:0 10px 8px;
text-align:left;
text-transform:lowercase;
}
.commentHeader a {
color:#559EB0;
font-family:georgia;
font-size:23px;
text-transform:lowercase;
}
.commentHeaderSubject {
color:gray;
font-style:normal;
font-weight:normal;
}
.commentHeaderScreened {
background:transparent none repeat scroll 0 0;
border-bottom:0 none;
color:#5A5A5A;
font-family:century gothic;
font-size:16px;
font-weight:bold;
letter-spacing:0;
line-height:13px;
padding:0 10px 8px;
text-align:left;
text-transform:uppercase;
}
.commentLinkbar {
color:black;
font-size:11px;
padding-top:4px;
text-align:right;
}
.commentLinkbar ul {
font-family:null;
margin:0 0 7px;
padding:0;
}
.commentLinkbar li {
color:black;
display:inline;
font-family:georgia;
margin:0;
padding:0 5px;
}
.commentLinkbar a:hover {
border-bottom:3px solid black;
color:#474747;
text-decoration:none;
}
.commentLinkbar a {
background:transparent none repeat scroll 0 0;
color:black;
font-family:courier new;
font-size:11px;
font-weight:normal;
letter-spacing:0;
padding:0;
text-transform:uppercase;
}
.replyform {
background:white none repeat scroll 0 0;
color:#5A5A5A;
line-height:17px;
padding:20px 40px;
}
#qrform table {
border:none !important;
}
.yearlinks {
text-align:right;
}
.yearlink {
padding-left:4px;
padding-right:4px;
}
.month {
background:black none repeat scroll 0 0;
margin-bottom:12px;
margin-left:77px;
margin-top:17px;
padding:4px;
width:600px;
}
.daysubjects {
color:white;
font-family:georgia;
font-size:13px;
font-style:italic;
padding:8px 8px 8px 40px;
}
.daysubjects .ljuser a b {
color:white;
}
.daytitles {
background:black none repeat scroll 0 0;
border:1px solid black;
color:#FAFAFA;
font-family:century gothic,arial;
text-align:center;
text-transform:uppercase;
}
.day-blank {
}
.day {
background:#111111 none repeat scroll 0 0;
border:3px solid black;
margin-bottom:0;
padding:3px;
}
.day-date {
color:#878787;
font-family:century gothic;
text-align:center;
width:50%;
}
.day-count {
float:right;
font-size:20px;
text-align:center;
width:50%;
}
.day-count a {
color:#959595;
font-family:georgia;
font-size:21px;
font-weight:normal;
padding:3px;
text-decoration:none;
}
.sidebar {
border-left:medium none;
font-family:arial;
font-size:8px;
height:164px;
line-height:17px;
padding:0 86px;
position:absolute;
top:107px;
width:800px;
}
.sidebar a, .sidebar a:visited {
color:#B7B7B7;
}
.sidebar a:hover {
color:#D7D7D7;
text-decoration:none;
}
.sidebox {
color:#FFFFFF;
float:left;
margin:0 11px 0 0;
}
.sideboxTitle {
background:transparent url(http://www.cdupload.com/files/36469_b3snu/transbg.png) repeat scroll 0 0;
color:#646464;
font-family:courier new;
font-size:13px;
letter-spacing:2px;
margin-left:3px;
padding-left:13px;
padding-top:3px;
text-transform:uppercase;
}
.sideboxContent {
background:transparent none repeat scroll 0 0;
color:#FFFFFF;
font-family:trebuchet MS;
font-size:10px;
line-height:16px;
margin-left:3px;
text-align:justify;
}
.sidebox .ljuser a b {
color:white;
}
.sidebox #freetext {
background:transparent url(http://www.cdupload.com/files/36469_b3snu/transbg.png) repeat scroll 0 0;
font-family:georgia;
font-size:10px;
height:120px;
padding:0 14px 14px;
text-align:justify;
width:270px;
}
.sidebox #freetext2 {
background:transparent url(http://www.cdupload.com/files/36469_b3snu/transbg.png) repeat scroll 0 0;
height:120px;
padding:0 14px 14px;
width:270px;
}
.sidebox #freetext2 a {
background:transparent url(http://irondevil.org/icon/categories/diagona%2010a/41.png) no-repeat scroll 1px 2px;
color:#9C9C9C;
font-family:arial;
font-size:11px;
letter-spacing:0;
margin-top:-16px;
padding:0 0 0 13px;
text-transform:lowercase;
}
.sidebox #freetext3 {
font-family:courier new;
margin-top:3px;
text-align:center;
width:616px;
}
.sidebox #freetext3 a {
color:#636363;
font-size:10px;
letter-spacing:1px;
margin-right:5px;
text-transform:uppercase;
}
.latestmonth-inactive {
background:#111111 none repeat scroll 0 0;
color:#6F6F6F;
margin:2px;
padding:0 13px 7px 3px;
}
.latestmonth-active {
background:#111111 none repeat scroll 0 0;
color:#6F6F6F;
margin:2px;
padding:0 13px 7px 3px;
}
.latestmonth-active:hover {
background:#2C2C2C none repeat scroll 0 0;
}
.sidebox #systemlinks {
font-size:10px;
line-height:14px;
margin-bottom:0;
margin-left:-89px;
margin-top:-30px;
position:absolute;
text-align:center;
width:800px;
}
.sidebox #systemlinks a:link, .sidebox #systemlinks a:active, .sidebox #systemlinks a:visited {
color:#9C9C9C;
font-family:georgia;
font-size:16px;
letter-spacing:3px;
margin-right:14px;
padding:15px 0 0;
text-transform:lowercase;
}
.sidebox #systemlinks a:hover, .sidebox #systemlinks a:active {
color:white;
}
.listitem {
display:inline;
}
.listspacer {
height:1px;
}
.sidebox #latestmonth table {
margin-left:auto;
margin-right:auto;
margin-top:4px;
width:90%;
}
.listtitle {
color:#5C5C5C;
display:inline;
font-family:arial;
font-size:9px;
font-weight:normal;
letter-spacing:0;
margin-right:5px;
padding:0;
text-transform:uppercase;
}
.profile-label {
font-weight:bold;
}
.header-menu {
display:none;
}
#footer-menu {
font-size:11px;
margin-bottom:10px;
margin-left:0;
margin-top:11px;
text-align:left;
}
#footer-menu a, .footer-menu a:visited {
background:transparent none repeat scroll 0 0;
color:#959595;
font-family:georgia;
font-size:14px;
padding:7px;
text-align:left;
text-transform:lowercase;
white-space:nowrap;
}
#footer-menu a:hover {
text-decoration:none;
}
.header-menu ul, #footer-menu ul {
margin:0 auto;
padding:0;
}
.header-menu li, #footer-menu li {
display:inline;
}
.taglist {
font-family:courier new;
font-size:12px;
padding-bottom:10px;
}
.taglist a {
color:#636363;
}
.tagstable td {
border:0 none;
}
.tagstable {
margin-bottom:20px;
width:500px;
}
textarea, input, select {
background:transparent url(http://www.cdupload.com/files/31304_hiv0r/palegrayswirl.png) repeat scroll 0 0;
border:0 none;
color:#9C9C9C;
font-family:georgia;
font-size:14px;
line-height:normal;
margin:2px;
padding:2px;
}
.ljuser a b {
background:transparent none repeat scroll 0 0;
color:black;
font-family:georgia;
font-style:italic;
letter-spacing:0;
text-decoration:none !important;
}
.ljuser a {
text-decoration:none !important;
}
.ljuser a:hover b {
background:transparent none repeat scroll 0 0;
border-bottom:0 none;
text-decoration:none !important;
}
img[src*="userinfo.gif"] {
background-image:url(http://irondevil.org/icon/categories/diagona%2010a/05.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
img[src*="openid-profile.gif"] {
background-image:url(http://irondevil.org/icon/categories/damniconsmini/user.gif) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 8px 0 0 !important;
width:0;
}
img[src*="anonymous.gif"] {
background-image:url(http://irondevil.org/icon/categories/diagona%2010a/05.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
img[src*="community.gif"] {
background-image:url(http://irondevil.org/icon/categories/diagona%2010a/45.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
img[src*="newsinfo.gif"] {
background-image:url(http://irondevil.org/icon/categories/diagona%2010b/28.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
img[src*="syndicated.gif"] {
background-image:url(http://irondevil.org/icon/categories/diagona%2010a/01.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}
img[src*="icon_protected.gif"] {
background-image:url(http://irondevil.org/icon/categories/fugue/lock.png) !important;
background-repeat:no-repeat !important;
height:0;
padding:16px 18px 0 0 !important;
width:0;
}
img[src*="icon_groups.gif"] {
background-image:url(http://irondevil.org/icon/categories/fugue/lock.png) !important;
background-repeat:no-repeat;
height:0;
padding:16px 18px 0 0 !important;
width:0;
}
img[src*="icon_private.gif"] {
background-image:url(http://irondevil.org/icon/categories/fugue/key.png) !important;
background-repeat:no-repeat;
height:0;
padding:17px 18px 0 0 !important;
width:0;
}
div.ContextualPopup img {
border:0 none;
}
div.ContextualPopup div.Inner {
background:transparent url(http://www.cdupload.com/files/31304_hiv0r/palegrayswirl.png) repeat scroll 0 0 !important;
border:2px solid #E8E8E8;
color:#5A5A5A !important;
font-family:georgia;
font-size:10px;
opacity:0.9;
padding:0;
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, div.ContextualPopup div.Inner a:visited {
color:black !important;
font-family:georgia;
font-weight:normal;
text-decoration:none !important;
}
#lj_controlstrip {
background:transparent none repeat scroll 0 0;
opacity:1;
}
#lj_controlstrip td {
border-bottom:medium none;
color:#515151;
}
#lj_controlstrip_statustext {
color:#858585;
}
#lj_controlstrip a {
color:#515151;
}
#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);
;){kind=link}
}
#lj_controlstrip_loggedout_userpic {
background-image:url(http://stat.livejournal.com/palimg/controlstrip/ljlogo-loggedout.gif/ptd4dce8000000);
;){kind=link}
}
#lj_controlstrip input {
background:#111111 none repeat scroll 0 0 !important;
color:#9C9C9C;
}
#lj_controlstrip_search_input_text, #lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {
background:#111111 none repeat scroll 0 0 !important;
}
#lj_controlstrip .ljuser a b {
background:transparent none repeat scroll 0 0;
color:#858585;
letter-spacing:0;
text-decoration:none !important;
}
how to install
select journal style
Apply any Smooth Sailing theme.
sidebar1. Set these drop down boxes to the following:
- Links Visibility - 1
- Free Text Position - 2
- Free Text #2 Position - 3
- Free Text #3 Position - 4 (optional; these are the links underneath the topbar boxes)
2. Find Links Sidebox Title and Free Text Sidebox #3 Title and delete the text. Make sure something is entered for Free Text Sidebox Title and Free Text Sidebox #2 Title, as the layout is dependent on these. If you don't want titles for the topbar boxes, go down to Other Instructions.
3. Enter your free text in Free Text Sidebox Text.
4. Enter your additional links in Free Text Sidebox #2 Text. You can use the template below:
LINKTEXT
LINKTEXT
LINKTEXT
LINKTEXT
5. If you have the bottommost links enabled, enter these into Free Text Sidebox #3 Text. You can use the template below:
LINKTEXT LINKTEXT LINKTEXT LINKTEXT
links listDefine your links. These are the large links at the top of the layout.
custom css
Make sure any drop-down boxes are set to No, paste the code into the box, and click Save Changes.
optional
upload images
http://i39.tinypic.com/2vhw66g.jpg
Upload the images to a site like Tinypic or Photobucket, then replace the old URLs.
entry date formatGo to Entry Text » Page » Format for Date and Time (Recent/Friends/Entry/Reply page) and paste in the following:
%%mm%%.%%dd%%.%%yy%%
disable the topbar titlesFind .sideboxTitle and add display:none;.
Then find .sidebox #freetext and .sidebox #freetext2. For each, change padding:0 14px 14px; to padding:14px;.
appendix
credit and comment
• Please credit thrashmetal somewhere public. (Profile, Links List, Friends Only post, etc.)
• Comments aren't required, but are appreciated!
resources
• Background by mixremix.
• Icon by worldatomic.
read the layout faq before asking questions!