S2 Flexible Squares: Coffee scented morning (recoded)

[ruthenia_alba]

Style: S2 Flexible Squares
Account type: all types
Screen Resolution: 1024+
Entries: stretch, min. 620px wide
Browsers: Mozilla, Chrome, Safari, Opera
Comments in journal's style: yes
Controlstrip: enabled
Sidebar: enabled, full
Title & Subtitle: disabled, but can be enabled



Live preview:
recent // friends // comments


1. In Customize section choose Flexible Squares style and click "Customise selected theme ->" below.

2. In left menu choose "Custom CSS". In "Page" section choose:

- Use layout's stylesheet(s): Yes
- Use layout's stylesheet(s) when including custom external stylesheet: No
- Use external stylesheets: No

3. In Custom stylesheet block, insert the following code:

/* Layout 004: Coffee Scented Morning */
/* Date: March 20, 2008 */
/* Recoded: January 4, 2010 */
/* S2 Style: Flexible Squares */
/* Design & Codes by Ruthenia Alba (www.livejournal.com/ruthenia-alba) */

/*--------BASICS---------*/

body {
padding: 0;
margin: 0;
background: url(http://ruthenia-alba.webs.com/004coffee-layout/004coffee-bg.gif) repeat scroll;
}

/* -------- a links ----- */

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

a:hover {
color: #d4a56f;
text-decoration: underline;
}

a:visited {
color: #be8c53;
text-decoration: none;
}

/* -------- title & subtitle ----- */

.title {
position: absolute;
margin: 45px auto auto 450px;
font: bold 14px Trebuchet MS, Verdana;
text-transform: uppercase;
letter-spacing: 1px;
color: #664e2f;
}

.subtitle {
position: absolute;
margin: 65px auto auto 470px;
font: bold 12px Trebuchet MS, Verdana;
letter-spacing: 0;
color: #664e2f;
}

.title, .subtitle {
display: none;
}

/* ----------- CONTENT ----------- */

#content-outer {
background: url(http://ruthenia-alba.webs.com/004coffee-layout/004coffee-content-bg.png) repeat-x transparent;
}

#content {
border:0;
width:100%;
padding:0;
margin:0;
background: transparent;
}

/* ----------- header ----------- */

#header {
background: url(http://ruthenia-alba.webs.com/004coffee-layout/004coffee-header.png) no-repeat top left transparent;
border: 0;
margin: 0;
padding: 0;
height: 295px;
}

/* --------- navigation --------- */

ul.navheader {
border: 0;
margin: 0 auto;
padding: 262px 0 0 0;
font: bold 11px Trebuchet MS, Verdana;
text-transform: uppercase;
color: #664e2f;
}

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

ul.navheader a,
ul.navheader a:link {
color: #ac702c !important;
text-decoration: none;
}

ul.navheader a:hover {
color: #664e2f !important;
text-decoration: underline;
}

ul.navheader a:visited {
color: #be8c53;
text-decoration: none;
}

/* ----------- SIDEBAR ---------- */

#sidebar {
position: relative;
z-index: 1;
float: left;
background: transparent;
margin: -15px 0 0 120px;
padding: 20px 0 0 0;
border: 0;
text-align: center;
font: normal 11px Trebuchet MS, Verdana;
}

.sbarbody {
padding: 0;
}

li.sbartitle {
list-style: none;
border: 0;
background: transparent;
text-transform: uppercase;
color: #664e2f;
font: bold 12px Trebuchet MS, Verdana;
margin-bottom: 8px;
margin-top: 18px;
}

li.sbaritem {
background: #5f442b;
margin: 5px 0 2px 0;
padding: 5px 2px;
list-style: none;
font: normal 11px Trebuchet MS, Verdana;
line-height:1em;
}

li.sbaritem a,
li.sbaritem a:link {
color: #ffffff !important;
text-decoration: none;
}

li.sbaritem a:visited {
color: #ffffff;
text-decoration: none;
}

li.sbaritem a:hover {
color: #d4a56f !important;
text-decoration: none;
}

/* ------ sidebar userpic ------ */

.defaultuserpic img {
padding: 10px;
background: #f3e8db;
border: 1px dashed #be8c53;
}

/* ------ sidebar summary ------ */

#sidebar_summary li.sbaritem {
padding: 5px 0;
margin: 5px 0 2px 0;
color:#ffffff;
font: normal 11px Trebuchet MS, Verdana;
border: 0;
}

/* ------ sidebar calendar ------ */

.calendar td {
font: normal 12px Trebuchet MS, Verdana;
padding: 1px 4px;
color: #664e2f;
border: 0;
}

#sidebar_calendar ul.sbarlist {
padding: 0;
}

.sbarcalendarposts {
background: #664e2f;
font: normal 11px Trebuchet MS, Verdana !important;
}

.sbarcalendarposts a,
.sbarcalendarposts a:link,
.sbarcalendarposts a:visited {
color: #ffffff !important;
text-decoration: none;
}

.sbarcalendarposts a:hover {
color: #d4a56f !important;
text-decoration: none;
}

/* ------ sidebar links ------ */

#sidebar_linklist li.sbaritem {
font: normal 11px Trebuchet MS, Verdana;
}

/* ------ sidebar tags ------ */

li.tagcloud {
text-align: center;
padding: 0;
}

li.tagcloud a:hover {
color: #d4a56f !important;
text-decoration: underline !important;
}

.tagcategory0, .tagcategory1, .tagcategory2, .tagcategory3, .tagcategory4, .tagcategory5, .tagcategory6, .tagcategory7, .tagcategory8, .tagcategory9 {
font: normal 12px Trebuchet MS, Verdana;
color: #ac702c !important;
text-decoration: none;
}

/* ------ sidebar blurb ------ */

.sbarbody2 {
font: normal 12px Trebuchet MS, Verdana;
color: #664e2f !important;
padding: 0;
}

.sbarbody2 a, .sbarbody2 a:link {
color: #ac702c !important;
text-decoration: none;
}

.sbarbody2 a:hover {
color: #d4a56f !important;
text-decoration: underline !important;
}

.sbarbody2 a:visited {
color: #be8c53 !important;
text-decoration: none;
}

/* --------- MAIN CONTENT --------- */

#maincontent {
position: absolute;
border: 0;
margin: -15px 0 0 100px;
padding: 0px 10px 10px 200px;
background: #ffffff;
width: 60%;
min-width: 620px;
}

.subcontent {
border: 0;
padding: 10px 0 0 0;
margin: 0;
}

/* ------- content: date & subject ------- */

.datesubject {
background: transparent;
color: #664e2f;
}

.date {
background: url(http://ruthenia-alba.webs.com/004coffee-layout/004coffee-date-bg.gif) no-repeat transparent;
margin:0;
padding: 3px 0 0 20px;
font: bold 14px Trebuchet MS, Verdana;
text-align: left;
color:#664e2f;
}

.subject,
.replytosubject {
padding: 0 0 10px 0;
margin-left: 23px;
font: bold 16px Trebuchet MS, Verdana;
color: #664e2f;
}

.subject a .subj-link,
.subject a,
.subject a:link,
.subject a:visited {
color: #664e2f !important;
}

/* ------- content: userpic ------- */

.userpic,
.userpicfriends {
position: relative;
float:right;
border: 1px solid #be8c53;
background: #ffffff !important;
padding: 5px;
margin: 0 5px 5px 15px;
font: normal 11px Trebuchet MS, Verdana;
color: #664e2f !important;
}

.userpicfriends a font,
.userpicfriends a:link font,
.userpicfriends a:visited font {
color: #ac702c;
padding: 0 2px;
}

.userpicfriends a:hover font {
color: #d4a56f;
text-decoration: underline;
}

/* ------- content: entry ------- */

.entry {
background: transparent;
border: 0;
margin: 0;
padding: 5px;
min-height: 30px;
font: normal 12px Trebuchet MS, Verdana;
text-align: justify;
line-height:1.4em;
color: #664e2f;
}

.entry_text {
color: #664e2f;
}

.entry p {
font: normal 12px Trebuchet MS, Verdana;
margin-top: 0;
}

blockquote {
background: #f3e8db;
margin-left: 50px;
margin-right: 200px;
padding: 10px;
line-height: 16px;
font: normal 10px Trebuchet MS, Verdana;
border: 1px dashed #be8c53;
}

ul {
margin: 0;
padding:0;
}

li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}

/* ---- content: tags & currents ---- */

.ljtags {
padding:10px 0 0;
font: bold 12px Trebuchet MS, Verdana;
}

.ljtags a,
.ljtags a:link {
font: normal 12px Trebuchet MS, Verdana;
color: #ac702c;
text-decoration: none;
}

.ljtags a:hover {
color: #d4a56f;
text-decoration: underline;
}

.ljtags a:visited {
color: #be8c53;
text-decoration: none;
}

.currents {
padding: 5px 0 0;
background: transparent;
}

.currents div {
color:#664e2f;
font: normal 12px Trebuchet MS, Verdana;
}

/* ------- content: comments ------- */

.comments {
background: transparent;
text-align: center;
padding: 0 20px 0 0;
font: bold 12px Trebuchet MS, Verdana;
color: #ffffff;
}

.comments a,
.comments a:link {
background: url(http://ruthenia-alba.webs.com/004coffee-layout/004coffee-comments-bg.gif) no-repeat transparent top left;
color: #ac702c !important;
text-decoration: none;
margin: 0 0 0 10px;
padding-left: 20px;
}

.comments a:hover {
color: #d4a56f !important;
text-decoration: underline !important;
}

.comments a:visited {
color: #be8c53;
text-decoration: none;
}

.separator {
height: 20px;
border-bottom: 1px dashed #be8c53;
margin: 0;
}

.clear {
height: 0;
}

/* ------- content: footer ------- */

#footer {
position: relative;
width: 147px;
background: #F3E8DB;
margin: 20px 0 0 120px !important;
border: 1px dashed #be8c53;
padding: 5px;
font: bold 11px Trebuchet MS, Verdana;
}

ul.navfooter {
color: #664e2f;
}

ul.navfooter a,
ul.navfooter a:link {
color: #ac702c !important;
text-decoration: none;
}

ul.navfooter a:visited {
color: #be8c53 !important;
text-decoration: none;
}

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

/* ------ CALENDAR PAGE ------ */

/* ------ years ------ */

ul.year {
margin: 10px;
padding: 0;
font: bold 12px Trebuchet MS, Verdana;
}

ul.year a {
padding: 0 10px;
}

li.active {
padding: 0 10px;
font: bold 12px Trebuchet MS, Verdana;
color: #664e2f;
}

/* ------ months ------ */

td.yearmonth {
padding-bottom: 5px;
font: bold 12px Trebuchet MS, Verdana;
color:#664e2f;
}

/* ------ days ------ */

table.yeartable td.yearday {
background: #664e2f;
border: 0;
font: bold 12px Trebuchet MS, Verdana;
color: #ffffff;
}

table.yeartable td.yeardate {
border: 0;
border-bottom: 1px dashed #d4a56f;
border-right: 1px dashed #d4a56f;
padding: 2px 5px;
font: normal 11px Trebuchet MS, Verdana;
color:#664e2f;
}

td.yeardate a {
background: #664e2f;
padding: 1px 7px;
color: #ffffff;
}

/* ------- COMMENTS PAGE ------- */

/* ------- links to posts ------- */

.skiplinks {
color: #ffffff !important;
font: normal 10px Trebuchet MS, Verdana;
text-transform: uppercase;
letter-spacing: 1px;
color: #664e2f;
}

.skiplinks a {
margin: 0 3px;
}

/* ------- comments ------- */

.box {
border: 0;
padding: 0;
margin: 0;
font: normal 12px Trebuchet MS, Verdana;
color: #664e2f;
}

.box center {
margin: 10px;
}

.box center a {
}

