LJ Layout #011: Early Morning

[ruthenia_alba]

The layout that took 2nd place in the layout contest held in honor of LiveJournal's 10-th anniversary.

Style: S2 Flexible Squares
Account type: all types
Screen Resolution: 1024+ (best viewed in 1280)
Browsers: Mozilla, Chrome, Safari (sorry, but IE7 has some problems with color...)
Comments in journal's style: yes
Controlstrip in journal's style: yes
Sidebar: full, on the right
Title & Subtitle: enabled




Live preview:
recent // friends // comments // archive



1. In Customize section choose Flexible Squares (sidebar on the right!) and click "Customise selected theme ->".

2. Copy the code from below, save it as .css file and upload to your host (i.e. webs.com).

/* Title: Early Morning */
/* Date: July 04, 2009 */
/* S2 Style: Flexible Squares */
/* Vector images, Design & Codes by Ruthenia Alba (ruthenia-alba.livejournal.com) */

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

/*colors
entry text color: #4f3b1b;
a, a:link colors: #62aa45;
a:hover colors: #336519;
a:visited colors: #4f3b1b;
*/

body {
margin: 0;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-background.png);
background-repeat:repeat-x;
background-color: #62aa45;
}

.ljuser img {
background-color: transparent;
width: 0;
height: 0;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-user-bg.png);
background-repeat: no-repeat;
padding: 10px 12px 9px 26px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color: transparent;
width: 0;
height: 0;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-comm-bg.png);
background-repeat: no-repeat;
padding: 12px 10px 12px 26px;
}

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

.title {
margin-top: 250px;
padding: 0px 0px 10px 0px;
text-align: left;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}

.subtitle {
text-align: left;
color: #d2ffc8;
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}

/* ---------- a (links) --------- */

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

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

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

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

#content {
background-color: transparent;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-credit.png);
background-position: bottom left;
background-repeat: no-repeat;
border: 0px;
margin: 0px 0px 10px 50px;
padding: 0px;
}

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

#header {
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-header.png);
background-position: right;
background-repeat: no-repeat;
background-color: transparent;
height: 330px;
border: 0px;
padding: 30px 0px 0px 0px;
margin: 0px 130px 0px 0px;
}

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

ul.navheader {
background-color: transparent;
height: ;
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
color: #ffffff;
padding: 0px 0px 0px 0px;
margin: 0px;
}

ul.navheader li {
display: inline;
padding-left: 10px;
}

div#header a,
div#header a:link {
color: #ffffff;
text-decoration: none;
}

div#header a:hover {
color: #deffb8;
text-decoration: none;
}

div#header a:visited {
color: #ffffff;
text-decoration:none;
}

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

#sidebar {
background-color: transparent;
text-align: left;
border: 0px;
color: #;
padding: 0px 0px 0px 0px;
margin: 5px -10px 0px 0px;
}

div .sbarbody {
background-color: #ffffff;
margin-bottom: 50px;
padding: 0px;
}

li.sbartitle {
width: 250px;
background-color: #89c542;
background-position: top right;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-datesubject-bg.png);
background-repeat:no-repeat;
text-align: left;
font-weight: bold;
font-family: Tahoma;
font-size: 16px;
text-decoration: none;
color: #4f3b1b;
border: 0px;
margin: 0px;
padding: 10px 15px 10px 30px;
}

li.sbaritem {
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-bullet.png);
background-position: left;
background-repeat: no-repeat;
width: 250px;
padding: 10px 15px 10px 30px;
background-color: #ffffff;
margin: -11px 0px 0px 0px;
color: #4f3b1b;
}

li.sbaritem a {
font-zise: 12px;
}

ul.sbarlist, ul.sbarlist sbarcontent {
padding: 0px;
margin: px;
text-align: left;
}

div .defaultuserpic {
display:none;
}

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

.calendar {
width: 295px;
border: 0px;
background-color: #ffffff;
margin: -11px 0px 0px 0px;
padding: 10px;
}

