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

Flat | Top-Level Comments Only

That's really cool! I like it :D

this is gorgeous! :D adding to memories, thank you!

WTF!!!THIS IS AWESOME

I like this saving for future use :)

It's so pretty!

I adore it! I'm using it, thanks!

Very nice!

Using it now! Thank you!

this is gorgeous!
will credit when used <3.

I totally love it, but are there supposed to be two white bars on either side of the header image? They almost look like pillars..? I'm just asking since it doesn't exactly match the screenshot. Also, I'm using IE right now, which may or may not have somthing to do with it.

Hmm, I did check it in IE before posting and it worked on my computer and I just checked your journal on Firefox and it looks fine.

Do you happen to have an older version of IE? I think older IE versions don't display .png transparency properly so instead of the shadow part of the header going transparent, it may just be making the shadow on a white background. If that's the case, you may just have to upgrade to whatever the newest version is. Hope that helps!

Oh! I thought that might it. I'm on a computer at the library and that must have an old IE browser. Thanks!

I like this a lot! Will credit when used :D

I love this. I am using it right now (and have given credit). =)

took it and gave credit. i was struck when i first saw this and knew i had to have it.

Very pretty - will credit when used :)

Thank you so much!
Gave credit.

this is gorgeous! have taken and have credited, will upload my own images now, thank you :)

This post is really old, but just dropping by to say I just snagged this and have credited you in my userinfo! I absolutely love this layout!

Thanks so much for this beautiful layout! It's pretty much exactly what I wanted, and I never dreamed that I would find what was basically the perfect layout for me. ♥
I've used it here and on the journal of the same name at Dreamwidth. Thanks again!

Old post, but I'm stopping by to tell you that this is SUCH a gorgeous layout, and that I'm memming it for future use. It's wonderful. : ) Thank you so much for sharing it.

very late, but i was hunting for a new layout, and this looks simply beautiful.
will credit as soon as i get it up, thanks! <3

S2 Flexible Squares: "Shahryar's Stables"

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject