&color

Layout / S2 Flexible Squares / Pink, Green & Blue

Thu, 07 Feb 2008 03:27:01 GMT

A WIDE layout that adjusts to the size of your browser window.

Preview (click to enlarge):

DETAILS:

Style: S2 Flexible Squares
Website: Optional
Default Icon: No
Best View: 1024x768
Browser(s): Firefox, Flock, IE tested.
Navigation Bar: Optional

CODE:

/* Cleaned CSS: */
/* s2 Flexible Squares Layout by mailerose at (http://mailerose.livejournal.com) */

body {
background-color: #222;
background-image: url();
background-position: ;
background-attachment: fixed;
background-repeat: no-repeat;
text-align: left;
color: #d1d1d1;
font-family: verdana, arial, sans-serif;
font-size: 10pt;
margin: 0px;
}

a, a:link, a:visited {
font-family: verdana, arial, sans-serif;
color: #00aab9;
font-weight: ;
text-decoration: none;

}

a:hover {
font-family: verdana, arial, sans-serif;
color: #00aab9;
font-weight: ;
border-bottom: 0px #e54d4d dotted;
text-decoration: none;

}

p, td, blockquote {
font-size: 9px;
}

b, s, u, i, emphasise, abbr, strong, strike {
color: #00aab9;
}

code, kbd, pre, tt {
font-family: verdana, arial, sans-serif;
}

#content {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
padding: 0px;
text-align: left;
border-left: 0px solid #CCC;
border-right: 0px solid #CCC;
}

#maincontent {
margin: 0px;
padding-left: 100px;
padding-right: 100px;
font-family: verdana, arial, sans-serif;
font-size: 9pt;
line-height: 12pt;
background-color: #FFFFFF;
color: #777777;
text-align: left;
border-right: 0px solid #e54d4d;
}

#sidebar {
padding-top: 10px;
padding-bottom: 2px;
margin-top: 0px;
margin-right: 0px;
background-color: #222;
font-size: 8pt;
line-height: 11pt;
font-family: verdana, arial, sans-serif;
color: #888;
width: 100%;
float: center;
text-transform: normal;
text-align: center;
border-bottom: 0px dotted #dbdbdb;
}

#header {
padding-left: 100px;
padding-right: 100px;
padding-top: 20px;
padding-bottom: 10px;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 9pt;
font-weight: ;
text-transform: lowercase;
letter-spacing: 1px;
background-color: #222;
color: #b0b0b0;
}

#footer {
width: auto;
height: 25px;
margin: 0px;
padding: 0px 0px 25px 0px;
padding-left: 100px;
padding-right: 100px;
color: #b0b0b0;
background-color: #fff;
font-weight: ;
font-size: 9pt;
font-family: verdana, arial, sans-serif;
text-transform: lowercase;
letter-spacing: 1px;
border: 0px;
text-align: right;
}

/* 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: #ff2d6f;
padding: 5px;
font-weight: ;
text-transform: lowercase;
font-size: 9pt;
font-family: verdana, arial, sans-serif;
}

div#header a:hover, div#footer a:hover {
color: #ff2d6f;
padding: 5px;
font-weight: ;
text-transform: lowercase;
font-size: 9pt;
font-family: verdana, arial, sans-serif;
}

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

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

.title {
font-family: verdana, arial, sans-serif;
font-size: 12pt;
color: #bbb;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 10px;
display: none;
}

.subtitle{
font-family: verdana, arial, sans-serif;
font-size: 12pt;
color: #bbb;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
display: none;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #00aab9;
font-weight: ;
font-size: 8pt;
font-family: verdana, arial, sans-serif;
text-transform: lowercase;
}

div#sidebar a:hover {
color: #00aab9;
text-decoration: none;
font-weight: ;
font-size: 8pt;
font-family: verdana, arial, sans-serif;
text-transform: lowercase;
}

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
text-align: center;
}

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

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

#sidebar_summary li.sbaritem {
margin: 0px;
padding: 3px 0;
border-bottom: 1px #dbdbdb dotted;
}

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

.sbarcalendar {
border-color: #CBCBCB;
border-width: 0px;
border-style: solid;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
}

.sbarcalendarposts {
border-color: #3da8e0;
border-width: 0px;
border-style: solid;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
font-weight: bold;
}

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

li.sbaritem, .tagcloud {
padding-left: 10px;
list-style: none;
display: inline;

}

li.sbartitle {
padding: 5px;
list-style: none;
color: #006ea2;
font-weight: bold;
margin-bottom: 5px;
margin-top: 5px;
font-family: verdana, arial, sans-serif;
text-align: left;
font-size: 9pt;
letter-spacing: 2px;
}

/* maincontent */

