s2 flexible squares - blocky blue

[presents]

image preview | live preview

Step by Step Instructions on How to Use the Layout

1. Go to your Customize page.
2. If you are using S1, switch to S2.
3. Under "Select a New Theme", type "Flexible Squares" in the Search box.
4. Click "Apply Theme" directly underneath the first search result.
5. Scroll down to "Choose a Page Setup", and click "Apply Layout" under "2 Column (sidebar on left)".
6. Click the button that says "Customize Selected Theme".
7. Click "Sidebar" on the left. Here you can decide what you would like to be displayed in the sidebar. You can choose to display the blurb and up to 3 of these: Links, Page Summary, Calendar, or Tags. Keep the blurb title blank. Remember, to customize the links, click "Links List".
8. Click "Text" on the left. Then click "Commments", and change "Link text to leave a comment" to + and "Link text to read comments" to #. Do the same for friends view.
9. Click "Custom CSS" on the left. Change "Use layout's stylesheet(s)" to No. This is extremely important!
10. Copy and paste the following into the custom stylesheet box and click "Save Changes":

/* Stylesheet by presents.livejournal.com. */
body{
background-color: #bad2da;
text-align: left;
color: #777;
font: 12px/20px Arial, Sans-Serif;
margin: 0 auto;
}

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

a:hover {
color: #77898f;
border-bottom: 1px solid #eee;
}

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

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

#content {
width: 58%;
background-color: transparent;
margin: 0 auto;
}

#maincontent {
margin: 20px auto 10px auto;
width: 100%;
float: left !important;
}

#sidebar {
background-color: #fff;
width: 100%;
-moz-box-shadow: 15px 15px 0 #a2bec7;
-webkit-box-shadow: 15px 15px 0 #a2bec7;
text-align: left;
padding: 5px 0 5px 0;
margin: 5px 0 25px 0;
float: left !important;
}

#header {
width: 100%;
padding: 0px;
margin: 0px;
background: transparent;
font: 16px/1 Arial, Sans-Serif;
color: #fff;
text-shadow: 0 1px 0 #a2bec7;
text-transform: lowercase;
line-height: 14px;
text-align: right;
}

div#header a, div#header a:link, div#header a:visited {
color: #fff;
text-shadow: 0 1px 0 #a2bec7;
border: 0px;
}

div#header a:hover {
color: #fff;
text-shadow: 0 1px 0 #a2bec7;
background: #CADEE4;
}

div#header li.view {
background-color: #CADEE4;
margin: 0 8px;
padding: 12px;
}

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

ul.navheader li {
display: inline;
padding: 0px;
background-color: transparent;
}

ul.navheader li a {
padding: 12px;
margin: 0 8px;
}

.title, .subtitle {display: none;}

.subcontent {
-moz-box-shadow: 15px 15px 0 #a2bec7;
-webkit-box-shadow: 15px 15px 0 #a2bec7;
}

.entry{
margin: 0px;
padding: 10px 20px 10px 20px;
background-color: #fff;
text-align: left;
}

.userpic {
position: relative;
float: left;
background-color: #a2bec7;
padding: 10px;
z-index: 15;
margin: 0 0 0 -130px;
}

.date {
color: #c0c0c0;
font-size: 11px;
}

.subject {
font: bold 20px/30px Arial, Sans-Serif;
letter-spacing: -2px;
word-spacing: 3px;
color: #666;
border-bottom: 1px solid #eee;
}

.subject a, .subject a:link, .subject a:visited {
color: #666;
border: none;
}

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

.datesubject {
padding: 5px 10px 5px 10px;
background: #fff;
}

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

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

.currentmood {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/whitec.png) no-repeat left center;
padding-left: 18px;
color: #c0c0c0;
text-transform: lowercase;
}

.currentmusic {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/whitec.png) no-repeat left center;
padding-left: 18px;
color: #c0c0c0;
text-transform: lowercase;
}

