S2 Smooth Sailing // Every Day & Every Night
Over 150 friends! That calls for a celebration! I also decided resplandor needed a change and I re-did the userinfo, make sure to read that because there are a couple of things there that I just added and they're very very important. I also designed a new stylesheet to give this journal a complete makeover and what better way to celebrate than share more of my work with you, guys!
If you like it, drop a comment! Positive feedback encourages me to keep on with the good work. If you're taking, don't forget to credit either on your userinfo or anywhere visible on your journal.
Style: S2 Smooth Sailing
Website: Not required but it looks better if you define one.
Default Icon: Optional
Best view: 1024x768 and up
Browser(s) Compatible: Firefox // IE (It works correctly but doesn't look exactly like the preview)
Nav Bar?: Yes
Custom Comment Page?: No
Work best with: Free & Paid account (I didn't test this layout with Ads, it may work or it may not.)
Daylight Live Preview (Orange) | Nightlight Live Preview (Blue)
Overrides for Orange Layout
/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browser: Firefox and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 0px;
background-color: #fafafa;
color: #999999;
background-image: url('');
}
a, a:visited {
color: #ffa500;
}
a:hover {
color: #dddddd;
}
.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://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}
.pageblock{
width:820px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 1px dotted #dddddd;
text-align: center;
background-color: #ffffff;
color: #999999;
padding: 8px 4px 4px 24px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #999999;
}
/*QUOTATION*/
blockquote {
margin: 10px 20px 10px 20px;
padding: 6px;
background-color: #fafafa;
}
/* HEADER */
.pageheaderblock {
text-align: center;
}
.header-title {
background-color: #ffa500;
color: #ffffff;
padding: 5px 20px 0px 20px;
font-family: century gothic, sans-serif;
font-size: 23pt;
text-transform: uppercase;
}
.header-subtitle {
display: none;
}
.header-icon {
display: none;
}
.header-menu {
font-family: "courier new", sans-serif;
padding: 5px 0px 0px 19px;
padding-bottom: 5px;
background-color: #ffa500;
font-size: 13pt;
line-height: 20px;
font-weight: normal;
text-transform: uppercase;
border-bottom: 4px solid #dddddd;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 2px 6px 2px 6px;
color: #fafafa;
text-decoration: none;
}
.header-menu a:hover {
background-color: #ffffff;
color: #ffa500;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
padding: 0px;
}
/* BODY */
.bodyblock {
background-color: #ffffff;
padding: 10px 30px 0px 30px;
}
.bodyheaderblock {
display: none;
}
.bodynavblock {
background-color: #ffffff;
color: #999999;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #999999;
}
.body-title {
display: none;
}
.body-midtitle {
display: none;
}
/*ENTRIES*/
.entryHolder {
color: #999999;
background-color: #ffffff;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 4px 0px 4px 0px;
}
.entryUserinfo {
text-align: center;
margin: 8px 0px 8px 8px;
background-color: #ffffff;
padding: 5px;
border: 1px solid #efefef;
}
.entryUserinfo-usericon img {
border: 0;
}
.entryText {
padding: 8px;
text-align: justify;
}
/*DATE AND SUBJECT ON THE ENTRIES*/
.entryHeader {
text-align: right;
background-color: #ffffff;
color: #666666;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
padding: 4px 6px 2px 8px;
border-bottom: 1px dotted #dddddd;
margin:0px 2px 0px 2px;
}
.entryHeader a{
color: #333333;
}
.entryHeaderSubject {
font-weight: normal;
font-family: century gothic;
font-size: 13pt;
color: #dddddd;
}
.entryHeaderDate a {
color : #999999;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #999999;
text-decoration : underline;
}
/*CURRENTS AND TAGS ON THE ENTRIES*/
.entryMetadata {
border: 1px dotted #efefef;
padding: 0px 30px 0px 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 2px;
}
.entryMetadata li {
list-style: none;
display: block;
padding-right: 10px;
}
.entryMetadata-label {
color: #666666;
font-weight: normal;
padding-right: 4px;
}
/*COMMENTS BAR ON THE ENTRIES*/
.entryLinkbar {
font-family:"trebuchet ms", sans-serif;
font-size: 7pt;
color: #666666;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
text-align: center;
margin: 20px 0 20px 0;
padding: 0px;
}
.entryLinkbar li {
display: inline;
}
.entryLinkbar li a {
color: #ffa500;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
.entryLinkbar li a:hover {
color: #dddddd;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
/*FOOTER*/
#footer-menu {
margin: 20px 0 0 0;
text-align: center !important;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-transform: uppercase;
}
#footer-menu a, .footer-menu a:visited {
border-bottom: 1px dotted #dddddd;
color: #ffa500;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
#footer-menu a:hover {
border-bottom: 1px dotted #dddddd;
color: #dddddd;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
/*SIDEBAR*/
.sidebar {
font-family: "trebuchet ms" sans-serif;
font-size: 7pt;
margin: 10px 20px 0 0;
width: 200px;
}
.sidebox {
color: #999999;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 0px 0px 8px;
margin: 10px 4px 10px 4px;
text-align:left;
border-bottom: 1px dotted #dddddd;
}
.sideboxContent {
text-align: left;
padding: 2px 4px 2px 4px;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #freetext {
text-align: justify;
}
.sidebox #tags_sidebox {
text-align: center;
}
.sidebox #systemlinks {
text-align:left;
line-height: 20px;
}
.listitem a {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.listitem a:hover {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.sidebox #latestmonth table{
width:85%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.listtitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 8px 0px 8px;
margin: 10px 0px 10px 0px;
text-align: left;
border-bottom: 1px dotted #dddddd;
}
.profile-label {
font-weight: normal;
color: #666666;
}
.profile-userpic {
padding: 5px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 0 0 5px 0;
}
.latestmonth-inactive {
padding: 3px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 1px;
color: #999999;
}
.latestmonth-active {
padding: 3px;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 1px;
}
/*OTHER PAGES*/
input, textarea, option, select {
background-color: #ffffff;
font: 7pt "trebuchet ms" ,sans-serif;
color: #999999!important;
border: 1px dotted #dddddd;
padding: 0px;
margin-top: 1px;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 500px;
border: 1px dotted #dddddd;
margin: 8px 8px 8px 40px;
}
.daysubjects {
color: #999999;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
background: #ffffff;
color: #999999;
}
.day-blank {
border: 1px dotted #dddddd;
}
.day {
border:1px dotted #dddddd;
}
.day-date {
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
color: #999999;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 8pt;
}
.day-count a {
text-decoration: none;
color: #999999;
}
.day-count a:hover {
text-decoration: none;
color: #dddddd;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Overrides for Blue Layout
/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browser: Firefox and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 0px;
background-color: #fafafa;
color: #999999;
background-image: url('');
}
a, a:visited {
color: #87ceeb;
}
a:hover {
color: #dddddd;
}
.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://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}
.pageblock{
width:820px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 1px dotted #dddddd;
text-align: center;
background-color: #ffffff;
color: #999999;
padding: 8px 4px 4px 24px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #999999;
}
/*QUOTATION*/
blockquote {
margin: 10px 20px 10px 20px;
padding: 6px;
background-color: #fafafa;
}
/* HEADER */
.pageheaderblock {
text-align: center;
}
.header-title {
background-color: #87ceeb;
color: #ffffff;
padding: 5px 20px 0px 20px;
font-family: century gothic, sans-serif;
font-size: 23pt;
text-transform: uppercase;
}
.header-subtitle {
display: none;
}
.header-icon {
display: none;
}
.header-menu {
font-family: "courier new", sans-serif;
padding: 5px 0px 0px 19px;
padding-bottom: 5px;
background-color: #87ceeb;
font-size: 13pt;
line-height: 20px;
font-weight: normal;
text-transform: uppercase;
border-bottom: 4px solid #dddddd;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 2px 6px 2px 6px;
color: #fafafa;
text-decoration: none;
}
.header-menu a:hover {
background-color: #ffffff;
color: #87ceeb;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
padding: 0px;
}
/* BODY */
.bodyblock {
background-color: #ffffff;
padding: 10px 30px 0px 30px;
}
.bodyheaderblock {
display: none;
}
.bodynavblock {
background-color: #ffffff;
color: #999999;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #999999;
}
.body-title {
display: none;
}
.body-midtitle {
display: none;
}
/*ENTRIES*/
.entryHolder {
color: #999999;
background-color: #ffffff;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 4px 0px 4px 0px;
}
.entryUserinfo {
text-align: center;
margin: 8px 0px 8px 8px;
background-color: #ffffff;
padding: 5px;
border: 1px solid #efefef;
}
.entryUserinfo-usericon img {
border: 0;
}
.entryText {
padding: 8px;
text-align: justify;
}
/*DATE AND SUBJECT ON THE ENTRIES*/
.entryHeader {
text-align: right;
background-color: #ffffff;
color: #666666;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
padding: 4px 6px 2px 8px;
border-bottom: 1px dotted #dddddd;
margin:0px 2px 0px 2px;
}
.entryHeader a{
color: #333333;
}
.entryHeaderSubject {
font-weight: normal;
font-family: century gothic;
font-size: 13pt;
color: #dddddd;
}
.entryHeaderDate a {
color : #999999;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #999999;
text-decoration : underline;
}
/*CURRENTS AND TAGS ON THE ENTRIES*/
.entryMetadata {
border: 1px dotted #efefef;
padding: 0px 30px 0px 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 2px;
}
.entryMetadata li {
list-style: none;
display: block;
padding-right: 10px;
}
.entryMetadata-label {
color: #666666;
font-weight: normal;
padding-right: 4px;
}
/*COMMENTS BAR ON THE ENTRIES*/
.entryLinkbar {
font-family:"trebuchet ms", sans-serif;
font-size: 7pt;
color: #666666;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
text-align: center;
margin: 20px 0 20px 0;
padding: 0px;
}
.entryLinkbar li {
display: inline;
}
.entryLinkbar li a {
color: #87ceeb;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
.entryLinkbar li a:hover {
color: #dddddd;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
/*FOOTER*/
#footer-menu {
margin: 20px 0 0 0;
text-align: center !important;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-transform: uppercase;
}
#footer-menu a, .footer-menu a:visited {
border-bottom: 1px dotted #dddddd;
color: #87ceeb;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
#footer-menu a:hover {
border-bottom: 1px dotted #dddddd;
color: #dddddd;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
/*SIDEBAR*/
.sidebar {
font-family: "trebuchet ms" sans-serif;
font-size: 7pt;
margin: 10px 20px 0 0;
width: 200px;
}
.sidebox {
color: #999999;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 0px 0px 8px;
margin: 10px 4px 10px 4px;
text-align:left;
border-bottom: 1px dotted #dddddd;
}
.sideboxContent {
text-align: left;
padding: 2px 4px 2px 4px;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #freetext {
text-align: justify;
}
.sidebox #tags_sidebox {
text-align: center;
}
.sidebox #systemlinks {
text-align:left;
line-height: 20px;
}
.listitem a {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.listitem a:hover {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.sidebox #latestmonth table{
width:85%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.listtitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 8px 0px 8px;
margin: 10px 0px 10px 0px;
text-align: left;
border-bottom: 1px dotted #dddddd;
}
.profile-label {
font-weight: normal;
color: #666666;
}
.profile-userpic {
padding: 5px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 0 0 5px 0;
}
.latestmonth-inactive {
padding: 3px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 1px;
color: #999999;
}
.latestmonth-active {
padding: 3px;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 1px;
}
/*OTHER PAGES*/
input, textarea, option, select {
background-color: #ffffff;
font: 7pt "trebuchet ms" ,sans-serif;
color: #999999!important;
border: 1px dotted #dddddd;
padding: 0px;
margin-top: 1px;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 500px;
border: 1px dotted #dddddd;
margin: 8px 8px 8px 40px;
}
.daysubjects {
color: #999999;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
background: #ffffff;
color: #999999;
}
.day-blank {
border: 1px dotted #dddddd;
}
.day {
border:1px dotted #dddddd;
}
.day-date {
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
color: #999999;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 8pt;
}
.day-count a {
text-decoration: none;
color: #999999;
}
.day-count a:hover {
text-decoration: none;
color: #dddddd;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Instalation
1. Go to Manage > Customize
2. In the Basic Tab, Select S2 Under Style System - For users who don't know HTML or CSS, or make only minor alterations. Click Save
Changes.
3. In the Look and Feel tab select Smooth Sailing from the drop-down-menu. Unless you want them changed, leave the Language and Theme as
default. Save Changes.
4. In the Custom Options tab select the Presentation sub-tab and follow the next guidelines. !Important: Your layout won't look the same as the preview if you don't follow these steps.
-make sure to locate and set these changes on the next options:
» Userinfo Position in Entries: Right side of the entry.
» Usericon Visibility: Show in all pages (Unless you desire otherwise)
» Userinfo Position in Entries: Right side of the entry.
» Username Position in Entries: Below usericons.
» Wrap Comment text under userinfo: Yes.
-Edit the rest as you desire. Save changes.
- Edit the information and settings as you desire on the menu sub-tab and the sidebar sub-tab. Remember that from these tabs you can settle arrengement of the tags, default icon, text on the menu, page summary, etc. Save changes.
5. After you have everything else settled, select the Custom CSS sub-tab:
- Choose NO in the first two drop down menus
- make sure the Custom external stylesheet URL box is BLANK
- Paste in the stylesheet into the Custom stylesheet box. Save Changes.
Tiny Icons by damnicons
&
Please upload this on your own server.
If you have any question, feel free to check the FAQ section that was recently updated. If your question hasn't been answered yet and you're still doubtful / confused, feel free to leave a comment and I'll get back to you as soon as I can.
Coming Soon: Since I'm kinda done with the Custom Comment Pages because it takes extra time and not all users use them / like them, I have decided to just write a simple tutorial about how to edit them as you like for those users who have Paid and Plus accounts and like their comments pages to match their journal.
If you like it, drop a comment! Positive feedback encourages me to keep on with the good work. If you're taking, don't forget to credit either on your userinfo or anywhere visible on your journal.
Style: S2 Smooth Sailing
Website: Not required but it looks better if you define one.
Default Icon: Optional
Best view: 1024x768 and up
Browser(s) Compatible: Firefox // IE (It works correctly but doesn't look exactly like the preview)
Nav Bar?: Yes
Custom Comment Page?: No
Work best with: Free & Paid account (I didn't test this layout with Ads, it may work or it may not.)
Daylight Live Preview (Orange) | Nightlight Live Preview (Blue)
Overrides for Orange Layout
/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browser: Firefox and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 0px;
background-color: #fafafa;
color: #999999;
background-image: url('');
}
a, a:visited {
color: #ffa500;
}
a:hover {
color: #dddddd;
}
.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://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
;){kind=link}
padding: 13px 7px 0 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}
.pageblock{
width:820px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 1px dotted #dddddd;
text-align: center;
background-color: #ffffff;
color: #999999;
padding: 8px 4px 4px 24px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #999999;
}
/*QUOTATION*/
blockquote {
margin: 10px 20px 10px 20px;
padding: 6px;
background-color: #fafafa;
}
/* HEADER */
.pageheaderblock {
text-align: center;
}
.header-title {
background-color: #ffa500;
color: #ffffff;
padding: 5px 20px 0px 20px;
font-family: century gothic, sans-serif;
font-size: 23pt;
text-transform: uppercase;
}
.header-subtitle {
display: none;
}
.header-icon {
display: none;
}
.header-menu {
font-family: "courier new", sans-serif;
padding: 5px 0px 0px 19px;
padding-bottom: 5px;
background-color: #ffa500;
font-size: 13pt;
line-height: 20px;
font-weight: normal;
text-transform: uppercase;
border-bottom: 4px solid #dddddd;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 2px 6px 2px 6px;
color: #fafafa;
text-decoration: none;
}
.header-menu a:hover {
background-color: #ffffff;
color: #ffa500;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
padding: 0px;
}
/* BODY */
.bodyblock {
background-color: #ffffff;
padding: 10px 30px 0px 30px;
}
.bodyheaderblock {
display: none;
}
.bodynavblock {
background-color: #ffffff;
color: #999999;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #999999;
}
.body-title {
display: none;
}
.body-midtitle {
display: none;
}
/*ENTRIES*/
.entryHolder {
color: #999999;
background-color: #ffffff;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 4px 0px 4px 0px;
}
.entryUserinfo {
text-align: center;
margin: 8px 0px 8px 8px;
background-color: #ffffff;
padding: 5px;
border: 1px solid #efefef;
}
.entryUserinfo-usericon img {
border: 0;
}
.entryText {
padding: 8px;
text-align: justify;
}
/*DATE AND SUBJECT ON THE ENTRIES*/
.entryHeader {
text-align: right;
background-color: #ffffff;
color: #666666;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
padding: 4px 6px 2px 8px;
border-bottom: 1px dotted #dddddd;
margin:0px 2px 0px 2px;
}
.entryHeader a{
color: #333333;
}
.entryHeaderSubject {
font-weight: normal;
font-family: century gothic;
font-size: 13pt;
color: #dddddd;
}
.entryHeaderDate a {
color : #999999;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #999999;
text-decoration : underline;
}
/*CURRENTS AND TAGS ON THE ENTRIES*/
.entryMetadata {
border: 1px dotted #efefef;
padding: 0px 30px 0px 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 2px;
}
.entryMetadata li {
list-style: none;
display: block;
padding-right: 10px;
}
.entryMetadata-label {
color: #666666;
font-weight: normal;
padding-right: 4px;
}
/*COMMENTS BAR ON THE ENTRIES*/
.entryLinkbar {
font-family:"trebuchet ms", sans-serif;
font-size: 7pt;
color: #666666;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
text-align: center;
margin: 20px 0 20px 0;
padding: 0px;
}
.entryLinkbar li {
display: inline;
}
.entryLinkbar li a {
color: #ffa500;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
.entryLinkbar li a:hover {
color: #dddddd;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
/*FOOTER*/
#footer-menu {
margin: 20px 0 0 0;
text-align: center !important;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-transform: uppercase;
}
#footer-menu a, .footer-menu a:visited {
border-bottom: 1px dotted #dddddd;
color: #ffa500;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
#footer-menu a:hover {
border-bottom: 1px dotted #dddddd;
color: #dddddd;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
/*SIDEBAR*/
.sidebar {
font-family: "trebuchet ms" sans-serif;
font-size: 7pt;
margin: 10px 20px 0 0;
width: 200px;
}
.sidebox {
color: #999999;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 0px 0px 8px;
margin: 10px 4px 10px 4px;
text-align:left;
border-bottom: 1px dotted #dddddd;
}
.sideboxContent {
text-align: left;
padding: 2px 4px 2px 4px;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #freetext {
text-align: justify;
}
.sidebox #tags_sidebox {
text-align: center;
}
.sidebox #systemlinks {
text-align:left;
line-height: 20px;
}
.listitem a {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
;){kind=link}
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.listitem a:hover {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.sidebox #latestmonth table{
width:85%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.listtitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 8px 0px 8px;
margin: 10px 0px 10px 0px;
text-align: left;
border-bottom: 1px dotted #dddddd;
}
.profile-label {
font-weight: normal;
color: #666666;
}
.profile-userpic {
padding: 5px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 0 0 5px 0;
}
.latestmonth-inactive {
padding: 3px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 1px;
color: #999999;
}
.latestmonth-active {
padding: 3px;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 1px;
}
/*OTHER PAGES*/
input, textarea, option, select {
background-color: #ffffff;
font: 7pt "trebuchet ms" ,sans-serif;
color: #999999!important;
border: 1px dotted #dddddd;
padding: 0px;
margin-top: 1px;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 500px;
border: 1px dotted #dddddd;
margin: 8px 8px 8px 40px;
}
.daysubjects {
color: #999999;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
background: #ffffff;
color: #999999;
}
.day-blank {
border: 1px dotted #dddddd;
}
.day {
border:1px dotted #dddddd;
}
.day-date {
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
color: #999999;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 8pt;
}
.day-count a {
text-decoration: none;
color: #999999;
}
.day-count a:hover {
text-decoration: none;
color: #dddddd;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Overrides for Blue Layout
/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Smooth Sailing
Works best with: Free & Paid accounts
Browser: Firefox and IE
-----------------------------------------------------*/
/* PAGE */
body {
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 0px;
background-color: #fafafa;
color: #999999;
background-image: url('');
}
a, a:visited {
color: #87ceeb;
}
a:hover {
color: #dddddd;
}
.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://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/user.gif);
padding: 13px 7px 0 2px;
}
.pageblock{
width:820px;
margin: 0 auto;
}
.pagefooterblock {
border-top: 1px dotted #dddddd;
text-align: center;
background-color: #ffffff;
color: #999999;
padding: 8px 4px 4px 24px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #999999;
}
/*QUOTATION*/
blockquote {
margin: 10px 20px 10px 20px;
padding: 6px;
background-color: #fafafa;
}
/* HEADER */
.pageheaderblock {
text-align: center;
}
.header-title {
background-color: #87ceeb;
color: #ffffff;
padding: 5px 20px 0px 20px;
font-family: century gothic, sans-serif;
font-size: 23pt;
text-transform: uppercase;
}
.header-subtitle {
display: none;
}
.header-icon {
display: none;
}
.header-menu {
font-family: "courier new", sans-serif;
padding: 5px 0px 0px 19px;
padding-bottom: 5px;
background-color: #87ceeb;
font-size: 13pt;
line-height: 20px;
font-weight: normal;
text-transform: uppercase;
border-bottom: 4px solid #dddddd;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 2px 6px 2px 6px;
color: #fafafa;
text-decoration: none;
}
.header-menu a:hover {
background-color: #ffffff;
color: #87ceeb;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
padding: 0px;
}
/* BODY */
.bodyblock {
background-color: #ffffff;
padding: 10px 30px 0px 30px;
}
.bodyheaderblock {
display: none;
}
.bodynavblock {
background-color: #ffffff;
color: #999999;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #999999;
}
.body-title {
display: none;
}
.body-midtitle {
display: none;
}
/*ENTRIES*/
.entryHolder {
color: #999999;
background-color: #ffffff;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
margin: 4px 0px 4px 0px;
}
.entryUserinfo {
text-align: center;
margin: 8px 0px 8px 8px;
background-color: #ffffff;
padding: 5px;
border: 1px solid #efefef;
}
.entryUserinfo-usericon img {
border: 0;
}
.entryText {
padding: 8px;
text-align: justify;
}
/*DATE AND SUBJECT ON THE ENTRIES*/
.entryHeader {
text-align: right;
background-color: #ffffff;
color: #666666;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
padding: 4px 6px 2px 8px;
border-bottom: 1px dotted #dddddd;
margin:0px 2px 0px 2px;
}
.entryHeader a{
color: #333333;
}
.entryHeaderSubject {
font-weight: normal;
font-family: century gothic;
font-size: 13pt;
color: #dddddd;
}
.entryHeaderDate a {
color : #999999;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #999999;
text-decoration : underline;
}
/*CURRENTS AND TAGS ON THE ENTRIES*/
.entryMetadata {
border: 1px dotted #efefef;
padding: 0px 30px 0px 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 2px;
}
.entryMetadata li {
list-style: none;
display: block;
padding-right: 10px;
}
.entryMetadata-label {
color: #666666;
font-weight: normal;
padding-right: 4px;
}
/*COMMENTS BAR ON THE ENTRIES*/
.entryLinkbar {
font-family:"trebuchet ms", sans-serif;
font-size: 7pt;
color: #666666;
text-align: right;
padding: 4px 0px 4px 0px;
}
.entryLinkbar ul {
text-align: center;
margin: 20px 0 20px 0;
padding: 0px;
}
.entryLinkbar li {
display: inline;
}
.entryLinkbar li a {
color: #87ceeb;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
.entryLinkbar li a:hover {
color: #dddddd;
border-bottom: 1px dotted #dddddd;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
/*FOOTER*/
#footer-menu {
margin: 20px 0 0 0;
text-align: center !important;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
text-transform: uppercase;
}
#footer-menu a, .footer-menu a:visited {
border-bottom: 1px dotted #dddddd;
color: #87ceeb;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
#footer-menu a:hover {
border-bottom: 1px dotted #dddddd;
color: #dddddd;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
/*SIDEBAR*/
.sidebar {
font-family: "trebuchet ms" sans-serif;
font-size: 7pt;
margin: 10px 20px 0 0;
width: 200px;
}
.sidebox {
color: #999999;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 0px 0px 8px;
margin: 10px 4px 10px 4px;
text-align:left;
border-bottom: 1px dotted #dddddd;
}
.sideboxContent {
text-align: left;
padding: 2px 4px 2px 4px;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}
.sidebox #freetext {
text-align: justify;
}
.sidebox #tags_sidebox {
text-align: center;
}
.sidebox #systemlinks {
text-align:left;
line-height: 20px;
}
.listitem a {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.listitem a:hover {
background-image: url(http://i76.photobucket.com/albums/j7/heaven_sent22/button2.gif);
background-position: left;
background-repeat: no-repeat;
margin: 5px 2px 2px 2px;
padding: 2px 7px 2px 15px;
border-bottom: 1px dotted #dddddd;
display: block;
}
.sidebox #latestmonth table{
width:85%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.listtitle {
background-color: #ffffff;
color: #dddddd;
font-family:"century gothic" sans-serif;
font-size: 13pt;
padding: 0px 8px 0px 8px;
margin: 10px 0px 10px 0px;
text-align: left;
border-bottom: 1px dotted #dddddd;
}
.profile-label {
font-weight: normal;
color: #666666;
}
.profile-userpic {
padding: 5px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 0 0 5px 0;
}
.latestmonth-inactive {
padding: 3px;
background-color: #ffffff;
border: 1px solid #efefef;
margin: 1px;
color: #999999;
}
.latestmonth-active {
padding: 3px;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 1px;
}
/*OTHER PAGES*/
input, textarea, option, select {
background-color: #ffffff;
font: 7pt "trebuchet ms" ,sans-serif;
color: #999999!important;
border: 1px dotted #dddddd;
padding: 0px;
margin-top: 1px;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 500px;
border: 1px dotted #dddddd;
margin: 8px 8px 8px 40px;
}
.daysubjects {
color: #999999;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
background: #ffffff;
color: #999999;
}
.day-blank {
border: 1px dotted #dddddd;
}
.day {
border:1px dotted #dddddd;
}
.day-date {
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
color: #999999;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 8pt;
}
.day-count a {
text-decoration: none;
color: #999999;
}
.day-count a:hover {
text-decoration: none;
color: #dddddd;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #dddddd;
}
.tagstable { width: 500px; }
Instalation
1. Go to Manage > Customize
2. In the Basic Tab, Select S2 Under Style System - For users who don't know HTML or CSS, or make only minor alterations. Click Save
Changes.
3. In the Look and Feel tab select Smooth Sailing from the drop-down-menu. Unless you want them changed, leave the Language and Theme as
default. Save Changes.
4. In the Custom Options tab select the Presentation sub-tab and follow the next guidelines. !Important: Your layout won't look the same as the preview if you don't follow these steps.
-make sure to locate and set these changes on the next options:
» Userinfo Position in Entries: Right side of the entry.
» Usericon Visibility: Show in all pages (Unless you desire otherwise)
» Userinfo Position in Entries: Right side of the entry.
» Username Position in Entries: Below usericons.
» Wrap Comment text under userinfo: Yes.
-Edit the rest as you desire. Save changes.
- Edit the information and settings as you desire on the menu sub-tab and the sidebar sub-tab. Remember that from these tabs you can settle arrengement of the tags, default icon, text on the menu, page summary, etc. Save changes.
5. After you have everything else settled, select the Custom CSS sub-tab:
- Choose NO in the first two drop down menus
- make sure the Custom external stylesheet URL box is BLANK
- Paste in the stylesheet into the Custom stylesheet box. Save Changes.
Tiny Icons by damnicons
&
Please upload this on your own server.
If you have any question, feel free to check the FAQ section that was recently updated. If your question hasn't been answered yet and you're still doubtful / confused, feel free to leave a comment and I'll get back to you as soon as I can.
Coming Soon: Since I'm kinda done with the Custom Comment Pages because it takes extra time and not all users use them / like them, I have decided to just write a simple tutorial about how to edit them as you like for those users who have Paid and Plus accounts and like their comments pages to match their journal.