[layout: flexible squares] #7 Blue Green

[calixa]

200+ members! Here, have a layout :)

Theme: Flexible Squares S2
Works with: paid, basic and plus
Tested on: Firefox & IE, 1024x768 resolution
Includes: Comment pages, sidebar, currents, archive
Disabled: Header navigation



live preview | image preview


Copy & Paste:
/*---------------------------------------------------

FLEXIBLE SQUARES S2
"Bluegreen" by calixa @ biconic.livejournal.com

-----------------------------------------------------*/

body {
background-color: #A0D3DA;
background-image: url();
background-repeat: repeat-all;
text-align: justify;
color: #999999;
font-family: "tahoma", sans-serif;
font-size: 10px;
line-height: 15px;
margin: 0px 0 20px 0;
}

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

a:hover {
color: #B9CC98;
text-decoration: none;
}

b {
color: #807F67;
}

blockquote {
font-family: "tahoma";
font-size: 10px;
padding: 15px;
line-height: 140%;
border-left: #B9CC98 5px solid;
background-color: #fbfbfb;
color: #999999;
}

blockquote:hover {
border-left: #D3C687 5px solid;
}

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

#qrform table{ border: 0 !important;}

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

#content {
width: 80%;
margin-left: auto; margin-right: auto;
padding: 0px;
}

#maincontent {
margin: 20px 220px 0px 0px;
padding: 0px 0px 0px 0px;
}

#sidebar {
padding: 0px 0px 0px 0px;
margin: -20px 0px 0px 0px;
font-family: "tahoma", sans-serif;
width: 200px;
float: right;
text-align: left;
}

/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
display:none;
}

.headerimage {
position: relative;
width: 800px;
height: 0px;
background-image:url();
margin: 10px auto 0px auto;
}

.title {
display:none;
}

.subtitle{
display:none;
}

/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/

div#header li.view {
display:none;
}

ul.navheader {
display:none;
}

ul.navheader li {
display:none;
}

/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.subcontent {
margin: 0px 0px 0px 0px;
padding: 0px 0 0 0px;
}

.entry {
margin: 0px 0px 10px 0px;
padding: 20px 10px 10px 10px;
background-color: #ffffff;
color: #999999;
font-family: "tahoma", sans-serif;
font-size: 10px;
text-align: justify;
line-height: 140%;
}

.datesubject {
margin: 0px 0px 0px 0px;
background-color: #B9CC98;
padding: 3px 0px 3px 0px;
border-left: #5AAAB4 5px solid;
text-align: left;
}

.datesubject:hover {
border-left: #D3C687 5px solid;
}

.date {
margin: 0px 15px 0px 10px;
color: #f6f6f6;
font-family: "Verdana", sans-serif;
font-size: 6pt;
font-style: italic;
text-transform: lowercase;
}

.subject {
color: #f6f6f6;
padding: 2px 0px 3px 10px;
font-family: "tahoma", sans-serif;
font-size: 8pt;
font-style: normal;
line-height: 100%;
letter-spacing: 0px;
text-transform: uppercase;
}

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

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

.userpic {
position: relative;
float: right;
padding: 0px;
margin: 45px 8px 5px 8px;
text-align: center;
border: #eeeeee 0px solid;
background-color: #ffffff !important;
font-family: "Verdana", sans-serif;
font-size: 10px;
z-index: 15;
}

