s2 flexible squares - refresh: refuted

presents in refuted

s2 flexible squares - refresh

Apr 19, 2009 22:20

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 any number or combination of these to be displayed. 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: #EAEAEA;
text-align: left;
color: #666666;
font-size: 62.5%;
margin: 0 0 20px 0;
font-family: "Lucida Grande", "Trebuchet MS", arial, sans-serif;
color: #666666;
}

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

a:hover {
color: #ff0066;
}

p, blockquote {
background: #f2f2f2;
padding: 5px;
}

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

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

#maincontent {
width: 97%;
margin: 25px auto 10px auto;
background-color: #fff;
color: #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #fff;
text-align: left;
padding: 5px;
}

#sidebar {
margin: 0px auto 5px auto;
background-color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #fff;
font: 1.0em "Lucida Grande", "Trebuchet MS", arial, sans-serif;
color: #666666;
width: 97%;
padding: 10px 5px 0 5px;
min-height: 110px;
}

#header {
width: 97%;
padding: 0px 0px 10px 20px;
margin: 23px 0 0 0;
text-align: left;
font-family: arial, sans-serif;
font-size: 0.9em;
font-weight: normal;
background-color: #EAEAEA;
color: #000000;
text-transform: uppercase;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #FF0066;
}

div#header a:hover, div#footer a:hover {
color: #0298FF;
text-decoration: none;
}

.title, .subtitle {
display: none;
}

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

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

.subcontent {
padding: 0;
margin: 0;
background: #f2f2f2;
}

.entry {
margin: 0px 0px 10px 120px;
padding: 0 18px 8px 12px;
background-color: #fff;
font: 1.1em/1.8em "Lucida Grande", "Trebuchet MS", arial, sans-serif;
color: #666666;
text-align: left;
}

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

.userpic {
position: relative; float: left;
background-color: transparent;
padding: 5px;
z-index: 15;
margin: 7px 7px 7px 5px;
}

.userpic:hover {background: #fff;}

.date {
color: #cbcbcb;
font: 0.9em "Lucida Grande", "trebuchet ms", arial, sans-serif;
text-transform: uppercase;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/time.gif) no-repeat center left;
padding: 0 0 0 15px;
}

.subject {
padding: 3px 3px 0 0;
color: #0298FF;
font: 1.4em arial, sans-serif;
text-transform: uppercase;
}

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

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

.datesubject {
background-color: #fff;
padding: 10px 10px 8px 12px;
margin-left: 120px;
}

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

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

.currentmood, .currentmusic, .currentlocation {
color: #B9B9B9;
font: 0.8em/2.0em "lucida grande", "trebuchet ms", arial, sans-serif;
text-transform: uppercase;
}

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

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

.currentmusic {
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/mus11.png) 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: #B9B9B9;
}

.currents a:hover {
color: #0298FF;
}

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

.currentgroups {display: none;}

.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/tag11.png) no-repeat center left;
padding: 3px 0 0 6px;
position: relative;
top: 29px;
}

.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #B9B9B9;
font-weight: normal;
font: 9px "lucida grande", "trebuchet ms", arial, sans-serif;
text-transform: uppercase;
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: #0298FF;
text-decoration: none;
font-weight: normal;
}

.comments {
color: #f2f2f2;
text-align: left;
background-color: transparent;
padding: 0 0 5px 0;
margin-left: -105px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #979797;
padding: 8px;
background: #e2e2e2;
}

div.comments a:hover {
color: #B9B9B9;
text-decoration: none;
background: #E8E8E8;
}

.separator{
height: 5px;
}

.userpicfriends {
position: relative; float: left;
background-color: transparent!important;
padding: 5px;
z-index: 15;
margin: 7px 7px 7px 5px;
text-align: center;
}

.userpicfriends:hover {background: #fff!important;}

.userpicfriends a font {
font: 0.9em "lucida grande", arial, verdana, sans-serif;
color: #606060;
}

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

.defaultuserpic {
float: left;
background: #fff;
padding: 0 10px 10px 7px;
margin: 0 5px 0 0;
position: relative;
}

.sbarbody {
text-align: center;
padding: 5px 0 0 0;
}

.sbarbody2 {
background: #f2f2f2;
border-right: 3px solid #0298FF;
line-height: 1.6em;
padding: 5px;
margin: 0 7px 2px 7px;
}

.sbarbody2:hover {border-right: 3px solid #ff0066;}

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

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

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

.sbarcalendar {
text-align: center;
font: 0.9em "Lucida Grande", "Trebuchet MS", arial, sans-serif;
background-color: #EFEFEF;
padding: 5px;
}

.sbarcalendarposts {
background-color: #E2E2E2;
text-align: center;
font: 0.9em "Lucida Grande", "Trebuchet MS", arial, sans-serif;
padding: 5px;
}

.sbarcalendarposts:hover {background: #EFEFEF;}

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

li.sbaritem {
list-style: none;
display: inline;
text-transform: lowercase;
padding: 0 0 0 15px;
}

li.sbartitle
{display: none;}

#sidebar_summary.ul, #sidebar_summary li.sbaritem a {
line-height: 19px;
}

#footer {
width: 97%;
text-align: center;
background-color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #fff;
margin: 0 auto;
padding: 5px;
z-index: 100;
clear: both;
font: 1.0em "Lucida grande", "trebuchet ms", arial, sans-serif;
}

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

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

.clearfoot {
clear: both;
}

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: 1px solid #efefef;
}

table.yeartable td.yearday {
background-color: #fff;
text-align: center;
}

td.yearmonth {
border-style: none;
}

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

.userpiccomment {
position: relative;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
padding: 10px;
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;
}

.replytosubject {
font-weight: bold;
}

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

.commentbox {
border: 1px solid #efefef;
padding: 10px;
margin: 10px;
line-height: 2.0em;
}

.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: #f2f2f2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #f2f2f2;
width: 40%;
padding: 5px;
margin: 0 auto;
}

.clear {
height: 15px;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/uu12.gif);
padding: 14px 7px 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/uu12.gif);
padding: 14px 7px 2px 2px !important;
}

.ljuser b {
color: #000;
background: transparent;
}

.ljuser a:hover b {
color: #0298FF;
background: transparent;
}

.ljuser:hover img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust2.gif);
}
.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/uu12.gif);
padding: 14px 7px 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/ust2.gif);
}
.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/uu12.gif);
padding: 14px 7px 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/ust2.gif);
}

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

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

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

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

div.ContextualPopup {
position: relative;
font: normal 0.9em "lucida grande", "Arial", "Verdana", sans-serif !important;
text-transform: uppercase;
}

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

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

#ljuser_row img[src="http://l-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/uu12.gif); }

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

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

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

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

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

.box img[src="http://l-stat.livejournal.com/img/anonymous.gif"]{ width: 0; height: 0; padding: 0 9px 8px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/anon2.gif); }

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

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

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 change the width?

Just find these lines:

#content {
width: 100%;

And change 100% to a lower percentage until the layout is the width you would like.

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.

I decided not to change my comment text and now the comment links are overlapping the entry?

Find this:

.comments {
color: #f2f2f2;
text-align: left;
background-color: transparent;
padding: 0 0 5px 0;
margin-left: -105px;
}

Then, change -105px to a higher negative number until the links are where you want them.

I chose not to show my default userpic and don't have many things in my sidebar, so I have some extra white space.
Just find and delete this line:

min-height: 110px;

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 Vertical.

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

layouts