Yellow Layout

[smilecarnival]

[x] Comment.
[x] Credit barubaron.

Title: Mellow Easter
Style: S2 Flexible Squares
Account: free or paid (no plus)
Best View: Firefox, Opera9



screenshot



/* Cleaned CSS: */

body {
background-color: #FFFFFF;
background-image: url('http://img113.imageshack.us/img113/6966/untitled4do3.jpg');
background-repeat: repeat-x;
text-align: center;
color: #C3B65A;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

a, a:link, a:visited {
color: #7CBFE1;
text-decoration: none;
}

a:hover {
color: #E17C7C;
text-decoration: underline;
}

p, td, blockquote {
font-size: 11px;
border: 1px;
border-style: dashed;
border-color: #E7DE9B;
background-color: #F6F2CF;
}

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

#content
{
width: 650px;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
border: 0px 10px 0px 10px;
border-style: solid;
border-color: #F3ECD4;
padding: 15px;
}

#maincontent {
margin-top: 0px;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
background-color: #FFFFFF;
color: #C3B65A;
border-style: solid;
border-color: #FFFFFF;
border: 0px 0px 0px 0px;
margin-right: 180px;
text-align: justify;
}

#sidebar {
padding-top: 15px;
margin-top: 0px;
background-color: #FFFFFF;
background-image: url('http://img149.imageshack.us/img149/5507/untitled45cj5.jpg');
background-repeat: repeat-y;
border-color: #E7DE9B;
border-top: 0px;
border-left: 1px;
border-right: 0px;
border-bottom: 0px;
border-style: solid;
font-size: 11px;
font-family: "helvetica, arial", sans-serif;
color: #C3B65A;
width: 160px;
float: right;
text-align: justify;
}

#header {
padding: 5px 0px 10px 0px;
margin: 0px;
text-align: center;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 2px;
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
background-color: #FFFFFF;
color: #C3B65A;
}

#footer {
text-align: center;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #C3B65A;
border-color: #FFFFFF;
border-width: 1px;
border-style: solid;
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: #7CBFE1;
}

div#header a:hover, div#footer a:hover {
color: #E17C7C;
text-decoration: none;
}

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

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

.title {
display: none;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 200%;
top: 10px;
}

.subtitle{
display: none;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #7CBFE1;
}

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

.defaultuserpic {
text-align: center;
}

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

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

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

#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 1px #FFFFFF solid;
}

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

.sbarcalendar {
border-color: #F3ECD4;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
}

.sbarcalendarposts {
border-color: #F3ECD4;
border-width: 1px;
border-style: solid;
background-color: #FFFFFF;
text-align: center;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
}

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

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

li.sbartitle
{
text-align: right;
padding-left: 15px;
list-style: bold;
text-style: bold;
border-style: solid;
border-bottom: 1px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-color: #E7DE9B;
background-color: TRANSPARENT;
margin-bottom: 10px;
margin-top: 10px;
}

/* maincontent */

.subcontent {
}

.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #FFFFFF;
color: #C3B65A;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
text-align: left;
border-width: 1px;
border-color: #FFFFFF;
border-style: solid;
}

.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}

.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}

.userpic {
position: relative;
float: left;
background-color: #E7DE9B;
padding: 5px;
margin: 10px;
z-index: 15;
border: 1px 0px 0px 0px;
border-color: #E7DE9B;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
background-color: #E7DE9B;
border-style: solid;
border: 1px 0px 0px 0px;
border-color: #E7DE9B;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
z-index: 15;
}

.date {
line-height: 200%;
top: 5px;
color: #FFFFFF;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
}

.subject {
font-weight: bold;
padding: 10px;
color: #C3B65A;
font-family: "helvetica, arial", sans-serif;
background-color: #F7F0BE;
font-size: 11px;
border-top: 1px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: #E7DE9B;
border-style: solid;
}

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

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

.datesubject {
background-color: #FFFFFF;
padding: 5px;
}

.currents, .currentmood, .currentmusic {
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
}

.comments {
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
text-align: right;
background-color: #F7F0BE;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
border-top: 1px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: #E7DE9B;
border-style: solid;
}

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

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

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background-color: #E7DE9B;
padding: 5px;
margin-top: 20px;
border-top: 1px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: #E7DE9B;
border-style: solid;
}

.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #FFFFFF;
background-color: #E7DE9B;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #FFFFFF;
border-style: solid;
}

.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #FFFFFF;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #FFFFFF;
color: #C3B65A;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "helvetica, arial", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #FFFFFF;
color: #C3B65A;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "helvetica, arial", sans-serif;
color: #C3B65A;
}

.commentbox {
border-color: #FFFFFF;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #FBF6E1;
background-image: url('http://img144.imageshack.us/img144/2641/untitled5em6.jpg');
background-repeat: repeat-y;
}

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

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

.commentboxpartial {
border-color: #FFFFFF;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #E7DE9B;
}

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

/* maincontent -- year/achive pages */

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
}

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

td.yearmonth {
border-style: none;
}

/* footer */

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

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

.clearfoot {
clear: both;
}

/* misc */

.clear {
height: 15px;
}

.skiplinks {
text-align: center;
}

.headerimage {
/* for formatting header image */
}

.separator{
/* for formatting separators between entries */
height: 35px;
}

bg.jpeg | sidebar.jpeg | commentbox.jpeg

1. Go to customize and set your style system to S2.

2. Next, click on the Look and Feel tab and select the layout (I.E. flexible squares). Set the theme to 'layout default'.

3. Then go to custom options, to custom css, and select NO in the first two dropdown boxes. Third should say YES.

4. Copy and paste the external stylesheet into the custom stylesheet box provided.

NOTE - Before you ask any questions regarding the layout and why it is/is not working, please take a look at these very helpful communities: s2flexisquares and everything_lj.