Layout #027i: Cities. Paris

[ruthenia_alba]

Правила: Дополнительные
Стиль: S2 Flexible Squares
Тип аккаунта: любой
Разрешение экрана: 1024+
Посты: фиксированная ширина
Картинки: до 710рх
Браузеры: Mozilla, Chrome, Safari, IE (Opera - наверное)
Комментарии в стиле журнала: да
Контрольная панель: включена
Сайдбар: полный
Заголовок и подзаголовок: только заголовок
Terms: Additional
Style: S2 Flexible Squares
Account type: all types
Screen Resolution: 1024+
Entries: fixed width
Images: max width 710px
Browsers: Mozilla, Chrome, Safari, IE (Opera I guess, too)
Comments in journal's style: yes
Controlstrip: enabled
Sidebar: enabled, full
Title & Subtitle: title only


Вживую // Live preview:
recent // 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: No
- Use external stylesheets: No

3. В окошко Custom stylesheet вставляете текст:
1. In Customize section choose Flexible Squares style (sidebar on the left!) 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

4. In Custom stylesheet block, insert the following code:
/* Layout #27i: Cities. Paris in winter */
/* Date: December 24, 2012 */
/* S2 Style: Flexible Squares */

/*----- CREDITS -----*/

/* Design & Codes: Ruthenia Alba @ ruthenia-alba.livejournal.com */
/* Header Photo: Shutterstock */
/* Tiny Icons: famfamfam @ famfamfam.com */

/*----- COLORS-----

#e2dad9 - grey for borders and fills;
#bb746a - a links;
#d99289 - a hover links;
#A9B4BD - date;
#656565 - text;
#f3eded - textarea & input;
*/

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

body {
margin: 0;
padding: 0;
background: url(http://webzoom.freewebs.com/ruthenia-alba/027paris-layout/upload/027paris-bg.png) repeat;
}

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

a, a:link {
color: #bb746a;
}

a:hover {
color: #d99289;
}

a:visited {
color: #A9B4BD;
}

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

.title {
border: 0;
position: absolute;
align: center;
width: 900px;
margin: 85px 20px 0 20px;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 1px;
color: #bb746a;
}

.subtitle {
display: none;
}

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

#content {
border: solid 5px #e2dad9;
padding: 0;
margin: 40px auto;
width: 940px;
background: #fff;
border-radius: 4px;
}

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

#header {
margin: 20px 20px 0 20px; /* !!! */
border: 0;
background: url(http://webzoom.freewebs.com/ruthenia-alba/027paris-layout/upload/027paris-header.jpg) no-repeat;
height: 358px; /* !!! */
}

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

ul.navheader {
background: #e2dad9;
margin: 350px 0px 0 0px; /* !!! */
padding: 6px 0;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 1px;
border-top: solid 7px #fff; /* !!! */
color: #656565;
}

ul.navheader li {
}

ul.navheader a,
ul.navheader a:link,
ul.navheader a:visited {
color: #bb746a !important;
}

ul.navheader a:hover {
color: #d99289 !important;
}

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

#sidebar {
float: left;
background: #fff;
border: 0;
margin: 20px 10px 0 20px;
padding: 0;
width: 170px;
font: normal 13px Arial;
}

.defaultuserpic img {
background: #fff;
padding: 5px;
border: 10px solid #e2dad9;
margin-bottom: 10px;
border-radius: 2px;
}

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

li.sbartitle {
background: #e2dad9;
text-align: center;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
letter-spacing: 0px;
color: #bb746a;
border: 0;
margin: 0;
padding: 10px;
}

.sbarbody2 {
padding: 0;
font: normal 13px Arial;
color: #656565;
text-align: right;
}

ul.sbarlist sbarcontent {
margin: 0 !important;
padding: 0 !important;
}

li.sbaritem {
text-align: right;
margin: 7px 2px !important;
padding: 3px 5px !important;
border-bottom: 2px solid #e2dad9 !important;
font: normal 13px Arial;
color: #656565;
}

li.tagcloud a {
font: normal 13px Arial;
}

.sbarbody2 a, .sbarbody2 a:link, li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited,
li.tagcloud a, li.tagcloud a:link, li.tagcloud a:visited {
color: #bb746a !important;
}

.sbarbody2 a:hover, li.sbaritem a:hover, li.tagcloud a:hover {
color: #d99289 !important;
text-decoration: none;
}

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

div #sidebar_calendar .sbarcontent {
padding: 0;
}

.sbarcalendar {
text-align: center;
font: normal 14px Calibri;
color: #656565;
padding: 2px 4px;
border: 0;
}

.sbarcalendarposts {
background: #e2dad9;
padding: 3px;
border: 0;
}

.sbarcalendarposts a,
.sbarcalendarposts a:link,
.sbarcalendarposts a:visited {
text-align: center;
font: bold 14px Calibri;
color: #bb746a !important;
border: 0;
}

