Emily (

presents) wrote in

refuted,
2008-06-18 20:28:00

s2 flexible squares - clean blue

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 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 presents.livejournal.com. */

body {
background-color: #EDEDED;
text-align: center;
color: #777777;
font: 8pt arial, sans-serif;
margin: 10px 0 20px 0;
}

a, a:link, a:visited, a:active {
color: #3697CE;
text-decoration: none;
}

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

strong, b {
color: #3697CE;
}

em, i {
color: #BBBBBB;
}

blockquote {
margin: 0 8px 0 8px; 
padding: 8px;
background-color: #fafafa;
color: #808080;
font: 7pt/15px arial, sans-serif;
text-align: justify;
}

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

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

select, input {
border: 1px solid #CCCACA;
}

#content {
width: 75%;
margin: 0 auto;
background-color: #EDEDED;
border: 0px;   
padding: 0px;
}

#maincontent {
float: right;
width: 75%;
margin-top: 0px;
background-color: transparent;
color: #000000;
border: 0px;
text-align: left;
}

#sidebar {
float: left;
padding: 0 4px 6px 2px;
margin: 0;
background-color: #fff;
border: 0px;
text-align: left;
width: 22%;
}

#header {
padding: 0px;
margin: 0px;
text-align: center;
font: normal 7pt arial, sans-serif;
letter-spacing: 0px;
background-color: #3697CE;
color: #ffffff;
}

#footer {
text-align: center;
font: 7pt arial, sans-serif;
background-color: #fff;
color: #BBBBBB;
z-index: 100;
clear: both;
border: 0px;
padding: 10px;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #3697CE;
font-weight: normal;
}

div#footer a:hover {
color: #B6DDF4;
font-weight: normal;
}

/* header */

div#header a, div#header a:link, div#header a:visited {
color: #B6DDF4;
padding: 8px 2px;
}

div#header a:hover {
color: #FBEDFD;
border-bottom: #8EC7E8 4px solid;
}

.navheader {
border: 0px;
background-color: #3697CE;
text-align: center;
}

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

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

ul.navheader li a {
background-color: #3697CE;
color: #ffffff;
text-transform: uppercase;
}

.view {
color: #ffffff;
text-transform: uppercase;
}

.title, .subtitle {display: none;}

/* sidebar */

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

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

.defaultuserpic {
display: none;
}

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

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

.sbarbody2 {
padding: 5px 5px 5px 8px;
margin: 5px;
color: #878787;
font: 9px/15px arial, sans-serif;
background: #FAFAFA;
}

#sidebar_summary img {display: none;}
.sbarcalendar {
border: 1px solid #EFEFEF;
text-align: center;
font: 7pt arial, verdana, sans-serif;
padding: 4px;
color: #686868;
}

span.count {display: none;}

.sbarcalendarposts {
border: 1px solid #B6DDF4;
text-align: center;
font: 7pt arial, verdana, sans-serif;
padding: 4px;
}

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

.tagcloud {
padding-left: 3px;
}

li.sbaritem {
background-color: transparent;
border-width: 0px;
padding-left: 3px;
color: #ccc;
}

li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font: 7pt/24px arial, "Lucida Sans Unicode", tahoma, verdana, sans-serif;
text-transform: uppercase;
border-bottom: 1px dotted #e5e5e5;
display: block;
padding-left: 3px;
}

li.sbaritem a:hover {
text-decoration: none;
background-color: #EDF7FD;
border-bottom: 1px #DFF1FB solid;
}
li.sbartitle {
padding: 0;
list-style: none;
border: 0;
background-color: #ffffff;
margin: 10px 0 8px 0;
color: #666666;
font: 12pt arial, verdana, sans-serif;
text-transform: lowercase;
}

/* maincontent */

.entry{
margin: 0;
padding: 0 15px 10px 15px;
background-color: #fff;
color: #878787;
font: 8pt/15pt arial, tahoma, arial, sans-serif;
text-align: justify;
border-right: #E5E5E5 3px solid;
border-bottom: #E5E5E5 3px solid;
}

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

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

.entry_text {padding: 0 0 12px 0;}

.userpic {
position: relative;
float: left;
margin: 10px 10px 3px 10px;
background-color: #FAFAFA;
padding: 5px;
}

.userpicfriends {
background-color: #FAFAFA !important;
padding: 5px;
text-align: center;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
margin: 10px 10px 3px 10px;
position: relative;
float: left;
}

.userpicfriends a font {
font-family: arial, verdana, sans-serif;
font-size: 7pt;
color: #606060;
}

.userpicfriends a:hover font {
color: #9C9C9C;
}

.date {
color: #c0c0c0;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
text-transform: lowercase;
margin: 0 0 0 125px;
padding: 6px 0 0 15px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/time.gif) no-repeat bottom left;
}

.subject {
color: #666666;
font: 12pt arial, georgia, verdana, sans-serif;
padding: 5px 0 0 0;
margin: 0;
text-transform: lowercase;
}

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

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

.datesubject {
background-color: #ffffff;
padding: 5px;
border-right: #E5E5E5 3px solid;
}

.comments {
font: 12pt arial, verdana, sans-serif;
text-align: center;
color: #ccc;
background-color: #ffffff;
padding: 8px 5px 0px 5px;
border-top: 1px solid #E5E5E5;
text-transform: lowercase;
margin: 0;
}

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

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

.currentmood, .currentmusic, .currentlocation {
text-transform: lowercase;
color: #c0c0c0;
font-size: 7pt;
font-family: arial, sans-serif;
line-height: 11pt;
}

.currentlocation {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/oloc.gif) no-repeat center left;
padding: 0 0 0 10px;
}

.currentmood {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/omood.gif) no-repeat center left;
padding: 0 0 0 11px;
}

.currentmusic {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/omus.gif) no-repeat center left;
padding: 0 0 0 11px;
}

.currents {
padding: 0 0 3px 0;
margin: 0 0 10px 0;
}

.currents a:link, .currents a:visited, .currents a:active {
color: #A4A4A4;
}

.currents a:hover {
color: #c0c0c0;
border-bottom: 1px solid #EAEAEA;
}

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

.currentgroups {display: none;}

.ljtags {
margin: 12px 0 0 0;
font: 1pt arial, sans-serif;
color: #fff;
text-transform: lowercase;
text-align: justify;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/otag.gif) no-repeat center left;
padding: 0 0 0 6px;
position: relative;
top: 10px;
}

.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #A4A4A4;
font-weight: normal;
text-transform: lowercase;
font-size: 7pt;
padding: 0 6px 0 0;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/sep.gif) no-repeat center right;
}

.ljtags a:hover {
color: #c0c0c0;
border-bottom: 1px solid #EAEAEA;
text-decoration: none;
font-weight: normal;
}

/* maincontent --  entry, reply pages */

.datesubjectcomment {
padding: 5px;
background-color: #E2F3FC;
font: 7pt/13pt arial, sans-serif;
text-align: right;
color: #A9A9A9;
text-transform: uppercase;
}

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

.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: 20px 10px 10px 10px;
color: #9C9C9C;
font: 8pt/18px arial, sans-serif;
text-align: justify;
background-color: #fff;
}

.commentreply {
position: relative;
margin: 0 10px 10px 10px;
color: #9C9C9C;
font: 8pt/17px arial, sans-serif;
text-align: justify;
padding: 5px;
}

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

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #efefef;
color: #9C9C9C;
font: 8pt/18px arial, sans-serif;
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;
}

/* maincontent -- year/achive pages */

/* year/achive pages */

ul.year {
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 25px 0;
background: #fff;
color: #C6C6C6;
}

ul.year li {
display: inline;
}

table.yeartable {
margin: 0 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;
}

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 {
clear: both;
}

/* misc  */

.clear {
height: 0px;
}

.skiplinks {
text-align: center;
background: #fff;
padding: 5px 0 0 0;
border-right: #E5E5E5 3px solid;
}

.separator{
height: 25px;
}

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
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);
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust1.gif);
padding: 14px 7px 2px 2px !important;
}

.ljuser a:hover b {
color: #B6DDF4;
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/ust1.gif);
padding: 14px 7px 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/ust2.gif);
}
.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/ust1.gif);
padding: 14px 7px 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/ust2.gif);
	}
#ljuser_row img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{ width: 0; height: 0; padding: 0 7px 10px 0; background: 
url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust1.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); }

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

div.ContextualPopup {
position: relative;
font: normal 8pt "Arial", "Verdana", sans-serif !important;
}

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

div.ContextualPopup img {
border: 5px solid #FAFAFA;
}

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

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 {
margin: 10px auto;
background-color: #FAFAFA;
padding: 5px;
}

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. Any placement works, though I find Between Entries is the least noticeable.

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

prior for the tiny icons!

P.S. - Layout truth meme?

Tags: layouts

Post a new comment
Error

Anonymous comments are disabled in this journal
We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

Anonymously

switch

LiveJournal

Facebook

Twitter

OpenId

Google

MailRu

VKontakte

Anonymously

Insert Bold

Insert Italic

Insert Underline

Insert Strikethrough

Insert Link

Insert LJ User

Insert Photo

Insert Video

Your reply will be screened
Help
511 comments

miss_mady

June 19 2008, 01:38:38 UTC 3 years ago

I love this one! +mem, and I might change it now! :)

helloxyellow

June 19 2008, 01:40:31 UTC 3 years ago

I love it! :D

aiiri

June 19 2008, 01:41:43 UTC 3 years ago

in love.

springmoon

June 19 2008, 01:47:39 UTC 3 years ago

I'm using it now. The comments are definitely different.

climhazzards

June 19 2008, 01:48:07 UTC 3 years ago

smores100

June 19 2008, 01:58:38 UTC 3 years ago

Oh, I love it! Saving to my memories and will credit when used, thanks :)

___t0xiclove

June 19 2008, 02:08:36 UTC 3 years ago

love it. using. credit given! =]

kasuzame

June 19 2008, 02:11:41 UTC 3 years ago

Its absolutelly lovely,clean and stylish.May use it in a future,with credit of course.Thank you.

celtichymn

June 19 2008, 02:11:46 UTC 3 years ago

So pretty ♥
Using. Will credit.

bedside_manner

June 19 2008, 02:14:21 UTC 3 years ago

this is gorgeous! *_* so simple and clean; def using. :) will credit! ♥

andysjustdandy

June 19 2008, 02:14:41 UTC 3 years ago

Saving in mems! Will credit if used. :D

loner_angel

June 19 2008, 02:16:58 UTC 3 years ago

Love this one :)

pursenality

June 19 2008, 02:17:56 UTC 3 years ago

Pretty. ♥

ilovejensen

June 19 2008, 02:31:06 UTC 3 years ago

im using it now. i already credited you.

ton_plat_favori

June 19 2008, 02:33:07 UTC 3 years ago

mems <3

tvxqisdalove

June 19 2008, 02:44:49 UTC 3 years ago

pretty :) +mems, thank you!

htbthomas

June 19 2008, 02:59:52 UTC 3 years ago

Using, will credit. Thanks!

mdemvizi

June 19 2008, 03:01:08 UTC 3 years ago

I love this layout! I totally am taking it.

writemage

June 19 2008, 03:13:39 UTC 3 years ago

I'm using it now, it's so clean and pretty. I love it.

lizinstereo

June 19 2008, 03:29:42 UTC 3 years ago

This is great! Using and crediting, thanks.

enchantee

June 19 2008, 03:36:54 UTC 3 years ago

Oh, lovely! Grabbing, will probably use very soon.

honeybearbee

June 19 2008, 04:21:09 UTC 3 years ago

this is so awesome! will credit when i use it.

pavame

June 19 2008, 04:22:38 UTC 3 years ago

mem'ed. <3

loveohlovelove

June 19 2008, 04:30:24 UTC 3 years ago

used and credited.
thanks!

icybright

June 19 2008, 04:35:17 UTC 3 years ago

Awesome!

Post a new comment
511 comments

Username:		Create an Account Forgot your login or password? OpenID Google Mail.Ru VKontakte
Password:
	Remember Me
	English • Español • Deutsch • Русский…

s2 flexible squares - clean blue

Error

About

Help

Get Involved

Legal

LJ Labs

Store