.subcontent {
background-color: white;
}

.entry {
margin: 5px;
padding: 10px;
background-color: #FFFFFF;
color: #383838;
font-family: verdana, arial, sans-serif;
font-size: 9pt;
line-height: 12pt;
text-align: left;
border-right: 0px solid #e54d4d;
}

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

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

.userpic {
position: relative;
float: right;
text-align: center;
padding: 5px;
margin: 10px;
z-index: 15;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
border-left: 0px solid #e54d4d;
}

.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
color: #d1d1d1;
z-index: 15;
border-left: 0px solid #e54d4d;
}

.userpicfriends font {
color: #5f95bb;
font-family: verdana, arial, sans-serif;
font-size: 8pt;
font-weight: normal;
}

.date {
line-height: 200%;
padding-top: 0px;
margin-left: 5px;
color: #888;
font-family: verdana, arial, sans-serif;
font-weight: none;
text-transform: lowercase;
letter-spacing: 1px;
text-align: left;
font-size: 7pt;
}

.ljtags {
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #b0b0b0;
margin-top: 15px;
font-weight: lighter;
position: left;
text-transform: lowercase;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #b0b0b0;
text-transform: none;
font-weight: lighter;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
}

.subject {
font-weight: bold;
padding: 5px;
color: #ff2d6f;
font-family: verdana, arial, sans-serif;
text-align: left;
font-size: 15pt;
letter-spacing: 2px;
border-bottom: 0px solid #dbdbdb;
}

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

.subject a:hover {
color: #3da8e0;
}

.datesubject {
background-color: #FFFFFF;
padding: 5px;
border-bottom: 0px #dbdbdb dotted;
}

blockquote {
margin: 15px 15px 15px 15px;
text-align: left;
color: #AAAAAA;
background-color: #FFFFFF;
font-family: verdana, arial, sans-serif;
font-size: 9pt;
border: 1px #BBBBBB dotted;
padding: 10px;
}

.currents strong {
color: #b0b0b0;
font-weight: lighter;
font-size: 7pt;
text-transform: lowercase;
margin-top: 0px;
}

.currents {
color: #b0b0b0;
font-weight: lighter;
font-size: 7pt;
text-transform: lowercase;
margin-top: 0px;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #b0b0b0;
text-transform: none;
font-weight: lighter;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
text-transform: lowercase;
}

.currentlocation a:hover, .ljtags a:hover {
color: #b0b0b0;
font-weight: lighter;
font-size: 7pt;
text-transform: lowercase;
font-family: verdana, arial, sans-serif;
}

.comments {
font-family: verdana, arial, sans-serif;
font-size: 8pt;
text-align: right;
background-color: #FFFFFF;
padding: 5px;
color: #8abc00;
font-weight: none;
padding: 0px 5px 0px 5px;
position: right;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #8abc00;
font-size: 8pt;
text-transform: lowercase;
padding: 3px;
font-family: verdana, arial, sans-serif;
}

div.comments a:hover {
color: #8abc00;
font-size: 8pt;
text-transform: lowercase;
padding: 3px;
font-family: verdana, arial, sans-serif;
}

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background-color: #FFFFFF;
color: #3da8e0;
font-weight: lighter;
text-align: left;
text-transform: lowercase;
padding: 5px;
margin-top: 20px;
}

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

