S2 layout » 01

[greenleaf_freak]

Preview


Click to enlarge.


Bouncing

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 what you make of them.
Make sure you read the F.A.Q before you start asking stupid questions.

Overrides/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: #5dd3e5;
font-weight: lighter;
font-size: 7pt;
text-decoration: none;
}

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

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

blockquote {
margin: 10px 20px;
padding: 18px;
color: #e7aa68;
line-height: 13px;
font-size: 7pt;
font-family: "Arial" Helvetica, sans-serif;
border: 0px solid #484848;
background: #444;
text-align: justify;
}

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

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

#content {
width: 600px;
margin-left: auto;
margin-right: auto;
background: #191919;
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: #333;
border: 0px solid #484848;
color: #999;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
text-align: justify;
float: left;
}

#header {
width: auto;
padding: 5px 0px 5px 0px;
text-align: center;
font-family: "Arial" Helvetica, sans-serif;
font-size: 7pt;
text-transform: uppercase;
color: #999;
line-height: 12px;
letter-spacing: 2px;
background: #191919;
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: #999;
background: #191919;
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: #e7aa68;
padding: 10px;
}

div#header a:hover, div#footer a:hover {
color: #FFF;
background: #e7aa68;
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: #5dd3e5;
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: 0px solid #484848;
background: #444;
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;
text-align: left;
border-bottom: 1px dotted #999;
color: #999;
font-size: 9pt;
text-transform: lowercase;
margin: 10px 0 10px 0;
background: url() left no-repeat;
}

/* maincontent */

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url(INSERT LINK HERE);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"] {
width: 0;
height: 0;
padding: 0 16px 16px 0;
background: url(INSERT LINK HERE);
}

span.ljuser img {
visibility: hidden;
}

span.ljuser a {
width: 16px;
height: 16px;
background: url(INSERT LINK HERE) no-repeat center left;
padding: 02px 0 02px 0;
margin-right: 2px;
}

.ljuser a img {
width: 16px;
height: 16px;
padding: 02px 0 02px 0;
}

span.ljuser a b {
padding: 02px 0 02px 0;
background: #333;
}

#maincontent h2 {
padding: 08px;
background: #333;
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: 1px solid #484848;
background: #333;
}

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

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

.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: #444;
padding: 5px;
margin: 10px;
z-index: 15;
border: 1px solid #D1D1D1;
}

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

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

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

.date {
padding-top: 05px;
text-align: left;
top: 5px;
color: #D1D1D1;
font-family: Courier New;
font-size: 6pt;
text-transform: lowercase;
}

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

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

.subject a:hover {
color: #8ED5FF;
}

.datesubject {
background: transparent;
}

.ljtags {
margin-top: 20px;
color: #5dd3e5;
font-weight: none;
text-transform: lowercase;
}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #5dd3e5;
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: #5dd3e5;
font-weight: lighter;
text-transform: none;
}

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

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

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

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background: #333;
color: #e7aa68;
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: 0px solid #D1DD1;
background: #FFF;
}

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

.box b {
color: #999;
}

input, textarea, select {
padding: 03px;
color: #e7aa68;
border: 0px solid #D1D1D1;
background: #333;
}

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: #333;
color: #999;
}

.replytosubject {
color: #e7aa68;
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: #333;
}

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

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

.commentboxpartial {
border: 0px solid #484848;
padding: 10px;
margin: 10px;
background: #333;
}

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

/* maincontent -- year/achive pages */

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

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

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

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

table.yeartable td.yearday {
background: #333;
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: 0px solid #484848;
background: #333;
}

/* for formatting header image */

.headerimage {
position: relative;
width: 600px;
height: 250px;
margin-left: auto;
margin-right: auto;
margin-bottom:0px;
background-image: url("INSERT LINK HERE");
background-repeat: no-repeat;
}

/* for formatting separators between entries */

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

Images
Upload these on YOUR OWN SERVER!
Header




© FamFamFam

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.