S2 Flexible Squares: Copies Yesterday

[papercolour]

Screenshot | Live Preview

S2 Flexible Squares
Best viewed in Mozilla Firefox
Works for Basic, Plus, and Paid accounts


Sidebar on right:
/*------------------------------------
Copies Yesterday by novaless.lj.com
For S2 Flexible Squares
------------------------------*/

/*------------------------------------
General
------------------------------*/

a {
color: #836F90;
text-decoration: none;
}

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

blockquote {
padding: 7px;
border: 1px solid #d9d9d9;
background-color: #ffffff;
color: #666666;
}

blockquote:hover {
border: 1px solid #E9E763;
background-color: #ffffff;
}

code {
background-color: #ffffff;
display: block;
color: #666666;
padding: 7px;
border: 1px dashed #d9d9d9;
}

/*------------------------------------
Body
------------------------------*/

body {
background-color: #FFFFFF;
text-align: justify;
color: #404040;
font-family: arial;
font-size: 11px;
line-height: 16px;
margin: 50px 0 0 0;
}

.clear {
display: none;
}

#content {
width: 100%;
margin: auto;
padding-top: 6px;
}

.separator {
height: 10px;
}

#maincontent {
margin: auto 220px auto auto;
border-right: 1px solid #D9D9D9;
}

.skiplinks {
text-align: center;
border-bottom: 1px solid #e5e5e5;
padding: 10px;
margin-bottom: 20px;
color: #d9d9d9;
}

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

div#header a, div#header a:link, div#header a:visited {
color: #A2A2A2;
font-size: 10px;
text-transform: uppercase;
background-color: #E8E8E8;
margin: 0 6px 0 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
padding-bottom: 7px;
border-right: 1px solid #D9D9D9;
}

div#header a:hover {
color: #929292;
background-color: #d8d8d8;
border-right: 1px solid #c9c9c9;
}

#header {
border-bottom: 10px solid #191919;
}

.headerimage {
position: relative;
width: ;
height: ;
margin: 20px auto 20px auto;
background-image: url();
background-repeat: no-repeat;
}

li.view {
font-size: 10px;
color: #BABABA;
text-transform: uppercase;
background-color: #191919;
margin: 0 6px 0 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
padding-bottom: 7px;
}

.subtitle {
display: none;
}

.title {
display: none;
}

ul.navheader {
margin: 0 0 5px 0;
text-align: right;
}

ul.navheader li {
display: inline;
list-style-type: none;
}

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

.clearfoot {
display: none;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #795490;
font-size: 10px;
text-transform: uppercase;
}

div#footer a:hover {
color: #ACB4C6;
}

#footer {
padding-top: 10px;
padding-bottom: 10px;
z-index: 100;
text-align: center;
clear: both;
margin: auto;
width: 100%;
background-color: #191919;
}

li.viewing {
color: #868686;
font-size: 10px;
text-transform: uppercase;
}

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

ul.navfooter li {
display: inline;
list-style-type: none;
}

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

.comments {
color: #d9d9d9;
text-align: center;
margin-top: 20px;
text-transform: lowercase;
}

.date {
color: #B6B6B6;
font-size: 12px;
margin-bottom: 3px;
padding-left: 20px;
text-transform: uppercase;
}

.datesubject {
margin: 0;
padding-top: 20px;
}

div.comments a, div.comments a:link, div.comments a:visited {
text-align: center;
font-size: 14px;
color: #6EA8B5;
text-decoration: none;
font-weight: bold;
}

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

.entry {
color: #404040;
font-family: arial;
font-size: 11px;
line-height: 16px;
background-color: #ffffff;
padding: 20px;
}

.entry_text {
margin-left: 130px;
}

.entry ol, .entry ul li {
margin-top: 0px;
}

.ljtags {
margin-top: 20px;
text-align: right;
}

.ljtaglist {
list-style-type: none;
}

.subject {
font-size: 14px;
color: #EE6231;
padding-bottom: 7px;
border-bottom: 1px solid #d9d9d9;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited and .subject a:hover {
font-size: 30px;
color: #9CA5B9;
}

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

.defaultuserpic {
display: none;
}

.defaultuserpic img {
padding: 7px;
border: 1px solid #E5E5E5;
}

li.sbaritem {
list-style-type: none;
margin: 0px;
}

li.sbaritem a {
display: block;
width: 200px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: #e4e4e4 1px solid;
list-style-type: none;
font-size: 10px;
text-transform: uppercase;
padding-left: 20px;
}

li.sbaritem a:hover {
background-color: #F0F0F0;
display: block;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: #e4e4e4 1px solid;
padding-left: 20px;
}