.box {
border-style: solid;
border-width: 0px;
border-color: #dbdbdb;
padding: 10px;
clear: right;
}

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

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: verdana, arial, sans-serif;
font-size: 9pt;
background-color: #FFFFFF;
color: #666666;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 9pt;
font-family: verdana, arial, sans-serif;
color: #666666;
}

.commentbox {
border-color: #dbdbdb;
border-width: 0px;
border-style: solid;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}

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

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

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

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

/* maincontent -- year/achive pages */

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

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: #BBBBBB;
}

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 {
display: none;
clear: both;
}

/* misc */

.clear {
height: 15px;
}

.skiplinks {
text-align: center;
}

.headerimage {
/* for formatting header image */
position: relative;
width: 0px; /* Width of banner */
height: 0px; /* Height of banner */
margin-left: auto; margin-right: auto;
margin-bottom: 0px; /* Space between bottom of banner and layout */
margin-top: 0px;
background-image: url();
background-repeat: no-repeat;
}

.separator{
/* for formatting separators between entries */
height: 5px;
border-bottom: 1px dotted #dbdbdb;
}

INSTALLATION INSTRUCTIONS:

1. Go to customize and make sure the style is set to S2.
2. Select the applicable theme (Flexible squares, et cetera. You may have to search for it in the search bar.) and click apply theme.
3. Click on customize your theme, then custom css.
4. Set all drop-down options to no.
5. Paste CSS into the custom stylesheet box.

[x] Feel free to change the colors, add a header -- do as you wish with it.
[x] Please comment if taking, and credit mailerose or andcolor when using.

Layout / S2 Flexible Squares / Sky

Sat, 15 Sep 2007 19:37:36 GMT

Preview (click to enlarge):

DETAILS:

Style: S2 Flexible Squares
Website: Optional
Default Icon: Optional
Best View: 1024x768
Browser(s): Firefox, Flock, IE tested.
Navigation Bar: Optional

CODE:

/* Cleaned CSS: */
/* s2 Flexible Squares Layout by mailerose at (http://mailerose.livejournal.com) */

body {
background-color: #ededed;
background-image: url();
background-position: center;
background-attachment: scroll;
text-align: center;
color: #d1d1d1;
font-family: "Verdana", sans-serif;
font-size: 12px;
margin: 0px 0 0px 0;
}

a, a:link, a:visited {
font-family: "Verdana", sans-serif;
color: #f65436;
font-weight: bold;
text-decoration: none;
}

a:hover {
font-family: "Verdana", sans-serif;
color: #3da8e0;
font-weight: bold;
border-bottom: 1px #3da8e0 dotted;
text-decoration: none;
}

p, td, blockquote {
font-size: 10px;
}

b, s, u, emphasise, abbr, strong, strike {
color: #3da8e0;
}

i {
color: #0d4880;
}

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

#content {
width: 759px;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
padding: 9px;
text-align: left;
}

#maincontent {
margin-top: 0px;
padding: 3px;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #FFFFFF;
color: #777777;
margin-left: 175px;
text-align: left;
}

#sidebar {
padding-top: 3px;
margin-top: 0px;
background-color: #FFFFFF;
font-size: 11px;
line-height: 14px;
font-family: "Verdana", sans-serif;
color: #777;
width: 165px;
float: left;
text-transform: normal;
text-align: left;
}

#header {
padding-top: 5px;
padding-bottom: 5px;
line-height: 20px;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #FFF;
color: #888;
}

#footer {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #888;
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: #0d4880;
padding: 10px;
font-weight: bold;
}

div#header a:hover, div#footer a:hover {
color: #fff;
background: #3da8e0;
padding: 10px;
font-weight: bold;
}

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

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

.title {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #a9cdc8;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
visibility: hidden;
}

.subtitle{
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #a9cdc8;
font-weight: normal;
text-transform: none;
letter-spacing: 1px;
visibility: hidden;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #f65436;
font-weight: lighter;
font-size: 10px;
text-transform: uppercase;
}

div#sidebar a:hover {
color: #3da8e0;
text-decoration: none;
font-weight: lighter;
font-size: 10px;
text-transform: uppercase;
border-bottom: 0px;
}

