s2 flexible squares - blue swirls

[presents]

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 journal titles, type something in the subtitle box. This will show up where "presents@lj.com" is on the preview. It is important that you type whatever you want to show up in the subtitle box!
4. Under "Select a New Theme", type "Flexible Squares" in the Search box.
5. Click "Apply Theme" directly underneath the first search result.
6. Scroll down to "Choose a Page Setup", and click "Apply Layout" under "2 Column (sidebar on right)".
7. Click the button that says "Customize Selected Theme".
8. Under "Customize Your Theme", click "Text", then the light blue box entitled "Comments". More options should appear.
9. Change "Link text to leave a comment" to "comment?" and "Link text to read comments" to "#".
10. 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".
11. Click "Custom CSS" on the left. Change "Use layout's stylesheet(s)" to Yes!. This is extremely important!
12. Copy and paste the following into the custom stylesheet box and click "Save Changes":

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

a, a:link, a:visited, a:active {
color: #4ABFD4;
text-decoration: none;
}

a:hover, a:hover b, a:hover strong {
color: #C0C0C0;
text-decoration: none;
}

strong, b {
color: #249EB8;
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: 764px;
background-color: #ffffff;
padding: 0px;
border-width: 0px;
align: center;
}

#sidebar {
float: left;
width: 175px;
background-color: #E3F7FB;
margin: 0 0 0 16px;
padding-right: 5px;
border-width: 0px;
border: 0px;
}

#maincontent {
float: right;
width: 568px;
margin: 0;
padding-top: 5px;
border: none;
background-color: #ffffff;
}

#header {
width: auto;
padding: 7px 0 53px 0;
line-height: 14px;
background-color: transparent;
background-image: url(http://i.imgur.com/gELcJsH.gif);
text-transform: lowercase;
font-family: garamond;
font-style: italic;
font-size: 20pt;
font-weight: normal;
letter-spacing: -1px;
color: #b6b6b6;
text-align: center;
border-width: 0px;
}

#footer {
clear: both;
width: auto;
padding: 3px;
text-align: center;
border: none;
background-color: #E3F7FB;
border-left: solid #ffffff 6px;
border-right: solid #ffffff 6px;
border-top: none;
border-bottom: none;
}

.entry {
background-color: transparent;
margin-left: 3px;
color: #636363;
line-height: 12pt;
font-family: tahoma, "trebuchet ms", verdana, arial, sans-serif;
font-size: 8pt;
line-height: 14pt;
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-bottom: 0px;
}

.userpicfriends {
padding: 5px;
background-color: #ffffff !important;
border-style: solid;
border-width: 1px;
border-color: #E5E5E5;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
}

.userpiccomment {
padding: 5px;
background-color: #ffffff;
border: 1px solid #E5E5E5;
}

.userpicfriends a font {
color: #444444;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
}

.date {
color: #c0c0c0;
background-color: transparent;
border-width: 0px;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 7pt;
text-transform: lowercase;
}

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

.subject {
color: #C0C0C0;
font-weight: normal;
background-color: transparent;
border: none;
font-family: garamond, arial, sans-serif;
font-size: 22pt;
text-transform: lowercase;
font-style: italic;
background: url(http://i.imgur.com/nYM0lce.gif) top left no-repeat;
margin: 0 0 0 125px;
padding: 4px 0 0 32px;
}

.subject a, .subject a:link, .subject a:visited {
color: #C0C0C0;
}

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

span.ljuser {
background:url(http://i.imgur.com/9rT5goy.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;
text-transform: lowercase;
font-family: garamond;
font-style: italic;
font-size: 20pt;
font-weight: normal;
color: #249EB8;
text-align: center;
letter-spacing: -1px;
background-color: transparent;
}

div#header a:hover {
padding: 9px;
color: #A4DCEC;
background-color: transparent;
border-bottom: 0px;
}

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

div#footer a:hover {
color: #A4DCEC;
text-decoration: none;
}

.title {
display: none;
}

.subtitle {
font-family: georgia, times new roman, arial, verdana, sans-serif;
color: #ffffff;
font-size: 55pt;
font-weight: normal;
font-style: normal;
position: relative;
top: -62px;
align: center;
line-height: 0px;
}

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

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

.ljtags {
margin-top: 10px;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #249EB8;
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 #686868 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 #686868 solid;
font-weight: normal;
text-transform: lowercase;
}

