LJ Layout #002: Dolls House (Recoded)

[ruthenia_alba]

Правила: Стандартные
Стиль: S2 Flexible Squares
Тип аккаунта: любой
Разрешение экрана: любой
Браузеры: Mozilla, Chrome, Safari, IE
Комментарии в стиле журнала: да
Контрольная панель: стандартная
Сайдбар: полный
Заголовок и подзаголовок: отключены
Terms: Standard
Style: S2 Flexible Squares
Account type: all types
Screen Resolution: any
Browsers: Mozilla, Chrome, Safari, IE
Comments in journal's style: yes
Controlstrip: standard
Sidebar: enabled, full
Title & Subtitle: disabled


Live preview // вживую:
recent // comments


1. В настройках журнала выбираете тему Flexible Squares и жмете кнопку внизу "Customise selected theme ->".

2. В левом меню выбираете пункт "Custom CSS". В разделе "Page" ставите:

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

3. В окошко Custom stylesheet вставляете текст:
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): No
- Use layout's stylesheet(s) when including custom external stylesheet: No
- Use external stylesheets: No

3. In Custom stylesheet block, insert the following code:
/* Template: Dolls House */
/* Date: December 26, 2007 */
/* Recoded: October 1, 2009 */
/* S2 Style: Flexible Squares */
/* Codes & Design by Ruthenia Alba (ruthenia-alba.livejournal.com) */
/* Icons: Sweetie Pack (sweetie.sublink.ca) */

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

body {
background: url(http://ruthenia-alba.webs.com/002dolls-layout/002dolls-bg.gif) repeat;
font: normal 11px verdana;
margin: 5px 0;
}

/*colors
background: #fcfcf2;
a:link, a:visited: #bfaa72;
a:hover: #867173;
entry text, border: #2c1114;
*/

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

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

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

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

.title,
.subtitle {
display: none;
}

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

#content {
width: 686px;
background: #fcfcf2;
margin: 0 auto;
padding: 20px 15px 20px 25px;
}

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

#header {
margin: 0;
padding: 0 0 10px 0;
border: 0;
border-bottom: 1px dotted #2c1114;
}

.headerimage {
height: 350px;
background: url(http://ruthenia-alba.webs.com/002dolls-layout/002dolls-header-eng.jpg) center top no-repeat transparent;
margin: 10px 0 0;
padding: 5px 0;
}

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

ul.navheader {
margin: 0;
padding: 0;
text-align: center;
}

ul.navheader li {
display: inline;
padding: 0 5px;
font: normal 11px verdana;
text-transform: uppercase;
letter-spacing: 2px;
color: #2c1114;
}

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

#sidebar {
width: 160px;
float: right;
padding: 20px 0;
border: 0;
border-left: 1px dotted #2c1114;
text-align: justify;
font: normal 11px verdana;
line-height: 15px;
color: #2c1114;
}

#sidebar a,
#sidebar a:link,
#sidebar a:visited {
color: #bfaa72;
}

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

.sbarbody {
padding: 0 5px;
}

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

.defaultuserpic {
text-align: center;
}

.defaultuserpic img {
padding: 10px;
border: 5px solid #bfaa72;
}

ul.sbarlist,
ul .sbarlist sbarcontent {
margin-left: 0;
padding-left: 0;
list-style: none;
}

li.sbartitle {
margin-bottom: 5px;
margin-top: 10px;
padding: 5px;
border: 0;
border-bottom: 1px #2c1114 dotted;
text-align: center;
font: normal 13px Verdana;
letter-spacing: 1px;
list-style: none;
color: #2c1114;
}

li.sbaritem {
padding: 3px 0 3px 10px;
font: normal 11px verdana;
line-height: 15px;
}

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

.sbarbody2 {
margin: 0 0 0 5px;
text-align: center;
}

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

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
background: #ffffff;
padding: 3px 2px;
border: 1px dotted #BFAA72;
text-align: center;
font: normal 9px verdana;
color: #2c1114;
}

.sbarcalendarposts {
background: #ffffff;
padding: 2px;
border: 1px solid #867173;
text-align: center;
font: normal 11px verdana;
color: #2c1114;
}

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