.defaultuserpic {
text-align: center;

}

.sbarheader {
padding: 0px 5px 0px 5px;
text-align: center;
}

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

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

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

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

.sbarcalendar {
border-color: #CBCBCB;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}

.sbarcalendarposts {
border-color: #3da8e0;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight: normal;
}

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

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

li.sbartitle {
padding: 5px;
list-style: none;
color: #3da8e0;
font-family: "Verdana", sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
margin-bottom: 5px;
margin-top: 5px;
}

/* maincontent */

.subcontent {
background-color: white;
}

.entry {
margin: 0px 0px 0px 0px;
padding: 10px;
background-color: #FFFFFF;
color: #484848;
font-family: "Verdana", sans-serif;
font-size: 12px;
text-align: left;
border-width: 0px;
border-color: #dbdbdb;
border-style: dotted;
}

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

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

.userpic {
position: relative;
float: right;
text-align: center;
padding: 5px;
margin: 5px;
z-index: 15;
font-family: "Verdana", sans-serif;
font-size: 9px;
border-width: 1px;
border-color: #d1d1d1;
border-style: solid;
}

.userpicfriends {
position: relative;
float: right;
padding: 5px;
margin: 5px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #d1d1d1;
font-family: "Verdana", sans-serif;
font-size: 9px;
z-index: 15;
}

.date {
line-height: 200%;
top: 5px;
color: #888;
font-family: "Verdana", sans-serif;
font-weight: none;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
font-size: 10px;
}

.ljtags {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #0d4880;
margin-top: 15px;
font-weight: lighter;
position: left;
text-transform: lowercase;
}

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

.subject {
font-weight: bold;
padding: 5px;
color: #0d4880;
font-family: "Verdana", sans-serif;
text-align: left;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
border-bottom: 1px dotted #dbdbdb;
}

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

.subject a:hover {
color: #3da8e0;
}

.datesubject {
background-color: #FFFFFF;
padding: 5px;
border-bottom: 0px #dbdbdb dotted;
}

blockquote {
margin: 15px 15px 15px 15px;
text-align: left;
color: #AAAAAA;
background-color: #FFFFFF;
font-family: "Verdana", sans-serif;
font-size: 12px;
border: 1px #BBBBBB dotted;
padding: 10px;
}

.currents strong {
color: #0d4880;
font-weight: lighter;
font-size: 10px;
text-transform: lowercase;
}

.currents {
color: #b0b0b0;
font-weight: lighter;
font-size: 10px;
text-transform: lowercase;
margin-top: 5px;
}

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

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

.comments {
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: right;
background-color: #FFFFFF;
padding: 5px;
color: #484848;
font-weight: none;
padding: 0px 5px 0px 5px;
position: center;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #0d4880;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
}

div.comments a:hover {
color: #0d4880;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
}

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background-color: #FFFFFF;
color: #3da8e0;
font-weight: lighter;
text-align: left;
text-transform: lowercase;
padding: 5px;
margin-top: 20px;
}

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

.box {
border-style: dotted;
border-width: 0px;
border-color: #dbdbdb;
padding: 10px;
clear: right;
}

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

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

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
font-family: "Verdana", sans-serif;
color: #666666;
}

.commentbox {
border-color: #dbdbdb;
border-width: 1px;
border-style: dotted;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}

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

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

.commentboxpartial {
border-color: #dbdbdb;
border-width: 1px;
border-style: dotted;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}

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

/* maincontent -- year/achive pages */

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

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: #BBBBBB;
}

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 */
position: relative;
width: 775px; /* Width of banner */
height: 170px; /* Height of banner */
margin-left: auto; margin-right: auto;
margin-bottom: 0px; /* Space between bottom of banner and layout */
background-image: url(http://img477.imageshack.us/img477/1381/b8natureelements019desami2.jpg);
background-repeat: no-repeat;
}

.separator{
/* for formatting separators between entries */
height: 8px;
border-bottom: 1px solid #d1d1d1;
}

INSTALLATION INSTRUCTIONS:

1. Go to customize and make sure the style is set to S2.
2. Select the applicable theme (Flexible squares, et cetera. You may have to search for it in the search bar.) and click apply theme.
3. Click on customize your theme, then custom css.
4. Set all drop-down options to no.
5. Paste CSS into the custom stylesheet box.

[x] Feel free to change the colors/header -- do as you wish with it.
[x] Please comment if taking, and credit mailerose or andcolor when using.

Layout / S2 Flexible Squares / Blue Sherbet

Sat, 15 Sep 2007 18:35:14 GMT

Preview (click to enlarge):

DETAILS:

Style: S2 Flexible Squares
Website: Optional
Default Icon: Optional
Best View: 1024x768
Browser(s): Firefox, Flock, IE tested.
Navigation Bar: Optional

CODE:

/* Cleaned CSS: */
/* s2 Flexible Squares Layout by mailerose at (http://mailerose.livejournal.com) */

body {
background-color: #dbdbdb;
background-image: url();
background-position: center;
background-attachment: scroll;
text-align: center;
color: #777777;
font-family: "Verdana", sans-serif;
font-size: 10px;
margin: 0px 0 0px 0;
}

a, a:link, a:visited {
color: #a9cdc8;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #BBBBBB;
font-weight: bold;
border-bottom: 0px #a9cdc8 dotted;
text-decoration: none;
}

p, td, blockquote {
font-size: 10px;
}

b, i, s, u, emphasise, abbr, strong, strike {
color: #777777;
}

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

#content {
width: 775px;
margin-top: 0px;
margin-left: auto; margin-right: auto;
background-color: #FFFFFF;
border-top: solid 35px #a9cdc8;
border-bottom: solid 25px #a9cdc8;
padding: 9px;
text-align: left;
}

#maincontent {
margin-top: 0px;
padding: 3px;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #FFFFFF;
color: #777777;
margin-left: 175px;
text-align: left;
}

#sidebar {
padding-top: 3px;
margin-top: 0px;
background-color: #FFFFFF;
font-size: 11px;
line-height: 15px;
font-family: "Verdana", sans-serif;
color: #999999;
width: 165px;
float: left;
text-transform: normal;
text-align: left;
}

#header {
padding-top: 5px;
padding-bottom: 5px;
line-height: 30px;
margin: 0px;
text-align: center;
font-family: "Palatino Linotype" Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #a9cdc8;
}

#footer {
text-align: center;
font-family: "Palatino Linotype" Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #FFFFFF;
color: #777777;
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: #999999;
padding: 6px;
font-weight: bold;
}

div#header a:hover, div#footer a:hover {
color: #BBBBBB;
padding: 5px;
border: dotted 1px #a9cdc8;
font-weight: bold;
}

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

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

.title {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #a9cdc8;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
visibility: hidden;
}

.subtitle{
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #a9cdc8;
font-weight: normal;
text-transform: none;
letter-spacing: 1px;
visibility: hidden;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #777777;
font-weight: normal;
}

div#sidebar a:hover {
color: #999999;
text-decoration: none;
font-weight: normal;
}

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
text-align: center;
}

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

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

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

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

