Flexible Squares - Christmas is Red and Gold

Dec 10, 2008 18:21

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

Note: This looks best with a paid account.

Preview:



Live preview (with ads) at mslayout30 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.

PLEASE NOTE: Because the background image is a little large, you must change your Photobucket preferences to 1 Megabyte File Size - otherwise Photobucket will SHRINK your image and it won't look right!

Header.

Plus Accounts 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: #4c1018;
text-align: right;
color: #3d1900;
font-family: "Arial", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}

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

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

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

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

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content
{
width: 730px;
margin-left: auto; margin-right: auto;
background-color: #f4ebc9;
border-width: 5px;
border-style: solid;
padding: 15px;
border-color: transparent #f0de94 #f0de94 #f0de94;

}

#maincontent {
margin-top: 15px;
font-family: "Arial", sans-serif;
font-size: 12px;
background-color: #ddba66;
color: #3d1900;
border-style: solid;
border-color: #ddba66;
border-width: 1px;
margin-right: 180px;
text-align: left;
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
background-color: #f4f0de;
border-color: #f1e08e;
border-width: 2px;
border-style: solid;
font-size: 12px;
font-family: "Arial", sans-serif;
color: #3d1900;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 50%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "Times New Roman", sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 7px;
border-style: solid;
border-color: transparent;
border-width: 1px;
background-color: transparent;
color: #0a3100;
position:absolute;
left:25%;
top:70%;
}

.headerimage {
position: relative;
width: 1100px;
height: 428px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/christmas%20header/header.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: #a70018;
}

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

/*title and subtitle*/
.title {
font-family: "Times New Roman", sans-serif;
font-size: 19px;
font-weight: normal;
line-height: 200%;
top: 10px;
letter-spacing: 3px;
text-transform:uppercase;
}

.subtitle{
letter-spacing: 3px;
font-family: "Times New Roman", sans-serif;
font-size: 15px;
font-weight: normal;
text-transform:lowercase;
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: #f4f0de;
color: #3d1900;
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: left;
border-width: 1px;
border-color: #f1e08e;
border-style: solid;
}

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

.date {
line-height: 200%;
top: 5px;
color: #491017;
font-family: "Times New Roman", sans-serif;
font-size: 10px;
background-color: #f4f0de;
}

.subject {
font-weight: normal;
padding: 10px;
color: #0a3100;
font-family: "Georgia", sans-serif;
font-size: 30px;
background-color: #f4f0de;
}

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

.subject a:hover {
color: #163b0c;
}

.datesubject {
background-color: #ddba66;
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: "Arial", sans-serif;
font-size: 12px;
}

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: right;
background-color: #f1e08e;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

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

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

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: left;
background-color: #ece8d8;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ece8d8;
font-family: "Arial", 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: #a70018;
}

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

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

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

.sbarcalendar {
border-color: #3d1900;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
}

.sbarcalendarposts {
border-color: #3d1900;
border-width: 1px;
border-style: solid;
background-color: #f4f0de;
text-align: center;
font-family: "Arial", 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: 2px;
border-color: transparent transparent #ddba66 transparent;
background-color: #f4f0de;
color: #3d1900;
font-family: "Georgia", sans-serif;
font-size: 13px;
margin-bottom: 10px;
margin-top: 10px;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
width: 100%;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #f4ebc9;
color: #3d1900;
border-color: #f4ebc9;
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;
border-color: #3d1900;
background-color: #f4f0de;
}

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

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

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

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

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

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

input, textarea {
background-color: #f4f0de;
color: #3d1900;
}

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

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Arial", sans-serif;
color: #3d1900;
}

.commentbox {

border-color: #4c1018;
border-width: 3px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f4f0de;
}

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

.datesubjectcomment a:hover {
color: #4c1018;
}

.commentboxpartial {
border-color: #3d1900;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ece8d8;
}

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

.skiplinks {
text-align: center;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}

Paid/Basic Accounts 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: #4c1018;
text-align: right;
color: #3d1900;
font-family: "Arial", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}

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

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

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

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

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content
{
width: 730px;
margin-left: auto; margin-right: auto;
background-color: #f4ebc9;
border-width: 5px;
border-style: solid;
padding: 15px;
border-color: transparent #f0de94 #f0de94 #f0de94;

}

#maincontent {
margin-top: 15px;
font-family: "Arial", sans-serif;
font-size: 12px;
background-color: #ddba66;
color: #3d1900;
border-style: solid;
border-color: #ddba66;
border-width: 1px;
margin-right: 180px;
text-align: left;
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
background-color: #f4f0de;
border-color: #f1e08e;
border-width: 2px;
border-style: solid;
font-size: 12px;
font-family: "Arial", sans-serif;
color: #3d1900;
width: 160px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 50%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: "Times New Roman", sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 7px;
border-style: solid;
border-color: transparent;
border-width: 1px;
background-color: transparent;
color: #0a3100;
position:absolute;
left:25%;
top:50%;
}

.headerimage {
position: relative;
width: 1100px;
height: 428px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/christmas%20header/header.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: #a70018;
}

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

/*title and subtitle*/
.title {
font-family: "Times New Roman", sans-serif;
font-size: 19px;
font-weight: normal;
line-height: 200%;
top: 10px;
letter-spacing: 3px;
text-transform:uppercase;
}

.subtitle{
letter-spacing: 3px;
font-family: "Times New Roman", sans-serif;
font-size: 15px;
font-weight: normal;
text-transform:lowercase;
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: #f4f0de;
color: #3d1900;
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: left;
border-width: 1px;
border-color: #f1e08e;
border-style: solid;
}

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

.date {
line-height: 200%;
top: 5px;
color: #491017;
font-family: "Times New Roman", sans-serif;
font-size: 10px;
background-color: #f4f0de;
}

.subject {
font-weight: normal;
padding: 10px;
color: #0a3100;
font-family: "Georgia", sans-serif;
font-size: 30px;
background-color: #f4f0de;
}

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

.subject a:hover {
color: #163b0c;
}

.datesubject {
background-color: #ddba66;
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: "Arial", sans-serif;
font-size: 12px;
}

/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Arial", sans-serif;
font-size: 12px;
text-align: right;
background-color: #f1e08e;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

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

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

/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: left;
background-color: #ece8d8;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ece8d8;
font-family: "Arial", 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: #a70018;
}

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

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

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

.sbarcalendar {
border-color: #3d1900;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
}

.sbarcalendarposts {
border-color: #3d1900;
border-width: 1px;
border-style: solid;
background-color: #f4f0de;
text-align: center;
font-family: "Arial", 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: 2px;
border-color: transparent transparent #ddba66 transparent;
background-color: #f4f0de;
color: #3d1900;
font-family: "Georgia", sans-serif;
font-size: 13px;
margin-bottom: 10px;
margin-top: 10px;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
width: 100%;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #f4ebc9;
color: #3d1900;
border-color: #f4ebc9;
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;
border-color: #3d1900;
background-color: #f4f0de;
}

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

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

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

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

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

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

input, textarea {
background-color: #f4f0de;
color: #3d1900;
}

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

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

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 12px;
font-family: "Arial", sans-serif;
color: #3d1900;
}

.commentbox {

border-color: #4c1018;
border-width: 3px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #f4f0de;
}

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

.datesubjectcomment a:hover {
color: #4c1018;
}

.commentboxpartial {
border-color: #3d1900;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ece8d8;
}

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

.skiplinks {
text-align: center;
}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
height: 15px;
}

style: simple, theme: seasonal, theme: holiday

Previous post Next post
Up