.currentlocation {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/whitec.png) no-repeat left center;
padding-left: 18px;
color: #c0c0c0;
text-transform: lowercase;
}

.currents strong, .currentmood strong, .currentmusic strong {
display: none;
}

.currentgroups {display: none;}

.currents {margin: 0; padding: 0;}

.ljtags {
margin: 0;
font: 0.1em arial;
color: #fff;
text-transform: lowercase;
text-align: justify;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/whitec.png) no-repeat left center;
padding: 1px 0 0 11px;
position: relative;
top: 15px;
}

.ljtags a:link, .ljtags a:visited, .ljtags a:active {
font-size: 12px;
padding: 0 6px 0 0;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/sep.gif) no-repeat center right;
}

.ljtags a:hover {
text-decoration: none;
font-weight: normal;
}

.ljtaglist {
list-style-type: none;
}

.comments {text-align: right; font: bold 22px/30px Arial, Sans-Serif;
color: #666;
border-top: 1px solid #eee;
padding: 5px;
margin: 15px 0 0 0;
}

div.comments a, div.comments a:link, div.comments a:visited{
font: bold 22px/30px Arial, Sans-Serif;
letter-spacing: -2px;
word-spacing: 3px;
color: #666;
padding: 10px 5px 5px 0;
border: none;
}

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

.separator{
height: 35px;
}

.userpicfriends {
position: relative;
float: left;
background-color: #a2bec7 !important;
padding: 10px;
z-index: 15;
margin: 0 0 0 -130px;
text-align: center;
color: #a2bec7;
}

.userpicfriends a font {
color: #fff;
}

.userpicfriends a:hover font {
color: #bad2da;
}

.userpicfriends a:link, .userpicfriends a:visited {border: 0px;}

.defaultuserpic {
display: none;
}

.sbarbody {
width: 33%;
padding: 0px;
float: left !important;
background-color: transparent;
height: 200px;
overflow: auto;
margin: 0;}

.sbarbody2 {
background-color: transparent;
margin: 0;
text-align: left;
padding: 7px 15px;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #666;
border: none;
}

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

table.calendar {
}

.sbarcalendar {
border: 1px solid #eee;
text-align: center;
padding: 1px 4px;
font-size: 9px;
}

.sbarcalendarposts {
border: 1px solid #D5D5D5;
text-align: center;
padding: 1px 4px;
font-size: 9px;
}

.sbarcalendarposts:hover {border: 1px solid #A9A5A5;}

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

li.sbaritem {
background-color: transparent;
border-width: 0px;
padding-left: 9px;
border-bottom: 1px dotted #eee;
}

li.sbaritem:hover {
border-bottom: 1px solid #eee;
}

li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
line-height: 25px;
}

#sidebar_summary img {display: none;}

li.sbartitle
{
list-style: none;
margin: 0 0 10px;
font: bold 20px/30px Arial, Sans-Serif;
letter-spacing: -2px;
word-spacing: 3px;
color: #666;
border-bottom: 1px solid #eee;
}

#footer {
width: 100%;
text-align: center;
background-color: #fff;
z-index: 100;
clear: both;
-moz-box-shadow: 15px 15px 0 #a2bec7;
-webkit-box-shadow: 15px 15px 0 #a2bec7;
margin: 0;
}

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

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

.clearfoot {
clear: both;
}

ul.year {
text-align: center;
padding: 5px;
background: #fff;
-moz-box-shadow: 15px 15px 0 #a2bec7;
-webkit-box-shadow: 15px 15px 0 #a2bec7;
margin-bottom: 30px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
background: #fff;
padding: 5px;
border: 1px solid #A2BEC7;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #eee;
}

table.yeartable td.yearday {
background-color: #D5E6EB;
text-align: center;
border: 0px;
}

td.yearmonth {
border-style: none;
text-align: center;
}

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

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #a2bec7 !important;
}

