: Emily (presents) wrote in refuted,
2007-10-27 14:33:00

S2 Flexible Squares - Copper

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. Under "Customize Your Theme", click "Text", then the light blue box entitled "Comments". More options should appear.
8. Change "Link text to leave a comment" to "comment?" and "Link text to read comments" to "#".
9. 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".
10. Click "Custom CSS" on the left. Change "Use layout's stylesheet(s)" to No. This is extremely important!
11. Copy and paste the following into the custom stylesheet box and click "Save Changes":

/* Stylesheet by presents.livejournal.com.  Available at refuted.livejournal.com.  Flexible Squares 2007.  MAKE SURE USE LAYOUTS STYLESHEET IS SET TO NO. */

body {
        background-color: #404040;
        text-align: center;
        margin: 15px 0 15px 0;
font-family: arial, verdana, sans-serif;
color: #636363;
font-size: 8pt;
        }

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

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

strong, b {
        color: #EB9B8B;
        }

em, i {
        color: #9A9A9A;
        }

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

blockquote {
        margin: 0 8px 0 8px; 
        padding: 8px;
        background-color: #FDFDFD;
        color: #808080;
        line-height: 13px;
        font-family: arial, verdana, sans-serif;
        font-size: 7.5pt;
        text-align: justify;
        border: 1px solid #F8F8F8;
        }

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

#content {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        background-color: #ffffff;
        border: 0px;   
        padding: 0px;
        }

#maincontent {
        margin: 0;
padding: 0;
        background-color: transparent;
        color: #000000;
        border: 0px;
        text-align: left;
        }

#sidebar {
        background-color: #F3F1F1;
        border: none;
padding: 0;
margin: 0;
        }

#header {
        padding: 0px;
        margin: 0px;
        text-align: right;
        font-family: arial, verdana, tahoma, sans-serif;
        font-size: 12pt;
        font-weight: normal;
        letter-spacing: 0px;
        background-color: #EB9B8B;
        color: #EB9B8B;
        text-transform: lowercase;
line-height: 14px;
height: 47px;
        }

#footer {
        text-align: center;
        font-family: arial, verdana, sans-serif;
        font-size: 8pt;
        font-weight: bold;
        background-color: transparent;
        color: #EB9B8B;
        border: 0px;
        clear: both;
        }

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

div#footer a:hover {
        color: #404040;
border-bottom: 1px solid #404040;
        font-weight: normal;
        }

/* header -- links to views; title of journal; subtitle of journal */

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

div#header a:hover {
        color: #F6D2C4;
	}

.navheader {
        border: 0px;
        background-color: #EB9B8B;
        text-align: right;
        }

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

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

ul.navheader li a {
        background-color: #EB9B8B;
        color: #ffffff;
	}

.view {
        background-color: #EB9B8B;
        color: #ffffff;
	}

.title, .subtitle    {
    display: none;
    }

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
        color: #E78A7B;
font-family: arial, verdana, sans-serif;
font-size: 7.5pt;
text-transform: lowercase;
    }

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

.defaultuserpic {
display: none;
        }

.sbarbody {
        padding: 0 5px 0 5px;
background-color: #F3F1F1;
margin: 0;
        color: #404040;
        font-family: arial, Verdana, Tahoma, sans-serif;
        font-size: 7.5pt;
        line-height: 13pt;
        text-align: right;
float: right;
        }

.sbarbody2 {
        padding: 5px 7px 2px 7px;
background-color: #F3F1F1;
        color: #404040;
        font-family: arial, Verdana, Tahoma, sans-serif;
        font-size: 7.5pt;
        line-height: 13pt;
        text-align: right;
margin: 0;
    }

#sidebar_summary.ul {
   list-style: none;
   margin: 0; padding: 0;
}
#sidebar_summary li.sbaritem {
   float: right;
}
#sidebar_summary li.sbaritem a {
   display: inline;
        color: #E78A7B;
font-family: arial, verdana, sans-serif;
font-size: 7.5pt;
text-transform: lowercase;
   padding: 3px 5px;
}
#sidebar_summary li.sbaritem a:hover {
        color: #F5BDB5;
        text-decoration: none;
}

table.calendar {
        margin-right: 0;
float: right;
        }

.sbarcalendar {
        border: 1px solid #EB9B8B;
        background-color: #F7E9E3;
        text-align: center;
        font-family: Tahoma, verdana, sans-serif;
        font-size: 10px;
        padding: 4px;
        color: #EB9B8B;
        }

.sbarcalendarposts {
        background-color: #fff;
        border: 1px solid #DF7563;
        padding: 4px;
        text-align: center;
        }

td.sbarcalendarposts a, td.sbarcalendarposts a:link, td.sbarcalendarposts a:visited, td.sbarcalendarposts a:active
{        text-align: center;
        font-family: Tahoma, verdana, sans-serif !important;
        font-size: 10px !important;
color: #DF7563 !important;
}

ul.sbarlist {
   list-style: none;
   margin: 0;
   padding: 0;
}
ul.sbarlist li {
float: right;
}

