layout: tandem (s2 flexible squares)

[riseoverrun]

A few people requested the CSS coding for my current layout, and after some procrastinating, I finally got around to putting it together in a user-friendly fashion. While it's not exactly the same as my layout (I tinkered around with some of the HTML in mine), it is pretty damn close.



full preview


body {
background-image: url(YOUR URL HERE);
background-color: #F0F0F0;
color: #8c8c8c;
font-family: helvetica;
font-size: 11px;
background-repeat: repeat;
line-height: 12pt;
margin-top: 90px;
}

a, a:link, a:visited {
color: #40413e;
text-decoration: none;
font-family: georgia;
}

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

strong {
font-weight: bold;
}

i, u, b {
font-family: georgia;
}

i {
color: #b2b2b2;
}

blockquote {
border: 1px dotted #ced0c9;
background: #f8f8f8;
padding: 15px;
}

#content {
width: 700px;
margin: auto;
}

#maincontent {
width: 700px;
float: left;
}

#footer {
text-align: center;
color: #A8ADA4;
font-family: Georgia;
font-size: 15px;
line-height: 11pt;
text-transform: uppercase;
}

.separator {
margin-top: 0px;
}

.clear {
font-size: 9px;
line-height: 8px;
}

/* HEADER */

#header {
width: 200px;
color: #FFFFFF;
text-align: justify;
background-color: #ced0c9;
margin: 0px;
padding: 15px 0px 0px 15px;
float: left;
height: 125px;
}

ul.navheader {
list-style-type: none;
padding: 0px;
margin: 0px 0px 0px 0px;
}

ul.navheader li {
font-family: georgia;
font-size: 13px;
text-transform: uppercase;
border-bottom: 1px dotted #FFFFFF;
width: 180px;
padding: 0px;
}

ul.navheader li a {
padding: 1px 0px 1px 0px;
width: 180px;
color: #707070;
display: block;
}

ul.navheader li.view {
padding: 1px 0px 1px 0px;
width: 180px;
color: #FFFFFF;
}

ul.navheader li a:hover {
background-color: #dcded9;
}

/* SIDEBAR */

#sidebar {
width: 470px;
background-color: #ced0c9;
padding: 5px 15px 0px 0px;
float: left;
color: #FFFFFF;
text-align: justify;
height: 135px;
}

#sidebar, #header {
margin-bottom: 15px;
}

ul.sbarlist {
padding-left: 0px;
}

.sbaritem {
display: inline;
padding: 0px 10px 0px 0px;
}

.sbarblank {
display: block;
font-size: 2px;
line-height: 1px;
}

.defaultuserpic, .title, .subtitle, .sbartitle{
display: none;
}

#sidebar_calendar {
display: none;
}

/* ENTRY */

.entry {
color: #909090;
background-color: #FFFFFF;
font-family: helvetica;
font-size: 11px;
line-height: 16px;
text-align: justify;
padding: 5px 25px 15px 25px;
}

.entry_text {
margin-bottom: 0px;
}

.subcontent {
color: #9C9C9C;
background-color: #FFFFFF;
font-family: arial;
font-size: 12px;
line-height: 16px;
text-align: justify;
min-height: 130px;
}

.datesubject {
color: #9C9C9C;
background-color: #FFFFFF;
font-family: georgia;
font-size: 12px;
line-height: 16px;
text-align: justify;
padding: 0px;
}

.date {
text-align: left;
font-weight: normal;
text-transform: lowercase;
color: #bdbdbd;
font-family: helvetica;
font-size: 9px;
padding: 10px 15px 0px 15px;
}

.subject {
padding: 0px 15px 10px 15px;
color: #8d8d8d;
font-family: georgia;
font-size: 15px;
line-height: 16px;
text-transform: lowercase;
text-align: left;
}

.userpic, .userpicfriends {
position: relative;
float: right;
text-align: center;
margin: 15px;
font-size: 10px;
line-height: 13px;
}

.separator {
height: 10px;
}

.comments {
background-color: #FFFFFF;
color: #ffffff;
font-family: georgia;
font-size: 11px;
line-height: 11pt;
text-align: right;
text-transform: lowercase;
padding: 0px 0px 0px 15px;
}

.ljtags {
margin-top: 18px;
text-transform: lowercase;
font-size: 10px;
color: #bdbdbd;
font-family: Georgia;
}

.currents, .currents strong {
margin: 0px;
text-transform: lowercase;
font-size: 10px;
color: #bdbdbd;
font-family: Georgia;
font-weight: normal;
}

.currentlocation {
display: none;
}

.commentbox {
background-color: #FFFFFF;
margin: 15px;
padding: 15px;
}

/* FOOTER */

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

ul.navfooter li {
background-color: #ced0c9;
display: inline;
margin: 0 7px 0 7px;
list-style-type: none;
padding: 10px;
}

ul.navfooter li a:hover {
color: #FFFFFF;
}

ul.navfooter li.viewing {
display:none;
}

/* CALENDAR */

ul.year {
text-align: center;
padding: 15px 0 15px 0;
margin: 0 0 0px 0;
background: #FFFFFF;
font-family: arial;
font-size: 11px;
line-height: 11pt;
text-transform: uppercase;
}

ul.year li {
display: inline;
margin: 0px 8px 0px 8px;
}

table.yeartable {
width: 700px;
margin: 0 auto;
text-align: center;
padding: 15px;
background-color: #FFFFFF;
}

table.yeartable td.yeardate {
border: 1px dotted #ced0c9;
background: #f5f6f4;
margin: 4px 4px 0px 0px;
font-size: 11px;
}

table.yeartable td.yearmonth {
text-transform: lowercase;
font-size: 15px;
padding: 0px 0px 10px 0px;
}

table.yeartable td.yearday {
text-transform: lowercase;
font-size: 11px;
}

.skiplinks {
text-align: center;
color: #FDFDFD;
background: #FDFDFD;
padding: 15px 15px 15px 15px;
text-transform: lowercase;
}

.skiplinks a, .skiplinks a:link, .skiplinks a:visited {
text-transform: lowercase;
padding: 0px 5px 0px 5px;
}

.skiplinks a:hover {
color: #BABFAA;
}

/* TAGS */

#maincontent h2 {
background-color: #FFFFFF;
margin: 0px;
padding: 15px;
font-family: Georgia;
}

ul.ljtaglist {
background-color: #FFFFFF;
padding: 15px 15px 15px 30px;
}

li.entrytags {
list-style: none;
display: block;
}

/* CONTEXTUAL POPUP */

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

div.ContextualPopup img {
border: 0;
}

div.ContextualPopup div.Inner {
background-color: #f5f6f4 !important;
color: #909090 !important;
border: 1px solid #e4e4e4;
padding: 10px;
width: 220px;
}

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: none !important;
font-weight: normal;
color: #40413e !important;
}

/* ICONS */

img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] {
width: 0;
height: 0;
padding: 10px 12px 0px 0px;
background: url(YOUR URL HERE);
background-repeat: no-repeat;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
width: 0px;
height: 0px;
background-image: url(YOUR URL HERE);
background-repeat: no-repeat;
padding: 16px 18px 0 0 !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
width: 0px;
height: 0px;
background-image: url(YOUR URL HERE);
background-repeat: no-repeat;
padding: 16px 18px 0 0 !important;
}

Notes

• This layout is for S2 Flexible Squares.
  
• Make sure you have your sidebar enabled, with both the blurb and links list.
  
• To accommodate more or less text in the blurb, you will need to manually adjust the height of the HEADER and SIDEBAR DIV layers. Furthermore, the SIDEBAR layer should be 10px larger than the HEADER layer. For example:
  
  #HEADER { height: 125px }
  #SIDEBAR { height: 135px }
  
  This way, both layers will appear to be of the same height in your layout.
  

Credit isn't necessary, but it's always appreciated. If you have any questions, drop me a line and I'll see if I can help.