#maincontent {
margin: 10px 180px 0 0;
font: normal 11px verdana;
}

.subcontent {
}

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

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

.datesubject {
margin-top: 10px;
}

.date {
font: normal 12px georgia;
letter-spacing: 1px;
color: #BFAA72;
}

.subject,
.replytosubject {
padding: 5px;
font-weight: normal;
font: bold 13px georgia;
letter-spacing: 1px;
text-transform: uppercase;
color: #BFAA72;
}

.subject a,
.subject a:link,
.subject a:visited,
.replytosubject a,
.replytosubject a:link,
.replytosubject a:visited {
color: #bfaa72;
}

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

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

.userpic {
position: relative;
float: left;
z-index: 15;
margin: 5px;
padding: 5px 15px 0 0;

}

.userpicfriends {
position: relative;
float: left;
z-index: 15;
background: #fcfcf2 !important;
margin: 10px;
padding: 5px;
text-align: center;
}

.userpicfriends a,
.userpicfriends a:hover {
color: #2c1114;
}

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

.entry {
margin: 0 0 10px 0;
padding: 0px;
text-align: justify;
font: normal 11px verdana;
line-height: 20px;
color: #2c1114;
}

.entry ul li {
margin-left: 30px;
padding-left: 0px;
line-height: 15px;
}

.entry ol li {
margin-left: 15px;
padding-left: 5px;
list-style: lower-roman;
}

blockquote {
background: #FFFFFF;
padding: 8px;
border: 1px dotted #bfaa72;
border-left: 8px solid #bfaa72;
color: #2c1114;
}

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

.comments {
padding: 5px 5px 15px 5px;
border-bottom: 1px dotted #2c1114;
font: normal 11px verdana;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
color: #FCFCF2;
}

.comments a,
.comments a:link,
.comments a:visited {
color: #bfaa72;
}

.comments a:hover {
color: #867173;
text-decoration: none;
}

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

#footer {
margin: 10px 0;
padding: 5px;
border: 0;
text-align: center;
font: normal 11px verdana;
line-height: 5px;
letter-spacing: 2px;
text-transform: uppercase;
}

#header a, #header a:link, #header a:visited,
#footer a, #footer a:link, #footer a:visited {
color: #bfaa72;
font-weight: normal;
}

#header a:hover,
#footer a:hover {
color: #867173;
text-decoration: none;
}

.clearfoot {
height: 0;
}

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

}

ul.navfooter li {
margin: 0 5px;
display: inline;
}

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

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

.skiplinks {
margin: 10px 0;
text-align: center;
color: transparent;
}

.skiplinks a:hover {
text-decoration: none;
}

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

.separator {
height: 10px;
}

.box {
margin: 0;
padding: 0;
}

.box form {
background: transparent;
padding: 5px 0 0 10px;

}

.box form table {
border: 0px !important;
position:center;
}

.box center {
padding: 10px 0;
}

.commentbox,
.commentboxpartial {
background: #fcfcf2;
padding: 0;
margin: 10px;
border: 0 !important;
min-height: 105px;
}

.commentreply {
position: relative;
padding: 5px 0;
font: normal 11px verdana;
line-height: 15px;
color: #2C1114;
}

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

.datesubjectcomment a:link,
.datesubjectcomment a:visited {
color: #bfaa72;
}

.datesubjectcomment a:hover {
color: #867173;
}

.userpiccomment {
position: relative;
float: left;
z-index: 15;
background: #ffffff;
margin: 0 5px 0 0;
padding: 5px;
border: 1px dotted #BFAA72;
top: -20px;
}

.commentbox div {
padding: 5px;
}

.commentbox div div {
padding: 5px 5px 2px 0 !important;
min-height: 20px;
}

.commentbox div div img {
height: 20px;
width: 20px;
}

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

#userpics,
#userpics select,
#userpics input,
#postform label,
#postform b,
#ljuser_row {
font: normal 10px verdana;
color: #bfaa72;
}

.lj-view-reply #content,
.lj-view-archive #content {
padding: 20px 15px 200px 25px;
}

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

ul.year {
padding-bottom: 40px;
text-align: center;
font: bold 13px verdana;
}

