iconnaissances | S2 Flexible Squares: "Shahryar's Stables"

So this post is going to my first ever foray into making layouts and I'm quite relieved to say that I haven't managed to destroy LiveJournal in the process. \o/ Enjoy!

Layout Style: S2 Flexible Squares
Account Types: Free, Plus, and Paid/Permanent
Best view: Firefox or Google Chrome
Browser(s) Compatible: Firefox, IE, Chrome, and Safari
Custom Comment Pages: Yes
Work with Nav bar?: Yes
Work with Ads? Yes
Please Credit:

iconnaissances
Preview:

Full Image | Live

Instructions

1) Go to the LJ Customize page. Make sure you are using the S2 styles. Search for Flexible Squares and select the Blue Gray theme. Then scroll down past the themes to the "Page Setup" area. If you have a Plus account, choose Vertical ad placement so that the header doesn't explode on you. :P Then, choose 2 Column (sidebar on right).

2) Go to Customize Journal Style: Custom CSS. Select the following options:

Use layout's stylesheet(s): No
Use layout's stylesheet(s) when including custom external stylesheet: No
Use external stylesheets: No
Custom external stylesheet URL: [leave blank]

Copy+Paste the following code in the large "Custom stylesheet" box:

/*-------S2 FLEXIBLE SQUARES: SHAHRYAR'S STABLES
available at http://community.livejournal.com/iconnaissances/
Stylesheet by http://community.livejournal.com/cartonage, Header by PeHaa.com, Tiny Icons by Pinvoke.com-------*/
                body	{
		background-color: #edc71c;
                background-image:url(http://img40.imageshack.us/img40/748/01backgroundshort.png);
                background-repeat:repeat-x; 
		text-align: center;
		color: #000000;
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		margin: 0 px 0 0px 0;
		}

a, a:link, a:visited {
		color: #19b7c5;
		text-decoration: none;
		}

a:hover {
		color: #95904e;
		text-decoration: dashed;
		}

blockquote {
                border:2px
                border-color: #edc71c;
                border-style: double;
                padding:10px;
                color: #19b7c5;
                font-family: "Franklin Gothic Book"
                font-size: 11px;
                }

code, kbd, pre, tt {
	    	font-family: monospace;
		}
    
        .ljtags {margin:30px 0px 0px 0px;
               width:400px;
               padding:10px;
               color:#edc71c;
               font-size:10px;
               }

#content
	{
		width: 750px;
		background-image:url(http://img136.imageshack.us/img136/1484/01contentbackground.png);
                background-repeat:repeat-y; 
                margin-left: auto; margin-right: auto; 
		margin-top:0px;
               	border-width: 1px;
		border-style: solid;
		border-color: #edc71c;
		padding: 15px;
	}

#maincontent {
		margin-top: 15px;
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		color: #ffffff;
		border-style:transparent;
		border-color: #ffffff;
		border-width: 1px;
		margin-right: 200px;
		text-align: left;
		}

#sidebar {

padding-top: 10px;
		margin-top: 15px;
		background-color: transparent;
		border-color: #ffffff;
		border-width: 1px;
		border-style: transparent;
	  	font-size: 11px;
		font-family: "Helvetica", sans-serif;
	  	color: #4e4c2b;
		width: 180px;
		float: right;
		text-align: center;
		}

#header {
		width: 100%;
		padding: 10px 0px 20px 0px;
		margin: 0px;
		text-align: right;
		font-family: "Helvetica", sans-serif;
		font-size: 10px;
		font-weight: bold;
		letter-spacing: 2px;
		border-style: transparent
		border-color: #999999;
		border-width: 1px;
		color: #19b7c5;
		}

.headerimage {
                position: center;
                width:  890px; 
                height: 417px; 
                margin-left: auto; 
                margin-right: auto; 
                margin-bottom: 0px;
                background-image: url("http://img40.imageshack.us/img40/4116/01header.png"); /* Header image URL */
                background-repeat: no-repeat;}
                body { margin: 0px 0px 20px 0px; }.

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
		color: #19b7c5;
	}

div#header a:hover, div#footer a:hover {
		color: #95904e;
		text-decoration: none;
	}

.title	{
		font-family: "Helvetica", sans-serif;
		font-size: 30px;
		font-weight: normal;
		line-height: 200%;
		top: 10px;
		}

.subtitle{
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		font-weight: normal;
		top: 7px;
		}

ul.navheader
		{
		padding: 0px;
		margin: 0px;
		}