.sbarcalendarposts a:hover {
color: #d99289 !important;
}

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

#maincontent {
margin: 15px 20px 0 210px;
background: transparent;
border: 0;
}

.subcontent {
margin: 0;
padding: 0;
border:0;
background: transparent;
}

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

.datesubject {
background: transparent;
margin: 0;
padding: 0;
}

.date {
background: transparent;
padding: 5px 0;
margin: 0;
color: #A9B4BD;
font: normal 11px Arial;
text-transform: uppercase;
text-align: left;
border: 0;
border-bottom: 2px solid #e2dad9;
}

.subject,
.replytosubject {
background: transparent;
padding: 5px 0px;
color: #bb746a;
font: bold 15px Calibri, Arial;
text-transform: uppercase;
text-align: left;
border: 0;
}

.subject a, .subject .subj-link, .subject a:link, .subject a:visited,
.replytosubject a, .replytosubject a:link, .replytosubject a:visited {
color: #bb746a;
text-decoration: none;
padding: 0;
margin: 0;
}

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

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

.userpic,
.userpicfriends {
background: #fff !important;
border: solid 10px #e2dad9;
position: relative;
float: right;
margin: 5px 0px 5px 15px;
padding: 4px;
border-radius: 3px;
}

.userpic img,
.userpicfriends img {
width: 70px;
height: 70px;
}

.userpicfriends a font {
font: normal 13px Arial;
color: #bb746a;
}

.userpicfriends a:hover font {
color: #d99289;
}

.userpicfriends a:hover {
text-decoration: none !important;
}

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

.entry {
background: transparent;
text-align: justify;
border: 0;
margin: 0;
padding: 0;
font: normal 13px Arial;
line-height: 18px;
color: #656565;
}

.entry img {
max-width: 710px;
}

.lj-view-friends .entry_text {
min-height: 80px !important;
}

.entry_text {
min-height: 55px;
}

.entry_text p {
font: normal 13px Arial;
line-height: 18px;
color: #656565;
}

blockquote {
padding: 10px;
margin: 10px 100px;
background: #e2dad9;
font: normal 13px Calibri, Arial;
border-radius: 2px;
}

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

.ljtags {
margin: 10px 0 5px 0;
font: bold 15px Calibri;
text-transform: uppercase;
}

.ljtags a {
font: normal 13px Arial;
text-transform: lowercase;
}

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

.currents {
margin: 0 !important;
padding: 0;
font: normal 13px Arial;
}

.currents strong {
font: bold 15px Calibri;
text-transform: uppercase;
}

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

.currentlocation, .currentmood {
margin: 0 0 5px 0;
font: normal 13px Arial;
}

.currentmusic {
margin: 0;
font: normal 13px Arial;
}

.clear {
height: 0;
}

.separator {
height: 10px;
}

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

.comments {
height: 35px;
background: #e2dad9;
margin: -5px 0 0 !important;
padding: 5px;
text-align: center;
color: #e2dad9;
}

.comments a, .comments a:link {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #bb746a !important;
}

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

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

#footer {
margin: 0 20px;
border:0;
background: #fff;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #656565;
}

.navfooter a, .navfooter a:link {
color: #bb746a !important;
}

.navfooter a:hover {
color: #d99289;
}

.clearfoot {
background: #fff;
}

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

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

.skiplinks {
color: #fff;
margin: 5px 0;
text-align: left;
font: normal 13px Arial;
}

.skiplinks a {
padding: 0 5px 0 0;
font: normal 13px Arial;
}

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

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

.box {
border: 0;
padding: 0;
font: normal 13px Arial;
color: #656565;
}

.box center {
font: normal 15px Calibri, Arial;
text-transform: uppercase;
color: #656565;
margin: 0 0 30px 0;
padding: 0;
}

.box center a {
color: #bb746a;
}

.box center a:hover {
color: #d99289;
text-decoration: none;
}

.commentbox {
background: transparent;
border: 0;
font: normal 13px Arial;
padding: 0;
margin: 0;
color: transparent;
}

.datesubjectcomment {
background: transparent;
color: #656565;
border: 0;
border-bottom: 2px solid #e2dad9 !important;
padding: 0 0 5px 0;
margin: 20px 0 0 0;
}

.commentreply {
font: normal 13px Arial;
line-height: 18px;
color: #656565;
text-align: justify;
margin: 5px 0 0;
}

.userpiccomment {
position: relative;
max-width: 70px;
max-height: 70px;
background: #fff;
border: solid 10px #e2dad9;
float: left;
padding: 4px;
border-radius: 3px;
margin: 0px 10px 0px 0px;
}

.commentbox div a {
font: normal 12px Arial;
}

.commentbox div a:hover,
.commentboxpartial a:hover {
text-decoration: none;
}

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

.commentboxpartial {
margin: 5px 0;
padding: 5px 0;
background: transparent;
border: 0;
}

