Smooth Sailing Template

[carriep63]

Here is another full layout template for you guys. This is an S2 layout using "Smooth Sailing" as the base.

• This is for free or paid users
• This layout has a header, sidebar and background
• This is an S2 layout that encompasses all four page views
• You are able to use tags with this layout
• It is very easy to customize
• Preview of this template

Note: You may change the images. If you change the header you must change the height of the header-menu in the style sheet.

You will want to upload images to your image host before doing anything else.

You will have to replace image links with your own uploaded URLs for the images.

Using the CSS on your journal

1. Go to manage/customize.
2. Under the "Basics" tab, select the S2 style system.
   Save Changes.
3. Under the "Look and Feel" tab, choose "Smooth Sailing".
4. Under the "Custom Options" tab, click on "Custom CSS".
5. Paste the following codes into the Custom CSS box.


6. Replace the image links with your own uploaded links
7. Save

/* YOU MAY ADD A BACKGROUND HERE IF YOU WISH */
/* CHANGE THE WIDTH TO SUIT YOUR NEEDS */

body {
font-family: Arial, sans-serif;
font-size: 12px;
background-color: #222;
background-image: url();
}

.pageblock {
width: 671px;
margin: 0 auto;
}

a {
color: #A778AF;
text-decoration: none;
letter-spacing: 1px;
}

a:hover {
color: #68879C;
}

.entryHeaderDate a {
color: #000000;
text-decoration: none;
}

.entryHeaderDate a:hover {
color: #000000;
text-decoration: underline;
}

.header-title {
display: none;
}

/*HEADER IMAGE GOES HERE.*/
/*IF YOU CHANGE THE HEADER YOU MUST CHANGE THE HEIGHT AS WELL*/

.header-menu {
background: white url(header.jpg) no-repeat bottom center;
line-height: 60px;
text-align: center;
height: 420px;
}

/* LINKS FOR TOP NAVIGATION */

.header-menu a {
white-space: nowrap;
padding: 2px 6px 2px 6px;
color: purple;
text-decoration: none;
font-size: 10px;
}

.header-menu a:hover {
color: black;
}

.header-subtitle {
display: none;
}

.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}

.pageheaderblock {
text-align: left;
}

.pagefooterblock {
background-color: #000;
color: #68879C;
font-size: 11px;
text-align: right;
padding: .5em;
letter-spacing: 1.2px;
}

.pagefooterblock a, .pagefooterblock a:visited {
color: #000000;
}

/* MAIN BODY OF JOURNAL */
/* CHANGE THE PADDING TO SUIT YOUR NEEDS */

.bodyblock {
padding: 12px 42px;
background: white;
}

.bodyheaderblock {
background-color: #fff;
margin: 0 auto;
padding-top: 10px;
}

.bodynavblock {
text-align: right;
}

.bodynavblock a, .bodynavblock a:visited {
color: #000000;
}

/* NAME OF PAGE VIEW */
/* CHANGE THE WIDTH TO SUIT YOUR NEEDS */

.body-title {
font-family: century;
font-size: 21px;
color: #68879C;
text-align: left;
font-style: italic;
background: #000;
width: 578px;
margin: 0 auto;
padding-left: 10px;
}

.body-midtitle {
font-family: ;
font-size: 18px;
color: #000000;
text-align: left;
padding-left: 8px;
}

/* ENTRIES */
/* CHANGE WHAT YOU WOULD LIKE */

.entryHolder {
color: #555555;
background: #ededed;
font-family: ;
font-size: 11px;
border-top: 3px solid black;
text-align: justify;
margin-bottom: 10px;
}

.entryUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: #f8f8f8;
}

.entryUserinfo-usericon img {
border: 0;
}

.entryText {
padding-right: 6px;
}

/* TOP OF ENTRY WITH DATE AND SUBJECT */
/* CHANGE WHAT YOU WOULD LIKE */

.entryHeader {
background: #;
color: #5A8AB0;
font-family: ;
font-size: 12px;
letter-spacing: 1px;
margin: 5px;
}

