S2 Flexible Squares - Cerulean

[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 right)".
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. (The text on top of the layout) You can choose any number or combination of these to be displayed. Remember, to customize the links, click "Links List".
8. Click "Custom CSS" on the left. Change "Use layout's stylesheet(s)" to No. This is extremely important!
9. Copy and paste the following into the custom stylesheet box and click "Save Changes":

/* Stylesheet by refuted.livejournal.com. */
body {
background: #89DFCC;
text-align: left;
margin: 0 auto 0 auto;
font-family: tahoma, arial, verdana, sans-serif;
color: #C6C6C6;
font-size: 8pt;
}
a, a:link, a:visited, a:active {
color: #65D3BA;
text-decoration: none;
}
a:hover {
color: #9C9C9C;
text-decoration: none;
}
strong, b {
color: #878787;
}
em, i {
color: #9A9A9A;
}
p, td {
font-size: 11px;
}
blockquote {
margin: 0 8px 0 8px;
padding: 8px;
background-color: #F7F7F7;
color: #9c9c9c;
line-height: 13pt;
font-family: tahoma, arial, sans-serif;
font-size: 7pt;
text-align: justify;
border: 0px;
}
code, kbd, pre, tt {
font-family: monospace;
}
textarea, .textbox, select, input {-moz-opacity:.5;
opacity:.5;
filter:alpha(opacity=50);
background-color: #fff;
color: #9C9C9C;
border: 1px solid #CCCACA;
}
textarea:hover, .textbox:hover, select:hover, input:hover {
-moz-opacity:1.0;
opacity:1.0;
filter: alpha(opacity=100);
}
select, input {
border: 1px solid #CCCACA;
}
#content {
width: 100%;
background: transparent;
border: 0px;
padding: 0px;
}
#maincontent {
margin: 0 auto 0 auto;
padding: 0;
background-color: transparent;
color: #000000;
border: 0px;
text-align: left;
width: 75%;
}
#sidebar {
background-color: #fff;
border: none;
padding: 5px 0 5px 0;
margin: 0 auto 26px auto;
width: 75%;
-moz-opacity:.8;
opacity:.8;
filter:alpha(opacity=80);
}
#sidebar:hover {
-moz-opacity:1.0;
opacity:1.0;
filter: alpha(opacity=100);}
#header {
padding: 0px;
margin: 0px;
font-family: "lucida grande", arial, verdana, tahoma, sans-serif;
text-align: center;
font-size: 12pt;
font-weight: normal;
letter-spacing: -1px;
background-color: #000;
color: #ACACAC;
text-transform: lowercase;
line-height: 14px;
height: 46px;
}
#footer {
text-align: center;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 8pt;
font-weight: normal;
background-color: #fff;
color: #BBBBBB;
border: 0px;
clear: both;
width: 75%;
margin: 0 auto 0 auto;
padding: 20px 0 20px 0;
-moz-opacity:.8;
opacity:.8;
filter:alpha(opacity=80);
}
#footer:hover {
-moz-opacity:1.0;
opacity:1.0;
filter:alpha(opacity=100);
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #9C9C9C;
font-weight: normal;
}
div#footer a:hover {
color: #606060;
font-weight: normal;
}
/* header */

div#header a, div#header a:link, div#header a:visited {
color: #808080;
background-color: transparent;
}
div#header a:hover {
color: #ACACAC;
}
ul.navheader
{
padding: 16px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0px;
background-color: transparent;
}
ul.navheader li a {
margin: 16px;
}
.title, .subtitle {
display: none;
}
/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #9C9C9C;
text-transform: lowercase;
}
div#sidebar a:hover {
color: #606060;
text-decoration: none;
}
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 10px 0px 10px;
text-align: center;}
.sbarbody2 {
padding: 5px 50px 10px 50px;
color: #BBBBBB;
line-height: 13pt;
}
ul.sbarlist {
padding-left: 0;
padding-right: 15px;
margin-left: 0;
list-style: none;
}
li.sbaritem {
padding-left: 15px;
list-style: none;
display: inline;
}
li.sbartitle {
display: none;
}
span.count {
display: none;
}
.view {
margin: 0 16px 0 16px;
}
/* maincontent */