div.box form table {
border: 0 !important;
margin: 0 0 30px 0;
align: center;
color: #656565;
font: normal 13px Arial;
}

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

.replytoposter {
font: normal 13px Arial;
color: #656565;
}

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

input, textarea, select {
font: normal 13px Arial;
color: #656565;
border: 2px solid #e2dad9;
background: #f3eded;
padding: 2px;
margin: 2px;
border-radius: 2px;
}

/* ----- FRIENDS PAGE ----- */

.lj-view-friends .userpicfriends {
color: #656565;
}

.lj-view-friends .userpicfriends a font {
color: #bb746a;
}

.lj-view-friends .userpicfriends a:hover font {
color: #d99289;
}

.lj-view-friends .userpicfriends a:hover {
text-decoration: none !important;
}

.lj-view-friends img {
max-width: 710px;
}

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

ul.year {
padding: 0 0 5px 0;
margin-top: 20px;
border-bottom: 2px solid #e2dad9 !important;
}

ul.year li {
display: inline;
color: #;
padding: 0 10px;

}

ul.year li a {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #bb746a;
}

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

li.active {
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #656565;
}

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

td.yearmonth {
color: #656565;
padding-bottom: 10px;
font: normal 11px Arial;
text-transform: uppercase;
}

td.yearmonth a:hover {
text-decoration: none;
}

table.yeartable td.yearday {
padding: 5px;
background: #fff;
text-align: center;
color: #656565;
border: 0;
font: bold 15px Calibri, Arial;
text-transform: uppercase;
}

table.yeartable td.yeardate {
font: normal 15px Calibri;
background: transparent;
border: 1px solid #e2dad9;
color: #656565;
padding: 5px 5px 0 0;
}

table.yeartable td.yeardate a:hover {
text-decoration: none;
}

/* ----- TAGS PAGE ----- */

.lj-view-tags #maincontent {
margin-top: 20px;
}

.lj-view-tags h2 {
padding: 0px 20px 5px 0;
font: bold 16px Calibri, Arial;
text-transform: uppercase;
color: #656565;
border-bottom: 2px solid #e2dad9 !important;
}

.ljtaglist {
font: normal 13px Arial;
color: #656565;
line-height: 18px;
}

.ljtaglist a {
text-decoration: none;
}

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

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

span.i-ljuser a b {
font: bold 15px Calibri;
letter-spacing: 0px;
color: #bb746a;
}

span.i-ljuser a:hover {
text-decoration: none;
}

span.i-ljuser a:hover b {
color: #d99289 !important;
}

span.i-ljuser img[src*="img/userinfo.gif"] {
width: 0 !important;
height: 0 !important;
padding: 6px 8px 9px 12px !important;
background: url(http://webzoom.freewebs.com/ruthenia-alba/027paris-layout/upload/027paris-ljuser.png) no-repeat transparent;
}

span.i-ljuser img[src*="img/community.gif"] {
width: 0 !important;
height: 0 !important;
padding: 6px 8px 11px 11px !important;
background: url(http://webzoom.freewebs.com/ruthenia-alba/027paris-layout/upload/027paris-ljcomm.png) no-repeat transparent;
}

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

#lj_controlstrip_new {
background: #e2dad9;
border-bottom: 0 !important;
border: 0;
}

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

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

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

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

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

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

.w-cs .w-cs-userinfo a b,
.w-cs .w-cs-status a b {
color: #bb746a !important;
}

.w-cs .w-cs-userinfo a:hover b,
.w-cs .w-cs-status a:hover b {
color: #d99289 !important;
}

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

.w-cs-summary {
margin: 0 !important;
height: 18px;
background: #f3eded !important;
border: solid #cabdbd 1px;
}

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

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

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

div.w-cs-view-style {
margin: -6px 0 0 0 !important;
}

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

input#Logout.w-cs-submit,
input.w-cs-text {
background: #f3eded !important;
border: solid #cabdbd 1px !important;
height: 22px;
padding: 0 5px 4px 5px;
border-radius: 2px;
box-shadow: 0 0 0 !important;
text-shadow: 0 0;
color: #656565 !important;
}

form.w-cs-search input.w-cs-text {
margin: 2px 0 0 3px;
color: #656565 !important;
height: 18px !important;
}

form.w-cs-search button.w-cs-search-submit {
display: none;
}

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

.b-popup-outer {
background: #f3eded;
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;
color: #bb746a !important;
}

.b-contextualhover a:hover {
color: #d99289 !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: #656565;
}

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

.b-contextualhover h3 strong {
font: normal 13px Arial !important;
text-transform: none;
color: #656565;
}

Если вам мешают IP-адреса в комментариях, вы можете отключить их вот здесь (строка "IP Address Logging").
If you don't like IP-logging in your comments, you can disable this option right here ("IP Address Logging" string).

P.S. От всей души поздравляю вас с Рождеством!
P.S. With all my sincere I wish you Merry Christmas!

Like it?