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 "1 Column (no sidebar)".
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 "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: #f3f2e1;
background-image: url(
http://img.photobucket.com/albums/v72/panthersgem/ref/lay/bgb1.gif);background-repeat: no-repeat;
background-position: bottom left;
background-attachment: fixed;
color: #404040;
}
a, a:link, a:visited, a:active {
color: #b79771;
text-decoration: none;
}
a:hover {
color: #daccb2;
text-decoration: none;
border-bottom: 1px dotted;
cursor: default;
}
strong, b {
color: #46b7c4;
font-weight: bold;
}
emphasize, i {
color: #9edcde;
font-weight: emphasize;
}
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: 600px;
border-width: 0px;
background-color: transparent;
}
#maincontent {
width: 600px;
padding: 0px;
border-style: solid;
border-width: 0px;
border-color: #f3f2e1;
background-color: transparent;
}
#header {
width: 600px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 10px;
line-height: 30px;
background-color: #ffffff;
font-family: "lucida sans unicode", arial, sans-serif;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #f3f2e1;
text-align: center;
letter-spacing: 1px;
border-width: 0px;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 9px;
font-family: "lucida sans unicode", arial, sans-serif;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #ffffff;
text-align: center;
letter-spacing: 1px;
background-color: #b79771;
}
div#header a:hover {
padding: 9px;
color: #ffffff;
background-color: #59bec3;
border-bottom: 0px dotted;
cursor: hand;
}
ul.navheader {
padding: 9px;
background-color: #3c322c;
border-width: 0px;
}
ul.navheader li {
padding: 0px;
background-color: #3c322c;
border-width: 0px;
}
#footer {
font-weight: normal;
color: #b79771;
width: auto;
padding: 6px;
text-align: center;
background-color: transparent;
border-width: 0px;
}
ul.navfooter {
background-color: #f3f2e1;
border-width: 0px;
padding-left: 3px;
}
ul.navfooter li {
background-color: #f3f2e1;
font-family: tahoma;
font-size: 7pt;
border-width: 0px;
padding-left: 3px;
}
div#footer a, div#footer a:link, div#footer a:visited, div#footer a:active {
color: #3c322c;
font-weight: normal;
}
div#footer a:hover {
color: #b79771;
font-weight: normal;
}
.entry {
margin-left: 0px;
margin-right: 0px;
padding-top: 4px;
background-color: #ffffff;
color: #444444;
line-height: 13px;
font-family: tahoma;
font-size: 7pt;
border-width: 0px;
text-align: justify;
}
.subcontent {
background-color: #ffffff;
}
.userpic {
margin-left: 10px;
padding: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #9c7b54;
}
.userpicfriends {
margin-left: 10px;
padding: 5px;
background-color:#ffffff !important;
border-style: solid;
border-width: 1px;
border-color: #9c7b54;
}
.date {
padding-left: 6px;
color: #3c322c;
background-color: #f3f2e1;
border-style: solid;
border-width: 0px;
border-color: #404040;
font-family: "trebuchet ms";
font-size: 7pt;
}
.subject {
color: #3c322c;
background-color: #b79771;
border-width: 0px;
font-family: "courier new";
font-size: 17px;
text-transform: uppercase;
}
.subject a:link, .subject a:visited, .subject a:active {color: #3c322c;}
.datesubject {
background-color: #b79771;
border-style: solid;
border-width: 0px;
border-color: #404040;
}
.ljuser a:link, .ljuser a:visited, .ljuser a:active {
color: #3c322c;
}
.ljuser a:hover {
color: #b79771;
}
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;
}
.title, .subtitle{
display: none;
}
.ljtags {
margin-top: 10px;
color: #46b7c4;
font-weight: bold;
}
.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #b79771;
font-weight: normal;
}
.ljtags a:hover {
color: #daccb2;
}
.currents, .currentmusic, .currentmood, .currentlocation {
color: #b79771;
font-family: tahoma, verdana, sans-serif;
font-size: 7pt;
background-color: #ffffff;
border-width: 0px;
}
.comments {
padding: 6px;
font-family: "lucida sans unicode", verdana, sans-serif;
font-size: 10pt;
text-transform: uppercase;
color: #3c322c;
text-align: right;
background-color: #f3f2e1;
background-image: url(
http://img.photobucket.com/albums/v72/panthersgem/ref/lay/bglj1.gif);border-width: 0px;
}
div.comments a, div.comments a:link, div.comments a:visited, div.comments a:active {
color: #685348;
}
div.comments a:hover {
color: #b79771;
}
.separator {
background-color: transparent;
background-image: url();
border-width: 0px;
height: 5px;
}
.clear {
background-color: transparent;
border-width: 0px;
height: 5px;
}
.commentbox {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
}
.commentreply {
color: #585858;
font-face: tahoma, verdana, sans-serif;
font-size: 7pt;
}
input {
background-color: #ffffff;
border: 1px #e5e5e5 solid;
color: #b79771;
font-size: 9pt;
font-face: tahoma, verdana, sans-serif;
}
.commentboxpartial {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
margin-left: 30px;
font-size: 7pt;
font-family: tahoma, verdana, sans-serif;
color: #b79771;
}
.userpiccomment {
padding: 5px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #e5e5e5;
}
.datesubjectcomment {
color: #b79771;
background-color: #ffffff;
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;
}
.box {
border-width: 0px;
background-color: #ffffff;
font-family: tahoma, verdana, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #585858;
}
10. Go to your
Manage Profile page. Under Bio, add the following:
Stylesheet by
PLEASE DO NOT NEGLECT THIS STEP.
Credit: designfruit.com - Flower brushes
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-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.
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!
I don't really like that flower background. Can I get rid of it?
Sure, that's easy. Find and delete this:
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/lay/bgb1.gif);
background-repeat: no-repeat;
background-position: bottom left;
background-attachment: fixed;
If you have any questions concerning the layout, feel free to ask. Also, PLEASE comment if you decide to use this! Thank you.