Layout #007: Scrapbook Summer (Recoded)

[ruthenia_alba]

Правила: Стандартные
Стиль: S2 Flexible Squares
Тип аккаунта: любой (при plus - вертикальная реклама)
Разрешение экрана: 1024+
Браузеры: Mozilla, IE 7, Safari, Opera, Chrome
Комментарии в стиле журнала: да
Контрольная панель: включена
Сайдбар: полный, слева
Заголовок и подзаголовок: только заголовок
Terms: Standard
Style: S2 Flexible Squares
Account type: all types (for plus account - vertical ads)
Screen Resolution: 1024+
Browsers: Mozilla, IE 7, Safari, Opera, Chrome
Comments in journal's style: yes
Controlstrip: enabled
Sidebar: full, on the left
Title & Subtitle: title only




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



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

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

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

3. В окошко Custom stylesheet вставляете текст:
1. In Customize section choose Flexible Squares |(sidebar on the left!) and click "Customise selected theme ->".

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: Yes
- Use external stylesheets: No

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

/* Layout #07: Scrapbook Summer */
/* Date: July 31, 2008 */
/* Recoded: March 04, 2012 */
/* S2 Style: Flexible Squares */
/* Design & Codes: Ruthenia Alba (ruthenia_alba.livejournal.com) */

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

body {
padding: 0;
margin:0;
background: url(http://webzoom.freewebs.com/ruthenia-alba/007scrapbook-layout/upload/007scrapbook-bg.jpg) repeat scroll;
}

p {
margin-top: 0;
}

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

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

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

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

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

#content {
background: transparent;
border:0;
width: 92%;
padding: 30px 0 0;
margin:0 auto;
max-width: 1140px;
}

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

.title {
width: 500px;
margin: -115px 0 0 320px;
font: bold 15px Trebuchet MS, Arial !important;
color: #117584;
letter-spacing: 1px;
text-transform: uppercase;
}

.subtitle {
display: none;
}

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

#header {
height: 310px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/007scrapbook-layout/upload/007scrapbook-header.png) no-repeat top left;
border: 0;
margin-top: 0;
padding: 0 0 30px 0;
text-align: left;
}

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

ul.navheader {
padding: 205px 0px 60px 260px;
margin: 0px;
font: bold 15px Trebuchet MS, Arial;
text-transform: uppercase;
letter-spacing: 1px;
color: #2B9EAF;
}

div#header a, div#header a:link, div#header a:visited {
color: #2B9EAF;
text-decoration:none;
}

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

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

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

#sidebar {
width: 160px;
float: left;
background: transparent;
margin: 0 0 0 30px;
padding: 0;
border: 0;
text-align: center;
font: normal 13px Trebuchet MS, Arial;
color: #585F0D;
}

div#sidebar a,
div#sidebar a:link {
color: #919b23;
text-decoration: none;
}

div#sidebar a:visited {
color: #0E6477 !important;
text-decoration: none;
}

div#sidebar a:hover {
color: #017A97 !important;
text-decoration: none;
}

div .defaultuserpic {
width:100px;
margin: 0 auto;
padding: 10px;
background: #919b23;
border: 0;
border-top: 3px solid #017A97;
}

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

li.sbartitle {
margin: 30px 0 10px 0;
padding: 7px 0;
border: 0;
border-top: 3px solid #017A97;
background: #919b23;
font: bold 13px Trebuchet MS, Arial;
text-transform: uppercase;
color: #fbffcf;
}

li.sbaritem,
.sbarbody2,
span .count {
margin: 7px 0 0;
padding: 7px 0;
list-style: none;
font: normal 13px Trebuchet MS, Arial;
background: #fbffcf;
line-height: 16px;
color: #585f0d;
}

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

.calendar {
padding: 5px;
}

.calendar tr {
padding: 1px;
border: 0;
}

.calendar td {
padding: 3px;
color: #585f0d;
border: 0;
font: normal 12px Trebuchet MS, Arial;
}

div#sidebar_calendar ul.sbarlist {
padding: 0;
font: normal 11px Trebuchet MS, Arial;
background: #fbffcf;
}

.sbarcalendar {
background: transparent;
border: 0;
border-top: solid 2px transparent !important;
}

.sbarcalendarposts {
background:#919b23;
border: 0;
border-top: 2px solid #017A97 !important;
}

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

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

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

#sidebar_linklist li.sbaritem {
line-height: 1em;
}

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

div#sidebar_summary li.sbaritem {
border: 0;
padding: 7px 0;
margin: 7px 0 0;
line-height: 16px;
color: #585f0d;
}

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

li.tagcloud {
background: #fbffcf;
padding: 10px;
}

li.tagcloud a {
font: normal 13px Trebuchet MS, Arial !important;
}

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

/* --------- main content --------- */

#maincontent {
padding: 0;
margin: 0 0 0 230px;
background: transparent;
border: 0;
}

.subcontent {
border: 0;
padding: 0;
max-width: 1200px;
min-width: 600px;
margin: 0 !important;
margin-left: 230px; /* important */
}

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

div.datesubject {
background: #919b23;
border-top: 5px solid #017A97;
color: transparent;
padding: 5px 125px 10px 20px;
}

div.date {
padding: 0;
margin: 3px 0;
text-align: left bottom;
font: bold 13px Trebuchet MS, Arial;
text-transform: uppercase;
color: #c4cf49;
background: transparent;
}

div.subject,
div.replytosubject,
.subj-link {
padding:4px 0 0;
font: bold 13px Trebuchet MS, Arial;
text-transform: uppercase;
color: #fbffcf !important;
}

.subject a:hover {
color: #c4cf49 !important;
}

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

div.entry {
background: #fbffcf;
border: 1px #919b23 dashed;
border-top: 0;
margin: 0;
padding: 20px;
font: normal 13px Trebuchet MS, Arial;
line-height: 20px;
color: #585f0d;
}

div.entry_text {
color: #585f0d;
text-align: justify;
}

blockquote {
margin: 10px 120px;
padding: 10px;
font: italic 13px Trebuchet MS, Arial;
line-height: 20px !important;
border: 0;
border-left: 5px solid #919b23;
background: #fff;
}

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

div.userpic, div.userpicfriends {
position: relative;
float: right;
border: 1px dashed #919B23;
background: #FBFFCF;
padding: 3px;
margin-top: 14px;
}

div.userpicfriends {
font: normal 13px Trebuchet MS, Arial;
color: #017A97 !important;
background: transparent !important;
padding: 2px;
}

div.userpicfriends a,
div.userpicfriends a font,
div.userpicfriends a:link,
div.userpicfriends font a:visited {
color: #919B23 !important;
text-decoration: none;
}

div.userpicfriends a:hover font {
color: #017A97 !important;
text-decoration: none;
}

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

.ljtags {
padding: 10px 0 0 0;
font: normal 13px Trebuchet MS, Arial;
color: #017A97;
}

.ljtags a,
.ljtags a:link {
color: #919b23;
text-decoration: none;
}

.ljtags a:hover {
color: #017A97;
text-decoration: none;
}

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

.currents,
.currentlocation, .currentlocation strong,
.currentmood, .currentmood strong,
.currentmusic, .currentmusic strong {
padding: 0;
background: transparent;
font: normal 13px Trebuchet MS, Arial !important;
color: #017A97;
}

.currentlocation {
color: #017A97;
}

.currentmood {
color: #919b23;
}

.currentmusic {
color: #919b23;
}

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

div.comments {
background: transparent;
text-align:center;
padding:0;
margin: 0 0 10px 0;
font: bold 13px Trebuchet MS, Arial !important;
color: transparent;
}