div #sidebar_calendar .sbarbody {
}

.sbarcalendar {
border: 0px;
width: px;
text-align: center;
font-family: Tahoma;
font-weight: bold;
font-size: 11px;
color: #4F3B1B;
padding: 10px;
}

.sbarcalendarposts {
border: 0px;
border-top: 3px #ABE863 solid;
background-color: #DEFFB8;
font-family: Tahoma;
font-size: 11px;
padding: 7px;
font-weight: bold;
}

div#sidebar .sbarcalendarposts a,
div#sidebar .sbarcalendarposts a:link,
div#sidebar .sbarcalendarposts a:visited {
color: #5DA843;
font-size: 11px;
text-decoration: none;
}

div#sidebar .sbarcalendarposts a:hover {
color: #4F3B1B;
text-decoration: none;
}

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

div#sidebar_tags .sbarbody {
font-size: 12px;
font-family: Tahoma;
margin: -11px 0px 40px 0px;
}

div#sidebar_tags li.sbaritem {
padding: 10px 15px 15px 30px;
font-size: 12px;
font-family: Tahoma;
}

div#sidebar_tags li.sbaritem a,
div#sidebar_tags li.sbaritem a:link {
color: #62aa45;
text-decoration: none;
}

div#sidebar_tags li.sbaritem a:hover {
color: #336519;
text-decoration: underline;
}

div#sidebar_tags li.sbaritem a:visited {
color: #4f3b1b;
text-decoration: none;
}

/* --------- sidebar tagcloud--------- */

div#sidebar_tags li.tagcloud {
width: 250px;
padding: 10px 15px 10px 30px;
margin: -11px 0px 0px 0px;
background-color: #ffffff !important;
font-size: 12px;
font-family: Tahoma;
color: #4f3b1b;
}

div#sidebar_tags li.tagcloud a,
div#sidebar_tags li.tagcloud a:link {
padding-right: 3px;
font-size: 12px;
font-family: Tahoma;
color: #62aa45;
}

div#sidebar_tags li.tagcloud a:hover {
color: #336519;
text-decoration: underline;
}

div#sidebar_tags li.tagcloud a:visited {
color: #4f3b1b;
text-decoration: none;
}

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

div #sidebar_linklist .sbarbody {
font-size: 12px;
font-family: Tahoma;
}

div#sidebar_linklist ul.sbarlist sbarcontent {
}

div#sidebar_linklist li.sbaritem {
font: 12px Tahoma;
padding: 10px 15px 10px 30px;
margin: -11px 0px 10px 0px;
text-align: left;
}

div#sidebar_linklist li.sbaritem a,
div#sidebar_linklist li.sbaritem a:link {
color: #62aa45;
text-decoration: none;
}

div#sidebar_linklist li.sbaritem a:hover {
color: #336519;
text-decoration: underline;
}

div#sidebar_linklist li.sbaritem a:visited {
color: #4f3b1b;
text-decoration: none;
}

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

div #sidebar_summary .sbarbody {
padding: 0px;
}

div #sidebar_summary li.sbaritem {

font: 12px Tahoma;
padding: 10px 15px 10px 30px;
margin: -11px 0px 10px 0px;
text-align: left;
}

div #sidebar_summary li.sbaritem a,
div #sidebar_summary li.sbaritem a:link {
color: #62aa45;
text-decoration: none;
}

div #sidebar_summary li.sbaritem a:hover {
color: #336519;
text-decoration: underline;
}

div #sidebar_summary li.sbaritem a:visited {
color: #4f3b1b;
text-decoration: none;
}

div #sidebar_summary li.sbaritem span.count {
color: #4f3b1b;
padding: px;
}

div #sidebar_summary li.sbaritem span.count a {
color: #4f3b1b;
padding: px;
}

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

div .sbarbody2 {
text-align: left;
background-color: #ffffff;
color: #4f3b1b;
font-family: Tahoma;
font-size: 12px;
width: 250px;
padding: 10px 15px 10px 30px;
margin: -51px 0px 50px 0px;
}