.entry_text {
padding: 5px 0 0 0;
}
.entry {
margin: 0;
padding: 0px 12px 0px 12px;
border: 0px;
background-color: #fff;
color: #757575;
font-family: tahoma, arial, verdana, sans-serif;
line-height: 15pt;
font-size: 8pt;
text-align: justify;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: right;
margin: 10px 10px 3px 10px;
background-color: #F7F7F7;
padding: 5px;
}
.userpicfriends {
background-color: #F7F7F7 !important;
padding: 5px;
text-align: center;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
margin: 10px 10px 3px 10px;
position: relative;
float: right;
}
.userpicfriends a font {
font-family: arial, verdana, sans-serif;
font-size: 7pt;
color: #606060;
}
.userpicfriends a:hover font {
color: #9C9C9C;
}
.date {
text-align: right;
color: #D1D1D1;
text-transform: lowercase;
font-size: 7pt;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/time.gif) no-repeat bottom right;
margin: 0 140px 0 0;
padding: 8px 15px 0 0;
}
.subject {
text-align: right;
font-weight: normal;
font-family: "lucida grande", arial, verdana, sans-serif;
padding: 0 0 1px 0;
color: #606060;
font-size: 12pt;
text-transform: lowercase;
border-bottom: 1px solid #EFEFEF;
margin: 0 130px 0 10px;
}
.subject a, .subject a:link, .subject a:visited {
color: #606060;
}
.subject a:hover {
color: #c0c0c0;
}
.datesubject {
background-color: #fff;
}
.currents, .currentmood, .currentmusic, .currentlocation {
text-transform: lowercase;
color: #c0c0c0;
font-size: 7pt;
font-family: tahoma, arial, sans-serif;
line-height: 11pt;
text-align: justify;
}
.currents {
background: #F7F7F7;
padding: 5px 5px 3px 10px;
margin: 12px 0 0 0;
width: 34%;
}
.currents a:link, .currents a:visited, .currents a:active {
color: #c0c0c0;
}
.currents a:hover {
color: #A4A4A4;
border-bottom: 1px solid #EAEAEA;
}
.currents strong, .currentmood strong, .currentmusic strong {
color: #89DFCC;
}
.ljtags {
margin: 12px 0 0 0;
font-family: tahoma, arial, sans-serif;
font-size: 7pt;
color: #89DFCC;
font-weight: bold;
text-transform: lowercase;
line-height: 11pt;
background: #F7F7F7;
padding: 3px 5px 3px 10px;
width: 34%;
text-align: justify;
}
.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #c0c0c0;
font-weight: normal;
text-transform: lowercase;
font-size: 7pt;
}
.ljtags a:hover {
color: #A4A4A4;
border-bottom: 1px solid #EAEAEA;
text-decoration: none;
font-weight: normal;
}
.comments {
margin: 12px 0 0 0;
text-align: right;
padding: 5px 5px 12px 0;
text-transform: lowercase;
color: #fff;
border-top: 1px solid #EFEFEF;
clear: both;
}
div.comments a, div.comments a:link, div.comments a:visited{
font-weight: normal;
font-family: "lucida grande", arial, verdana, sans-serif;
color: #606060;
font-size: 12pt;
text-transform: lowercase;
}
div.comments a:hover {
color: #979797;
text-decoration: none;
}
/* entry, reply pages */

.datesubjectcomment {
padding-top: 5px;
line-height: 17pt;
}

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

.box {
border: 0px;
padding: 10px;
clear: left;
background-color: #fff;
color: #c6c6c6;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
color: #9C9C9C;
font-family: Arial, "Lucida Grande", "trebuchet ms", Verdana, Tahoma, sans-serif;
font-size: 11px;
line-height: 18px;
text-align: justify;
background-color: #fff;
}

.commentreply {
position: relative;
margin: 10px;
color: #9C9C9C;
font-family: Arial, "Lucida Grande", "trebuchet ms", Verdana, Tahoma, sans-serif;
font-size: 11px;
line-height: 18px;
text-align: justify;
padding: 5px;
}

.commentbox, .commenttext {
padding: 5px;
margin: 10px;
background-color: #fff;
border: 1px solid #CCCACA;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #efefef;
color: #9C9C9C;
font-family: Arial, "Lucida Grande", "trebuchet ms", Verdana, Tahoma, sans-serif;
font-size: 11px;
line-height: 18px;
text-align: justify;
}

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

.replytoposter {
text-align: right;
color: #D1D1D1;
text-transform: lowercase;
font-size: 7pt;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/time2.gif) no-repeat center right;
margin: 0 130px 0 0;
padding: 8px 15px 0 0;
line-height: 15pt;
}

.replytosubject {
text-align: right;
font-weight: normal;
font-family: "lucida grande", arial, verdana, sans-serif;
padding: 0 0 1px 0;
color: #606060;
font-size: 12pt;
text-transform: lowercase;
border-bottom: 1px solid #EFEFEF;
margin: 0 130px 0 0;
}

/* year/achive pages */

ul.year {
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 25px 0;
background: #fff;
color: #C6C6C6;
-moz-opacity:.8;
opacity:.8;
filter:alpha(opacity=80);
}

ul.year:hover {
-moz-opacity:1.0;
opacity:1.0;
filter:alpha(opacity=100);
}

ul.year li {
display: inline;
}

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

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

table.yeartable, td.yearday {
background-color: transparent;
text-align: center;
color: #8A8A8A;
background: #fff;
padding: 10px;
-moz-opacity:.8;
opacity:.8;
filter:alpha(opacity=80);
}

table.yeartable:hover {
-moz-opacity:1.0;
opacity:1.0;
filter:alpha(opacity=100);
}

td.yearmonth {
border-style: none;
background: #fff;
}

/* footer */

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

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

.clearfoot {
display: none;
}

/* misc */

.clear {
display: none;
}

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

.separator{
height: 26px;
}

* html div.subcontent {
height: 1%;
clear: none;
}

* html div.box#commentform {
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
}

img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/plock.gif);
}

img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/plock.gif);
}

img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 7px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/plock.gif);
}

.ljcmt, .commentbox img[src="http://p-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://p-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://p-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://p-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://p-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); }

.box img[src="http://p-stat.livejournal.com/img/anonymous.gif"]{ width: 0; height: 0; padding: 0 16px 12px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_anon.png); }

.box img[src="http://p-stat.livejournal.com/img/openid-profile.gif"]{ width: 0; height: 0; padding: 0 16px 15px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_oi.png); }

.box img[src="http://p-stat.livejournal.com/img/help.gif"]{ width: 0; height: 0; padding: 0 14px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_help.png); }

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

.ljuser a:hover b {
color: #9C9C9C;
background: transparent;
}

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

.ljuser:hover img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/cof2.png);
}

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

.ljuser:hover img[src="http://p-stat.livejournal.com/img/community.gif"] {background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/cof2.png);
}

#ljuser_row img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{ width: 0; height: 0; padding: 0 16px 13px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cof1.png); }

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

Stylesheet by

PLEASE DO NOT NEGLECT THIS STEP.

REMEMBER, FOR FASTEST RESPONSE TIME, ASK ANY SPECIFIC QUESTIONS CONCERNING THE LAYOUT ON THIS POST!

Commonly Asked Questions

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.

My entries are starting halfway down the page!
You have a wide image somewhere. Go lj-cut this, and it should work. If not, try decreasing the width of #maincontent by a few pixels.

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 have my default userpic show up?
Sure, just find this:

.defaultuserpic {
display: none;
}

And replace it with this:

.defaultuserpic {
position: relative;
float: right;
margin: 0 10px 3px 10px;
background-color: #F7F7F7;
padding: 5px;
}

(It actually looks rather nifty... I'd suggest doing this. I automatically hide it because that's what a lot of people prefer, but really folks, try this out!)

What if I don't want the sidebar on the top? Can I have the layout without it?
Yep! On your main Customize page, find "Choose a Page Setup" at the bottom. Click "Apply Layout" under "1 Column (no sidebar)".

I'm not really a big fan of the opacity switch. Can I delete that?
Aww. Sure, no problem! Just find and delete the following from both #sidebar and #footer:

-moz-opacity:.8;
opacity:.8;
filter:alpha(opacity=80);

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. Both Between Entries and Horizontal placement work, Vertical will NOT work.

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

Credit to the amazing famfamfam for the tiny icons!

As a side note, I'd like to mention two things. First, please, I beg of you - use Firefox to view this layout! It's not that it doesn't work in IE, but only in FF can the full shininess truly shine! Or, at the very least, use the latest IE version to enjoy the fun opacity-changing top bar. On another note, I can honestly say this is one of my favourite layouts I've created up to this point. I tried a few things I've been meaning to do, figured out how to fix some bugs that had been annoying me, and customized to the utmost of my abilities! I hope you all enjoy it, and thanks so much for supporting this community!