ul.sbarlist li a {
display: block;
   color: #fff;
   padding: 0 7px;
}
ul.sbarlist li a:hover {
   color: #EB9B8B;
}

.tagcloud {
        padding-left: 3px;
        list-style: none;
        }

li.sbartitle {
        padding-left: 4px;
        list-style: none;
        border: none;
        font-weight: normal;
        color: #404040;
        font-family: arial, Georgia, verdana, sans-serif;
        font-size: 7.5pt;
        text-transform: lowercase;
        }

/* maincontent */

.subcontent {
    }

.entry    {
        margin: 0px 0px 0px 6px;
        padding: 0 14px 2px 8px;
        background-color: transparent;
        color: #636363;
        font-family: arial, Verdana, Tahoma, sans-serif;
        font-size: 9pt;
        line-height: 16pt;
        text-align: justify;
        border-width: 0px;
        }

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

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

.userpic {
        position: relative;
        float: left;
        margin: 10px 10px 0 10px;
        background-color: #ffffff;
        padding: 5px;
        border: 1px solid #E5E5E5;
        }

.userpicfriends {
        position: relative;
        float: left;
        background-color: #ffffff !important;
        padding: 5px;
        margin: 10px 10px 0 10px;
        z-index: 15;
        border: 1px solid #E5E5E5;
        text-align: center;
        font-family: arial, verdana, sans-serif;
        font-size: 7.5pt;
        z-index: 15;
        }

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

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

.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 {
        font-weight: normal;
        color: #EB9B8B;
        font-family: arial, Georgia, verdana, sans-serif;
        font-size: 18pt;
padding-top: 5px;
        text-transform: lowercase;
        }

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

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

.datesubject {
        background-color: #ffffff;
        padding: 5px;
        }

.currents, .currentmood, .currentmusic {
        color: #c0c0c0;
        border-width: 0px;
        font-family: verdana, arial, sans-serif;
        font-size: 7pt;
        text-transform: lowercase;
        }

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

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

.comments {
        font-family: arial, eorgia, verdana, sans-serif;
        font-size: 16pt;
        text-align: right;
        color: #EB9B8B;
        padding: 0px 10px 0px 5px;
        position: relative;
        }

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

div.comments a:hover {
        color: #404040;
        text-decoration: none;
border-bottom: 1px solid #404040;
        }

.ljtags {
        margin-top: 10px;
        font-family: verdana, arial, sans-serif;
        font-size: 7pt;
        color: #EB9B8B;
        font-weight: bold;
        text-transform: lowercase;
        }

.ljtags a:link, .ljtags a:visited, .ljtags a:active {
        color: #c0c0c0;
        font-weight: normal;
        text-transform: lowercase;
        }

.ljtags a:hover {
        color: #404040;
        text-decoration: none;
border-bottom: 1px solid #404040;
        }

/* maincontent --  entry, reply pages */

.datesubjectcomment {
        font-family: arial, sans-serif;
        font-size: 8pt;
        color: #636363;
        background-color: #ffffff;
        padding: 3px;
        margin-top: 5px;
        border-bottom: 1px solid #efefef;
        border-left: none;
        border-right: none;
        border-top: none;
        }

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

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

input, textarea {
        background-color: #ffffff;
        color: #000000;
        }

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

.reply    {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        text-align: left;
        font-family: arial, verdana, sans-serif;
        font-size: 8pt;
        line-height: 13pt;
        background-color: #ffffff;
        color: #636363;
        }

.replytosubject {
        font-weight: bold;
        }

.commentreply {
        position: relative;
        margin: 10px;
        font-size: 8pt;
        font-family: arial, verdana, sans-serif;
        line-height: 13pt;
        color: #636363;
        padding: 5px;
        }

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

.commentboxpartial {
        padding: 10px;
        margin: 10px;
        background-color: #ffffff;
        border: 1px solid #efefef;
        font-size: 8pt;
        font-family: arial, verdana, sans-serif;
        }

.commentinfo {
        background-color: #ffffff;
        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: 1px solid #efefef;
        }

table.yeartable td.yearday {
        background-color: #ffffff;
        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 {
font-size: 3pt;
}

.skiplinks {
        text-align: center;
        }

.separator{
        height: 35px;
    }

* 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;
    }

span.ljuser {                 background:url(http://img.photobucket.com/albums/v72/panthersgem/ref/cp1.png) no-repeat;
background-position:;
width: 7px;
height: 12px;
margin: 0px;
}

span.ljuser img {visibility: hidden; width:7px; height:12px;}
                span.ljuser a b{padding-left:0px;}

span.count {
display: none;
}

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/lockc.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/lockc.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/lockc.gif);
}

12. 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 will work.

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 or making sure there is no text in the "Title of the blurb sidebar box" box.

Can I have my default userpic show up?
No, unfortunately you can't with this particular layout.

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)".

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

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

default userpic

Insert Bold

Insert Italic

Insert Underline

Insert Strikethrough

Insert Link

Insert LJ User

Insert Photo

Insert Video

Spell check

Your reply will be screened

Help
262 comments

Post a new comment
262 comments

S2 Flexible Squares - Copper

Error