ul.year li,
ul.year li.active {
display: inline;
color: #2c1114;
}

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

table.yeartable {
margin: auto;
}

td.yearmonth {
border: 0;
color: #2c1114;
}

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

table.yeartable td.yearday {
border: 1px dotted #BFAA72;
text-align: center;
color: #2c1114;
}

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

table.yeartable td.yeardate {
border: 1px dotted #BFAA72;
color: #2c1114;
}

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

.clear {
height: 0;
}

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

input,
textarea {
border: 1px dotted #bfaa72;
font: normal 11px verdana;
color: #2c1114;
margin: 3px;
padding: 3px 2px;
background: #ffffff;
}

textarea.textbox {
width: 90% !important;
}

/* ------- user & comm icons ------- */

.ljuser img {
width: 0;
height: 0;
padding: 5px 5px 8px 15px;
background: transparent url(http://ruthenia-alba.webs.com/002dolls-layout/002dolls-ljuser.png) no-repeat;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
width: 0;
height: 0;
padding: 5px 5px 11px 18px;
background: transparent url(http://ruthenia-alba.webs.com/002dolls-layout/002dolls-ljcomm.png) no-repeat;
}

/* ----- NEW NAVIGATION STRIP ------ */

#lj_controlstrip_new {
background: #FCFCF2;
border-bottom: dotted 1px #2c1114 !important;
border: 0;
}

.w-cs {
color: #2c1114 !important;
font: normal 11px Arial;
}

.w-cs A:link,
.w-cs A:visited,
.w-cs A:active {
border: none !important;
text-decoration: none;
color: #bfaa72 !important;
}

.w-cs A:hover {
color: #867173 !important;
}

.w-cs .w-cs-menu li {
background: url(http://webzoom.freewebs.com/ruthenia-alba/002dolls-layout/upload/002dolls-strip.png) no-repeat;
}

/* ----- left part: total ------ */

.w-cs .w-cs-userinfo {
background: transparent !important;
border: 0;
}

/* ----- left part: message window ------ */

.w-cs-summary {
background: #fff !important;
border: solid #bfaa72 1px;
}

.w-cs .w-cs-summary LI.w-cs-i-tokens {
border-right: 1px solid #bfaa72;
}

/* ----- right part: viewing journal ------ */

.w-cs-status p {
color: #2c1114 !important;
font: normal 11px Arial !important;
}

/* ----- buttons: logout, search ------ */

.w-cs input.submit,
.w-cs input.text {
background: #fff;
border: solid #bfaa72 1px !important;
height: 19px;
padding: 0 5px 4px 5px;
border-radius: 2px;
box-shadow: 0 0 0 !important;
text-shadow: 0 0;
color: #bfaa72 !important;
}

.w-cs FORM.w-cs-search label.placeholder-label {
margin: 2px 0 0 3px;
color: #2c1114 !important;
}

.w-cs FORM.w-cs-search INPUT.submit {
border: 0 !important;
height: 20px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/002dolls-layout/upload/002dolls-search.png) no-repeat !important;
background-position: -2px 1px !important;
}

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

.b-popup-outer {
background: #fcfcf2;
opacity: .9;
border: 0;
border-radius: 5px;
}

.b-popup-inner {
border: 0;
}

.i-popup-arr {
display: none;
}

.b-contextualhover a:link,
.b-contextualhover a:visited {
background: transparent;
font: normal 11px Verdana !important;
color: #bfaa72 !important;
}

.b-contextualhover a:hover {
color: #867173 !important;
text-decoration: none !important;
}

.b-contextualhover,
.b-contextualhover div,
.b-contextualhover p,
.b-contextualhover ul,
.b-contextualhover ol,
.b-contextualhover li,
.b-contextualhover label,
.b-contextualhover img,
.b-contextualhover span,
.b-contextualhover h3,
.b-contextualhover input {
font: normal 11px Verdana !important;
color: #2c1114;
}

.b-contextualhover-options {
border-top: 1px solid #2c1114 !important;
border-bottom: 0 !important;
font: normal 11px Verdana !important;
}

.b-contextualhover h3 strong {
font: bold 11px Verdana !important;
text-transform: none;
color: #867173;
}

Like it?