Layout #1: Would You Like to Swing on a Star (flexible squares)

[adventures]

Flexible Squares
Best on a big screen
Works with ads + navbar
Works in Firefox + IE (there were a few bugs in IE but they should be fixed now)
You can edit all you like. Credit is nice! (the background is by 77words)



image preview | (temporary) live preview

1. Go to lj customize and put "Flexible Squares" in the search bar.
2. Select any of the themes.
3. Go to Customize your theme and to "Custom CSS."
4. Set all drop-down menus to No.
5. Copy and paste the codes below into the box labeled "custom stylesheet."
6. Press "Save" and everything should be fine!

Codes:
/*
This layout is made by adventures.livejournal.com.
*/

BODY{
background-color: #FFFFF ;
background-image:url(http://i32.photobucket.com/albums/d14/dustfingerlove/layoutbg3.jpg);
background-repeat: repeat-all;
text-align: center;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 45px 0 100px 0;
}

b, i, s, u {
color: #2070A3;
}
a, a:link, a:visited {
color: #00215B;
text-decoration: none;
}

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

blockquote {
font-size: 11px;
border-color: #fff;
border-size: 1px;
border-style: dotted;
padding: 6px 6px 6px 6px;
}

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

#content
{
width: 60%;
margin-left: auto; margin-right: auto;
background-color: transparent;
border-width: 0px;
border-style: solid;
border-color: #fff;
padding: 15px;
}

#maincontent {
margin-top: 15px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #000000;
border-style: solid;
border-color: #fff;
border-width: 0px;
margin-right: 180px;
text-align: left;
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
background-color: #5CA5C8;
border-color: #015989;
border-width: 1px;
border-style: dotted;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #fff;
width: 160px;
float: right;
text-align: left;
}

#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
border-color: #015989;
border-width: 1px;
border-style: dotted;
background-color: #5CA5C8;
color: #00214F;
}

#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #5CA5C8;
color: #015989;
border-color: #015989;
border-width: 1px;
border-style: dotted;
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: #EEEDE9;
background-color: #2070A3;
padding: 7px 7px 7px 7px;
}

div#header a:hover, div#footer a:hover {
color: #2070A3;
background-color: #EEEDE9;
text-decoration: none;
}

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

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

.title {
font-family: "Verdana", sans-serif;
font-size: 15px;
color: #FFF5F4;
font-weight: normal;
letter-spacing: 4px;
line-height: 200%;
top: 10px;
}

.subtitle{
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #FFF5F4;
font-weight: bold;
letter-spacing: 4px;
top: 10px;
}

/* sidebar */

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

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

.defaultuserpic {
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
background-color: #fff;
}

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

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

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

.sbarcalendar {
border-color: #2070A3;
background-color:#2070A3;
color: #fff;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.sbarcalendarposts {
border-color: #fff;
color: #2070A3;
border-width: 1px;
border-style: solid;
background-color:#5CA5C8;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

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: #2070A3;
background-color: #2070A3;
margin-bottom: 10px;
margin-top: 10px;
}

/* maincontent */

.subcontent {
}

.entry {
margin: 0px 0px 0px 0px;
padding: 10px;
background-color: #DDEFFF;
color: #00335E;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 1px;
border-color:#DDEFFF;
border-style: solid;
}

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

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

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

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border-style: dotted;
border-width: 1px;
border-color: #015989;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}

.date {
line-height: 200%;
top: 5px;
color: #004875;
font-family: "Verdana", sans-serif;
font-size: 13px;
}

.subject {
font-weight: bold;
padding: 10px;
color: #004875;
font-family: "Verdana", sans-serif;
font-size: 13px;
}

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

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

.datesubject {
background-color: #5CA5C8;
padding: 5px;
}

.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 13px;
text-align: right;
background-color: #5CA5C8;
padding: 15px 15px 15px 15px;
position: relative;
top: 15px;
}

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

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

/* maincontent -- entry, reply pages */

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

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

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

input, textarea {
background-color:#DDEFFF;
color: #00335E;
}

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: 11px;
line-height: 125%;
background-color:#DDEFFF;
color:#00335E;
}

.replytosubject {
font-weight: bold;
}

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

.commentbox {

border-color: #015989;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #DDEFFF;
}

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

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

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

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

/* maincontent -- year/achive 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: #2070A3;
}

table.yeartable td.yearday {
background-color: #5CA5C8;
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;
}

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

.ljtags {
font-weight: bold;
margin-top: 15px;
}

Want to Add a Header?

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 0px;
height: 0px;
background-image: url('imageurlhere');
background-repeat: no-repeat;

Paste this to the bottom of the codes. Make sure to put the width and height in.

This is my first layout ever, so. :D Thanks very much to cartonage for her guide