S2 Layout #4: More Simplicity

Aug 08, 2007 16:24





Style: S2 Smooth Sailing
Looks best in: Firefox, Safari, IE
Works with: Basic (Free), Paid, Sponsored.


How to Install

1. Go to the Customize Wizard
2. In the Basics tab under Style System, make sure S2 is selected, then click Save Changes.
3. In the Look and Feel tab under Layout & Language, select Smooth Sailing in the first drop-down menu, then click Save Changes. Leave Theme as Layout Default.
4. In the Custom Options tab, click Custom CSS. Make sure the first two drop-down menus are set to No. Paste your codes into the Custom stylesheet box, then click Save Changes. OR upload your codes to your own host, like Ripway, Geocities, etc. Make sure the first two drop-down menus are set to No. In the Custom external stylesheet URL box, paste your stylesheet URL. Click Save Changes.

body {
color: #888888;
font-family: Arial;
font-size: 8pt;
margin: 0px;
background-color: #ffffff;
background-image: url('');
background-attachment: fixed;
}

a {
color: #bebebe;
text-decoration: none;
}

a:hover {
color: #dddddd;
}

blockquote {
padding: 10px;
background-color: #ffffff;
border-left: 1px solid #eeeeee;
}

/* INSERT HEADER IMAGE IN PAGEBLOCK */

.pageblock{
background-image: url("");
background-position: top center;
background-repeat: no-repeat;
padding-top: px;
background-color: #ffffff;
width: 800px;
margin: 0 auto;
}
.pagefooterblock {
display: none;
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #666666;
}

.pageheaderblock {
padding: 8px; 10px 0px 15px;
}

.header-title {
display: none;
text-transform: lowercase;
text-align: left;
font-family: Arial, sans-serif;
letter-spacing: -2px;
font-size: 36px;
line-height: 20px;
color: #f2f2f2;
}
.header-subtitle {
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
}
.header-menu {
display: none;
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
padding: 2px 6px 2px 6px;
color: #bbbbbb;
text-decoration: none;
}
.header-menu a:hover {
color: #888888;
}
.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}
.header-menu li, #footer-menu li {
display: inline;
}

/* BODY */

.bodyblock {
padding: 30px 10px 10px 10px;
background-color: #ffffff;
}
.bodyheaderblock {
display: none;
}
.bodynavblock {
background-color: #ffffff;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #666666;
}
.body-title {
display: none;
}
.body-midtitle {
display: none;
}

/* ENTRIES */

.entryHolder {
padding: 0px 14px 10px 20px;
color: #888888;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-size: 8pt;
}
.entryUserinfo {
font-weight: none;
font-family: Arial, sans-serif;
font-size: 8pt;
text-align: left;
margin: 8px 12px 8px 5px;
background-color: transparent;
}
.entryUserinfo-usericon img {
padding-bottom: 2px;
border: #dfdfdf solid 0px;
}
.entryText {
line-height: 16px;
padding: 8px 4px 14px 0px;
}
.entryHeader {
text-transform: lowercase;
font-size: 10pt;
letter-spacing: -1px;
font-family: Arial;
padding: 0px 0px 2px 0px;
}
.entryHeader a{
color: #bebebe;
}
.entryHeader a:hover {
color: #dddddd;
}
.entryHeaderDate {
color: #888888;
}
.entryHeaderSubject {
text-transform: lowercase;
color: #888888;
}
.entryHeaderDate a {
color: #bebebe;
text-decoration: none;
}
.entryHeaderDate a:hover {
color: #dddddd;
}
.entryMetadata {
font-family: Arial, sans-serif;
padding-bottom: 10px;
}
.entryMetadata img {
display: none;
}
.entryMetadata ul {
margin: 0px;
padding: 1px;
}
.entryMetadata li {
list-style: none;
padding: 1px;
display: block;
}
.entryMetadata-label {
padding: 2px;
color: #888888;
font-size: 8pt;
text-transform: lowercase;
}
.entryLinkbar {
border-top: #f2f2f2 1px solid;
text-transform: lowercase;
text-align: right;
font-size: 8pt;
font-family: Arial, sans-serif;
padding: 4px 0px 0px 0px;
}
.entryLinkbar a, .entryLinkbar a:visited {
color: #bbbbbb;
}
.entryLinkbar a:hover {
color: #666666;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

/* FOOTER */

#footer-menu {
text-transform: lowercase;
background-color: #ffffff;
text-align: right;
font-family: Arial, sans-serif;
font-size: 8pt;
}
#footer-menu a, .footer-menu a:visited {
padding: 0px 12px 0px 0px;
color: #bebebe;
white-space: nowrap;
}
#footer-menu a:hover {
color: #dddddd;
}

/* SIDEBAR */

.sidebar {
border-right: 1px solid #f2f2f2;
background-color: #ffffff;
padding: 0px 10px 10px 10px;
font-family: Arial, sans-serif;
font-size: 8pt;
width: 155px;
color: #888888;
}
.sidebox {
border-bottom: 1px solid #f2f2f2;
color: #888888;
margin: 0px 0px 20px 0px;
}
.sideboxTitle {
text-transform: lowercase;
font-size: 10pt;
font-family: Arial, sans-seriff;
padding: 0px 2px 2px 1px;
color: #888888;
text-align: left;
}
.listtitle {
font-weight: normal;
text-align: left;
text-transform: lowercase;
font-size: 8pt;
letter-spacing: 1px;
border-bottom: 1px solid #f2f2f2;
margin: 4px 0px 4px 0px;
}
.sideboxContent {
line-height: 14px;
text-align: left;
padding: 3px;
}
.sidebox #freetext {
text-align: left;
}
.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}

#tags_sidebox a {
display: block;
font-size: 8pt;
}
#tags_sidebox {
font-size: 0px;
}
.sidebox #systemlinks {
text-align: left;
}
.sidebox #latestmonth table {
width: 90%;
margin: 4px auto 4px auto;
}
#latestmonth a:link, #latestmonth a:active, #latestmonth a:visited {
text-align: center;
text-transform: lowercase;
}
#latestmonth td {
text-align: center;
padding: 1px;
font-family: Arial, sans-serif;
font-size: 8pt;
}
.latestmonth-inactive {
background-color: #f7f7f7;
padding: 2px;
}
.latestmonth-active {
background-color: #eeeeee;
padding: 2px;
}
.profile-label {
display: none;
}

/* COMMENT PAGE */

.commentHolder {
color: #888888;
background-color: #ffffff;
font-family: Arial, sans-serif;
font-size: 8pt;
margin: 4px 0px 4px 8px;
}
.commentUserinfo {
text-align: center;
margin: 8px 8px 8px 8px;
background-color: #ffffff;
}
.commentUserinfo-usericon img {
padding-bottom: 2px;
border: 0;
}
.commentText {
padding: 6px;
}
.commentHeader {
text-transform: lowercase;
background-color: #ffffff;
color: #888888;
font-family: Arial, sans-serif;
font-size: 10pt;
padding: 4px 0px 4px 8px;
}
.commentHeader a{
color: #bebebe;
}
.commentHeaderScreened {
font-family: Arial, sans-serif;
font-size: 10pt;
background-color: #eeeeee;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-weight: normal;
}
.commentLinkbar {
border-top: 1px solid #f2f2f2;
font-family: Arial, sans-serif;
text-transform: lowercase;
font-size: 8pt;
text-align: right;
}
.commentLinkbar a {
color: #bbbbbb;
}
.commentLinkbar a:hover {
color: #666666;
}
.commentLinkbar ul {
margin: 0px;
padding: 0px;
}
.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}
.replyform {
border: 0;
background-color: #ffffff;
color: #4e4e4e;
padding-left: 10px;
}
#commenttext{
width: 90%;
}

/* ARCHIVE PAGE */

.yearlinks{
text-align: right;
}
.yearlink{
padding-left:4px;
padding-right: 4px;
}
.month {
width: 400px;
margin: 8px 8px 8px 20px;
}
.daysubjects {
color: #888888;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
background: #ffffff;
color: #888888;
}
.day-blank {
}
.day {
}
.day-date {
color: #888888;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 12px;
}
.day-count a {
text-decoration: none;
color: #bebebe;
}

/* TAGS PAGE */

.tagstable td {
}
.tagstable {
text-transform: lowercase;
width: 500px;
}

/* USER, COMMUNITY, PROTECTED ICONS */

.entryHeader img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url("http://img77.imageshack.us/img77/9572/16securitylockrz2be5.png");
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://img413.imageshack.us/img413/6959/16memberlu6jo9.png);
padding: 16px 16px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://img413.imageshack.us/img413/6959/16memberlu6jo9.png);
padding: 16px 16px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://img413.imageshack.us/img413/1677/16memberprofileli8vp8.png);
padding: 16px 16px 0 2px;
}

Thanks to Sweetie for the icons!

If you have any questions, please ask! And yes, you can change the colors or whatever else you want. ;) Please comment, credit, and feel free to add this journal for more updates! :)

s2 layouts, all layouts

Previous post Next post
Up