.userpic img {
border: #eeeeee 5px solid;}

.userpic font {
color: #818181;
}

.ljtags {
margin: 15px 0px -10px 0px;
background-color:#fbfbfb;
width: 300px;
padding: 5px;
color:#818181;
font-size: 7pt;
border-bottom: #eeeeee 1px solid;
border-left: #D3C687 5px solid;
}

.ljtags:hover {
border-left: #B9CC98 5px solid;}

.entry ul li
{
padding-left: 2px;
margin-left: 3px;
}

.entry ol li
{
padding-left: 2px;
margin-left: 3px;
}

/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents {
font-family: "Verdana", sans-serif;
font-size: 7pt;
padding: 5px 5px 0px 0px;
background-color: #ffffff;
margin-top: -15px;
}

.currentmood, .currentmusic, .currentlocation {
font-family: "Verdana", sans-serif;
font-size: 7pt;
}

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

.comments {
font-family: "arial", sans-serif;
font-size: 10px;
text-align: right;
background-color: #ffffff;
margin-top: 5px;
color: #ffffff;
padding: 5px 0px 0px 5px;
position: relative;
border-top: #eeeeee 0px solid;
}

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

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

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

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

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

.userpicfriends {
position: relative;
float: right;
padding: 0px;
margin: 48px 8px 5px 8px;
text-align: center;
border: #eeeeee 0px solid;
background-color: #ffffff !important;
font-family: "Verdana", sans-serif;
font-size: 7pt;
z-index: 15;
}

.userpicfriends img {
border: #eeeeee 5px solid;}

.userpicfriends font {
color: #818181;
font-size: 7pt;
}

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

.defaultuserpic {
padding: 30px 5px 20px 5px;
text-align: center;
}

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

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

.sbarbody2 {
margin: 0px;
padding: 10px;
color: #aaaaaa;
background-color: #ffffff;
font-size: 10px;
text-align: justify;
line-height: 130%;
}

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

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

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

table.calendar {
display:none;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

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

li.sbaritem {
padding: 3px 10px 5px 10px;
margin: 0px 0px 0px 0px;
list-style: none;
border-bottom: 1px #ffffff solid;
background-color: #ffffff;
}

li.sbaritem:hover {
border-right: #D3C687 5px solid;
border-bottom: 1px #f5f5f5 solid;
background-color: #fbfbfb;
}

li.sbartitle {
list-style: none;
font-size: 8pt;
font-style: bold;
text-transform: uppercase;
color: #f6f6f6;
text-align: right;
padding: 5px;
background-color: #5AAAB4;
border-top: 20px solid #A0D3DA;
}

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

div#footer a:hover {
color: #1b1b1b;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #807F67;
font-size: 10px;
letter-spacing: 0px;
text-transform: lowercase;
background-color: #B9CC98;
padding: 10px;
margin: 0;
}

#footer {
width: auto;
padding: 5px;
z-index: 100;
text-align: left;
clear: both;
margin-top: -20;
color: #000000;
}

li.viewing {
color: #f6f6f6;
background-color: #5AAAB4;
padding: 10px;
}

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

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

.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

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

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: #B9CC98;
border-left: #5AAAB4 5px solid;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
padding: 5px;
color: #999999;
}

table.yeartable td.yearday {
text-align: center;
padding: 5px;
background-color: #A0D3DA;
color: #f6f6f6;
}

td.yearmonth {
border-style: none;
}

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

.datesubjectcomment {
padding: 5px;
margin-top: 0px;
background-color: #B9CC98;
border-left: #5AAAB4 5px solid;
color: #f6f6f6;
}

.datesubjectcomment:hover {
border-left: #D3C687 5px solid;
}

.userpiccomment {
position: relative;
background-color: #eeeeee;
padding: 5px;
margin: 30px 10px 5px 0px;
z-index: 15;
float: left;
}

.box {
background-color: #A0D3DA;
padding: 0px 0px 20px 0px;
clear: left;
color: #999999;
}

input, textarea {
background-color: #ffffff;
color: #999999;
border: #eeeeee 1px solid;
font-size: 8pt;
}

textarea.textbox {
width: 100% !important;
font-size: 8pt;
}

.reply {
position: relative;
text-align: left;
background-color: #ffffff;
color: #999999;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
padding: 25px 10px 20px 10px;
position: relative;
font-size: 10px;
font-family: "tahoma", sans-serif;
color: #999999;
}

.commentbox {
margin-top: 20px;
padding: 0px;
background-color: #ffffff;
}

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

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

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

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

.skiplinks {
text-align: center;
margin: -15px 0px -10px 0px;
padding: 5px;
color: #5AAAB4;
background-color: #5AAAB4;
}

.skiplinks a, .skiplinks a:link, skiplinks a:visited {
color: #f6f6f6;
}

.clear {
height: 15px;
}

Notes
Installation Instructions
1. Under customize css, set all the drop down boxes to no.
2. To add a header, find background-image:url(); under .headerimage in the css and add your image url between the brackets. Also make sure to change the dimensions of the width and height (width: 800px; height: 0px;) to whatever size your image is.
3. You must add your navigation links (entries, info, archive, friends, etc) to the sidebar links.
4. Under sidebar customization, disable calendar (it looks much better this way).
5. Feel free to edit the css as much as you want, but if you mess up don't ask me to fix it.
6. Please credit biconic if you use :)

If there are any bugs or if you have any problems let me know!