S2 Flexible Squares - Sunday Morning Coffee
image preview | live preview
Step by Step Instructions on How to Use the Layout
1. Go to your Customize page.
2. If you are using S1, switch to S2.
3. Under "Select a New Theme", type "Flexible Squares" in the Search box.
4. Click "Apply Theme" directly underneath the first search result.
5. Scroll down to "Choose a Page Setup", and click "Apply Layout" under "2 Column (sidebar on left)".
6. Click the button that says "Customize Selected Theme".
7. Click "Sidebar" on the left. Here you can decide what you would like to be displayed in the sidebar. You can choose any number or combination of these to be displayed. Remember, to customize the links, click "Links List".
8. Click "Custom CSS" on the left. Change "Use layout's stylesheet(s)" to No. This is extremely important!
9. Copy and paste the following into the custom stylesheet box and click "Save Changes":
/* Stylesheet by presents.livejournal.com. */
body {
background: #F5F5F5 url(http://img.photobucket.com/albums/v72/panthersgem/ref/brbg2.png) repeat-x top left;
text-align: center;
color: #777777;
font: 8pt arial, sans-serif;
margin: 10px 0 20px 0;
}
a, a:link, a:visited, a:active {
color: #A9D3E7;
text-decoration: none;
}
a:hover {
color: #C8E4F1;
text-decoration: none;
}
strong, b {
color: #C7C4BB;
}
em, i {
color: #BBBBBB;
}
blockquote {
margin: 0 8px 0 8px;
padding: 8px;
background-color: #fafafa;
color: #808080;
font: 7pt/15px arial, sans-serif;
text-align: justify;
}
code, kbd, pre, tt {
font-family: monospace;
}
textarea, .textbox, select, input {
background-color: #fff;
color: #9C9C9C;
border: 1px solid #CCCACA;
}
select, input {
border: 1px solid #CCCACA;
}
#content {
width: 921px;
margin: 48px auto 0px auto;
background: transparent url(http://img.photobucket.com/albums/v72/panthersgem/ref/brhead4.gif) no-repeat top left;
border: 0px;
padding: 25px 0 0 0;
}
#maincontent {
float: right;
width: 617px;
margin-top: 0px;
background-color: transparent;
color: #000000;
border: 0px;
text-align: left;
}
#sidebar {
float: left;
padding: 0;
margin: 27px 0 0 0;
background-color: transparent;
border: 0px;
text-align: left;
width: 295px;
}
#header {
padding: 10px 0;
margin: 0px;
text-align: center;
font: normal 7pt "lucida grande", "trebuchet ms", arial, sans-serif;
letter-spacing: 0px;
background-color: #B1D9EB;
color: #C5FFFE;
position: absolute;
text-transform: uppercase;
width: 295px;
}
#header:hover {background: #C8E4F1;}
#footer {
text-align: center;
font: 7pt "lucida grande", "trebuchet ms", arial, sans-serif;
background-color: #B1D9EB;
color: #EEF8FC;
z-index: 100;
clear: both;
border: 0px;
padding: 10px;
text-transform: uppercase;
}
#footer:hover {background: #C8E4F1;}
div#footer a, div#footer a:link, div#footer a:visited {
color: #fff;
font-weight: normal;
text-transform: uppercase;
}
div#footer a:hover {
color: #EEF8FC;
font-weight: normal;
}
/* header */
div#header a, div#header a:link, div#header a:visited {
color: #fff;
}
div#header a:hover {
color: #EEF8FC;
}
ul.navheader { padding: 0; margin: 0; list-style: none; }
ul.navheader li {display: inline; padding: 2px;}
.view {color: #EEF8FC;}
.title, .subtitle {display: none;}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #BEBBB4;
}
div#sidebar a:hover {
color: #D9D7D1;
}
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 5px 0px 0px;
}
.sbarbody {
padding: 0;
}
.sbarbody2 {
padding: 5px 5px 5px 8px;
margin: 5px 0 5px 0;
color: #878787;
font: 9px/15px arial, sans-serif;
background: #fff;
}
#sidebar_summary img {display: none;}
.sbarcalendar {
border: 1px solid #EAEAEA;
text-align: center;
font: 7pt arial, verdana, sans-serif;
padding: 4px;
color: #9C9C9C;
background: #fff;
}
span.count {display: none;}
.sbarcalendarposts {
border: 1px solid #D3D0C9;
text-align: center;
font: 7pt arial, verdana, sans-serif;
padding: 4px;
background: #fff;
}
ul.sbarlist {
padding: 0px;
margin: 0px;
list-style: none;
}
.tagcloud {
padding-left: 3px;
}
li.sbaritem {
background-color: #fff;
border-width: 0px;
padding: 0;
color: #ccc;
}
li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active {
font: 7pt/20px "Lucida Grande", tahoma, verdana, sans-serif;
text-transform: uppercase;
display: block;
padding-left: 6px;
}
li.sbartitle {
padding: 10px 0 10px 8px;
list-style: none;
border: 0;
background-color: #D3D0C9;
margin: 15px 0 5px 0;
color: #fff;
font: 7pt "lucida grande", "trebuchet ms", arial, verdana, sans-serif;
text-transform: uppercase;
}
li.sbartitle:hover {background: #D9D7D1;}
/* maincontent */
.entry{
margin: 0;
padding: 8px 0 0 0;
width: 497px;
background-color: #fff;
color: #878787;
font: 8pt/15pt tahoma, arial, sans-serif;
text-align: justify;
border: 0px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.entry_text {padding: 0 15px 12px 15px; background: #fff;}
.userpic {
position: relative;
float: right;
margin: 0 0 0 10px;
background: #EAEAEA;
padding: 5px;
}
.userpic:hover {background: #E0E0E0;}
.userpicfriends {
background-color: #EAEAEA !important;
padding: 5px;
text-align: center;
font: 7pt "lucida grande", tahoma, arial, verdana, sans-serif;
margin: 0 0 0 10px;
position: relative;
float: right;
}
.userpicfriends a font {
font: 7pt "lucida grande", arial, verdana, sans-serif;
color: #606060;
}
.userpicfriends a:hover font {
color: #9C9C9C;}
.userpicfriends:hover {background: #E0E0E0 !important;}
.date {
color: #fff;
font: 7pt/8px "lucida grande", "trebuchet ms", arial, sans-serif;
text-transform: lowercase;
margin: 0;
padding: 0 0 4px 0;
}
.subject {
color: #fff;
font: 7pt/8px "lucida grande", "trebuchet ms", sans-serif;
padding: 0;
margin: 0;
text-transform: uppercase;
}
.subject a, .subject a:link, .subject a:visited {
color: #F7F6F3;
}
.subject a:hover {
color: #fff;
}
.datesubject {
background: #D3D0C9;
padding: 6px 12px 6px 12px;
border: 0px;
width: 473px;
}
.datesubject:hover {background: #D9D7D1;}
.comments {
font: 7pt "lucida grande", "trebuchet ms", arial, verdana, sans-serif;
text-align: center;
color: #fff;
background-color: #B1D9EB;
padding: 4px 5px 4px 5px;
border: 0px;
text-transform: uppercase;
margin: 4px 0 0 0;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #fff;
}
div.comments a:hover {
color: #E0F3FA;
text-decoration: none;
}
div.comments:hover {background: #C8E4F1;}
.currentmood, .currentmusic, .currentlocation {
text-transform: lowercase;
color: #c0c0c0;
font-size: 7pt;
font-family: arial, sans-serif;
line-height: 11pt;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/brcur2.gif) no-repeat center left;
padding: 0 0 0 11px;
}
.currentmusic {padding: 2px 0 0 11px;}
.currents {
padding: 0 0 3px 15px;
margin: 0 0 10px 0;
}
.currents a:link, .currents a:visited, .currents a:active {
color: #c0c0c0;
}
.currents a:hover {
color: #D8D8D8;
}
.currents strong, .currentmood strong, .currentmusic strong {
display: none;
}
.currentgroups {display: none;}
.ljtags {
margin: 10px 0 0 0;
font: 1pt tahoma, arial, sans-serif;
color: #fff;
text-transform: lowercase;
text-align: justify;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/brtag2.gif) no-repeat center left;
padding: 1px 0 0 5px;
position: relative;
top: 10px;
}
.ljtags a:link, .ljtags a:visited, .ljtags a:active {
color: #c0c0c0;
font-weight: normal;
text-transform: lowercase;
font-size: 7pt;
padding: 0 6px 0 0;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/sep.gif) no-repeat center right;
}
.ljtags a:hover {
color: #D8D8D8;
text-decoration: none;
font-weight: normal;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
padding: 5px;
background-color: #B1D9EB;
font: 7pt/13pt "lucida grande", arial, sans-serif;
text-align: right;
color: #fff;
text-transform: uppercase;
}
.datesubjectcomment:hover {background: #C8E4F1;}
.userpiccomment {
position: relative;
float: left;
margin: 30px 10px 20px 0;
padding: 5px;
background-color: #F7F7F7;
z-index: 15;
width: 50px;
height: 50px;
}
.box {
border: 0px;
padding: 10px;
clear: left;
background-color: #fff;
color: #c6c6c6;
}
textarea.textbox {
width: 95% !important;
}
.reply{
position: relative;
margin: 20px 30px 10px 30px;
padding: 20px 10px 10px 10px;
color: #9C9C9C;
font: 8pt/18px tahoma, arial, sans-serif;
text-align: justify;
background-color: #fff;
}
.commentreply {
position: relative;
margin: 0 10px 10px 10px;
color: #9C9C9C;
font: 8pt/17px tahoma, arial, sans-serif;
text-align: justify;
padding: 5px;
}
.commentbox, .commenttext {
padding: 5px;
margin: 10px;
background-color: #fff;
border: 0px;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
border: 1px solid #efefef;
color: #9C9C9C;
font: 8pt/18px tahoma, arial, sans-serif;
text-align: justify;
}
.commentinfo {
background-color: transparent;
margin-top: 10px;
width: 100%;
}
.replytoposter {
text-align: right;
color: #D1D1D1;
text-transform: lowercase;
font-size: 7pt;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/time2.gif) no-repeat center right;
margin: 0 130px 0 0;
padding: 8px 15px 0 0;
line-height: 15pt;
}
.replytosubject {
text-align: right;
font-weight: normal;
font-family: "lucida grande", arial, verdana, sans-serif;
padding: 0 0 1px 0;
color: #606060;
font-size: 12pt;
text-transform: lowercase;
border-bottom: 1px solid #EFEFEF;
margin: 0 130px 0 0;
}
/* maincontent -- year/achive pages */
/* year/achive pages */
ul.year {
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 25px 0;
background: #fff;
color: #C6C6C6;
}
ul.year li {
display: inline;
}
table.yeartable {
margin: 0 auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #D0D0D0;
background: #fff;
}
table.yeartable, td.yearday {
background-color: transparent;
text-align: center;
color: #8A8A8A;
background: #fff;
padding: 10px;
}
td.yearmonth {
border-style: none;
background: #fff;
}
/* footer */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 0px;
}
.skiplinks {
text-align: center;
background: #fff;
padding: 5px 0 5px 0;
color: #89C4DF;
}
.separator{
height: 25px;
}
* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}
* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
}
img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 11px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/brlock.gif) no-repeat;
}
img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 11px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/brlock.gif) no-repeat;
}
img[src="http://l-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
padding: 0 0 10px 11px;
background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/brlock.gif) no-repeat;
}
.ljuser img {
width: 0;
height: 0;
background: transparent url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust1.gif) no-repeat;
padding: 13px 7px 2px 2px !important;
}
.ljuser a:link b, a:visited b {color: #D5EBF5;}
.ljuser a:hover b {
color: #E9F5FB;
background: transparent;
}
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background: transparent url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust1.gif) no-repeat;
padding: 13px 7px 2px 2px !important;
}
.ljuser:hover img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust2.gif);
;){kind=link}
}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background: transparent url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust1.gif) no-repeat;
padding: 13px 7px 2px 2px !important;
}
.ljuser:hover img[src="http://p-stat.livejournal.com/img/community.gif"] {background-image: url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust2.gif);
}
#ljuser_row img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{ width: 0; height: 0; padding: 0 7px 10px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/ust1.gif); }
;){kind=link}
.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_del.gif"]{ width:0; height:0; padding: 0 16px 14px 0; background: url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_delete.png); }
;){kind=link}
.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_scr.gif"]{ width:0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_screen.png); }
;){kind=link}
.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_freeze.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_freeze.png); }
;){kind=link}
.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_edit.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_edit.png); }
;){kind=link}
.ljcmt, .commentbox img[src="http://p-stat.livejournal.com/img/btn_track.gif"]{ width: 0; height: 0; padding: 0 16px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/cup_track.png); }
;){kind=link}
.box img[src="http://p-stat.livejournal.com/img/anonymous.gif"]{ width: 0; height: 0; padding: 0 16px 12px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_anon.png); }
;){kind=link}
.box img[src="http://p-stat.livejournal.com/img/openid-profile.gif"]{ width: 0; height: 0; padding: 0 16px 15px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_oi.png); }
;){kind=link}
.box img[src="http://p-stat.livejournal.com/img/help.gif"]{ width: 0; height: 0; padding: 0 14px 14px 0; background:
url(http://img.photobucket.com/albums/v72/panthersgem/ref/box_help.png); }
;){kind=link}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #B1D9EB !important;
}
div.ContextualPopup {
position: relative;
font: normal 8pt tahoma, arial, verdana, sans-serif !important;
}
div.ContextualPopup div.Inner {
background-color: #fff !important;
color: #878787 !important;
border: 1px solid #C0C0C0;
padding: 6px;
}
div.ContextualPopup img {
border: 5px solid #EAEAEA;
}
10. Go to your Manage Profile page. Under Bio, add the following:
Stylesheet by
PLEASE DO NOT NEGLECT THIS STEP.
REMEMBER, FOR FASTEST RESPONSE TIME, ASK ANY SPECIFIC QUESTIONS CONCERNING THE LAYOUT ON THIS POST!
Commonly Asked Questions
How do I add a header?
Add this at the bottom:
.headerimage {
position: relative;
margin: 0 auto 0 auto;
width: ###px;
height: ###px;
background-repeat: no-repeat;
background-image: url(URL OF IMAGE HERE);
}
Change the height and width tags to match your image. You'll need to upload your image to the internet. I suggest tinypic.com.
Then, find this:
#content {
width: 921px;
margin: 48px auto 0px auto;
background: transparent url(http://img.photobucket.com/albums/v72/panthersgem/ref/brhead4.gif) no-repeat top left;
border: 0px;
padding: 25px 0 0 0;
}
And replace it with this:
#content {
width: 921px;
margin: 0px auto 0px auto;
background: transparent;
border: 0px;
padding: 10px 0 0 0;
}
My entries are starting halfway down the page!
You have a wide image somewhere. Go lj-cut this, and it should work. If not, try decreasing the width of #maincontent by a few pixels.
Can I edit the colours, etc.?
Sure, if you give me credit for the base code!
My layout looks all messed up?!
99% of the time, making sure you have set "Use layout's stylesheet(s)" to No will fix this.
I'm using Internet Explorer and things don't look quite right?
Just add these lines to #header:
float: left;
position: absolute;
top: 73px;
left: 43px;
Change the width of datesubject to width: 473px; and the width of .entry to width: 497px;.
Why didn't you just make it IE-compatible in the first place?
Frankly, not many people use IE on lj, and doing so makes things look funky with the Navigation Bar, which more people use, so I went with the majority.
Can I have my default userpic show up?
Sure, just find this:
.defaultuserpic {
display: none;
}
And replace it with this:
.defaultuserpic {
margin: 10px auto;
background-color: #FAFAFA;
padding: 5px;
}
Can I not have my mood theme image show up?
Sure! Just add this:
.currentmood img {display: none;}
I have a Plus account. What can I do about the ads?
On the Style page, clear the section "Background color of the outer table". You can change where the ads are placed on your Customize page. I would suggest either placing the ads Between Entries or Vertical.
If you have any questions concerning the layout, feel free to ask. Also, PLEASE comment if you decide to use this! Thank you.