S2 Flexible Squares; Blue // Green Romantic

[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?: Yes
Custom Comment Page?: Not this time
Work best with: Free & Paid account





Overrides for Blue Layout

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

body {
background-color: #f5f5f5;
text-align: justify;
color: #999999;
font-family: "lucida sans", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #999999;
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://img262.imageshack.us/img262/3589/usergreybyexcentriclk2.gif);
padding:8px 7px 2px 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: 8px 7px 2px 2px;
}

blockquote {
border: 1px solid #efefef;
padding: 10px;
}

h2 {
font-family: "lucida sans", sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: lowercase;
color: #52bbe7;
}

i {
color: #52bbe7;
}

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

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

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

#content {
border: 1px solid #efefef;
width: 780px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
padding: 0px;
}

#maincontent {
margin-top: 15px;
font-family: "lucida sans", sans-serif;
font-size: 10px;
background-color: #ffffff;
color: #666666;
padding-right: 30px;
margin-right: 180px;
border-right: 1px solid #efefef;
text-align: justify;
}

#sidebar {

padding-top: 5px;
margin-top: 0px;
background-color: #ffffff;
font-size: 10px;
font-family: "lucida sans", sans-serif;
color: #999999;
width: 180px;
float: right;
text-align: justify;
}

/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
width: 97%;
padding: 12px 0px 10px 0px;
margin: 12px 15px 20px 10px;
text-align: center;
font-family: garamond, arial, sans-serif;
font-size: 24pt;
font-weight: normal;
background-color: #ffffff;
color: #999999;
text-transform: lowercase;
font-style: italic;
}

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

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

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

.subtitle{
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: 2px 4px 2px 4px;
}

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

.subcontent {
}

.entry {
margin: 0px 10px 10px 20px;
padding: 10px;
background-color: #ffffff;
color: #999999;
font-family: "lucida sans", sans-serif;
font-size: 10px;
text-align: justify;
}

.userpic {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 3px 0px 0px 7px;
z-index: 15;
border-width: 1px;
border-color: #efefef;
border-style: solid;
}

.date {
border-bottom: 1px dotted #efefef;
line-height: 200%;
margin-left: 0px;
top: 5px;
color: #666666;
font-family: "lucida sans", sans-serif;
font-size: 10px;
}

.subject {
padding-top: 5px;
margin-left: 0px;
color: #52bbe7;
font-weight: normal;
border: none;
font-family: garamond, arial, sans-serif;
font-size: 24pt;
text-transform: lowercase;
font-style: italic;
}

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

.subject a:hover {
color: #52bbe7;
text-decoration: none;
}

.datesubject {
background-color: transparent;
margin-left: 30px;
}

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

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

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

.currents, .currentmood, .currentmusic {
font-family: "lucida sans", sans-serif;
font-size: 10px;
color: #999999;
}

.ljtags{
font-family: "lucida sans", sans-serif;
font-size: 9px;
color: #999999;
margin-top: 10px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "lucida sans", sans-serif;
font-size: 10px;
font-weight: normal;
text-transform: lowercase;
text-align: right;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

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

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

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

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

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: right;
background-color:#ffffff!important;
padding: 5px;
margin: 3px 0px 0px 7px;
z-index: 15;
border-width: 1px;
border-color: #efefef;
border-style: solid;
text-align: center;
font-family: "lucida sans", sans-serif;
font-size: 10px;
}

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

.defaultuserpic {
text-align: center;
}

.defaultuserpic img{
padding: 5px 5px 5px 5px;
border: 1px solid #efefef;
}

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

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

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

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

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

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

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

.sbarcalendar {
background-color: #ffffff;
border: 1px solid #efefef;
text-align: center;
font-family: "tahoma";
font-size: x-small;
padding: 4px;
}

.sbarcalendarposts {
background-color: #f5f5f5;
border: 1px solid #efefef;
text-align: center;
font-family: "tahoma";
font-size: x-small;
padding: 4px;
}

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

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

li.sbaritem{
font-family: "lucida sans", sans-serif;
border-bottom: 1px solid #efefef;
margin: 7px 4px 7px 4px;
font-size: 10px;
text-transform: lowercase;
list-style: none;
}

li.sbartitle{
text-align: center;
color: #52bbe7;
font-weight: normal;
border: none;
font-family: garamond, arial, sans-serif;
font-size: 24pt;
text-transform: lowercase;
font-style: italic;
list-style: none;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
}

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

#footer {
width: 100%;
text-align: center;
font-family: "lucida sans", sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
background-color: #ffffff;
color: #999999;
z-index: 100;
clear: both;
}

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

ul.navfooter li {
border-bottom: 1px solid #efefef;
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: #efefef;
}

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("URLOFYOURIMAGEHERE");
background-repeat: no-repeat;
}




Overrides for Green Layout

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