div.box form table {
border: 0 !important;
margin: 10px auto 30px auto;
color: #664e2f;
font: normal 12px Trebuchet MS, Verdana;
}

.commentbox,
.commentboxpartial {
background: #f3e8db;
border: 0;
margin: 10px 0;
padding:5px 10px;
font: normal 12px Trebuchet MS, Verdana;
-moz-border-radius: 3px;
}

.commentreply {
font: normal 12px Trebuchet MS, Verdana;
color:#664e2f;
}

.datesubjectcomment {
background: #e3c094;
border: 0;
padding-left: 0;
-moz-border-radius: 3px;
}

.datesubjectcomment a,
.datesubjectcomment a:link,
.datesubjectcomment a:visited {
color: #664e2f;
text-decoration: none;
}

.datesubjectcomment a:hover {
color: #ac702c;
text-decoration: underline;
}

.userpiccomment {
position: relative;
border: 10px solid #e3c094;
padding: 0;
margin: 10px 10px 0 0;
-moz-border-radius: 4px;
}

/* ------- MISCELLANEOUS ------- */

/* ------- input & textarea ------- */

input, textarea, select {
border: 1px solid #E3C094;
background: #F3E8DB;
font: normal 12px Trebuchet MS, Verdana;
color:#664e2f;
}

/* -------- lj user & images --------------- */

img[src*="userinfo.gif"] {
background: url(http://ruthenia-alba.webs.com/004coffee-layout/004coffee-ljuser.gif) no-repeat transparent;
width: 0;
height: 0;
padding: 7px 5px 10px 11px;
}

img[src*="community.gif"] {
background: url(http://ruthenia-alba.webs.com/004coffee-layout/004coffee-ljcomm.gif) no-repeat transparent;
width: 0;
height: 0;
padding: 7px 5px 10px 11px;
}

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

div.ContextualPopup img {
border:0 none;
}

div.ContextualPopup div.Inner {
opacity: .9;
background: #f3e8db;
border: 1px dashed #be8c53;
color: #664e2f !important;
font: normal 11px Trebuchet MS, Verdana;
margin:0;
padding:5px;
-moz-border-radius: 5px;
}

div.ContextualPopup .Relation {
border: 0;
color: #664e2f;
font: normal 11px Trebuchet MS, Verdana;
margin: 2px 0;
padding: 2px 0;
}

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

div.ContextualPopup div.Inner a,
div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited {
color: #ac702c !important;
font: normal 11px Trebuchet MS, Verdana;
text-decoration: none !important;
}

div.ContextualPopup div.Inner a:hover {
color: #d4a56f !important;
font: normal 11px Trebuchet MS, Verdana;
text-decoration: underline !important;
}

div.ContextualPopup .Content .OnlineStatus {
font-weight: bold;
}

/* -------- controlstrip --------------- */

#lj_controlstrip {
background: #5F442B;
font: normal 11px Trebuchet MS, Verdana;
}

#lj_controlstrip_statustext {
font: normal 11px Trebuchet MS, Verdana;
color: #EFBA7C;
}

#lj_controlstrip a,
#lj_controlstrip a:link,
#lj_controlstrip a:visited {
color: #ffffff;
}

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

#lj_controlstrip_user,
#lj_controlstrip_actionlinks,
#lj_controlstrip_search,
#lj_controlstrip_login,
#lj_controlstrip_loggedout_userpic {
border-right:0 none;
}

#lj_controlstrip_login td {
border-bottom:0 none;
}

#lj_controlstrip td td {
border-bottom: 0 none;
}

#lj_controlstrip input {
background: #F3E8DB;
padding: 0;
color:#664e2f;
height: 18px;
}

#lj_controlstrip_search_input_text,
#lj_controlstrip select,
#lj_controlstrip input#xc_user,
#lj_controlstrip input#xc_password,
#lj_controlstrip input#xc_remember {
background:# F3E8DB !important;
border:0 none !important;
}

My other free layouts are here.

If you're eager to show me your gratitude, I'm always happy to see my button in your profile or any other place.

P.S. I do not update this post, for all bug fixes check out the native post at my LJ.