S2 Flexible Squares // Elegant (w/o Sidebar)

[resplandor]

Style: S2 Flexible Squares
Website: Not required but it looks better if you define one
Default Icon: Optional
Best view: 1024x768 and up
Browser(s) Compatible: IE // Firefox // Opera
Nav Bar?: No
Custom Comment Page?: Yes
Work best with: Free, Plus & Paid account



Full-Size preview | Custom Comments Preview



Overrides for Plus & Paid Accounts

/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Flexible Squares
Works best with: Free, Plus & Paid accounts
Browsers: Firefox // IE // Opera.
-----------------------------------------------------*/

body {
background-color: #333333;
text-align: center;
color: #999999;
font-family: "Tahoma", "arial" , sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #333333;
text-decoration: none;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://img136.imageshack.us/img136/84/user2s2em7.gif);
padding: 15px 15px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://img136.imageshack.us/img136/84/user2s2em7.gif);
padding: 15px 15px 0 2px;
}

p, td{
font-size: 11px;
}

blockquote {
font-size:11px;
margin-left: 10px;
padding: 5px;
border-left:3px solid #dddddd;
background-image: url();
background-repeat: repeat;
background-position: top left;
}

code, kbd, pre, tt {
font-family: monospace;
}

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content{
width:600px;
margin-left: auto; margin-right: auto;
background-color:#ffffff;
padding: 0px;
}

#maincontent {
width: 600px
padding-top: 10px;
margin-top: 5px;
font-family: "Trebuchet MS" , sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #000000;
margin-right: auto; margin-left: auto;
text-align: left;
}

#sidebar {
display: none;
}

/*-----------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------*/

#header {
width: auto;
padding: 10px 0px 10px 0px;
margin: 0px;
line-height: 30px;
text-align:center;
font-weight: normal;
font-family: "tahoma", "arial", sans-serif;
font-size: 12px;
text-transform: uppercase;
background-color: transparent;
border-width: 1px 0px 1px 0px;
border-style: solid;
color:#efefef!important;
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #70A4B5;
padding: 12px;
text-align: center;
}

div#header a:hover, div#footer a:hover {
color: #70A4B5;
padding: 12px;
background-color: #efefef;
text-decoration: none;
}

/*title and subtitle*/
.title {
display: none;
}

.subtitle{
display:none;
}

/*-----------------------------------------------------------------------------
Header - Navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

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

ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
color: #999999!important;
}

/*-----------------------------------------------------------------------------
Entry
------------------------------------------------------------------------*/

.subcontent {
}

.entry {
margin: 0px 10px 10px 40px;
padding: 5px;
background-color: #ffffff;
color: #999999;
font-family: "Tahoma", "arial" , sans-serif;
font-size: 11px;
text-align: justify;
}

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

.date {
line-height: 200%;
padding-top: 20px;
color: #666666;
font-family: "tahoma", "arial" , sans-serif;
font-size: 11px;
border-bottom: 1px dashed #cccccc;
}

.subject {
font-weight: bold;
padding-top: 0px;
color: #70A4B5;
font-family: "Tahoma", "arial" , sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
}

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

.subject a:hover {
color: #333333;
}

.datesubject {
background-color: #ffffff;
padding: 0px;
}

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

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

/*---------------------------------------------------------------------
Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
font-family: "Tahoma", "arial" , sans-serif;
font-size: 11px;
color: #999999;
font-weight: normal!important;
}

/*---------------------------------------------------------------------
Entry Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Tahoma", "verdana" , sans-serif;
font-size: 13px;
text-align: right;
text-transform: uppercase;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #70A4B5;
border-bottom: 1px solid #efefef;
}

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

/*---------------------------------------------------------------------
Entry Separator
------------------------------------------------------------------------*/

.separator{
/* for formatting separators between entries */
height: 15px;
border-bottom: 1px solid #efefef;
}

/*------------------------------------------------------------
Friends page customization
-------------------------------------------------------------------------------*/

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

/*----------------------------------------------------
Footer
----------------------------------------------------------------*/