div .sbarbody2 a,
div .sbarbody2 a:link {
color: #62aa45;
text-decoration: none;
}

div .sbarbody2 a:hover {
color: #336519;
text-decoration: underline;
}

div .sbarbody2 a:visited {
color: #4f3b1b;
text-decoration: none;
}

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

#maincontent {
font-family: Tahoma, sans-serif;
font-size: 12px;
background-color: transparent;
padding: 0px;
border: 0px;
}

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

/* --------- ENTRY --------------------------- */

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

div.datesubject {
background-color: #89c542;
background-position: top right;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-datesubject-bg.png);
background-repeat:no-repeat;
border: 0px;
padding: 0px;
}

div.date {
background-color: transparent;
padding: 5px 160px 0px 10px;
color: #336519;
font-family: Tahoma;
font-weight: normal;
font-size: 10px;
text-transform: lowercase;
text-align: left;
}

div.subject,
div.replytosubject {
font-weight: bold;
font-family: Tahoma;
font-size: 16px;
text-decoration: none;
color: #4f3b1b;
padding: 0px 160px 10px 10px;
text-align: left;
}

div.subject a,
div.subject a:link,
div.subject a:visited,
div.replytosubject a,
div.replytosubject a:link,
div.replytosubject a:visited {
color: #4f3b1b;
text-decoration: none;
}

div.subject a:hover,
div.replytosubject a:hover {
color: #336519;
text-decoration: none;
}

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

div.userpic,
div.userpicfriends {
background-color: transparent !important;
border: 0px;
float: right;
padding: 30px 10px 20px 10px;
margin-top: 40px;
color: #4f3b1b;
}

div.userpicfriends a font,
div.userpicfriends a:link font {
color: #62aa45 !important;
}

div.userpicfriends a:hover font {
color: #336519 !important;
}

div.userpicfriends a:visited font {
color: #4f3b1b!important;
}

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

.entry {
background-color: #ffffff;
width: auto;
font-family: Tahoma;
font-size: 12px;
text-align: justify;
border: 0px;
margin: 0px 0px 30px 0px;
padding: 0px;
}

div.entry_text {
background: transparent;
padding: 15px 15px 5px 15px;
margin: 0px;
min-height: 50px;
font-family: Tahoma;
font-size: 12px;
line-height: 18px;
color: #4f3b1b;
}

div.entry_text p {
font-family: Tahoma;
font-size: 12px;
line-height: 18px;
margin-top:0px;
padding-top: 0px;
}

blockquote {
background-color: #DEFFB8;
border: 0px;
border-top: 3px #ABE863 solid;
padding: 15px;
margin: 0px 180px 15px 50px;
color: #2f2f2f;
}

/* ---- content: tags ---- */

div.ljtags {
padding: 0px 0px 0px 0px;
font-size: 10px;
color: #4f3b1b;
font-weight: normal;
margin: 0px;
}

div.ljtags a,
div.ljtags a:link,
div.ljtags a:visited {
color: #62aa45;
text-decoration: none;
font-weight: normal;
text-transform: none;
}

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

div.clear {
height: 0px;
margin: 0px;
}

/* ---- content: currents ---- */

div.currents {
padding: 0px 10px 0px 15px;
margin: 0px;
border: 0px;
}

div .currentlocation,
div .currentlocation strong {
padding: 0px 0px 10px 0px;
font-size: 10px;
font-family: Tahoma;
color: #4f3b1b;
font-weight: normal;
}

div .currentmood,
div .currentmood strong {
background-image: url();
background-repeat: no-repeat;
padding: 0px 0px 5px 0px;
font-size: 10px;
font-family: Tahoma;
color: #4f3b1b;
font-weight: normal;
}

div .currentmusic,
div .currentmusic strong {
background-image: url();
background-repeat: no-repeat;
padding: 0px 0px 5px 0px;
font-size: 10px;
font-family: Tahoma;
color: #4f3b1b;
font-weight: normal;
}

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

