S2 Flexible Squares Pink Layout
Click for a larger 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. Under "Additional Options", find "Set the user picture position for each entry" and change it to "Right". You can keep it at left if you'd like, but to have it look like the preview this must be set to Right.
8. 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".
9. Click "Custom CSS" on the left. Change "Use layout's stylesheet(s)" to Yes. This is extremely important!
10. Copy and paste one of the following into the custom stylesheet box and click "Save Changes":
body {
background-color: #acacac;
color: #404040;
}
a, a:link, a:visited, a:active {
color: #f997bc;
text-decoration: none;
}
a:hover {
color: #C0C0C0;
text-decoration: none;
border-bottom: 1px dotted;
cursor: default;
}
strong, b {
color: #e5538a;
font-weight: bold;
}
#content {
width: 750px;
background-color: #ffffff;
padding: 2px;
border-width: 0px;
}
#sidebar {
float: left;
clear: none;
width: 170px;
padding: 6px;
border-width: 0px;
background-color: transparent;
}
#maincontent {
float: right;
width: 555px;
margin: 0;
padding: 3px;
border-left: 4px #f997bc solid;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
background-color: transparent;
}
#header {
width: auto;
padding-top: 0px;
padding-bottom: 5px;
line-height: 30px;
background-color: #ffffff;
font-family: "Trebuchet ms", arial, sans-serif;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #ffffff;
text-align: center;
letter-spacing: 1px;
border-width: 0px;
}
#footer {
clear: both;
width: auto;
padding: 6px;
text-align: center;
background-color: transparent;
border-top: 1px #f997bc dashed;
border-bottom: 0px;
border-right: 0px;
border-left: 0px;
}
.entry {
padding-top: 4px;
padding-left: 0px;
background-color: #ffffff;
color: #373737;
line-height: 15px;
font-family: Tahoma;
font-size: 11px;
text-align: justify;
border-width: 0px
}
.defaultuserpic img {
padding: 5px;
background-color: transparent;
border-style: dashed;
border-width: 1px;
border-color: #f997bc;
}
.userpic {
margin-left: 10px;
padding: 5px;
background-color: transparent;
border-style: dashed;
border-width: 1px;
border-color: #f997bc;
}
.userpicfriends {
margin-left: 10px;
padding: 5px;
background-color: transparent;
border-style: dashed;
border-width: 1px;
border-color: #f997bc;
}
.date {
color: #f997bc;
background-color: transparent;
border-width: 0px;
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 7pt;
}
.subject {
color: #999999;
background-color: transparent;
border-bottom: 1px #f997bc dashed;
border-left: 0px;
border-right: 0px;
border-top: 0px;
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 14px;
text-transform: uppercase;
}
.subject a:link, .subject a:visited, .subject a:active {color: #999999;}
.datesubject {
background-color: transparent;
border-width: 0px;
}
.ljuser A:link, .ljuser A:visited, .ljuser A:active {
color: pink;
}
.ljuser A:hover {
color: green;
}
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: "Trebuchet ms", arial, sans-serif;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
color: #f997bc;
text-align: center;
letter-spacing: 1px;
background-color: #ffffff;
}
div#header a:hover {
padding: 9px;
color: #f997bc;
background-color: #fee6f1;
border-bottom: 0px dotted;
}
div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active {
color: #f997bc;
font-weight: normal;
}
div#footer a:hover {
color: gray;
font-weight: normal;
}
.title, .subtitle{
display: none;
}
ul.navheader {
padding: 9px;
background-color: #f997bc;
border-width: 0px;
}
ul.navheader li {
padding: 0px;
background-color: #f997bc;
border-width: 0px;
}
.ljtags {
margin-top: 10px;
font-family: "Trebuchet ms", verdana, sans-serif;
font-size: 7pt;
color: #e5538a;
font-weight: bold;
}
.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #f997bc;
}
.ljtags a:hover {
color: #c0c0c0;
}
.currents, .currentmusic, .currentmood, .currentlocation {
color: #f997bc;
background-color: transparent;
border-width: 0px;
font-family: "Trebuchet ms", verdana, sans-serif;
font-size: 7pt;
}
.comments {
padding: 6px;
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 12px;
color: #f997bc;
font-weight: bold;
text-align: right;
background-color: transparent;
border-top: 1px #f997bc dashed;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
}
div.comments a, div.comments a:link, div.comments a:visited, div.comments a:active {
color: #f997bc;
}
div.comments a:hover {
color: #c0c0c0;
}
div#sidebar {
line-height: 15px;
font-family: Tahoma;
font-size: 10px;
color: #373737;
padding: 1px;
}
div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {
color: #f997bc;
}
div#sidebar a:hover {
color: #c0c0c0;
}
li.sbartitle {
background-color: #f997bc;
border-width: 0px;
padding: 4px;
margin-left: 5px;
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 11px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
letter-spacing: 1px;
font-weight: bold;
}
.sbarbody {
background-color: transparent;
border-width: 0px;
padding: 0px;
}
.sbarbody2 {
background-color: transparent;
border-width: 0px;
padding-top: 0px;
padding-left: 9px;
}
.sbarcalendar {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #efefef;
text-align: center;
font-family: Tahoma;
font-size: 10px;
}
.sbarcalendarposts {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #f997bc;
text-align: center;
font-family: Tahoma;
font-size: 10px;
}
ul.sbarlist {
background-color: transparent;
border-width: 0px;
}
li.sbaritem {
background-color: transparent;
border-width: 0px;
padding-left: 9px;
}
ul.navfooter {
background-color: transparent;
border-width: 0px;
}
ul.navfooter li {
color: #e5538a;
background-color: transparent;
border-width: 0px;
font-family: "Trebuchet ms", verdana, sans-serif;
font-size: 7pt;
border-width: 0px;
}
.separator {
background-color: transparent;
border-width: 0px;
}
.clear {
background-color: transparent;
border-width: 0px;
}
#sidebar_summary li.sbaritem {
border-width: 0px;
color: #c0c0c0;
}
#sidebar_summary li.sbaritem a {
display: inline;
}
11. 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 end of the code:
.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
width: ###px;
height: ###px;
background-position: center;
background-repeat: no-repeat;
background-image: url("URL OF IMAGE HERE");
}
Change the width and height tags to match your image. You'll need to upload your image to the internet. I suggest tinypic.com.
I have a Plus/Paid account, or am using this on a community and my comments page/area around my icon has random colours (probably some variation of blue). What do I do?
Under Custom Options go to Colors, then clear all the entries.
My entries are starting halfway down the page!
You have a wide image somewhere. Go lj-cut this, and it will work.
If you have any questions concerning the layout, feel free to ask. Also, PLEASE comment if you decide to use this! Thank you.