refuted: S2 Flexible Squares "Smooth"

Emily (

presents) wrote in

refuted,
@ 2007-03-25 08:37:00

Entry tags:

layouts

S2 Flexible Squares "Smooth"

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. 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. Paste the following code into the Custom stylesheet box if you would like the green layout:

body {
background-color: #EAFAED;
color: #585858;
margin-top: 0px;
}

a, a:link, a:visited, a:active {
color: #6EC078;
text-decoration: none;
}
	
a:hover, a:hover b, a:hover strong {
color: #000000;
text-decoration: none;
border-bottom: 1px #A8E4B5 solid;
}

strong, b {
color: #6EC078;
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: #ffffff;
padding: 0px;
border-width: 0px;
margin-top: 0px;
}

#sidebar {
float: right;
width: 170px;
background-color: transparent;
margin-right: 7px;
margin-top: 1px;
border-width: 0px;
}

#maincontent {
float: left;
width: 560px;
margin: 0;
padding: 0px;
border: none;
background-color: transparent;
}

#header {
width: auto;
padding-top: 0px;
line-height: 30px;
background-color: transparent;
font-family: "century gothic", arial, sans-serif;
font-size: 24px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
color: #417547;
text-align: center;
border-width: 0px;
padding-bottom: 5px;
}

#footer {
clear: both;
width: auto;
padding: 3px;
text-align: center;
background-color: transparent;
border: none;
}

.entry {
padding-top: 4px;
padding-left: 0px;
background-color: transparent;
color: #585858;
line-height: 12pt;
font-family: tahoma, arial;
font-size: 7pt;
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;
margin-right: 10px;
}

.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: #6EC078;
background-color: transparent;
border-width: 0px;
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 7pt;
margin-left: 10px;
}

.datesubjectcomment {
color: #6EC078;
background-color: transparent;
border-width: 0px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 7.5pt;
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: "courier new", tahoma, sans-serif;
font-size: 22px;
font-weight: normal;
text-transform: uppercase;
}

.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: "century gothic", arial, sans-serif;
font-size: 24px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
color: #ffffff;
text-align: center;
background-color: #6EC078;
}

div#header a:hover {
padding: 9px;
color: #ffffff;
background-color: #A8E4B5;
border-bottom: 0px dotted;
}

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

div#footer a:hover {
color: #000000;
font-weight: normal;
}

.title, .subtitle{
display: none;
}

ul.navheader {
padding: 9px;
background-color: #6EC078;
border-width: 0px;
}

ul.navheader li  {
padding: 0px;
background-color: #6EC078;
border-width: 0px;
}

.ljtags {
margin-top: 10px;
font-family: tahoma, "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 6pt;
color: #6EC078;
font-weight: bold;
text-transform: uppercase;
}

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

.ljtags a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px #6EC078 solid;
font-weight: normal;
text-transform: uppercase;
}

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

.currentlocation a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px #6EC078 solid;
font-weight: normal;
text-transform: uppercase;
}

.currents, .currentmusic, .currentmood, .currentlocation {
color: #c0c0c0;
background-color: transparent;
border-width: 0px;
font-family: tahoma, "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 6pt;
text-transform: uppercase;
}

.comments {
text-transform: uppercase;
font-family: "century gothic", verdana, sans-serif;
font-size: 10pt;
color: #6EC078;
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: #6EC078;
}

div.comments a:hover {
color: #000000;
}

div#sidebar {
line-height: 15px;
font-family: tahoma;
font-size: 7pt;
color: #585858;
padding: 1px;
}

div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {
color: #6EC078;
}

div#sidebar a:hover {
color: #A8E4B5;
}

li.sbaritem {
background-color: transparent;
border-width: 0px;
padding-left: 9px;
}

li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font-family: tahoma, verdana, sans-serif;
font-size: 8pt;
color: #6EC078;
line-height: 24px;
text-transform: lowercase;
border-bottom: 1px dotted #6EC078;
display: block;
}

li.sbaritem a:hover, a:hover visited, a:hover b {
color: #A8E4B5;
text-decoration: none;
background-color: #ffffff;
border-bottom: 1px #A8E4B5 dotted;
}

li.sbartitle {
background-color: #ffffff;
border: none;
padding: 4px;
margin-left: 5px;
font-family: "century gothic", verdana, sans-serif;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #6EC078;
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;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #efefef;
text-align: center;
font-family: Tahoma;
font-size: 10px;
padding: 4px;
}

.sbarcalendarposts {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #6EC078;
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: #6EC078;
background-color: transparent;
border-width: 0px;
font-family: tahoma, verdana, sans-serif;
font-size: 7pt;
border-width: 0px;
}

.separator {
background-color: transparent;
border-width: 0px;
}

.clear {
background-color: transparent;
border-width: 0px;
}