div.comments a,
div.comments a:link {
color: #919b23;
text-decoration: none;
}

div.comments a:hover {
color: #017A97 !important;
text-decoration: none;
}

div.comments a:visited {
color: #0E6477;
text-decoration: none;
}

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

.separator {
height: 10px;
}

.clear {
height: 0px;
}

#footer {
background: transparent;
border:0;
padding:0 0 0 250px;
text-align: center;
font: bold 13px Trebuchet MS, Arial;
text-transform: uppercase;
letter-spacing: 0;
}

ul.navfooter {
color:#017A97;
}

div#footer a,
div#footer a:link {
color: #0E6477;
text-decoration: none;
}

div#footer a:visited {
color: #0E6477;
text-decoration: none;
}

div#footer a:hover {
color: #017A97;
text-decoration: none;
}

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

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

.skiplinks {
margin: -28px auto 10px auto;
font: bold 13px Trebuchet MS, Arial;
text-transform: uppercase;
color: transparent;
}

.skiplinks a {
margin: 0;
color: #0E6477;
}

.skiplinks a:hover {
color:#017A97;
}

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

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

.box center {
margin: 0 0 10px 0;
font: normal 13px Trebuchet MS, Arial;
color:#017A97;
}

.box center a {
color: #0E6477;
}

.box center a:hover {
color:#017A97;
}

.commentbox {
margin: 0 0 15px 0;
padding: 10px 0 0;
border: 1px #919b23 dashed;
font: normal 13px Trebuchet MS, Arial;
background: #fbffcf;
color: #FBFFCF;
}

.commentbox div a {
font: normal 13px Trebuchet MS, Arial;
}

.commentboxpartial {
border:1px #919b23 dashed;
background:#fbffcf;
color: #585f0d;
}

.datesubjectcomment {
background: #919b23;
border: 0;
color: #c4cf49;
}

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

.datesubjectcomment a:hover {
color: #c4cf49;
text-decoration: none;
}

.commentreply {
padding: 0 0 0 10px;
font: normal 13px Trebuchet MS, Arial;
color: #585f0d;
line-height: 20px;
}

.userpiccomment {
position: relative;
border: 5px solid #919b23;
padding: 0;
}

.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 ----- */

#add_comment.box {
margin: 0 !important;
background: transparent;
color: transparent !important;
}

.b-postform {
margin: 15px 0 0;
padding: 15px;
background: #FBFFCF !important;
border: 1px #919b23 dashed;
}

.b-postform table, div.box form table {
background: transparent;
border: 0 !important;
margin: 0 0 10px 30px;
align: center;
color: #585f0d;
}

div.box form table td,
div.box form table b {
font: normal 13px Verdana Trebuchet MS, Arial !important;
}

#qrform {
margin: 0 0 0 10px !important;
padding: 0 !important;
align: center;
}

#qrformdiv {
background: #FBFFCF;
margin: 0 0 15px 0;
padding: 10px 0;
}

#qrform table {
margin: 10px 0;
}

#qrform table tbody tr td {
text-align: left !important;
color: #585f0d;
}

#qrform table img {
margin: 0 0 0 20px;
}

.quickreply table {
margin: 0 auto 0 50px !important;
width: 90% !important;
}

#lj_userpicselect {
align: right;
width: 21.5%;
}

.textbox {
margin: 0 10px 0 20px !important;
width: 95%;
}

#submitpost {
margin: 0 10px 0 20px !important;
}

option {
margin: 0 !important;
width: 100%;
}

.helplink {
display: none;
}

#qrform a {
margin: 0 !important;
padding: 0 !important;
}

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

.lj-view-archive #maincontent,
.lj-view-tags #maincontent {
padding: 15px;
background: #fcffbf;
border: 1px #919b23 dashed;
font: normal 13px Trebuchet MS, Arial;
color: #585f0d;
}

ul.year{
font: normal 13px Trebuchet MS, Arial;
}

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