div.comments {
text-align: left;
background-color: #ffffff;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-comments-bg.png);
background-repeat: no-repeat;
height: 30px;
font-family: tahoma, sans serif;
font-size: 1px;
color: transparent;
font-weight: normal;
padding: 10px 0px 15px 15px;
border: 0px;
margin: 0px 0px 0px 0px;
}

div.comments a,
div.comments a:link,
div.comments a:visited {
color: #336519;
font-size: 18px;
margin: 0px;
padding: 0px 18px 0px 18px;
text-decoration: none;
}

div.comments a:hover {
color: #4f3b1b;
font-size: 18px;
text-decoration: none;
}

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

div#footer {
background-color: transparent;
font-family: Tahoma;
font-size: 15px;
color: #ffffff;
letter-spacing: .5px;
line-height: 5px;
align: center;
color: #4f3b1b;
font-weight: bold;
padding: 0px;
border: 0px;
margin: 0px 180px 10px 0px;
}

div#footer a,
div#footer a:link,
div#footer a:visited {
color: #336519;
text-decoration: none;
}

div#footer a:hover {
color: #4f3b1b;
text-decoration: none;
}

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

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

div.skiplinks {
background-color: transparent;
text-align: center;
margin: -20px 0px 0px 0px;
padding: 0px 0px 5px 0px;
border: 0px;
color: transparent;
}

div.skiplinks a,
div.skiplinks a:link,
div.skiplinks a:visited {
color: #336519;
font-size: 10px;
padding: 0px 5px 0px 5px;
font-family: Tahoma;
letter-spacing: 1px;
text-transform: uppercase;
}

div.skiplinks a:hover {
color: #4f3b1b;
text-decoration: none;
}

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

div.separator {
height:10px;
}

div.box {
background-color: #ffffff;
border: 0px;
font: 12px Tahoma;
line-height: 18px;
color: #4f3b1b;
border: 0px;
margin: 20px 0px 0px 0px;
padding: 0px 0px 20px 0px;
}

div.box form {
background-color: #DEFFB8;
padding: 5px 0px 0px 100px;
}

div.box form table {
background-color: #DEFFB8;
border: 0px !important;
position:center;
}

div.box center {
background-color: #89c542;
background-position: top right;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-datesubject-bg.png);
background-repeat:no-repeat;
font: 10px Tahoma;
text-transform: uppercase;
letter-spacing: 1px;
align: center;
margin: 0px;
color: transparent;
padding: 10px;
}

div.box center a,
div.box center a:link,
div.box center a.visited {
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
color: #336519;
}

div.box center a:hover {
color: #4f3b1b;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}

.commentbox,
.commentboxpartial {
background-color: transparent;
border: 0px;
padding: 10px 10px 0px 10px;
margin: 0px;
}

.commentreply {
background-color: transparent;
font: 12px Tahoma;
border: 0px;
padding: 10px;
margin: 0px;
color: #4f3b1b;
}

div.datesubjectcomment {
background-color: transparent;
border:0px;
padding: 20px 10px 0px 0px;
margin: 10px 10px 0px 0px;
}

div.datesubjectcomment a,
div.datesubjectcomment a:link {
color: #62aa45;
text-decoration: none;
letter-spacing: 0px;
}

div.datesubjectcomment a:hover {
color: #336519;
text-decoration: underline;
letter-spacing: 0px;
}

div.datesubjectcomment a:visited {
color: #4f3b1b;
text-decoration: none;
letter-spacing: 0px;
}

div.datesubjectcomment strong {
background-color: transparent;
color: #336519;
}

.userpiccomment {
position: relative;
float: left;
background-color: #DEFFB8;
border: 0px;
border-top: 3px solid #ABE863;
padding: 10px;
margin: 0px 10px 0px 0px;
}

/* ------ REPLY PAGE ------ */

.lj-view-reply div.entry {
background-color: #ffffff;
margin: 0px 0px 30px 0px;
padding: 10px;
min-height: 105px;
font-family: Tahoma;
font-size: 12px;
text-align: justify;
color: #4f3b1b;
}

.lj-view-reply div .replytoposter {
padding: 5px 10px 0px 10px;
margin: 0px;
color: #4f3b1b;
}

.lj-view-reply div .replytosubject {
color: #336519;
padding: 0px 10px 5px 10px;
}

.lj-view-reply div.userpic {
padding: 15px 5px 10px 10px;
margin-top: 40px;
}

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

.lj-view-archive #maincontent {
width:400px;
margin: 0px 0px 0px 200px;
}