.sbarcalendar {
border-color: #CBCBCB;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}

.sbarcalendarposts {
border-color: #a9cdc8;
border-width: 1px;
border-style: solid;
background-color: #e3f1ef;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
font-weight: normal;
}

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

li.sbaritem, .tagcloud {
padding-left: 10px;
list-style: none;
border-bottom: 1px #dbdbdb dotted;
}

li.sbartitle {
padding: 5px;
list-style: none;
color: #A3C6C1;
font-family: "Palatino Linotype" Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 5px;
margin-top: 5px;
}

/* maincontent */

.subcontent {
background-color: white;
}

.entry {
margin: 0px 0px 0px 0px;
margin-left: 131px;
padding: 10px;
background-color: #FFFFFF;
color: #777777;
font-family: "Verdana", sans-serif;
font-size: 12px;
text-align: left;
border-width: 0px;
border-color: #dbdbdb;
border-style: dotted;
}

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

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

.userpic {
position: relative;
float: left;
text-align: center;
padding: 0px;
margin: 10px;
z-index: 15;
font-family: "Verdana", sans-serif;
font-size: 9px;
border-width: 7px;
border-color: #a9cdc8;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
padding: 0px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 7px;
border-color: #a9cdc8;
font-family: "Verdana", sans-serif;
font-size: 9px;
z-index: 15;
}

.date {
line-height: 200%;
top: 5px;
color: #AAAAAA;
font-family: "Verdana", sans-serif;
font-weight: none;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
font-size: 10px;
}

.ljtags {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #888888;
margin-top: 14px;
font-weight: bold;
position: left;
text-transform: lowercase;
}

.subject {
font-weight: bold;
padding: 5px;
color: #999999;
font-family: "Palatino Linotype" Helvetica, sans-serif;
text-align: left;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
border-bottom: 1px dotted #dbdbdb;
}

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

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

.datesubject {
background-color: #FFFFFF;
padding: 5px;
border-bottom: 0px #dbdbdb dotted;
}

blockquote {
margin: 15px 15px 15px 15px;
text-align: left;
color: #AAAAAA;
background-color: #FFFFFF;
font-family: "Verdana", sans-serif;
font-size: 12px;
border: 1px #BBBBBB dotted;
padding: 10px;
}

.currents, .currentmood, .currentmusic {
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #BBBBBB;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
text-transform: lowercase;
}

.comments {
font-family: "Palatino Linotype" Helvetica, sans-serif;
font-size: 12px;
text-align: right;
background-color: #FFFFFF;
padding: 5px;
color: #999999;
font-weight: none;
padding: 0px 5px 0px 5px;
position: center;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #a9cdc8;
font-size: 13px;
letter-spacing: 1px;
padding: 3px;
}

div.comments a:hover {
color: #BBBBBB;
border-bottom: 1px #a9cdc8 dotted;
letter-spacing: 1px;
padding: 3px;
}

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background-color: #FFFFFF;
padding: 5px;
margin-top: 20px;
}

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

.box {
border-style: dotted;
border-width: 0px;
border-color: #dbdbdb;
padding: 10px;
clear: right;
}

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

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

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 10px;
font-family: "Verdana", sans-serif;
color: #666666;
}

.commentbox {
border-color: #dbdbdb;
border-width: 1px;
border-style: dotted;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}

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

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

.commentboxpartial {
border-color: #dbdbdb;
border-width: 1px;
border-style: dotted;
padding: 5px;
margin: 5px;
background-color: #FFFFFF;
}

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

/* maincontent -- year/achive pages */

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

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: #BBBBBB;
}

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 */
position: relative;
width: 0px; /* Width of banner */
height: 0px; /* Height of banner */
margin-left: auto; margin-right: auto;
margin-bottom: 0px; /* Space between bottom of banner and layout */
background-image: url();
background-repeat: no-repeat;
}

.separator{
/* for formatting separators between entries */
height: 8px;
border-bottom: 1px dotted #BBBBBB;
}

Giving Credit

Sat, 15 Sep 2007 01:34:43 GMT

This post is constantly updated to reflect the resources that I use. With that said, however, there may be mistakes on here, as I'll sometimes forget from whom or where I've downloaded things from. If you think I've forgotten to list your name or website, please kindly inform me and I shall happily add you to my resource list and give you the credit you deserve. Thanks!

RESOURCES:

irinafan (css guide)
morguefile (stock images)

Quis Nulla

Sat, 15 Sep 2007 01:34:07 GMT

Illum tation nulla. Feugait te et nulla praesent dignissim, autem nulla. Minim magna te nulla duis sed blandit eros in lorem in eros, suscipit exerci dolor dolor facilisis. Ullamcorper commodo enim iriure, euismod. Nonummy enim exerci autem velit eum aliquip lobortis consectetuer adipiscing volutpat vero. In quis in consequat feugait quis suscipit iriure. Quis nulla, nostrud minim autem nulla dolore, magna ut nulla duis. Laoreet blandit erat hendrerit.