Layout #3: Beach Bum (Flexible Squares)

[adventures]

Flexible Squares
Best view: 1024 x 768
Works with ads + navbar
Works in Firefox + IE
I used the same code I used on "Skittles," so if you are intending to edit this, I would suggest using that one instead of this. Thanks.
Crediting adventures or peterpansflight is mandatory.
Looks best in live preview!



screenshot | 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."
7. Go to "Sidebar" and disable everything except for the "Blurb." Keep the blurb title blank.
8. Paste the following code into the "Text to be added to the sidebar" section. Edit the code to what you want to be on your sidebar.

Sidebar codes
→ Blurb
Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar! Hello! This is a sidebar!

It can go as long as you want.

→ linktitlehere → linktitlehere → linktitlehere

Note: If you don't want to have the top bar, find this:

#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #fff;
border-color: #fff;
border-width: 0px;
border-style: dotted;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #AFADAD;
width: 100%;
float: center;
text-align: left;
}

and add the following changes:

#sidebar {
display: none;
padding-top: 15px;
margin-top: 15px;
background-color: #fff;
border-color: #fff;
border-width: 0px;
border-style: dotted;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #AFADAD;
width: 100%;
float: center;
text-align: left;
}

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

BODY{
background-color: #FFFFF ;
text-align: center;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin-left:0; margin-right:0; margin-top:45px; margin-bottom:100px
}

b, i, s, u {
color: #F68C52;
}
a, a:link, a:visited {
color: #4CB0C0;
text-decoration: none;
}

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

blockquote {
color: #F3722B;
font-size: 11px;
border-color: #F4BA4A;
border-size: 1px;
border-style: dotted;
background-color: #F8DA9A;
padding: 10px 10px 10px 10px;
}

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

#content
{
width: 770px;
margin-left: auto; margin-right: auto;
background-color: #fff;
background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/beachbg.jpg);
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: 0px;
width: 100%;
text-align: left;
}

#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #fff;
border-color: #fff;
border-width: 0px;
border-style: dotted;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #AFADAD;
width: 100%;
float: center;
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: fff;
border-width: 0px;
border-style: dotted;
background-color: transparent;
color: #fff;
}

#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent;
color: #fff;
border-color: #fff;
border-width: 0px;
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: #F68C52;
background-color: #fff;
border-color: #fff;
border-width: 0px;
border-style: solid;
padding: 7px 7px 7px 7px;
}

div#header a:hover, div#footer a:hover {
color: #F68C52;
background-color: #fff;
border-left-color: #00CAFD;
border-left-width: 5px;
border-left-style: solid;
padding: 7px 7px 7px 7px;
text-decoration: none;
}

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

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

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

.subtitle{
display: none;
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:#4CB0C0;
}

div#sidebar a:hover {
color: #46A8B4;
text-decoration: none;
border-bottom-color: #F4BA4A;
border-bottom-size: 1px;
border-bottom-style: solid;
}

.defaultuserpic {
text-align: right;
}

.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: #fff;
background-color:#fff;
color: #A40C0C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.sbarcalendarposts {
border-color: #fff;
color: #A40C0C;
border-width: 1px;
border-style: solid;
background-color:#fff;
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: #fff;
font-family: "Georgia" serif
font-size: 10px;
font-color: #A40C0C;
background-color: #fff;
margin-bottom: 10px;
margin-top: 10px;
}

/* maincontent */

.subcontent {
}

.entry {
margin: 0px 0px 0px 140px;
padding: 10px;
line-height: 15px;
background-color: #fff;
color: #949494;
font-family: "verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 1px;
border-color:#fff;
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;
background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/userpicbeach.jpg);
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 3px;
border-color: #F4BA4A;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
background-color: #fff;
background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/userpicbeach.jpg);
text-align: center;
border-style: solid;
border-width: 3px;
border-color: #F4BA4A;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}

.date {
line-height: 150%;
top: 5px;
color: #A40C0C;
font-family: "Georgia", serif;
font-size: 10px;
}

.subject {
padding: 3px;
color: #fff;
font-family: "Georgia", serif;
font-size: 15px;
font-weight: bold;

}

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

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

.datesubject {
background-color: #fff;
background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/userpicbeach.jpg);
padding: 5px;
margin-left: 140px;
}

.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: #fff;
padding: 2px 2px 2px 2px;
position: justify;
text-align: center;
padding-top: 15px;
top: 15px;
}

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

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

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background-color: #fff;
background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/userpicbeach.jpg);
padding: 5px;
margin-top: 20px;
}

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

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

input, textarea {
background-color:#fff;
color: #ACAAAB;
}

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:#fff;
color:#ACAAAB;
}

.replytosubject {
font-weight: bold;
}

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

.commentbox {

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

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

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

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

.commentinfo {
background-color:#fff;
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: #fff;
}

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

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
width: 800px;
height: 183px;
background-image: url('http://i32.photobucket.com/albums/d14/dustfingerlove/beachplain.jpg');
background-repeat: no-repeat;
}

div.ContextualPopup div.Inner {
background: #FFFFDD;
background-image: url(http://i32.photobucket.com/albums/d14/dustfingerlove/userpicbeach.jpg);
border: 3px solid #EEA312;
padding: 5px;
color: #828282 !important;
font-family:Verdana;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #4395DB !important;
}

div.ContextualPopup .Relation, div.ContextualPopup .Content .OnlineStatus {
font-weight: bold !important;
color: #CC6644;
}

Contextual popup tutorial by cartonage.