body {
background-color: #f5f5f5;
text-align: justify;
color: #999999;
font-family: "lucida sans", sans-serif;
font-size: 10px;
margin: 20px 0 20px 0;
}

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

a:hover {
color: #999999;
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://img262.imageshack.us/img262/3589/usergreybyexcentriclk2.gif);
padding:8px 7px 2px 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: 8px 7px 2px 2px;
}

blockquote {
border: 1px solid #efefef;
padding: 10px;
}

h2 {
font-family: "lucida sans", sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: lowercase;
color: #9acd32;
}

i {
color: #9acd32;
}

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

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

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

#content {
border: 1px solid #efefef;
width: 780px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
padding: 0px;
}

#maincontent {
margin-top: 15px;
font-family: "lucida sans", sans-serif;
font-size: 10px;
background-color: #ffffff;
color: #666666;
padding-right: 30px;
margin-right: 180px;
border-right: 1px solid #efefef;
text-align: justify;
}

#sidebar {

padding-top: 5px;
margin-top: 0px;
background-color: #ffffff;
font-size: 10px;
font-family: "lucida sans", sans-serif;
color: #999999;
width: 180px;
float: right;
text-align: justify;
}

/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/

#header {
width: 97%;
padding: 12px 0px 10px 0px;
margin: 12px 15px 20px 10px;
text-align: center;
font-family: garamond, arial, sans-serif;
font-size: 24pt;
font-weight: normal;
background-color: #ffffff;
color: #999999;
text-transform: lowercase;
font-style: italic;
}

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

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

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

.subtitle{
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: 2px 4px 2px 4px;
}

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

.subcontent {
}

.entry {
margin: 0px 10px 10px 20px;
padding: 10px;
background-color: #ffffff;
color: #999999;
font-family: "lucida sans", sans-serif;
font-size: 10px;
text-align: justify;
}

.userpic {
position: relative;
float: right;
background-color: #ffffff;
padding: 5px;
margin: 3px 0px 0px 7px;
z-index: 15;
border-width: 1px;
border-color: #efefef;
border-style: solid;
}

.date {
border-bottom: 1px dotted #efefef;
line-height: 200%;
margin-left: 0px;
top: 5px;
color: #666666;
font-family: "lucida sans", sans-serif;
font-size: 10px;
}

.subject {
padding-top: 5px;
margin-left: 0px;
color: #9acd32;
font-weight: normal;
border: none;
font-family: garamond, arial, sans-serif;
font-size: 24pt;
text-transform: lowercase;
font-style: italic;
}

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

.subject a:hover {
color: #999999;
text-decoration: none;
}

.datesubject {
background-color: transparent;
margin-left: 30px;
}

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

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

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

.currents, .currentmood, .currentmusic {
font-family: "lucida sans", sans-serif;
font-size: 10px;
color: #999999;
}

.ljtags{
font-family: "lucida sans", sans-serif;
font-size: 9px;
color: #999999;
margin-top: 10px;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
font-family: "lucida sans", sans-serif;
font-size: 10px;
font-weight: normal;
text-transform: lowercase;
text-align: right;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
}

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

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

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

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

/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/

.userpicfriends {
position: relative;
float: right;
background-color:#ffffff!important;
padding: 5px;
margin: 3px 0px 0px 7px;
z-index: 15;
border-width: 1px;
border-color: #efefef;
border-style: solid;
text-align: center;
font-family: "lucida sans", sans-serif;
font-size: 10px;
}

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

.defaultuserpic {
text-align: center;
}

.defaultuserpic img{
padding: 5px 5px 5px 5px;
border: 1px solid #efefef;
}

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

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

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

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

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

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

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

.sbarcalendar {
background-color: #ffffff;
border: 1px solid #efefef;
text-align: center;
font-family: "tahoma";
font-size: x-small;
padding: 4px;
}

.sbarcalendarposts {
background-color: #f5f5f5;
border: 1px solid #efefef;
text-align: center;
font-family: "tahoma";
font-size: x-small;
padding: 4px;
}

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

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

li.sbaritem{
font-family: "lucida sans", sans-serif;
border-bottom: 1px solid #efefef;
margin: 7px 4px 7px 4px;
font-size: 10px;
text-transform: lowercase;
list-style: none;
}

li.sbartitle{
text-align: center;
color: #9acd32;
font-weight: normal;
border: none;
font-family: garamond, arial, sans-serif;
font-size: 24pt;
text-transform: lowercase;
font-style: italic;
list-style: none;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
}

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

#footer {
width: 100%;
text-align: center;
font-family: "lucida sans", sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
background-color: #ffffff;
color: #999999;
z-index: 100;
clear: both;
}

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

ul.navfooter li {
border-bottom: 1px solid #efefef;
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: #efefef;
}

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("URLOFYOURIMAGEHERE");
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: Right
-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 and tag 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_


If you have any question concerning this layout make sure to check the FAQ section before asking anything.