.datesubjectcomment a:hover {
color: #77898f;
border-bottom: 1px solid #eee;
}

.userpiccomment {
position: relative;
top: -30px;
left: 0px;
padding: 10px;
margin: 10px 15px -20px 0;
z-index: 15;
float: left;
background: #a2bec7 !important;
}

.box {
clear: left;
}

input, textarea, .textbox, select {
background-color: #fff;
color: #cbcbcb;
border: 1px solid #cbcbcb;
}

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

.reply{
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 1.2em;
color: #666666;
background: #fff;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
line-height: 1.6em;
background-color: #fff;
}

.commentbox {
padding: 10px;
margin: 20px 0;
line-height: 2.0em;
background-color: #fff;
}

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

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

.commentboxpartial {
padding: 10px;
margin: 10px;
border: 1px solid #efefef;
line-height: 20px;
}

.commentinfo {
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
background: #fff;
padding: 3px;
}

.clear {
height: 8px;
}

img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 27px 32px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/keyf2.png) no-repeat;
}

img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 27px 32px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/lockp2.png) no-repeat;
}

img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 0 0 27px 32px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/keyf2.png) no-repeat;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/usicf.png);
padding: 16px 16px 2px 2px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/usicf.png);
padding: 16px 16px 2px 2px !important;
}

.ljuser:hover img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/usic2f.png);
}
.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color: transparent;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/usicf.png);
padding: 16px 16px 2px 2px !important;
}
.ljuser:hover img[src="http://l-stat.livejournal.com/img/community.gif"] { background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/usic2f.png);
}
.ljuser img[src="http://l-stat.livejournal.com/img/syndicated.gif"] {
background-color: transparent;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/usicf.png);
padding: 16px 16px 2px 2px !important;
}
.ljuser:hover img[src="http://l-stat.livejournal.com/img/syndicated.gif"] {background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/usic2f.png);
}

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

div.ContextualPopup div.Inner a:hover {
color: #77898f !important;
border-bottom: 1px solid #eee;
}

div.ContextualPopup {
position: relative;
font: normal 12px/20px "Arial", sans-serif !important;
}

div.ContextualPopup div.Inner {
background-color: #fff !important;
color: #878787 !important;
border: 1px solid #a2bec7;
padding: 3px;
}

div.ContextualPopup img {
border: 4px solid #eee;
}

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_del.gif"]{ width:0; height:0; padding: 0 16px 14px 0; background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_delete.png); }

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_scr.gif"]{ width:0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_screen.png); }

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_freeze.png); }

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_edit.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_edit.png); }

.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_track.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_track.png); }

10. Go to your Manage Profile page. Under Bio, add the following:

Stylesheet by

PLEASE DO NOT NEGLECT THIS STEP.

Commonly Asked Questions

How do I change the width?

Just find these lines:

#content {
width: 58%;

You can either increase or decrease the percentage, or replace 58% with ###px where ### is the exact width you would like the layout to be.

How do I add a header?
Add this at the bottom:

.headerimage {
position: relative;
margin: 0 auto 0 auto;
width: ###px;
height: ###px;
background-repeat: no-repeat;
background-image: url(URL OF IMAGE HERE);
}

Change the height and width tags to match your image. You'll need to upload your image to the internet. I suggest tinypic.com.

Can I edit the colours, etc.?
Sure, if you give me credit for the base code!

My layout looks all messed up?!
99% of the time, making sure you have set "Use layout's stylesheet(s)" to No will fix this.

Can I not have my mood theme image show up?
Sure! Just add this:

.currentmood img {display: none;}

I have a Plus account. What can I do about the ads?
On the Style page, clear the section "Background color of the outer table". You can change where the ads are placed on your Customize page. I would suggest either placing the ads Between Entries or Horizontal.

If you have any questions concerning the layout, feel free to ask. Also, PLEASE comment if you decide to use this! Thank you.

Visit refuted for more layouts!