.entryHeader a {
color: #000000;
}

/* SUBJECT LINE */
/* CHANGE WHAT YOU WOULD LIKE */

.entryHeaderSubject {
display: block;
color: #7B677F;
font-size: 10px;
}

/* I HAVE HIDDEN THE LOCK ICON */
/* REMOVE THIS CODE IF YOU WANT IT TO SHOW */

.entryHeaderSubject img {
display: none;
}

.entryMetadata {
padding-left: 6px;
text-align: right;
}

.entryMetadata ul {
margin: 0px;
padding: 0px;
}

.entryMetadata li {
list-style: none;
display: inline;
padding-right: 6px;
}

.entryMetadata-label {
font-weight: bold;
color: #68879C;
padding-right: 4px;
}

/* ENTRY COMMENT LINKS */

.entryLinkbar {
font-family: ;
font-size: 11px;
color: #000000;
text-align: right;
padding: 4px 0px 4px 0px;
}

.entryLinkbar ul {
margin: 0px;
padding: 0px;
}

.entryLinkbar li {
padding: 0px 5px 0px 2px;
margin: 0px;
display: inline;
}

.commentHolder {
color: #000000;
background-color: #;
border-top: 2px solid #ffffff;
font-family: ;
font-size: 12px;
margin: 4px 0px 4px 0px;
}

.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: #f8f8f8;
}

.commentUserinfo-usericon img {
border: 0;
}

.commentText {
padding: 6px;
}

.commentHeader {
background-color: #dddddd;
color: #000000;
font-family: ;
font-size: 12px;
padding: 4px 0px 4px 8px;
}

.commentHeader a {
color: #000000;
}

.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}

.commentHeaderSubject {
font-weight: bold;
}

.commentLinkbar {
font-family: ;
font-size: 11px;
color: #000000;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
}

.commentLinkbar ul {
margin: 0px;
padding: 0px;
}

.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

#commenttext {
width: 100%;
}

.replyform {
padding-left: 10px;
}

.yearlinks {
text-align: right;
}

.yearlink {
padding-left: 4px;
padding-right: 4px;
}

.month {
width: 100%;
border: 1px solid #dddddd;
margin: 8px 8px 8px 40px;
}

.daysubjects {
color: #000000;
padding: 8px 8px 8px 40px;
}

.daytitles {
text-align: center;
border: 1px solid #dddddd;
background: #eeeeee;
color: #000000;
}

.day-blank {
border: 1px solid #dddddd;
}

.day {
border: 1px solid #dddddd;
}

.day-date {
border-right: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
color: #000000;
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;
}

/* SIDEBAR */
/* CHANGE THE WIDTH TO SUIT YOUR NEEDS */

.sidebar {
font-family: ;
font-size: 11px;
margin-right: 10px;
width: 150px;
}

/* BOX INSIDE OF SIDEBAR */
/* CHANGE WHAT YOU WOULD LIKE */

.sidebox {
border-top: 3px solid black;
color: #000000;
background-color: #D1D9DF;
margin-bottom: 10px;
}

/* TITLE OF SIDEBOX */
/* CHANGE WHAT YOU WOULD LIKE */

.sideboxTitle {
background-color: #;
color: #5A8AB0;
border-top: 2px solid #ffffff;
font-family: ;
padding-bottom: 3px;
letter-spacing: 1px;
font-size: 12px;
text-align: ;
}

.sideboxContent {
text-align: left;
padding: 2px 4px 2px 4px;
}

.sidebox #profile, sidebox #latestmonth, .sidebox #search {
text-align: left;
}

.sidebox #tags_sidebox {
text-align: left;
}

.sidebox #systemlinks {
text-align: left;
}

.sidebox #latestmonth table {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}

.listtitle {
font-weight: bold;
}

.profile-label {
font-weight: bold;
}

#footer-menu {
font-size: 11px;
}

#footer-menu a {
color: #68879C;
white-space: nowrap;
padding: 6px;
text-align: left;
}

.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;
}