.commentbox {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
font-face: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 8pt;
}

.commentreply {
color: #585858;
font-face: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 8pt;
}

.box {
border-width: 0px;
background-color: #ffffff;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #585858;
}

input {
background-color: #ffffff;
border: 1px #e5e5e5 solid;
color: #6EC078;
font-size: 9pt;
font-face: "trebuchet ms", Tahoma, verdana, sans-serif;
}

.commentboxpartial {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
margin-left: 30px;
font-size: 8pt;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
color: #6EC078;
}

#sidebar_summary li.sbaritem {
border-width: 0px;
color: #c0c0c0;
}
#sidebar_summary li.sbaritem a {
display: inline;
}

If you would like the blue layout, paste this code into the box:

body {
background-color: #EEF9FC;
color: #585858;
margin-top: 0px;
}

a, a:link, a:visited, a:active {
color: #6DA8C1;
text-decoration: none;
}
	
a:hover, a:hover b, a:hover strong {
color: #000000;
text-decoration: none;
border-bottom: 1px #BDE0ED solid;
}

strong, b {
color: #6DA8C1;
font-weight: bold;
}

#content {
width: 750px;
background-color: #ffffff;
padding: 0px;
border-width: 0px;
margin-top: 0px;
}

#sidebar {
float: right;
width: 170px;
background-color: transparent;
margin-right: 7px;
margin-top: 1px;
border-width: 0px;
}

#maincontent {
float: left;
width: 560px;
margin: 0;
padding: 0px;
border: none;
background-color: transparent;
}

#header {
width: auto;
padding-top: 0px;
line-height: 30px;
background-color: transparent;
font-family: "century gothic", arial, sans-serif;
font-size: 24px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
color: #4B7A8B;
text-align: center;
border-width: 0px;
padding-bottom: 5px;
}

#footer {
clear: both;
width: auto;
padding: 3px;
text-align: center;
background-color: transparent;
border: none;
}

.entry {
padding-top: 4px;
padding-left: 0px;
background-color: transparent;
color: #585858;
line-height: 12pt;
font-family: tahoma, arial;
font-size: 7pt;
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;
margin-right: 10px;
}

.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: #6DA8C1;
background-color: transparent;
border-width: 0px;
font-family: "trebuchet ms", verdana, sans-serif;
font-size: 7pt;
margin-left: 10px;
}

.datesubjectcomment {
color: #6DA8C1;
background-color: transparent;
border-width: 0px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 7.5pt;
margin-left: 10px;
border-bottom: 1px #e5e5e5 solid;
border-right: 0px;
border-left: 0px;
border-top: 0px;
}

.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:hover {
padding: 9px;
color: #ffffff;
background-color: #BDE0ED;
border-bottom: 0px dotted;
}

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

div#footer a:hover {
color: #000000;
font-weight: normal;
}

.title, .subtitle{
display: none;
}

ul.navheader {
padding: 9px;
background-color: #6DA8C1;
border-width: 0px;
}

ul.navheader li  {
padding: 0px;
background-color: #6DA8C1;
border-width: 0px;
}

.ljtags {
margin-top: 10px;
font-family: tahoma, "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 6pt;
color: #6DA8C1;
font-weight: bold;
text-transform: uppercase;
}

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

.ljtags a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px #6DA8C1 solid;
font-weight: normal;
text-transform: uppercase;
}

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

.currentlocation a:hover {
color: #000000;
text-decoration: none;
border-bottom: 1px #6DA8C1 solid;
font-weight: normal;
text-transform: uppercase;
}

.comments {
text-transform: uppercase;
font-family: "century gothic", verdana, sans-serif;
font-size: 10pt;
color: #6DA8C1;
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: #6DA8C1;
}

div.comments a:hover {
color: #000000;
}

div#sidebar {
line-height: 15px;
font-family: tahoma;
font-size: 7pt;
color: #585858;
padding: 1px;
}

div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {
color: #6DA8C1;
}

div#sidebar a:hover {
color: #BDE0ED;
}

li.sbaritem {
background-color: transparent;
border-width: 0px;
padding-left: 9px;
}

li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font-family: tahoma, verdana, sans-serif;
font-size: 8pt;
color: #6DA8C1;
line-height: 24px;
text-transform: lowercase;
border-bottom: 1px dotted #6DA8C1;
display: block;
}

li.sbaritem a:hover, a:hover visited, a:hover b {
color: #BDE0ED;
text-decoration: none;
background-color: #ffffff;
border-bottom: 1px #BDE0ED dotted;
}

.sbarbody {
background-color: transparent;
border-width: 0px;
padding: 0px;
}

.sbarbody2 {
background-color: transparent;
border-width: 0px;
padding-top: 0px;
padding-left: 9px;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #efefef;
text-align: center;
font-family: Tahoma;
font-size: 10px;
padding: 4px;
}

.sbarcalendarposts {
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #6DA8C1;
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: #6DA8C1;
background-color: transparent;
border-width: 0px;
font-family: tahoma, verdana, sans-serif;
font-size: 7pt;
border-width: 0px;
}

.separator {
background-color: transparent;
border-width: 0px;
}

.clear {
background-color: transparent;
border-width: 0px;
}

.commentbox {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
font-face: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 8pt;
}

.commentreply {
color: #585858;
font-face: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 8pt;
}

.box {
border-width: 0px;
background-color: #ffffff;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #585858;
}

input {
background-color: #ffffff;
border: 1px #e5e5e5 solid;
color: #6DA8C1;
font-size: 9pt;
font-face: "trebuchet ms", Tahoma, verdana, sans-serif;
}

#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:</strong>

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 750px 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;
}

My header links are coming down to a second line?!
Your website name is too long, just shorten this and you'll be fine.

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.

Page 1 of 19
<<	[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19]	>>

(512 comments) - (Post a new comment)

	yellowallamanda 2007-03-25 03:00 pm UTC (link)
	Lovely. And a BLUE layout! Yay! (Reply to this)

	malingre 2007-03-25 03:00 pm UTC (link)
	Snagged the blue one. Thanks :D (Reply to this)

	desmonah 2007-03-25 03:21 pm UTC (link)
	Beautiful layouts! I like the green one. I'm adding this to my memories for later. :D (Reply to this)

	harrietfelicia 2007-03-25 03:24 pm UTC (link)
	I love the new layouts. I'm currently using the Green one. Thanks! (Reply to this)

	hetairai 2007-03-25 03:33 pm UTC (link)
	Thanks! Gonna use the green layout. (Reply to this)

	lalita82 2007-03-25 03:43 pm UTC (link)
	Love the layouts! I will both in future use. :) (Reply to this)

	lenakaligaris 2007-03-25 04:04 pm UTC (link)
	using the green one :) + adding to memories (Reply to this)

	withoutxfear 2007-03-25 04:58 pm UTC (link)
	I'll be using the green one. Will credit. Thank you! =D (Reply to this)

	mercredimatin 2007-03-25 05:19 pm UTC (link)
	using the blue one - it's sooo pretty. (Reply to this)

	stillimage 2007-03-25 07:50 pm UTC (link)
	Love the green. Will credit after I reboot. ♥ Thanks. (Reply to this)

	dragons_weyr 2007-03-25 08:47 pm UTC (link)
	I love how simple and clean these are. I'm using the green one now. :) (Reply to this)

	autumnlove21 2007-03-25 10:56 pm UTC (link)
	Saving to mems. and using! (Reply to this)

	yunie_rikku 2007-03-25 11:21 pm UTC (link)
	Using the green one. Credited in my blurbs and in my profile. <3 (Reply to this)

	endlessxstory 2007-03-26 12:22 am UTC (link)
	Took the Green one! :D Lovely layout! <3 (Reply to this)

	paxm 2007-03-26 01:01 am UTC (link)
	Very, very nice. Snagging and will credit in bio info if used. Thanks so much! (Reply to this)

	kits_hiwatari 2007-03-26 02:12 am UTC (link)
	Pretty layout! Snagging the blue one ♥ (Reply to this)

	haels_batman 2007-03-26 02:58 am UTC (link)
	used the green one and yep I acknowledge you. (Reply to this)

	trendy_turtle23 2007-03-26 03:53 am UTC (link)
	Awesome layouts! Snagging the blue one. Thank you for sharing and hoping to see more layouts from you. ^____^ (Reply to this)

	meghan70 2007-03-26 04:30 am UTC (link)
	i love the blue one. very nice! :) (Reply to this)

	offcourse 2007-03-26 04:41 am UTC (link)
	I think I'll use the green one. Thanks! (Reply to this)

	atlea 2007-03-26 06:03 am UTC (link)
	Beautiful and simple layouts. :) Gonna add both to memories and use in the future. Thanks! (Reply to this)

	gabbiegirlz 2007-03-26 07:45 am UTC (link)
	Added to mems. :) (Reply to this)

	fenomena 2007-03-26 09:20 am UTC (link)
	Loving the layouts. I'll probably use the blue one soon. ^^ Thanks! (Reply to this)

	eowynlove 2007-03-26 10:16 am UTC (link)
	Snagging the green one. Credited you back! ^^ (Reply to this)

	sweetrapture82 2007-03-26 05:18 pm UTC (link)
	snagging the code for the blue layout, thank you so much! (Reply to this)

(512 comments) - (Post a new comment)

Page 1 of 19
<<	[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19]	>>

Username:		Create an Account Forgot your login or password? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

About

Help

Get Involved

Legal

Store

LJ Labs