S2 Flexible Squares // Grey & Pink

[resplandor]

Style: S2 Flexible Squares
Website: Not required
Default Icon: Optional
Best view: 1024x768 and up
Browser(s) Compatible: IE // Firefox // Opera
Nav Bar?: Yes
Custom Comment Page?: Yes
Work best with: Free & Paid account
**This is not really recommended for plus account.



Full-Size preview | Custom Comments Preview



Overrides for Paid Account | Overrides for free Account

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

body {
background-color: #EDEDED;
text-align: justify;
color: #000000;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
}

.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://img262.imageshack.us/img262/3589/usergreybyexcentriclk2.gif);
padding: 14px 14px 0 2px;
}

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

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

a:hover {
color: #999999!important;
text-decoration: underline!important;
}

p, td {
font-size: 7pt;
}

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

blockquote {
margin-left: 15px 15px;
padding: 5px;
border-left: 1px dashed #dddddd;
border-right: 1px dashed #dddddd;
border-bottom: 1px dashed #dddddd;
border-top: 1px dashed #dddddd;
background-image: url();
background-repeat: repeat;
background-position: top left;
}

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

#content{
width: 669px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border-width: 0px;
border-style: solid;
border-color: #cccccc;
padding: 15px;
}

#maincontent {
margin-top: 15px;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-color: #cccccc;
border-width: 0px;
margin-right: 180px;
text-align: justify;
}

#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #ffffff;
border-color: #cccccc;
border-width: 0px;
border-style: solid;
font-size: 7pt;
font-family: "Tahoma", "Verdana", sans-serif;
color: #000000;
width: 160px;
float:right;
text-align: justify;
}

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

#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: right;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
text-transform: none;
letter-spacing: 3px;
border-style: solid;
border-color: #cccccc;
border-width: 0px;
background-color: #ffffff;
background-image: url("");
color: #000000;
}

/*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: #999999;
}

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

/*title and subtitle*/
.title {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
line-height: 200%;
text-align:left;
top: 10px;
}

.subtitle{
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
top: 10px;
display: none;
}

/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/

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

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

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

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

.subcontent {
}

.entry {
margin: 0px 10px 10px 10px;
padding: 10px;
background-color: #ffffff;
color: #000000;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
text-align: justify;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}

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