.currents, .currentmusic, .currentmood, .currentlocation {
color: #c0c0c0;
background-color: transparent;
border-width: 0px;
font-family: verdana, arial, sans-serif;
font-size: 7pt;
text-transform: lowercase;
}

.comments {
text-transform: lowercase;
font-family: georgia, verdana, arial sans-serif;
font-size: 14pt;
color: #249EB8;
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: #249EB8;
}

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

div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {
color: #249EB8;
}

div#sidebar a:hover {
color: #75CDDD;
}

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: tahoma, verdana, arial, sans-serif;
font-size: 8pt;
color: #249EB8;
line-height: 24px;
text-transform: lowercase;
border: none;
border-bottom: 1px #B8EBF2 solid;
padding-left: 4px;
display: block;
}

li.sbaritem a:hover, a:hover visited, a:hover b {
text-decoration: none;
background-color: #D2F3F8;
border-bottom: 1px #B8EBF2 solid;
}

li.sbartitle {
background-color: transparent;
border-bottom: none;
border-left: solid #F5FEFF 6px;
border-right: none;
border-top: none;
padding: 4px 4px 0 4px;
margin: 5px;
font-family: tahoma, verdana, arial, sans-serif;
text-transform: lowercase;
font-size: 7pt;
text-align: left;
color: #249EB8;
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;
font-family: tahoma, verdana, arial, sans-serif;
font-size: 7pt;
line-height: 12pt;
color: #686868;
}

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

.sbarcalendarposts {
background-color: #ffffff;
border: 1px solid #249EB8;
text-align: center;
font-family: Tahoma;
font-size: 10px;
padding: 4px;
}

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

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

ul.navfooter li {
color: #249EB8;
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: verdana, sans-serif;
font-size: 8pt;
}

.commentreply {
color: #585858;
font-face: verdana, sans-serif;
font-size: 7pt;
line-height: 12pt;
}

.box {
border-width: 0px;
background-color: #ffffff;
font-family: verdana, sans-serif;
font-size: 7pt;
font-weight: normal;
color: #585858;
margin-left: 15px;
line-height: 13pt;
}

input {
background-color: #ffffff;
border: 1px #e5e5e5 solid;
color: #686868;
font-size: 8pt;
font-face: verdana, sans-serif;
line-height: 13pt;
}

.commentboxpartial {
background-color: #ffffff;
color: #585858;
border: 1px #e5e5e5 solid;
margin-left: 30px;
font-size: 7pt;
font-family: verdana, sans-serif;
color: #686868;
}

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
width: 113px;
height: 220px;
background-repeat: no-repeat;
background-image: url(http://i.imgur.com/FhRKMj5.gif);
}

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

13. 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?
If you want to add a header, you'll have to get rid of the swirl and title. First, find this:

.subtitle {
font-family: georgia, times new roman, arial, verdana, sans-serif;
color: #ffffff;
font-size: 55pt;
font-weight: normal;
font-style: normal;
position: relative;
top: -62px;
align: center;
line-height: 0px;
}

Replace it with this:

.subtitle {
display: none;
}

Then, find this:

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
width: 113px;
height: 220px;
background-repeat: no-repeat;
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/bhead.gif);
}

Replace the current URL with the URL of your image. Change the height and width tags to match your image, except (this is important!) add about 18px to the height, so there is space between your header and the links box. You'll need to upload your image to the internet. I suggest tinypic.com. For best results, use an image that is 764px wide. See here for some quick info on how to make rounded corners.

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

How do I remove the quotes (") in front of the title?

Just find this:

.subject {
color: #C0C0C0;
font-weight: normal;
background-color: transparent;
border: none;
font-family: garamond, arial, sans-serif;
font-size: 22pt;
text-transform: lowercase;
font-style: italic;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/bquotes.gif) top left no-repeat;
margin: 0 0 0 125px;
padding: 4px 0 0 32px;
}

And replace with this:

.subject {
color: #C0C0C0;
font-weight: normal;
background-color: transparent;
border: none;
font-family: garamond, arial, sans-serif;
font-size: 22pt;
text-transform: lowercase;
font-style: italic;
padding: 4px 0 0 4px;
}

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.

Credit to miniaturess for inspiration for this layout.