li.sbartitle {
list-style-type: none;
text-align: right;
font-size: 14px;
color: #E9A107;
padding-bottom: 7px;
border-bottom: 1px solid #d9d9d9;
padding-right: 20px;
padding-left: 20px;
font-weight: bold;
text-transform: uppercase;
margin: 20px 0 10px 0;
}

.sbarbody2 {
text-align: justify;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
color: #666666;
}

.sbarcalendar {
border: 1px solid #e5e5e5;
padding: 3px;
color: #666666;
text-align: center;
}

.sbarcalendarposts {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
padding: 3px;
text-align: center;
}

.sbarlist {
padding: 0px;
margin: 0px;
}

#sidebar {
float: right;
background-color: #ffffff;
margin: auto;
width: 220px;
}

/*------------------------------------
Currents
------------------------------*/

.currents {
padding: 5px;
border: 1px solid #e5e5e5;
background-color: #f6f6f6;
margin: 20px 0 0 0;
color: #7F7F7F;
}

.currentmood {
background: url(http://i27.tinypic.com/2dr6q88.gif) no-repeat left center;
padding-left: 16px;
}

.currentmusic {
background: url(http://i32.tinypic.com/29capn7.gif) no-repeat left center;
padding-left: 16px;
}

.currentlocation {
display:none;
}

.currents strong {
font-weight: normal;
}

/*------------------------------------
Userpics
------------------------------*/

.userpic {
position: relative;
float: left;
margin: 20px 15px 10px 20px;
text-align: center;
z-index: 15;
background-color: #ffffff !important;
color: #dddddd;
}

.userpic img {
padding: 7px;
border: 1px solid #d9d9d9;
}

.userpicfriends {
position: relative;
float: left;
margin: 20px 15px 10px 20px;
text-align: center;
z-index: 15;
background-color: #ffffff !important;
color: #dddddd;
}

.userpicfriends img {
padding: 7px;
border: 1px solid #d9d9d9;
}

.userpicfriends a font {
color: #836F90;
}

.userpicfriends a:hover font {
color: #A386B6;
}

/*------------------------------------
Tinyicons
------------------------------*/

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 15px 11px 0px 0px;
background: url(http://i29.tinypic.com/2airmo0.gif);
background-repeat: no-repeat;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {
width: 0;
height: 0;
padding: 15px 11px 0px 0px;
background: url(http://i28.tinypic.com/9iz43r.gif);
background-repeat: no-repeat;
}

.ljuser img {
display: none;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
display: none;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
display: none;
}

/*------------------------------------
Contextual Popup
------------------------------*/

div.ContextualPopup {
margin: 5px 0 0 20px;
font: normal 12px arial !important;
}

div.ContextualPopup img {
border: 0;
}

div.ContextualPopup div.Inner {
background-color: #ffffff !important;
color: #404040 !important;
border: 1px solid #999999;
padding: 10px;
width: 20em;
}

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: normal;
}

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

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: underline !important;
font-weight: normal;
color: #836F90 !important;
}

/*------------------------------------
Comment Page
------------------------------*/

.box {
clear: left;
background-color: #ffffff;
padding: 20px;
width: auto;
}

.commentbox {
background-color: #ffffff;
border: 1px solid #e5e5e5;
padding: 10px;
margin-bottom: 10px;
}

.commentboxpartial {
background-color: #ffffff;
border: 1px solid #e5e5e5;
padding: 10px;
margin-bottom: 10px;
}

.commentreply {
margin-top: 10px;
}

.datesubjectcomment {
background-color: #f0f0f0;
}

input, textarea {
font-family: arial;
font-size: 11px;
color: #404040;
background-color: #ffffff;
border: 1px solid #d9d9d9;
}

.reply {
position: relative;
}

.userpiccomment {
position: relative;
z-index: 15;
float: left;
margin: 0 10px 0 0;
border: 7px solid #f0f0f0;
}

#qrform table {
border: 1px solid #e5e5e5 !important;
padding: 10px;
margin: 10px auto 20px auto;
}

/*------------------------------------
Calendar Page
------------------------------*/

ul.year {
text-align: center;
margin-bottom: 20px;
border-bottom: 1px solid #d9d9d9;
padding-top: 10px;
padding-bottom: 10px;
}

ul.year li {
display: inline;
list-style-type: none;
}

table.yeartable td.yeardate {
border: 1px solid #e5e5e5;
}

table.yeartable td.yearday{
border: 1px solid #ececec;
background-color: #f0f0f0;
}

table.yeartable {
border: 1px solid #d9d9d9;
padding: 10px;
}

Sidebar on left:
/*------------------------------------
Copies Yesterday by novaless.lj.com
For S2 Flexible Squares
------------------------------*/

/*------------------------------------
General
------------------------------*/

a {
color: #836F90;
text-decoration: none;
}

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

blockquote {
padding: 7px;
border: 1px solid #d9d9d9;
background-color: #ffffff;
color: #666666;
}

blockquote:hover {
border: 1px solid #E9E763;
background-color: #ffffff;
}

code {
background-color: #ffffff;
display: block;
color: #666666;
padding: 7px;
border: 1px dashed #d9d9d9;
}

/*------------------------------------
Body
------------------------------*/

body {
background-color: #FFFFFF;
text-align: justify;
color: #404040;
font-family: arial;
font-size: 11px;
line-height: 16px;
margin: 50px 0 0 0;
}

.clear {
display: none;
}

#content {
width: 100%;
margin: auto;
padding-top: 6px;
}

