Flexible Squares - Another Rainy Day
Layout Style: Flexible Squares.
Best view: Tested in Firefox and IE, but should work in all
Browser(s) Compatible: Firefox and IE, but should work in all
Work with Nav bar?: Yes
Work with Ads? Yes.
Credit: scholarslayouts
Preview:
Live preview (with ads) at mslayout13 temporarily.
Feel free to play around with the layout, but please give me some form of credit.
It is preferred that you download the header image to your own host! My links may disappear at any time.
Header
Overrides:
/* Cleaned CSS: */
/*---------------------------------------------------
This is the original stylesheet for the S2 style Flexible Squares with the elements
arranged in a hopefully clearer order.
You can find a full guide on the single css definitions, including exlanations and illustrations
at http://cartonage.livejournal.com.
Hope this helps! =)
-----------------------------------------------------*/
body {
background-color: #323232;
text-align: center;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 12px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #447cb5;
text-decoration: none;
}
a:hover {
color: #3984ff;
text-decoration: underline;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 868px;
margin-left: auto; margin-right: auto;
background-color: #f3f3f3;
border-width: 1px;
border-style: solid;
border-color: #f3f3f3;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "Georgia", sans-serif;
font-size: 12px;
background-color: #e8e8e8;
color: #042a1c;
border-style: solid;
border-color: #e8e8e8;
border-width: 1px;
margin-right: 180px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #f3f3f3;
border-color: #e8e8e8;
border-width: 5px;
border-style: solid;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #494949;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 3px;
border-style: solid;
border-color: #f3f3f3;
border-width: 1px;
background-color: #f3f3f3;
color: #494949;
}
.headerimage {
position: relative;
width: 900px;
height: 285px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/rain/headerJPG.jpg");
background-repeat: no-repeat;
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #447cb5;
}
div#header a:hover, div#footer a:hover {
color: #3984ff;
text-decoration: none;
}
/*title and subtitle*/
.title {
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 200%;
top: 10px;
}
.subtitle{
font-family: "Georgia", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #f3f3f3;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 12px;
text-align: left;
border-width: 1px;
border-color: #bbc9cf;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #f3f3f3;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #bbc9cf;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 10px;
background-color: #e8e8e8;
}
.subject {
font-weight: normal;
padding: 10px;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 30px;
letter-spacing: 5px;
background-color: #e8e8e8;
}
.subject a, .subject a:link, .subject a:visited {
color: #447cb5;
}
.subject a:hover {
color: #3984ff;
}
.datesubject {
background-color: #e8e8e8;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Georgia", sans-serif;
font-size: 12px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Georgia", sans-serif;
font-size: 12px;
text-align: right;
background-color: #e0e5e8;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #447cb5;
}
div.comments a:hover {
color: #3984ff;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
background-color: #f3f3f3;
padding: 5px;
margin: 10px;
text-align: center;
border-style: dashed;
border-width: 1px;
border-color: #494949;
font-family: "Georgia", sans-serif;
font-size: 12px;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #447cb5;
}
div#sidebar a:hover {
color: #3984ff;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #494949;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
}
.sbarcalendarposts {
border-color: #494949;
border-width: 1px;
border-style: solid;
background-color: #f3f3f3;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #e8e8e8;
background-color: #e8e8e8;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #f3f3f3;
color: #e0e5e8;
border-color: #f3f3f3;
border-width: 1px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive 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: #494949;
background-color: #f8f4ea;
}
table.yeartable td.yearday {
background-color: #f8f4ea;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #e0e5e8;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #bbc9cf;
background-color: #f3f3f3;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #bbc9cf;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #f3f3f3;
color: #042a1c;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Georgia", sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #f3f3f3;
color: #042a1c;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #042a1c;
}
.commentbox {
border-color: #bbc9cf;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f3f3f3;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #447cb5;
}
.datesubjectcomment a:hover {
color: #3984ff;
}
.commentboxpartial {
border-color: #bbc9cf;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f3f3f3;
}
.commentinfo {
background-color: #f3f3f3;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
blockquote {
font-family:"Times New Roman";
font-size: 12px;
background-color:#e6e9ea;
padding:5px;
border:1px dashed;
color:#284553;
}
If you'd like to change the content so that it isn't so wide, here is a cropped header. If you look at my F.A.Q. page, you can see a tutorial for how to change the header and the width of the page.
Best view: Tested in Firefox and IE, but should work in all
Browser(s) Compatible: Firefox and IE, but should work in all
Work with Nav bar?: Yes
Work with Ads? Yes.
Credit: scholarslayouts
Preview:
Live preview (with ads) at mslayout13 temporarily.
Feel free to play around with the layout, but please give me some form of credit.
It is preferred that you download the header image to your own host! My links may disappear at any time.
Header
Overrides:
/* Cleaned CSS: */
/*---------------------------------------------------
This is the original stylesheet for the S2 style Flexible Squares with the elements
arranged in a hopefully clearer order.
You can find a full guide on the single css definitions, including exlanations and illustrations
at http://cartonage.livejournal.com.
Hope this helps! =)
-----------------------------------------------------*/
body {
background-color: #323232;
text-align: center;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 12px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #447cb5;
text-decoration: none;
}
a:hover {
color: #3984ff;
text-decoration: underline;
}
p, td, blockquote {
font-size: 11px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 868px;
margin-left: auto; margin-right: auto;
background-color: #f3f3f3;
border-width: 1px;
border-style: solid;
border-color: #f3f3f3;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "Georgia", sans-serif;
font-size: 12px;
background-color: #e8e8e8;
color: #042a1c;
border-style: solid;
border-color: #e8e8e8;
border-width: 1px;
margin-right: 180px;
text-align: left;
}
#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #f3f3f3;
border-color: #e8e8e8;
border-width: 5px;
border-style: solid;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #494949;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 3px;
border-style: solid;
border-color: #f3f3f3;
border-width: 1px;
background-color: #f3f3f3;
color: #494949;
}
.headerimage {
position: relative;
width: 900px;
height: 285px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/rain/headerJPG.jpg");
background-repeat: no-repeat;
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #447cb5;
}
div#header a:hover, div#footer a:hover {
color: #3984ff;
text-decoration: none;
}
/*title and subtitle*/
.title {
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 200%;
top: 10px;
}
.subtitle{
font-family: "Georgia", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #f3f3f3;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 12px;
text-align: left;
border-width: 1px;
border-color: #bbc9cf;
border-style: solid;
}
.userpic {
position: relative;
float: left;
background-color: #f3f3f3;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #bbc9cf;
border-style: solid;
}
.date {
line-height: 200%;
top: 5px;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 10px;
background-color: #e8e8e8;
}
.subject {
font-weight: normal;
padding: 10px;
color: #494949;
font-family: "Georgia", sans-serif;
font-size: 30px;
letter-spacing: 5px;
background-color: #e8e8e8;
}
.subject a, .subject a:link, .subject a:visited {
color: #447cb5;
}
.subject a:hover {
color: #3984ff;
}
.datesubject {
background-color: #e8e8e8;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
font-family: "Georgia", sans-serif;
font-size: 12px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "Georgia", sans-serif;
font-size: 12px;
text-align: right;
background-color: #e0e5e8;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #447cb5;
}
div.comments a:hover {
color: #3984ff;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
background-color: #f3f3f3;
padding: 5px;
margin: 10px;
text-align: center;
border-style: dashed;
border-width: 1px;
border-color: #494949;
font-family: "Georgia", sans-serif;
font-size: 12px;
z-index: 15;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #447cb5;
}
div#sidebar a:hover {
color: #3984ff;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #494949;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
}
.sbarcalendarposts {
border-color: #494949;
border-width: 1px;
border-style: solid;
background-color: #f3f3f3;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #e8e8e8;
background-color: #e8e8e8;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #f3f3f3;
color: #e0e5e8;
border-color: #f3f3f3;
border-width: 1px;
border-style: solid;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive 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: #494949;
background-color: #f8f4ea;
}
table.yeartable td.yearday {
background-color: #f8f4ea;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #e0e5e8;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #bbc9cf;
background-color: #f3f3f3;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #bbc9cf;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #f3f3f3;
color: #042a1c;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Georgia", sans-serif;
font-size: 12px;
line-height: 125%;
background-color: #f3f3f3;
color: #042a1c;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Georgia", sans-serif;
color: #042a1c;
}
.commentbox {
border-color: #bbc9cf;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f3f3f3;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #447cb5;
}
.datesubjectcomment a:hover {
color: #3984ff;
}
.commentboxpartial {
border-color: #bbc9cf;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f3f3f3;
}
.commentinfo {
background-color: #f3f3f3;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
blockquote {
font-family:"Times New Roman";
font-size: 12px;
background-color:#e6e9ea;
padding:5px;
border:1px dashed;
color:#284553;
}
If you'd like to change the content so that it isn't so wide, here is a cropped header. If you look at my F.A.Q. page, you can see a tutorial for how to change the header and the width of the page.