ul.navheader li  {
		display: inline;
		padding: 0 3px 0 3px;
		}

.subcontent {
	}

.entry	{
		margin: 0px 10px 10px 30px;
		padding: 10px;
		background-color: #ffffff;
		color: #4e4c2b;
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		text-align: left;
		border-width: 1px;
		border-color: #ffffff;
		border-style: transparent;
		}

.userpic {
		position: relative;
		float: left;
                background-color: #ffffff;
		padding: 5px;
		margin: 10px;
		z-index: 15;
		border-width: 3px;
		border-color: #edc71c;
		border-style: solid;
		}

.date {
		line-height: 200%;
		top: 5px;
		color: #ffffff;
		font-family: "Helvetica", sans-serif;
		font-size: 11px;
		}

.subject {
		font-weight: bold;
		padding: 10px;
		color: #ffffff;
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		}

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

.subject a:hover {
		color: #95904e;
		}

.datesubject {
		background-image:url(http://img19.imageshack.us/img19/9259/01datesubject.png);
		padding: 5px;
		}

.entry ul li
		{
		padding-left: 5px;
		margin-left: 15px;
		}

.entry ol li
		{
		padding-left: 5px;
		margin-left: 15px;
		}

.currents, .currentmood, .currentmusic {
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		}

.comments {
		text-transform: uppercase;
                font-family: "Tahoma", sans-serif;
		font-size: 13px;
		text-align: center;
		background-image: url("http://img81.imageshack.us/img81/3348/01commentsline.png");
		padding: 0px 5px 0px 5px;
		position: relative;
		top: 15px;
		}

div.comments a, div.comments a:link, div.comments a:visited{
		color: #ffffff;
	}

div.comments a:hover {
		color: #edc71c;
		text-decoration: none;
	}

.separator{
		/* for formatting separators between entries */
		height: 35px;
	}

.userpicfriends {
		position: relative;
		float: left;
		padding: 5px;
		margin: 10px;
		text-align: center;
		border-style: solid;
		border-width: 3px;
		border-color: #edc71c;
                background-color: #ffffff !important;
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		z-index: 15;
		}

.defaultuserpic {
		text-align: center;
		}

.defaultuserpic img{
                padding:5px;
                background-color:#ffffff; 
                border:3px solid #edc71c; 
                }

.sbarheader {
		padding: 0px 5px 0px 5px;
		}

.sbarbody {
		padding: 0px 4px 0px 4px;
		}

.sbarbody2 {
		padding: 0 15px 0 15px;
	}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
                 color: #19b7c5;
         }

div#sidebar a:hover {
                 color: #484627;
                 text-decoration: none;
         }

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

.sbarcalendar {
		border-color: #95904e;
		border-width: 1px;
		border-style: transparent;
		text-align: center;
		font-family: "Tahoma", sans-serif;
		font-size: 10px;
		}

.sbarcalendarposts {
		border-color:  #edc71c;
		border-width: 1px;
		border-style: solid;
		background-color: #ffffff;
		text-align: center;
		font-family: "Tahoma", sans-serif;
		font-size: 10px;
		}

ul.sbarlist
	{
		padding-left: 0px;
		margin-left: 0px;
		list-style: none;
	}

li.sbaritem
	{
		padding-left: 15px;
		list-style: none;
                text-align: center;	
                font-size: 13px;}

li.sbartitle
	{
		padding-left: 15px;
		list-style: none;
		border-style: transparent;
		border-width: 1px;
		border-color: #19b7c5;
		margin-bottom: 10px;
		margin-top: 10px;
                font-size: 17px;
                font-weight: bold;
	}

#footer {
		width: 100%;
		text-align: center;
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 1px;
		color: #19b7c5;
		border-color: #999999;
		border-width: 1px;
		border-style: transparent;
		z-index: 100;
		clear: both;
		}

ul.navfooter{
		padding: 0px;
		margin: 0px;
		}

ul.navfooter li  {
		display: inline;
		margin: 0 5px 0 5px;
		}

.clearfoot {
		clear: both;
		}

ul.year {
		text-align: center;
		padding-bottom: 40px;
		}

ul.year li {
                color: #4e4c2b;
		display: inline;
		}

table.yeartable {
                color: #edc71c;
		margin-left: auto;
		margin-right: auto;
		}

table.yeartable td.yeardate, table.yeartable td.yearday {
		border-width: 1px;
		border-style: solid;
		border-color: #4e4c2b;
		}

table.yeartable td.yearday {
		color: #4e4c2b;
                background-color: #ffffff;
		text-align: center;
		}