.date {
line-height: 200%;
top: 5px;
color: #000000;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

.subject {

padding: 2px;
font-weight: light;
font-size: 7pt;
color:#000000;
font-family: "Tahoma", "Verdana", sans-serif;
text-align: left;
text-transform:uppercase;
background-color: #efefef;
background-image: url('');
background-repeat: repeat;
letter-spacing: 2pt;
}

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

.subject a:hover {
color: none;
}

.datesubject {
background-color: #transparent;
padding: 5px;
}

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

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

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

.currents, .currentmood, .currentmusic {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

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

.comments {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
text-align: right;
background-color: transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

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

div.comments a:hover {
color: #000000!important;
text-decoration: none!important;
}

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

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

/*------------------------------------------------------------
Special friends page and comment page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #cccccc;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
z-index: 15;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
text-align: center;
}

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

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

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

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

div#sidebar a:hover {
color: #000000!important;
text-decoration: none!important;
background-color: #transparent;
}

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

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

.sbarcalendar {
border-color: #999999;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

.sbarcalendarposts {
border-color: #999999;
border-width: 1px;
border-style: dashed;
background-color: #efefef;
text-align: center;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

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

li.sbaritem {
margin: 5px 2px 2px 2px;
padding: 2px 2px 2px 7px;
list-style: none;
background: #efefef;
}

li.sbaritem:hover {
background: #efefef!important;
}

li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 0px;
border-color: #cccccc;
background-color: #efefef;
margin-bottom: 8px;
margin-top: 8px;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
width: 100%;
text-align: right;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
letter-spacing: 3px;
background-color: #ffffff;
color: #000000;
border-color: #cccccc;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}

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

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

.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: #efefef;
padding: 5px;
margin-top: 20px;
}

.userpicfriends {
position: relative;
float: left;
background-color:transparent!important;
padding: 5px;
margin: 10px;
z-index: 15;
border-width:0px!important;
border-color: #cccccc;
border-style: solid;
}

a, a:link, a:visited {
color: #F47590;
text-decoration: none;
font-size:7pt!important;
}

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

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

input, textarea {
background-color: #ffffff;
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", "Verdana", sans-serif;
font-size: 10pt!important;
line-height: 125%;
background-color: #ffffff;
color: #000000;
}

.replytosubject {
font-weight: bold;
}

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

.commentbox {

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

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

.datesubjectcomment a:hover {
color: #000000!important;
text-decoration:none!important;
}

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

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

.skiplinks {
text-align: center;
}

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

.clear {
height: 15px;
}

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

|

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

body {
background-color: #EDEDED;
text-align: justify;
color: #000000;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
margin: 20px 0 20px 0;
}

.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://img262.imageshack.us/img262/3589/usergreybyexcentriclk2.gif);
padding: 14px 14px 0 2px;
}

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

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

a:hover {
color: #999999!important;
text-decoration: underline!important;
}

p, td {
font-size: 7pt;
}

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

blockquote {
margin-left: 15px 15px;
padding: 5px;
border-left: 1px dashed #dddddd;
border-right: 1px dashed #dddddd;
border-bottom: 1px dashed #dddddd;
border-top: 1px dashed #dddddd;
background-image: url();
background-repeat: repeat;
background-position: top left;
}

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

#content{
width: 669px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border-width: 0px;
border-style: solid;
border-color: #cccccc;
padding: 15px;
}

#maincontent {
margin-top: 15px;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-color: #cccccc;
border-width: 0px;
margin-right: 180px;
text-align: justify;
}

#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #ffffff;
border-color: #cccccc;
border-width: 0px;
border-style: solid;
font-size: 7pt;
font-family: "Tahoma", "Verdana", sans-serif;
color: #000000;
width: 160px;
float:right;
text-align: justify;
}

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

#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: right;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
text-transform: none;
letter-spacing: 3px;
border-style: solid;
border-color: #cccccc;
border-width: 0px;
background-color: #ffffff;
background-image: url("");
color: #000000;
}

/*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: #999999;
}

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

/*title and subtitle*/
.title {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
line-height: 200%;
text-align:left;
top: 10px;
}

.subtitle{
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
top: 10px;
display: none;
}

/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/

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

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

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

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

.subcontent {
}

.entry {
margin: 0px 10px 10px 10px;
padding: 10px;
background-color: #ffffff;
color: #000000;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
text-align: justify;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}

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

.date {
line-height: 200%;
top: 5px;
color: #000000;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

.subject {

padding: 2px;
font-weight: light;
font-size: 7pt;
color:#000000;
font-family: "Tahoma", "Verdana", sans-serif;
text-align: left;
text-transform:uppercase;
background-color: #efefef;
background-image: url('');
background-repeat: repeat;
letter-spacing: 2pt;
}

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

.subject a:hover {
color: none;
}

.datesubject {
background-color: #transparent;
padding: 5px;
}

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

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

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

.currents, .currentmood, .currentmusic {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

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

.comments {
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
text-align: right;
background-color: transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

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

div.comments a:hover {
color: #000000!important;
text-decoration: none!important;
}

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

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

/*------------------------------------------------------------
Special friends page and comment page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #cccccc;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
z-index: 15;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic {
text-align: center;
}

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

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

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

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

div#sidebar a:hover {
color: #000000!important;
text-decoration: none!important;
background-color: #transparent;
}

/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/

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

.sbarcalendar {
border-color: #999999;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

.sbarcalendarposts {
border-color: #999999;
border-width: 1px;
border-style: dashed;
background-color: #efefef;
text-align: center;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
}

/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/

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

li.sbaritem {
margin: 5px 2px 2px 2px;
padding: 2px 2px 2px 7px;
list-style: none;
background: #efefef;
}

li.sbaritem:hover {
background: #efefef!important;
}

li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 0px;
border-color: #cccccc;
background-color: #efefef;
margin-bottom: 8px;
margin-top: 8px;
}

/*----------------------------------------------------
footer
----------------------------------------------------------------*/

#footer {
width: 100%;
text-align: right;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: 7pt;
font-weight: normal;
letter-spacing: 3px;
background-color: #ffffff;
color: #000000;
border-color: #cccccc;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}

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

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

.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: 30px;
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.

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: 30px;
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:transparent;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 0px;
border-color: #cccccc;
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.
Also, If you like my work, don't hesitate on adding resplandor to your friend's page :]