#footer {
width: 100%;
text-align: center;
font-family: "Tahoma", "arial", sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent;
color: #999999;
z-index: 100;
clear: both;
}

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

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

}

.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive 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-width: 1px;
border-style: solid;
border-color: #999999;
}

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

td.yearmonth {
border-style: none;
}

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/

.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
border-bottom: 1px dashed #cccccc;
}

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

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

input, textarea {
background-color: #ffffff;
font: 11px tahoma,arial,sans-serif;
color: #999999!important;
border: 1px solid #dedede;
padding: 0px;
margin-top: 1px;
}

select {
background-color: #ffffff;
font: 10px tahoma,arial,sans-serif;
color: #999999!important;
border: 1px solid #efefef;
padding: 0px;
margin-top: 1px;
}

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

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

.replytosubject {
font-weight: bold;
}

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

.commentbox {

border-color: #efefef;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #70A4B5;
}

.datesubjectcomment a:hover {
color: #999999;
}

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

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

.skiplinks {
text-align: center;
}

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

.clear {
height: 15px;
}

.headerimage {
position: top center;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0 !important;
background-image: url("");
background-repeat: no-repeat;
}

Overrides for Free Accounts

/*---------------------------------------------------
Stylesheet By: Resplandor@livejournal.com
Style: S2 Flexible Squares
Works best with: Free, Plus & Paid accounts
Browsers: Firefox // IE // Opera.
-----------------------------------------------------*/

body {
background-color: #333333;
text-align: center;
color: #999999;
font-family: "Tahoma", "arial" , sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #333333;
text-decoration: none;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://img136.imageshack.us/img136/84/user2s2em7.gif);
padding: 15px 15px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://img136.imageshack.us/img136/84/user2s2em7.gif);
padding: 15px 15px 0 2px;
}

p, td{
font-size: 11px;
}

blockquote {
font-size:11px;
margin-left: 10px;
padding: 5px;
border-left:3px solid #dddddd;
background-image: url();
background-repeat: repeat;
background-position: top left;
}

code, kbd, pre, tt {
font-family: monospace;
}

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content{
width:600px;
margin-left: auto; margin-right: auto;
background-color:#ffffff;
padding: 0px;
}

#maincontent {
width: 600px
padding-top: 10px;
margin-top: 5px;
font-family: "Trebuchet MS" , sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #000000;
margin-right: auto; margin-left: auto;
text-align: left;
}

#sidebar {
display: none;
}

/*-----------------------------------------------------------------------------
Header
--------------------------------------------------------------------------------*/

#header {
width: auto;
padding: 10px 0px 10px 0px;
margin: 0px;
line-height: 30px;
text-align:center;
font-weight: normal;
font-family: "tahoma", "arial", sans-serif;
font-size: 12px;
text-transform: uppercase;
background-color: transparent;
border-width: 1px 0px 1px 0px;
border-style: solid;
color:#efefef!important;
}

/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #70A4B5;
padding: 12px;
text-align: center;
}

div#header a:hover, div#footer a:hover {
color: #70A4B5;
padding: 12px;
background-color: #efefef;
text-decoration: none;
}

/*title and subtitle*/
.title {
display: none;
}

.subtitle{
display:none;
}

/*-----------------------------------------------------------------------------
Header - Navigation
--------------------------------------------------------------------------------*/

/* header -- links to views; title of journal; subtitle of journal */

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

ul.navheader li {
display: inline;
padding: 0 0px 0 0px;
color: #999999!important;
}

/*-----------------------------------------------------------------------------
Entry
------------------------------------------------------------------------*/

.subcontent {
}

.entry {
margin: 0px 10px 10px 40px;
padding: 5px;
background-color: #ffffff;
color: #999999;
font-family: "Tahoma", "arial" , sans-serif;
font-size: 11px;
text-align: justify;
}

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

.date {
line-height: 200%;
padding-top: 20px;
color: #666666;
font-family: "tahoma", "arial" , sans-serif;
font-size: 11px;
border-bottom: 1px dashed #cccccc;
}

.subject {
font-weight: bold;
padding-top: 0px;
color: #70A4B5;
font-family: "Tahoma", "arial" , sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
}

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

.subject a:hover {
color: #333333;
}

.datesubject {
background-color: #ffffff;
padding: 0px;
}

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

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

/*---------------------------------------------------------------------
Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
font-family: "Tahoma", "arial" , sans-serif;
font-size: 11px;
color: #999999;
font-weight: normal!important;
}

/*---------------------------------------------------------------------
Entry Comments
------------------------------------------------------------------------*/

.comments {
font-family: "Tahoma", "verdana" , sans-serif;
font-size: 13px;
text-align: right;
text-transform: uppercase;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #70A4B5;
border-bottom: 1px solid #efefef;
}

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

/*---------------------------------------------------------------------
Entry Separator
------------------------------------------------------------------------*/

.separator{
/* for formatting separators between entries */
height: 15px;
border-bottom: 1px solid #efefef;
}

/*------------------------------------------------------------
Friends page customization
-------------------------------------------------------------------------------*/

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

/*----------------------------------------------------
Footer
----------------------------------------------------------------*/

#footer {
width: 100%;
text-align: center;
font-family: "Tahoma", "arial", sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: normal;
letter-spacing: 1px;
background-color: transparent;
color: #999999;
z-index: 100;
clear: both;
}

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

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

}

.clearfoot {
clear: both;
}

/*----------------------------------------------------
Archive 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-width: 1px;
border-style: solid;
border-color: #999999;
}

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

td.yearmonth {
border-style: none;
}

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

.clear {
height: 15px;
}

.headerimage {
position: top center;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0 !important;
background-image: url("");
background-repeat: no-repeat;
}

Instructions:
1. Manage > Customize
2. Select S2 under the Style System section. (For users who don't know HTML or CSS, or make only minor alterations). Click Save Changes.
3. Choose Flexible Sqares from the drop-down-menu. Save Changes.
4.Choose Custom Options and go to Sidebar:
-Show the sidebar? Yes
-Set sidebar position: Left
-Show the default user picture on the sidebar? Up to you.
-Show the blurb/free text in the sidebar? Yes
-Edit link list, Summary list as you want. Save Changes.

5. Go to Custom CSS:
- make sure all of the drop down menus are set to NO
- Paste in the stylesheet into the Custom stylesheet box
Save Changes.

Extra Instructions for Plus Users
1. Manage > Account Status
2. Choose "Upgrade to Plus"
3. After LJ loads the Ads Settings page, fill your general information (Optional)
4. Scroll down to the Ad Layout and choose "Vertical Placement" from the drop-down menu.
5. Save Changes.
**This is so the Ads only show at the bottom of the page. I haven't tried with "Ads between entries" but it could work as well.

LJ user icon by _excentric_


FAQ

>>How do I credit?
Go to manage > Info and add this code:

Overrides by

>>Can I change the colors/add a header/edit the overrides?
Yes, you can do minor and major changes to the overrides, as long as you don't remove the credit at the top of the overrides and also credit me on your userinfo or link back to this post anywhere in your journal.

>>How do I add a header?
To add a header, locate the .headerimage, it's normally on the Misc section right at the bottom of the overrides (that's where I place it anyway.)
it should look like this:

.headerimage {
position: top center;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0 !important;
background-image: url("URLOFYOURHEADERGOESHERE");
background-repeat: no-repeat;
}

1- Upload your header on a server (I recommend photobucket or imageshack) and the paste the direct URL where it says background-image.
2- Change the width and height to match with your header and you're done! Now, I recommend everyone that in case of adding a header be sure to make it the same width as the layout or it will look messed up unless you also change the width of the content.

>>How do I hide the entries icon?
To hide the icon on the recent page locate this code:

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

And replace it for this:

.userpic {
display:none;
}

If you have any question concerning this layout that is not listed above, feel free to drop a comment with it, I'll try to answer as soon as I can.
If you like my work and/or are taking this, comment & don't forget to credit.

EDIT: A version of this layout with a sidebar can be found here