S2 layout » 02

[greenleaf_freak]

Preview


Click to enlarge.


Borderwide

Information
S2 Layout.
Flexible Squares.
Free and Paid accounts, Plus accounts probably not.
Works in Mozilla FireFox and so far I can see in IE too.

Rules
Upload everything on your own server. Don't hotlink.
Credit me for the codes in your userinfo.
Comment if you take, I'm very curious of what you make of them.
Make sure you read the F.A.Q before you start asking questions.

CSS Codes

body {
background: #191919;
text-align: center;
color: #FFF;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
font-family: "Arial" Helvetica, sans-serif;
cursor: default;
color: #ea692a;
font-weight: lighter;
font-size: 7pt;
text-decoration: none;
}

a:hover {
font-family: "Arial" Helvetica, sans-serif;
cursor: default;
color: #000000;
font-size: 7pt;
font-weight: lighter;
text-decoration: none;
}

::-moz-selection {
background: #ea692a;
color: #FFF;
}

blockquote {
margin: 10px 20px;
padding: 18px;
color: #ea692a;
line-height: 13px;
font-size: 7pt;
font-family: "Arial" Helvetica, sans-serif;
border: 1px dashed #ea692a;
background: #CCC;
text-align: justify;
}

p, td {
font-size: 7pt;
}

code, kbd, pre, tt {
font-family: monospace;
}

#content {
width: 80%;
margin-left: auto;
margin-right: auto;
background: #fff;
border: 0px solid #484848;
padding: 08px;
}

#maincontent {
margin: 08px auto 0 180px;
background: transparent;
}

#sidebar {
width: 170px;
padding: 15px 0 15px 0;
margin-top: 08px;
background: #fff;
border-right: 1px dashed #999;
color: #333;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
text-align: justify;
float: left;
}

#header {
width: auto;
padding: 20px 0px 20px 0px;
text-align: center;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
text-transform: uppercase;
color: #333;
line-height: 12px;
letter-spacing: 2px;
background: #fff;
border: 0px solid #484848;
}

#footer {
padding: 20px 0px 20px 0px;
width: auto;
text-align: center;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
color: #333;
background: #fff;
border: 0px solid #484848;
z-index: 100;
clear: both;
}

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ea692a;
padding: 10px;
}

div#header a:hover, div#footer a:hover {
color: #FFF;
background: #ea692a;
padding: 10px;
}

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

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

.title {
display: none;
line-height: 200%;
top: 10px;
}

.subtitle {
display: none;
top: 10px;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #ea692a;
text-decoration: none;
}

div#sidebar a:hover {
text-decoration: none;
color: #484848;
}

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 5px 0px 5px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
padding: 03px;
border: 0px solid #484848;
text-align: center;
font-family: "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif;
font-size: 7pt;
}

.sbarcalendarposts {
padding: 03px;
border: 1px solid #484848;
background: #191919;
text-align: center;
font-family: "Lucida Sans Unicode", Tahoma, Helvetica, sans-serif;
font-size: 7pt;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem {
padding-left: 15px;
list-style: none;
}

li.sbartitle {
padding: 5px 5px 5px 10px;
list-style: none;
font-family: "Arial" Helvetica, sans-serif;
font-size: 8pt;
text-transform: uppercase;
color: #333;
text-align: left;
border-bottom: 0px dotted #999;
text-transform:uppercase;
margin: 10px 0 10px 0;
background: url() left no-repeat;
}

/* maincontent */

#maincontent h2 {
padding: 08px;
background: #FFF;
font-weight: lighter;
color: #999;
border: 0px solid #484848;
font-family: "Arial", Helvetica, sans-serif;
font-size: 7pt;
}

ul.ljtaglist li {
list-style: none;
}

ul.ljtaglist {
color: #999;
font-family: "Arial", Helvetica, sans-serif;
font-size: 7pt;
text-align: left;
padding: 08px 08px 08px 12px;
border: 0px solid #484848;
background: #FFF;
}

.subcontent {
padding: 16px;
background: #FFF;
border: 0px solid #484848;
}

.entry {
padding-top: 08px;
color: #333;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
line-height: 13px;
border:0;
text-align: justify;
}

.entry ul li {
padding-left: 5px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.entry ol li {
padding-left: 5px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.userpic {
display: none;
position: relative;
float: left;
background: #FFF;
padding: 5px;
margin: 10px;
z-index: 15;
border: 1px solid #D1D1D1
}

.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
color: #FFF;
background: #FFF !important;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
z-index: 15;
}

.userpicfriends font {
color: #ea692a !important;
}

.userpicfriends br {
display: block;
height: 0;
}

.date {
padding-top: 05px;
text-align: left;
top: 5px;
color: #D1D1D1;
font-family: "Tahoma" Helvetica, sans-serif;
font-size: 7pt;
text-transform: uppercase;
}

.subject {
text-align: left;
font-weight: none;
padding-bottom: 05px;
color: #ea692a;
font-size: 10pt;
text-transform: lowercase;
font-family: "Tahoma" Helvetica, sans-serif;
}

.subject a, .subject a:link, .subject a:visited {
color: #ea692a;
}

.subject a:hover {
color: #000000;
}

.datesubject {
background: transparent;
}

.ljtags {
margin-top: 20px;
color: #ea692a;
font-weight: bold;
text-transform: lowercase;
}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #ea692a;
font-weight: bold;
text-transform: lowercase;
}

.currents, .currentmood, .currentmusic, .currentlocation {
color: #999;
font-weight: lighter;
text-transform: lowercase;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #999;
text-transform: none;
font-weight: lighter;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #999;
text-transform: none;
font-weight: lighter;
}

.currentlocation a:hover, .ljtags a:hover {
color: #000000;
font-weight: lighter;
text-transform: none;
}

.comments {
font-family: "Tahoma" Helvetica, sans-serif;
font-size: 7pt;
text-align:center;
color: #999;
clear: right;
border-bottom: 1px dashed #eee;
position: relative;
padding: 0 20px 20px 0;
text-transform: lowercase;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited {
color:#ea692a;
}

div.comments a:hover {
color: #484848;
text-decoration: none;
}

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background: #FFF;
color: #ea692a;
font-weight: lighter;
text-align: left;
text-transform: lowercase;
margin-top: 20px;
}

.userpiccomment {
position: relative;
top: -30px;
padding: 03px;
margin: 20px 10px -20px 10px;
z-index: 15;
float: left;
border: 1px solid #D1DD1;
background: #FFF;
}

.box {
color: #999;
border: 1px solid #484848;
padding: 08px;
margin: 08px 0 08px 0;
clear: right;
background: #FFF;
}

.box b {
color: #999;
}

input, textarea, select {
padding: 03px;
color: #ea692a;
border: 1px solid #D1D1D1;
background: #FFF;
}

textarea.textbox {
width: 100% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Tahoma" Helvetica, sans-serif;
font-size: 7pt;
line-height: 125%;
background: #FFF;
color: #999;
}

.replytosubject {
color: #45BFB2;
font-size: 10pt;
text-transform: lowercase;
text-align: left;
font-weight: lighter;
}

.replytoposter {
color: #999;
text-align: left;
text-transform: lowercase;
}

.commentreply {
text-align: justify;
position: relative;
margin: 10px;
font-size: 7pt;
font-family: "Tahoma" Helvetica, sans-serif;
color: #999;
}

.commentbox {
border: 1px solid #D1D1D1;
padding: 08px;
margin: 10px;
background: #FFF;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ea692a;
}

.datesubjectcomment a:hover {
color: #000000;
}

.commentboxpartial {
border: 1px solid #484848;
padding: 10px;
margin: 10px;
background: #FFF;
}

.commentinfo {
background: #FFF;
margin-top: 10px;
width: 100%;
}

/* maincontent -- year/achive pages */

ul.year {
text-align: center;
padding: 20px 0 20px 0;
border: 1px solid #484848;
background: #FFF;
}

ul.year li {
color: #999;
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 08px;
border: 1px solid #484848;
background: #FFF;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
color: #999;
border: 1px solid #D1D1D1;
}

table.yeartable td.yearday {
background: #FFF;
text-align: center;
}

td.yearmonth {
color: #999;
border-style: none;
}

/* footer */

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

ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}

.clearfoot {
display: none;
clear: both;
}

/* misc */

.clear {
display: none;
height: 15px;
}

.skiplinks {
text-transform: lowercase;
text-align: center;
margin: 08px 0 08px 0;
padding: 08px;
color: #999;
border: 1px solid #484848;
background: #FFF;
}

/* for formatting header image */

.headerimage {
}

/* for formatting separators between entries */

.separator {
background: transparent;
height: 08px;
}

Images
There are no images.

How to install the layout
1. Go into Customise and set S2 under Style Stystem. Then select Save Changes.
2. Click on Look and Feel and set Layout to Flexible Squares in the drop-down menu, all of my S2 layouts are Flexible Squares.
3. Go to Custom Options » Custom CSS. And set the drop-down menu's to 'No' , 'No' and 'Yes'.
4. Paste the url of the CSS into the text area Custom External Stylesheet URL or paste the CSS codes in the text area Custom Stylesheet. Then select Save Changes.
5. If it is a sidebar layout, go to Sidebar and select 'Yes' in the first drop-down menu. Then you can make your own adjustments, if you want to show your default usericon and the setting of boxes (Usericon, Calendar ect.) Then select Save Changes.
6. Make sure you credit me in your userinfo and upload everything on your own server.