Flexible Squares - Tree of Memories

[midenianscholar]

Layout Style: Flexible Squares.
Best view: Safari and Firefox
Browser(s) Compatible: Firefox and Safari, but should work in all
Work with Nav bar?: Yes
Work with Ads? Yes.
Credit: scholarslayouts

Preview:



Live preview (with ads) at mslayout6 temporarily.

Just gonna be honest and say this is my favorite layout that I've made in... a long, long time. As is made obvious by my eight header variations. I couldn't help myself.


Feel free to play around with the layout, but please give me some form of credit.

It is preferred that you download the image to your own host! My links may disappear at any time.

This layout is made with Maximum Creative Expression/Expression of Awesome. That means you can use one of my headers, or you can make your own! Below are some suggestions. CLICK THE PREVIEWS FOR FULL SIZED HEADERS.



Default Header
With this header, there is blank space (what appears to be white) in the frames. You can edit in whatever pictures you want to fill in the space.

Style Suggestions:
The All Silv'ry Look


A bit of an abstract feel, utilizing books.



Show off your favorite fandom!

The Word/Quotes Look


Might be hard to fit words into some of the frames, but it's a different feel to the layout, and still quite pretty.

The Continuous Colored Picture


Showing off a bit o' my photography. Note that the tan and blue colors compliment the purple. Try not to pick clashing colors when you don't use black and white.



Green looks gorgeous with purple. Here's a nice vintage picture. It also has leaves and stuff in it, which plays off the theme of the tree design.



The accent color look. A pop color with a more filler-looking pattern.

The Everything Look


An illustration for The Twelve Dancing Princesses, using both color and black and white pictures. I've taken different bits of the whole picture and rearranged them to fit the frames pleasingly.

Have fun with it!

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: #523f53;
text-align: center;
color: #575757;
font-family: "Georgia", sans-serif;
font-size: 13px;
margin: 20px 0 20px 0;
}

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

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

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

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

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

#content
{
width: 768px;
margin-left: auto; margin-right: auto;
background-color: #fdfbfb;
border-width: 1px;
border-style: solid;
border-color: #fdfbfb;
padding: 15px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

#maincontent {
margin-top: 15px;
font-family: "Georgia", sans-serif;
font-size: 13px;
background-color: #fdfbfb;
color: #575757;
border-style: solid;
border-color: #fdfbfb;
border-width: 3px;
margin-right: 180px;
text-align: left;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
background-color: #fdfbfb;
border-color: #fdfbfb;
border-width: 3px;
border-style: solid;
font-size: 13px;
font-family: "Georgia", sans-serif;
color: #575757;
width: 167px;
float: right;
text-align: left;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
/*-----------------------------------------------------------------------------
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: 13px;
font-weight: bold;
letter-spacing: 3px;
border-style: solid;
border-color: #fdfbfb;
border-width: 1px;
background-color: #fdfbfb;
color: #69596a;
}

.headerimage {
position: relative;
width: 800px;
height: 450px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/tree/headerpride.png");
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: #568355;
}

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

/*title and subtitle*/
.title {
font-family: "Georgia", sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 200%;
top: 10px;
color: #b3b3b3;
}

.subtitle{
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: normal;
top: 10px;
color: #b3b3b3;
}

/*-----------------------------------------------------------------------------
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: #fdfbfb;
color: #575757;
font-family: "Georgia", sans-serif;
font-size: 13px;
text-align: left;
border-width: 2px;
border-color: #69596a;
border-style: solid;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

.userpic {
position: relative;
float: left;
background-color: #fdfbfb;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 2px;
border-color: #69596a;
border-style: solid;
}

.date {
line-height: 200%;
top: 5px;
color: #5f4161;
font-family: "Georgia", sans-serif;
font-size: 10px;
background-color: #fdfbfb;
}

.subject {
font-weight: normal;
padding: 10px;
color: #5f4161;
font-family: "Georgia", sans-serif;
font-size: 35px;
letter-spacing: 5px;
background-color: #fdfbfb;
}

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

.subject a:hover {
color: #5f4161;
}

.datesubject {
background-color: #fdfbfb;
padding: 5px;
border-width: 10px;
border-color: #fdfbfb;
}

.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: 13px;
}

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

.comments {
font-family: "Georgia", sans-serif;
font-size: 13px;
text-align: right;
background-color: #69596a;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #fdfbfb;
font-weight: bold;
}

div.comments a:hover {
color: #5f4161;
text-decoration: bold;
}

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

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

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

.userpicfriends {
position: relative;
float: left;
background-color: #fdfbfb;
padding: 5px;
margin: 10px;
text-align: center;
border-style: dashed;
border-width: 1px;
border-color: #69596a;
font-family: "Georgia", sans-serif;
font-size: 13px;
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: #568355;
}

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

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

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

.sbarcalendar {
border-color: #69596a;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
}

.sbarcalendarposts {
border-color: #69596a;
border-width: 1px;
border-style: solid;
background-color: #f3ebf4;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
}

/*------------------------------------------------------------
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: #69596a;
background-color: #fdfbfb;
margin-bottom: 10px;
margin-top: 10px;
text-align: center;
color: #5f4161;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

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

#footer {
width: 100%;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
background-color: #fdfbfb;
color: #69596a;
border-color: #fdfbfb;
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: #69596a;
background-color: #fdfbfb;
color: #575757;
}

table.yeartable td.yearday {
color: #fdfbfb;
text-align: center;
background-color: #69596a;
border-color: #69596a;
}

td.yearmonth {
border-style: none;
}

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

.datesubjectcomment {
background-color: #f3ebf4;
padding: 5px;
margin-top: 20px;
color: #575757;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

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

.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #fdfbfb;
padding: 10px;
clear: left;
background-color: #fdfbfb;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

input, textarea {
background-color: #f3ebf4;
color: #575757;
}

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: 13px;
line-height: 125%;
background-color: #fdfbfb;
color: #575757;

}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 13px;
font-family: "Georgia", sans-serif;
color: #575757;
background-color: #fdfbfb;
}

.commentbox {

border-color: #69596a;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #fdfbfb;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

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

.datesubjectcomment a:hover {
color: #5f4161;
}

.commentboxpartial {
border-color: #69596a;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #fdfbfb;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}

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

.skiplinks {
text-align: center;
}

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

.clear {

height: 15px;
}

.ljtags {
margin-top: 25px;
}