li.active {
padding: 0 10px;
font: normal 13px Trebuchet MS, Arial;
color: #585f0d;
}

td.yearmonth {
padding-bottom: 5px;
font: bold 12px Trebuchet MS, Arial;
text-transform: uppercase;
color: #585f0d;
}

td.yearmonth a {
font-weight: normal;
}

table.yeartable td.yearday {
background: #919B23;
padding: 4px;
border: 0;
font: normal 13px Trebuchet MS, Arial;
text-transform: uppercase;
color: #fcffbf;
}

table.yeartable td.yeardate {
background: #fcffbf;
border: 0;
padding: 5px;
border-bottom:1px dashed #585f0d;
border-right:1px dashed #017A97;
padding-right: 4px;
font: normal 12px Trebuchet MS, Arial;
color:#585f0d;
}

td.yeardate div a {
background: #919B23;
padding: 1px 8px;
align: left !important;
color: #fcffbf;
}

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

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

input, textarea, select {
padding: 3px;
background: #fff;
border: solid 1px #919B23;
color: #017A97;
font: normal 13px Trebuchet MS, Arial;
}

/* ------- lj user & comm ------- */

img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
padding: 12px 10px 8px 20px;
background: url(http://ruthenia-alba.webs.com/007scrapbook-layout/upload/007scrapbook-ljuser.png) no-repeat transparent;
}

img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
padding: 12px 10px 8px 20px;
background: url(http://ruthenia-alba.webs.com/007scrapbook-layout/upload/007scrapbook-ljcomm.png) no-repeat transparent;
}

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

#lj_controlstrip_new {
background: #9CD2D4;
border: 0;
border-bottom: 3px #2B9EAF solid;
}

.w-cs {
color: #585f0d !important;
font: normal 12px Trebuchet MS, Arial !important;
}

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

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

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

.w-cs-menu .w-cs-i-home a,
.w-cs-menu .w-cs-i-post a,
.w-cs-menu .w-cs-i-friends a,
.w-cs-menu .w-cs-i-account a,
.w-cs-menu .w-cs-i-faq a,
.w-cs-menu .w-cs-i-add a,
.w-cs-menu .w-cs-i-gift a,
.w-cs-menu .w-cs-i-message a,
.w-cs-menu .w-cs-i-calendar a {
font: normal 12px Trebuchet MS, Arial !important;
}

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

.w-cs .w-cs-userinfo {
background: transparent !important;
border-right: 1px #919b23 dashed;
}

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

.w-cs-summary {
margin-top: -1px !important;
background: #fff !important;
border: solid #585F0D 1px;
}

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

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

.w-cs-status p {
font: normal 12px Trebuchet MS, Arial !important;
color: #585F0D !important;
}

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

.w-cs input.submit,
.w-cs input.text {
background: #fff;
height: 20px;
border: 1px solid #585F0D;
border-radius: 2px;
padding: 0 5px 4px 5px;
box-shadow: 0 0 0;
text-shadow: 0 0;
color: #919b23 !important;
font: normal 11px Trebuchet MS, Arial !important;
}

.w-cs FORM.w-cs-search INPUT.text {
background: #fff;
border: 1px solid #585F0D;
border-radius: 2px;
margin-top: 7px;
padding: 2px 10px;

}

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

}

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

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

.b-popup-outer {
background: #FCFFBF;
opacity: .9;
border: 1px #919b23 dashed;
border-radius: 3px;
}

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

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

.b-contextualhover a:link {
background: transparent;
color: #919b23 !important;
}

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

.b-contextualhover a:visited {
color: #0E6477 !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 {
color: #585f0d;
}

.b-contextualhover-options {
border: 0;
border-top: 1px solid #585f0d !important;
}

.b-contextualhover h3 strong {
font: normal 13px Trebuchet MS, Arial !important;
text-transform: none;
color: #585f0d;
}

Like it?