td.yearmonth {
                color: #edc71c;
		border-style: none;
		}

.datesubjectcomment {
			padding: 5px;
			margin-top: 20px;
                        color: #4e4c2b
			}

.userpiccomment {
		position: relative;
		border-width: 5px;
		border-style: solid;
		border-color: #edc71c;
		background-color: #ffffff;
		top: -30px;
		left: 0px;
		padding: 5px;
		margin: 10px 10px -20px 10px;
		z-index: 15;
		float: left;
		border-width: 3px;
		border-color: #edc71c;
		border-style: solid;
		}

.box {
		border-style: solid;
		border-width: 1px 0px 0px 0px;
		border-color: #999999;
		padding: 10px;
		clear: left;
		}

input, textarea {
		background-color: #a0eaf1;
		color: #000000;
		}

textarea.textbox  {
          	width: 100% !important;
   		}

.reply	{
		position: relative;
		margin: 20px 30px 10px 30px;
		padding: 25px 10px 10px 10px;
		text-align: left;
		font-family: "Tahoma", sans-serif;
		font-size: 11px;
		line-height: 125%;
		background-color: #a0eaf1;
		color: #000000;
		}

.replytosubject {
		font-weight: bold;
		}

.commentreply {
		position: relative;
		margin: 10px;
		font-size: 11px;
		font-family: "Tahoma", sans-serif;
		color: #000000;
		}

.commentbox {

border-color: #fffff;
		border-width: 1px;
		border-style: transparent;
		padding: 10px;
		margin: 10px;
		}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
		color: #1eb7c5;
		}

.datesubjectcomment a:hover {
		color: #4e4c2b;
		}

.commentboxpartial {
		border-color: #ffffff;
		border-width: 1px;
		border-style: transparent;
		padding: 10px;
		margin: 10px;
		background-color: #ffffff;
		}

.commentinfo {
		background-color: #a0eaf1;
		margin-top: 10px;
		width: 100%;
		}

.skiplinks {
		text-align: center;
		}

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
		height: 15px;
		}
.ljuser img { 
width: 0px;
height: 0px;
background-repeat: no-repeat;
background-color: transparent;
/* so that IE users will still see an image */
background-image: url(http://img188.imageshack.us/img188/194/firekd.png); 
padding: 16px 0px 0 16px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://img188.imageshack.us/img188/194/firekd.png);
padding: 16px 0px 0px 16px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-image: url(http://img43.imageshack.us/img43/1191/firebig.png);
padding: 16px 0px 0px 16px;
}

div.ContextualPopup {
margin: 5px 0 0 20px;
font: normal 11px "Helvetica", "Tahoma", sans-serif !important;
}

div.ContextualPopup img {
border: 3px solid #19b7c5;
}

div.ContextualPopup div.Inner {
background-color: #cac270!important;
color: #ffffff !important;
border: 1px solid #928c51;
padding: 5px;
width: 250px;
}

div.ContextualPopup .Content {
padding: 2px 4px 6px 4px;
margin-right: 50px;
line-height: 1.4;
}

div.ContextualPopup .Relation {
font-weight: bold !important;
}

div.ContextualPopup .Content .OnlineStatus {
font-weight: bold;
}

div.ContextualPopup .Userpic {
padding: 4px 4px 0 0;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: bold;
color: #ffffff !important;
}

html body
{
padding-top: 0px !important;
}

#lj_controlstrip
{
display: auto !important;
}

Please save and upload these to your own server/image host and then replace the corresponding links in the layout code.

Image Links :

http://img40.imageshack.us/img40/748/01backgroundshort.png
http://img136.imageshack.us/img136/1484/01contentbackground.png
http://img40.imageshack.us/img40/4116/01header.png
http://img19.imageshack.us/img19/9259/01datesubject.png
http://img81.imageshack.us/img81/3348/01commentsline.png
http://img188.imageshack.us/img188/194/firekd.png
http://img43.imageshack.us/img43/1191/firebig.png

Optional: You can control what you want/don't want on your sidebar by customizing your sidbar options via Sidebar Options and the Links List Options.

Credits:

Base stylesheet:

cartonage
Header: PeHaa
Tiny Icons: Pinvoke

------------------------

If you have any questions or problems about this layout, feel free to ask and I will try my best to find a solution.

If you wish to customize this layout to your personal preferences or perhaps modify for another LJ-esque journal site, you're welcome to do so (but please keep the credits for the header and tiny icons in the code). However, I will not be able to help you modify the layout. Sorry! :P