S2 Flexible Squares Grey & Pink Layout
image preview | live preview
I SUGGEST DEFINING A WEBSITE IN YOUR INFO. It is not necessary, but will make the layout look better. You can merely using livejournal.com if you have no other website.
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 Yes. This is extremely important!
9. Copy and paste one of the following into the custom stylesheet box and click "Save Changes":
body {
background-color: #ffffff;
background-image:url(http://img.photobucket.com/albums/v72/panthersgem/ref/bgg.gif);
;){kind=link}
background-repeat: repeat-y;
color: #585858;
margin-top: 0px;
}
a, a:link, a:visited, a:active {
color: #FA5EC1;
text-decoration: none;
}
a:hover, a:hover b, a:hover strong {
color: #C0C0C0;
text-decoration: none;
border-bottom: 1px #FEC2E8 solid;
}
strong, b {
color: #FA5EC1;
font-weight: bold;
}
blockquote {
margin: 8px;
padding: 8px;
background: #F6F7F8;
color: #808080;
line-height: 15px;
font-family: "Trebuchet ms", arial, verdana, sans-serif;
font-size: 7.5pt;
text-align: justify;
border: 1px solid #EAEAEA;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content {
width: 750px;
background-color: transparent;
padding: 0px;
border-width: 0px;
margin-top: 0px;
}
#sidebar {
float: left;
width: 170px;
background-color: #F5F5F5;
margin-left: 0px;
padding-right: 7px;
margin-top: 1px;
border-width: 0px;
border: #CCCACA solid 1px;
}
#maincontent {
float: right;
width: 555px;
margin: 0;
padding: 0px;
border: none;
background-color: transparent;
}
#header {
width: auto;
padding-top: 0px;
line-height: 30px;
background-color: transparent;
font-family: arial, sans-serif;
font-size: 12pt;
font-weight: normal;
text-transform: lowercase;
letter-spacing: -1px;
color: #C0C0C0;
text-align: right;
border-width: 0px;
padding-bottom: 5px;
}
#footer {
clear: both;
width: auto;
padding: 3px;
text-align: right;
background-color: transparent;
border: none;
}
.entry {
padding-top: 0px;
padding-left: 0px;
background-color: transparent;
color: #585858;
line-height: 13.5pt;
font-family: arial, sans-serif;
font-size: 8pt;
text-align: justify;
border-width: 0px;
}
.defaultuserpic img {
display: none;
}
.userpic {
padding: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
}
.userpicfriends {
margin-right: 10px;
padding: 5px;
background-color: #ffffff !important;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
}
.userpiccomment {
padding: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
}
.date {
color: #FA5EC1;
background-color: transparent;
border-width: 0px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
text-transform: lowercase;
margin-left: 10px;
}
.datesubjectcomment {
color: #FA5EC1;
background-color: transparent;
border-width: 0px;
font-family: tahoma, verdana, sans-serif;
font-size: 7pt;
margin-left: 10px;
border-bottom: 1px #e5e5e5 solid;
border-right: 0px;
border-left: 0px;
border-top: 0px;
}
.subject {
color: #C0C0C0;
font-weight: normal;
background-color: transparent;
border: none;
font-family: script, arial, sans-serif;
font-size: 23pt;
letter-spacing: 1px;
text-transform: lowercase;
}
.subject a:link, .subject a:visited, .subject a:active {color: #c0c0c0;}
.datesubject {
background-color: transparent;
border-width: 0px;
}
span.ljuser {
background:url(http://img.photobucket.com/albums/v72/panthersgem/ref/pp2r.gif) no-repeat;
width: 7px;
height: 5px;
margin: 0px;
}
span.ljuser img {
visibility: hidden;
width: 7px;
height: 5px;
}
span.ljuser a b{
padding-left: 3px;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 9px;
font-family: arial, sans-serif;
font-size: 12pt;
font-weight: normal;
text-transform: lowercase;
letter-spacing: -1px;
color: #FA5EC1;
text-align: center;
background-color: transparent;
}
div#header a:hover {
padding: 9px;
color: #C0C0C0;
background-color: #ffffff;
border-bottom: 0px dotted;
}
div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active {
color: #FA5EC1;
font-weight: normal;
}
div#footer a:hover {
color: #000000;
font-weight: normal;
}
.title, .subtitle{
display: none;
}
ul.navheader {
padding: 9px;
background-color: transparent;
border-width: 0px;
}
ul.navheader li {
padding: 0px;
background-color: transparent;
border-width: 0px;
}
.ljtags {
margin-top: 10px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
color: #FA5EC1;
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: #000000;
text-decoration: none;
border-bottom: 1px #FA5EC1 solid;
font-weight: normal;
text-transform: lowercase;
}
.currentlocation a:link, .ljtags a:visited, .ljtags a:active {
color: #c0c0c0;
font-weight: normal;
text-transform: lowercase;
}
.currentlocation a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px #FA5EC1 solid;
font-weight: normal;
text-transform: lowercase;
}
.currents, .currentmusic, .currentmood, .currentlocation {
color: #c0c0c0;
background-color: transparent;
border-width: 0px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
text-transform: lowercase;
}
.comments {
text-transform: lowercase;
font-family: arial, verdana, sans-serif;
font-size: 12pt;
letter-spacing: -1px;
color: #FA5EC1;
font-weight: normal;
text-align: right;
background-color: transparent;
border: none;
}
div.comments a, div.comments a:link, div.comments a:visited, div.comments a:active {
color: #FA5EC1;
}
div.comments a:hover {
color: #C0C0C0;
}
div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {
color: #FA5EC1;
}
div#sidebar a:hover {
color: #C1C1C1;
}
li.sbaritem {
padding-left: 9px;
border-width: 0px;
background-color: transparent;
}
li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font-family: arial, verdana, sans-serif;
font-size: 12pt;
color: #FA5EC1;
line-height: 24px;
letter-spacing: -1px;
text-transform: lowercase;
border: none;
border-bottom: 1px #C1C1C1 dotted;
display: block;
}
li.sbaritem a:hover, a:hover visited, a:hover b {
color: #C1C1C1;
text-decoration: none;
background-color: transparent;
border-bottom: 1px #FA5EC1 dotted;
}
li.sbartitle {
background-color: transparent;
border-bottom: solid #C2C0C0 1px;
border-right: none;
border-left: none;
border-top: none;
padding: 4px;
margin-left: 5px;
font-family: arial, verdana, sans-serif;
text-transform: lowercase;
font-size: 12pt;
text-align: left;
color: #FA5EC1;
letter-spacing: -1px;
font-weight: normal;
}
.sbarbody {
background-color: transparent;
border-width: 0px;
padding: 0px;
}
.sbarbody2 {
background-color: transparent;
border-width: 0px;
padding-top: 0px;
padding-left: 9px;
font-family: arial, sans-serif;
font-size: 7pt;
line-height: 15px;
color: #716F6F;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #C2C0C0;
text-align: center;
font-family: Tahoma;
font-size: 10px;
padding: 4px;
}
.sbarcalendarposts {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #FA5EC1;
text-align: center;
font-family: Tahoma;
font-size: 10px;
padding: 4px;
color: #000000;
}
ul.sbarlist {
background-color: transparent;
border-width: 0px;
}
ul.navfooter {
background-color: transparent;
border-width: 0px;
}
ul.navfooter li {
color: #FA5EC1;
background-color: transparent;
border-width: 0px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
letter-spacing: 0px;
border-width: 0px;
}
.separator {
background-color: transparent;
border-width: 0px;
}
.clear {
background-color: transparent;
border-width: 0px;
}
.commentbox, .commenttext, textarea {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
font-face: tahoma, verdana, sans-serif;
font-size: 8pt;
}
.commentreply {
color: #585858;
font-face: arial, tahoma, verdana, sans-serif;
font-size: 8pt;
line-height: 13pt;
}
.box {
border-width: 0px;
background-color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #585858;
margin-left: 15px;
line-height: 13pt;
}
input {
background-color: #ffffff;
border: 1px #e5e5e5 solid;
color: #FA5EC1;
font-size: 8pt;
font-face: arial, verdana, sans-serif;
line-height: 13pt;
}
.commentboxpartial {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
margin-left: 30px;
font-size: 7pt;
font-family: tahoma, verdana, sans-serif;
color: #FA5EC1;
}
#sidebar_summary li.sbaritem {
border-width: 0px;
color: #c0c0c0;
}
#sidebar_summary li.sbaritem a {
display: inline;
}
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-left: auto;
margin-right: 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. For best results, use an image that is 722px wide.
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 Yes will fix this.
Can I have my default userpic show up?
Sure, just find this:
.defaultuserpic img {
display: none;
}
And replace with this:
.defaultuserpic img {
padding: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
}
I asked you a question, and you still haven't answered it!
If the layout is 3+ weeks old, I generally don't check the comments every day. I tend to go through them on Friday/Saturday nights once a week answering questions, so it may take a little time. Please be patient!
If you have any questions concerning the layout, feel free to ask. Also, PLEASE comment if you decide to use this! Thank you.