.separator {
height: 10px;
}

#maincontent {
margin: auto auto auto 220px;
border-left: 1px solid #D9D9D9;
}

.skiplinks {
text-align: center;
border-bottom: 1px solid #e5e5e5;
padding: 10px;
margin-bottom: 20px;
color: #d9d9d9;
}

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

div#header a, div#header a:link, div#header a:visited {
color: #A2A2A2;
font-size: 10px;
text-transform: uppercase;
background-color: #E8E8E8;
margin: 0 6px 0 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
padding-bottom: 7px;
border-right: 1px solid #D9D9D9;
}

div#header a:hover {
color: #929292;
background-color: #d8d8d8;
border-right: 1px solid #c9c9c9;
}

#header {
border-bottom: 10px solid #191919;
}

.headerimage {
position: relative;
width: ;
height: ;
margin: 20px auto 20px auto;
background-image: url();
background-repeat: no-repeat;
}

li.view {
font-size: 10px;
color: #BABABA;
text-transform: uppercase;
background-color: #191919;
margin: 0 6px 0 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
padding-bottom: 7px;
}

.subtitle {
display: none;
}

.title {
display: none;
}

ul.navheader {
margin: 0 0 5px 0;
text-align: right;
}

ul.navheader li {
display: inline;
list-style-type: none;
}

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

.clearfoot {
display: none;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #795490;
font-size: 10px;
text-transform: uppercase;
}

div#footer a:hover {
color: #ACB4C6;
}

#footer {
padding-top: 10px;
padding-bottom: 10px;
z-index: 100;
text-align: center;
clear: both;
margin: auto;
width: 100%;
background-color: #191919;
}

li.viewing {
color: #868686;
font-size: 10px;
text-transform: uppercase;
}

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

ul.navfooter li {
display: inline;
list-style-type: none;
}

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

.comments {
color: #d9d9d9;
text-align: center;
margin-top: 20px;
text-transform: lowercase;
}

.date {
color: #B6B6B6;
font-size: 12px;
margin-bottom: 3px;
padding-left: 20px;
text-transform: uppercase;
}

.datesubject {
margin: 0;
padding-top: 20px;
}

div.comments a, div.comments a:link, div.comments a:visited {
text-align: center;
font-size: 14px;
color: #6EA8B5;
text-decoration: none;
font-weight: bold;
}

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

.entry {
color: #404040;
font-family: arial;
font-size: 11px;
line-height: 16px;
background-color: #ffffff;
padding: 20px;
}

.entry_text {
margin-right: 130px;
}

.entry ol, .entry ul li {
margin-top: 0px;
}

.ljtags {
margin-top: 20px;
text-align: right;
}

.ljtaglist {
list-style-type: none;
}

.subject {
font-size: 14px;
color: #EE6231;
padding-bottom: 7px;
border-bottom: 1px solid #d9d9d9;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited and .subject a:hover {
font-size: 30px;
color: #9CA5B9;
}

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

.defaultuserpic {
display: none;
}

.defaultuserpic img {
padding: 7px;
border: 1px solid #E5E5E5;
}

li.sbaritem {
list-style-type: none;
margin: 0px;
}

li.sbaritem a {
display: block;
width: 200px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: #e4e4e4 1px solid;
list-style-type: none;
font-size: 10px;
text-transform: uppercase;
padding-left: 20px;
}

li.sbaritem a:hover {
background-color: #F0F0F0;
display: block;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: #e4e4e4 1px solid;
padding-left: 20px;
}

li.sbartitle {
list-style-type: none;
text-align: right;
font-size: 14px;
color: #E9A107;
padding-bottom: 7px;
border-bottom: 1px solid #d9d9d9;
padding-right: 20px;
padding-left: 20px;
font-weight: bold;
text-transform: uppercase;
margin: 20px 0 10px 0;
}

.sbarbody2 {
text-align: justify;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
color: #666666;
}

.sbarcalendar {
border: 1px solid #e5e5e5;
padding: 3px;
color: #666666;
text-align: center;
}