ul.year {
margin: 0px;
padding: 12px;
background-color: #89c542;
background-position: top right;
background-image: url(http://www.ljplus.ru/img4/r/u/ruthenia_alba/012morning-datesubject-bg.png);
background-repeat:no-repeat;
}

ul.year li,
ul.year li.active {
display: inline;
color: #4f3b1b;
font-weight: bold;
font-family: Tahoma;
font-size: 16px;
letter-spacing: 1px;
margin: 0px 10px 0px 10px;
}

ul.year li a,
ul.year li a:link,
ul.year li a:visited {
color: #336519;
text-decoration: none;
}

ul.year li a:hover {
color: #4f3b1b;
text-decoration: none;
}

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

table.yeartable {
margin: 0px auto 0px auto;
padding: 0px 10px 0px 10px;
background-color: #ffffff;
}

td.yearmonth {
color: #4f3b1b;
padding: 5px 0px 5px 0px;
font-size: 12px;
font-family: Tahoma;
font-weight: bold;
}

/* ------ days of the week ------ */

table.yeartable td.yearday {
font-size: 12px;
font-family: Tahoma;
font-weight: bold;
background-color: #DEFFB8;
text-align: center;
color: #62aa45;
border: 0px;
border-top: 3px solid #ABE863;
padding: 5px;
}

/* ------ date ------ */

table.yeartable td.yeardate {
font-size: 11px;
font-family: Tahoma;
border: 0px;
color: #4f3b1b;
}

table.yeartable td.yeardate div {
padding: 0px 5px 0px 0px;
}

table.yeartable td.yeardate a,
table.yeartable td.yeardate a:link,
table.yeartable td.yeardate a:hover,
table.yeartable td.yeardate a:visited {
font-size: 11px;
font-family: Tahoma;
}

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

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

textarea {
font: Tahoma 12px;
color: #4f3b1b;
border: 1px solid #89C542;
background-color: #ffffff;
padding: 4px;
}

input, select {
font: Tahoma 12px;
color: #4f3b1b;
border: 1px solid #89C542;
background-color: #ffffff;
padding: 4px;
}

div.adv {
margin-top: 10px;
}

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

div.ContextualPopup div.Inner {
border: 0px;
border-top: 3px solid #ABE863!important;
background-color: #DEFFB8 !important;
position: relative;
padding: 10px;
font: 10px Tahoma;
color: #4f3b1b !important;
}

div.ContextualPopup div.Inner a,
div.ContextualPopup div.Inner a:link {
text-decoration: none !important;
font: 10px Tahoma;
font-weight: normal;
color: #62aa45 !important;
}

div.ContextualPopup div.Inner a:hover {
text-decoration: underline !important;
font-weight: normal;
color: #336519 !important;
}

div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #4f3b1b !important;
}

/* ------- Controlstrip ------- */

#lj_controlstrip td {
font-family: Tahoma;
font-size: 10px;
background-color: #78A8D1;
border: 0px;
color: #4f3b1b !important;
}

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

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

#lj_controlstrip_statustext {
color: #4f3b1b;
}

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

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

3. 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: Yes
- Use external stylesheets: Yes
- Custom external stylesheet URL: URL of the code

4. Click "Save Shanges".

NB 1. To set the somments line as "1 +" you shoud visit your text settings and set these like that: