S2 Flexible Squares - Purple
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 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: #F2F2F2;
text-align: center;
color: #666666;
font-family: "Verdana", sans-serif;
font-size: 8pt;
margin: 0 0 20px 0;
}
a, a:link, a:visited, a:active {
color: #D278DA;
text-decoration: none;
}
a:hover {
color: #C0C0C0;
text-decoration: none;
}
strong, b {
color: #D278DA;
font-weight: bold;
}
em, i {
color: #D278DA;
}
p, td {
font-size: 11px;
}
blockquote {
margin: 0 8px 0 8px;
padding: 8px;
background-color: #FDFDFD;
color: #808080;
line-height: 13px;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
text-align: justify;
border: 1px solid #F8F8F8;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content {
width: 740px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border: 0px;
padding: 0px;
}
#maincontent {
float: left;
width: 540px;
margin-top: 0px;
background-color: transparent;
color: #000000;
border: 0px;
text-align: left;
}
#sidebar {
float: right;
padding-top: 2px;
margin: 5px 5px 0 0;
background-color: transparent;
border-left: 1px solid #efefef;
border-top: none;
border-right: none;
border-bottom: none;
width: 170px;
text-align: left;
}
#header {
padding: 0px;
margin: 0px;
text-align: center;
font-family: verdana, tahoma, sans-serif;
font-size: 8pt;
font-weight: normal;
letter-spacing: 0px;
background-color: #D278DA;
color: #ffffff;
text-transform: lowercase;
}
#footer {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 7pt;
font-weight: bold;
background-color: transparent;
color: #D278DA;
border: 0px;
z-index: 100;
clear: both;
}
div#footer a, div#footer a:link, div#footer a:visited {
color: #D278DA;
font-weight: normal;
}
div#footer a:hover {
color: #c0c0c0;
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: #FBEDFD;
}
.navheader {
border: 0px;
background-color: #D67BDE;
height: 100px;
text-align: center;
}
ul.navheader {
padding: 0px;
margin: 0px;
list-style-type: none;
}
ul.navheader li {
display: block;
float: left;
margin: 0px;
}
ul.navheader li a {
display: block;
float: left;
background-color: #D67BDE;
width: 90px;
color: #ffffff;
margin: 0px;
padding: 75px 0px 12px 0px;
border-right: 1px solid #EEBFF7;
}
ul.navheader li a:hover {
background-color: #E09EE8;
color: #FBEDFD;
}
.view {
display: block;
float: left;
background-color: #D67BDE;
width: 90px;
color: #ffffff;
margin: 0px;
padding: 75px 0px 12px 0px;
border-right: 1px solid #EEBFF7;
}
.title, .subtitle {
display: none;
}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #D67BDE;
}
div#sidebar a:hover {
color: #EDC6F4;
text-decoration: none;
}
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 5px 0 5px;
color: #636363;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 7pt;
line-height: 13pt;
text-align: justify;
}
#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 0px;
border: 0px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border: 1px solid #EFEFEF;
background-color: #ffffff;
text-align: center;
font-family: Tahoma, verdana, sans-serif;
font-size: 10px;
padding: 4px;
color: #686868;
}
.sbarcalendarposts {
border: 1px solid #D67BDE;
text-align: center;
font-family: Tahoma, verdana, sans-serif;
font-size: 10px;
padding: 4px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem, .tagcloud {
padding-left: 3px;
list-style: none;
}
li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font-family: verdana, arial, sans-serif;
font-size: 8pt;
color: #D67BDE;
line-height: 24px;
text-transform: lowercase;
border: none;
border-bottom: 1px solid #FBECFE;
padding-left: 4px;
display: block;
}
li.sbaritem a:hover, a:hover visited, a:hover b {
text-decoration: none;
background-color: #FEF9FF;
border-bottom: 1px #FBECFE solid;
}
li.sbartitle {
padding-left: 4px;
list-style: none;
border-bottom: 1px solid #efefef;
border-top: none;
border-right: none;
border-left: none;
background-color: #ffffff;
margin-bottom: 10px;
margin-top: 10px;
font-weight: bold;
color: #D67BDE;
font-family: Georgia, verdana, sans-serif;
font-size: 1.5em;
text-transform: lowercase;
}
/* maincontent */
.subcontent {
}
.entry {
margin: 0px 0px 0px 6px;
padding: 10px;
background-color: transparent;
color: #636363;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 8pt;
line-height: 15pt;
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;
z-index: 15;
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: "Verdana", sans-serif;
font-size: 8pt;
z-index: 15;
}
.userpicfriends a font {
font-family: "Verdana", sans-serif;
font-size: 7pt;
color: #D278DA;
}
.userpicfriends a:hover font {
color: #c0c0c0;
}
.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/ljgraphics/clock.gif) no-repeat bottom left;
}
.subject {
font-weight: bold;
color: #D67BDE;
font-family: Georgia, verdana, sans-serif;
font-size: 1.8em;
padding-top: 5px;
text-transform: lowercase;
}
.subject a, .subject a:link, .subject a:visited {
color: #D67BDE;
}
.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;
}
.comments {
font-family: Georgia, verdana, sans-serif;
font-size: 1.8em;
text-align: right;
color: #D67BDE;
background-color: #ffffff;
padding: 0px 10px 0px 5px;
position: relative;
top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #D67BDE;
}
div.comments a:hover {
color: #c0c0c0;
text-decoration: none;
}
.ljtags {
margin-top: 10px;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #D67BDE;
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: #EDC6F4;
text-decoration: none;
font-weight: normal;
text-transform: lowercase;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
font-family: verdana, arial, sans-serif;
font-size: 7pt;
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: "Verdana", sans-serif;
font-size: 7pt;
line-height: 13pt;
background-color: #ffffff;
color: #636363;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 7pt;
font-family: "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: 7pt;
font-family: "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 */
#sidebar_summary li.sbaritem {
border-width: 0px;
color: #c0c0c0;
}
#sidebar_summary li.sbaritem a {
display: inline;
}
.clear {
height: 15px;
}
.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;
}
.datesubject img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url("http://img.photobucket.com/albums/v72/panthersgem/ref/lock-1.gif");
padding: 10px 7px 0px 0px;
}
span.ljuser { background:url(http://img.photobucket.com/albums/v72/panthersgem/ref/pp2r.gif) no-repeat;
background-position:;
width: 7px;
height: 5px;
margin: 0px;
}
span.ljuser img {visibility: hidden; width:7px; height:5px;}
span.ljuser a b{padding-left:0px;}
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);
;){kind=link}
}
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_friends.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:
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. The layout is 740px 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 No 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: 1px solid #e5e5e5;
margin: 10px;
}
I have a Plus account. How do I make the layout look alright with ads?
Click Custom Options, then Colors. Change Background color of the outer table to #F2F2F2 and Border color of the content and header/footer boxes to #F2F2F2.
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.