S2 Smooth Sailing // Greyscale
Hello there! After a well deserved break I finally finished a new stylesheet. I This is a completely grey stylesheet because I often use bright colors and such and I thought a whole-gray layout would be nice for a change. Though if anyone likes the stylesheet but not the colors and want to change it, they're more than welcome as long as they credit. You know the way it goes guys, comment if you like, credit if you use.
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 // Opera
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.)
Live Preview
/*---------------------------------------------------
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-bottom: 20px;
background-color: #404040;
color: #999999;
background-image: url('');
}
a, a:visited {
color: #666666;
}
a:hover {
color: #444444;
}
.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://img514.imageshack.us/img514/3040/0164starhj4.png);
padding: 11px 11px 3px 1px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://img514.imageshack.us/img514/3040/0164starhj4.png);
padding: 11px 11px 3px 1px;
}
.pageblock{
width: 800px;
margin: 0 auto;
}
.pagefooterblock {
font family: courier new;
font size: 13pt;
text-align: center;
background-color: #f5f5f5;
color: #999999;
border-top: 1px solid #efefef;
padding: 8px 4px 4px 24px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #666666;
}
/*QUOTATION*/
blockquote {
padding: 10px;
margin: 10px 20px 10px 20px;
padding: 6px;
color: #999999;
background-color: #fafafa;
border: 1px solid #efefef;
}
/* HEADER */
.pageheaderblock {
text-align: center;
}
.header-title {
display: none;
}
.header-subtitle {
display: none;
}
.header-icon {
display: none;
}
.header-menu {
font-family: courier new;
margin-top: 20px;
padding: 25px 0px 25px 0px;
background-color: #f5f5f5;
font-size: 16pt;
line-height: 20px;
font-weight: normal;
border-bottom: 1px solid #efefef;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 2px 6px 2px 6px;
color: #999999;
text-decoration: none;
}
.header-menu a:hover {
color: #666666;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
padding: 8px;
margin: 3px;
}
/* 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: #666666;
}
.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: 9px 0px 4px 0px;
}
.entryUserinfo {
text-align: center;
margin: 8px 0px 8px 8px;
background-color: #ffffff;
padding: 4px;
border: 2px 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: #fafafa;
color: #999999;
border: 1px solid #efefef;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
padding: 6px 10px 6px 10px;
margin:0px;
}
.entryHeader a{
color: #444444;
}
.entryHeaderSubject {
font-weight: normal;
font-family: courier new;
font-size: 13pt;
color: #999999;
}
.entryHeaderDate a {
color : #666666;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #444444;
text-decoration : underline;
}
/*CURRENTS AND TAGS ON THE ENTRIES*/
.entryMetadata {
padding: 0px 30px 0px 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 2px;
}
.entryMetadata li {
list-style: none;
display: block;
padding-right: 10px;
}
.entryMetadata-label {
color: #999999;
font-weight: normal;
padding-right: 4px;
}
/*COMMENTS BAR ON THE ENTRIES*/
.entryLinkbar {
font-family:"trebuchet ms", sans-serif;
font-size: 7pt;
color: #999999;
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: #666666;
border-bottom: 1px solid #efefef;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
.entryLinkbar li a:hover {
color: #444444;
border-bottom: 1px solid #efefef;
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 solid #efefef;
color: #666666;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
#footer-menu a:hover {
border-bottom: 1px solid #efefef;
color: #444444;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
/*SIDEBAR*/
.sidebar {
font-family: "trebuchet ms" sans-serif;
font-size: 7pt;
margin: 0 20px 0 0;
width: 200px;
}
.sidebox {
color: #999999;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #fafafa;
color: #909090;
font-family:"courier new";
font-size: 13pt;
padding: 6px 0px 6px 0px;
margin: 10px 4px 15px 4px;
border: 1px solid #efefef;
text-align:center;
}
.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 {
margin: 0px 2px 0px 2px;
padding: 5px 7px 2px 15px;
border-bottom: 1px solid #efefef;
display: block;
}
.listitem:hover{
border-left: 5px solid #eeeeee;
background-color: #fafafa;
}
.sidebox #latestmonth table{
width:85%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.listtitle {
color: #999999;
font-family: "courier new";
font-size: 13pt;
padding: 0px 8px 0px 8px;
margin: 10px 0px 10px 0px;
text-align: left;
}
.profile-label {
font-weight: normal;
color: #999999;
}
.profile-userpic {
padding: 4px;
border: 2px 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: #f5f5f5;
border: 1px solid #efefef;
margin: 1px;
}
/*OTHER PAGES*/
input, textarea, option, select {
background-color: #ffffff;
font: 7pt "trebuchet ms" ,sans-serif;
color: #999999!important;
border: 1px dotted #999999;
padding: 0px;
margin-top: 1px;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: center;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 500px;
border: 1px solid #efefef;
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 solid #efefef;
}
.day {
border: 1px solid #efefef;
}
.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: #666666;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #ffffff;
}
.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 Icon
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.
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 // Opera
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.)
Live Preview
/*---------------------------------------------------
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-bottom: 20px;
background-color: #404040;
color: #999999;
background-image: url('');
}
a, a:visited {
color: #666666;
}
a:hover {
color: #444444;
}
.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://img514.imageshack.us/img514/3040/0164starhj4.png);
;){kind=link}
padding: 11px 11px 3px 1px;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://img514.imageshack.us/img514/3040/0164starhj4.png);
padding: 11px 11px 3px 1px;
}
.pageblock{
width: 800px;
margin: 0 auto;
}
.pagefooterblock {
font family: courier new;
font size: 13pt;
text-align: center;
background-color: #f5f5f5;
color: #999999;
border-top: 1px solid #efefef;
padding: 8px 4px 4px 24px;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #666666;
}
/*QUOTATION*/
blockquote {
padding: 10px;
margin: 10px 20px 10px 20px;
padding: 6px;
color: #999999;
background-color: #fafafa;
border: 1px solid #efefef;
}
/* HEADER */
.pageheaderblock {
text-align: center;
}
.header-title {
display: none;
}
.header-subtitle {
display: none;
}
.header-icon {
display: none;
}
.header-menu {
font-family: courier new;
margin-top: 20px;
padding: 25px 0px 25px 0px;
background-color: #f5f5f5;
font-size: 16pt;
line-height: 20px;
font-weight: normal;
border-bottom: 1px solid #efefef;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 2px 6px 2px 6px;
color: #999999;
text-decoration: none;
}
.header-menu a:hover {
color: #666666;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
padding: 8px;
margin: 3px;
}
/* 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: #666666;
}
.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: 9px 0px 4px 0px;
}
.entryUserinfo {
text-align: center;
margin: 8px 0px 8px 8px;
background-color: #ffffff;
padding: 4px;
border: 2px 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: #fafafa;
color: #999999;
border: 1px solid #efefef;
font-family: "trebuchet ms", sans-serif;
font-size: 7pt;
padding: 6px 10px 6px 10px;
margin:0px;
}
.entryHeader a{
color: #444444;
}
.entryHeaderSubject {
font-weight: normal;
font-family: courier new;
font-size: 13pt;
color: #999999;
}
.entryHeaderDate a {
color : #666666;
text-decoration : none;
}
.entryHeaderDate a:hover {
color : #444444;
text-decoration : underline;
}
/*CURRENTS AND TAGS ON THE ENTRIES*/
.entryMetadata {
padding: 0px 30px 0px 6px;
}
.entryMetadata ul {
margin: 0px;
padding: 2px;
}
.entryMetadata li {
list-style: none;
display: block;
padding-right: 10px;
}
.entryMetadata-label {
color: #999999;
font-weight: normal;
padding-right: 4px;
}
/*COMMENTS BAR ON THE ENTRIES*/
.entryLinkbar {
font-family:"trebuchet ms", sans-serif;
font-size: 7pt;
color: #999999;
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: #666666;
border-bottom: 1px solid #efefef;
padding: 0px 3px 0px 3px;
margin: 0px 5px 0px 5px;
}
.entryLinkbar li a:hover {
color: #444444;
border-bottom: 1px solid #efefef;
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 solid #efefef;
color: #666666;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
#footer-menu a:hover {
border-bottom: 1px solid #efefef;
color: #444444;
white-space: nowrap;
padding: 0px 3px 0px 3px;
margin: 6px;
}
/*SIDEBAR*/
.sidebar {
font-family: "trebuchet ms" sans-serif;
font-size: 7pt;
margin: 0 20px 0 0;
width: 200px;
}
.sidebox {
color: #999999;
background-color: #ffffff;
margin: 4px 0px 4px 0px;
}
.sideboxTitle {
background-color: #fafafa;
color: #909090;
font-family:"courier new";
font-size: 13pt;
padding: 6px 0px 6px 0px;
margin: 10px 4px 15px 4px;
border: 1px solid #efefef;
text-align:center;
}
.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 {
margin: 0px 2px 0px 2px;
padding: 5px 7px 2px 15px;
border-bottom: 1px solid #efefef;
display: block;
}
.listitem:hover{
border-left: 5px solid #eeeeee;
background-color: #fafafa;
}
.sidebox #latestmonth table{
width:85%;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
.listtitle {
color: #999999;
font-family: "courier new";
font-size: 13pt;
padding: 0px 8px 0px 8px;
margin: 10px 0px 10px 0px;
text-align: left;
}
.profile-label {
font-weight: normal;
color: #999999;
}
.profile-userpic {
padding: 4px;
border: 2px 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: #f5f5f5;
border: 1px solid #efefef;
margin: 1px;
}
/*OTHER PAGES*/
input, textarea, option, select {
background-color: #ffffff;
font: 7pt "trebuchet ms" ,sans-serif;
color: #999999!important;
border: 1px dotted #999999;
padding: 0px;
margin-top: 1px;
}
/*ARCHIVE PAGE*/
.yearlinks{
text-align: center;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 500px;
border: 1px solid #efefef;
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 solid #efefef;
}
.day {
border: 1px solid #efefef;
}
.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: #666666;
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: 1px solid #ffffff;
}
.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 Icon
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.