.sbarcalendarposts {
background-color: #e5e5e5;
border: 1px solid #e5e5e5;
padding: 3px;
text-align: center;
}

.sbarlist {
padding: 0px;
margin: 0px;
}

#sidebar {
float: left;
background-color: #ffffff;
margin: auto;
width: 220px;
}

/*------------------------------------
Currents
------------------------------*/

.currents {
padding: 5px;
border: 1px solid #e5e5e5;
background-color: #f6f6f6;
margin: 20px 0 0 0;
color: #7F7F7F;
}

.currentmood {
background: url(http://i27.tinypic.com/2dr6q88.gif) no-repeat left center;
padding-left: 16px;
}

.currentmusic {
background: url(http://i32.tinypic.com/29capn7.gif) no-repeat left center;
padding-left: 16px;
}

.currentlocation {
display:none;
}

.currents strong {
font-weight: normal;
}

/*------------------------------------
Userpics
------------------------------*/

.userpic {
position: relative;
float: right;
margin: 20px 20px 10px 15px;
text-align: center;
z-index: 15;
background-color: #ffffff !important;
color: #dddddd;
}

.userpic img {
padding: 7px;
border: 1px solid #d9d9d9;
}

.userpicfriends {
position: relative;
float: right;
margin: 20px 20px 10px 15px;
text-align: center;
z-index: 15;
background-color: #ffffff !important;
color: #dddddd;
}

.userpicfriends img {
padding: 7px;
border: 1px solid #d9d9d9;
}

.userpicfriends a font {
color: #836F90;
}

.userpicfriends a:hover font {
color: #A386B6;
}

/*------------------------------------
Tinyicons
------------------------------*/

.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 15px 11px 0px 0px;
background: url(http://i29.tinypic.com/2airmo0.gif);
background-repeat: no-repeat;
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {
width: 0;
height: 0;
padding: 15px 11px 0px 0px;
background: url(http://i28.tinypic.com/9iz43r.gif);
background-repeat: no-repeat;
}

.ljuser img {
display: none;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
display: none;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
display: none;
}

/*------------------------------------
Contextual Popup
------------------------------*/

div.ContextualPopup {
margin: 5px 0 0 20px;
font: normal 12px arial !important;
}

div.ContextualPopup img {
border: 0;
}

div.ContextualPopup div.Inner {
background-color: #ffffff !important;
color: #404040 !important;
border: 1px solid #999999;
padding: 10px;
width: 20em;
}

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: normal;
}

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

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: underline !important;
font-weight: normal;
color: #836F90 !important;
}

/*------------------------------------
Comment Page
------------------------------*/

.box {
clear: left;
background-color: #ffffff;
padding: 20px;
width: auto;
}

.commentbox {
background-color: #ffffff;
border: 1px solid #e5e5e5;
padding: 10px;
margin-bottom: 10px;
}

.commentboxpartial {
background-color: #ffffff;
border: 1px solid #e5e5e5;
padding: 10px;
margin-bottom: 10px;
}

.commentreply {
margin-top: 10px;
}

.datesubjectcomment {
background-color: #f0f0f0;
}

input, textarea {
font-family: arial;
font-size: 11px;
color: #404040;
background-color: #ffffff;
border: 1px solid #d9d9d9;
}

.reply {
position: relative;
}

.userpiccomment {
position: relative;
z-index: 15;
float: left;
margin: 0 10px 0 0;
border: 7px solid #f0f0f0;
}

#qrform table {
border: 1px solid #e5e5e5 !important;
padding: 10px;
margin: 10px auto 20px auto;
}

/*------------------------------------
Calendar Page
------------------------------*/

ul.year {
text-align: center;
margin-bottom: 20px;
border-bottom: 1px solid #d9d9d9;
padding-top: 10px;
padding-bottom: 10px;
}

ul.year li {
display: inline;
list-style-type: none;
}

table.yeartable td.yeardate {
border: 1px solid #e5e5e5;
}

table.yeartable td.yearday{
border: 1px solid #ececec;
background-color: #f0f0f0;
}

table.yeartable {
border: 1px solid #d9d9d9;
padding: 10px;
}

Installation:

1. Choose "Flexible Squares" as your theme.
   
2. Click on "Customize Your Theme" and go to the "Custom CSS" section.
   
3. Select "no" in all three drop-down menus, and insert the code into the custom stylesheet box.
   
4. For Plus accounts, ad placement is between entries.

This layout was supposed to have a fixed width, but lj and its css limits killed that. x_x; I hope you enjoy anyway! Remember to credit novaless if using. :]

EDIT (6/8/08): I fixed some minor problems with the css. I also added a code with the sidebar on the left. Thanks for all the comments, by the way~