Правила:
СтандартныеСтиль: S2 Flexible Squares
Тип аккаунта: любой
Разрешение экрана: 1024+
Посты: резиновые, ширина min. 620px
Браузеры: Mozilla, Chrome, Safari, Opera
Комментарии в стиле журнала: да
Контрольная панель: включена
Сайдбар: полный
Заголовок и подзаголовок: отключены (можно включить)
Terms:
Standard Style: S2 Flexible Squares
Account type: all types
Screen Resolution: 1024+
Entries: stretch, min. 620px wide
Browsers: Mozilla, Chrome, Safari, Opera
Comments in journal's style: yes
Controlstrip: enabled
Sidebar: enabled, full
Title & Subtitle: disabled, but can be enabled
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 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
3. In Custom stylesheet block, insert the following code:
/* Layout 004: Coffee Scented Morning */
/* Date: March 20, 2008 */
/* Recoded: March 7, 2012 */
/* S2 Style: Flexible Squares */
/* Design & Codes by Ruthenia Alba (ruthenia-alba.livejournal.com) */
/*--------BASICS---------*/
body {
padding: 0;
margin: 0;
background: url(
http://ruthenia-alba.webs.com/004coffee-layout/004coffee-bg.gif) repeat scroll;
}
/* -------- a links ----- */
a, a:link {
color: #ac702c;
text-decoration: none;
}
a:hover {
color: #d4a56f;
text-decoration: underline;
}
a:visited {
color: #be8c53;
text-decoration: none;
}
/* -------- title & subtitle ----- */
.title {
position: absolute;
margin: 45px auto auto 450px;
font: bold 14px Trebuchet MS, Verdana;
text-transform: uppercase;
letter-spacing: 1px;
color: #664e2f;
}
.subtitle {
position: absolute;
margin: 65px auto auto 470px;
font: bold 12px Trebuchet MS, Verdana;
letter-spacing: 0;
color: #664e2f;
}
.title, .subtitle {
display: none;
}
/* ----------- CONTENT ----------- */
#content {
border:0;
width:100%;
padding:0;
margin:0;
background: url(
http://ruthenia-alba.webs.com/004coffee-layout/004coffee-content-bg.png) repeat-x transparent;
}
/* ----------- header ----------- */
#header {
background: url(
http://ruthenia-alba.webs.com/004coffee-layout/004coffee-header.png) no-repeat top left transparent;
border: 0;
margin: 0;
padding: 0;
height: 295px;
}
/* --------- navigation --------- */
ul.navheader {
border: 0;
margin: 0 auto;
padding: 262px 0 0 0;
font: bold 12px Trebuchet MS, Verdana;
text-transform: uppercase;
color: #664e2f;
}
ul.navheader li {
display:inline;
padding: 0 5px;
}
ul.navheader a,
ul.navheader a:link {
color: #ac702c !important;
text-decoration: none;
}
ul.navheader a:hover {
color: #664e2f !important;
text-decoration: underline;
}
ul.navheader a:visited {
color: #be8c53;
text-decoration: none;
}
/* ----------- SIDEBAR ---------- */
#sidebar {
position: relative;
z-index: 1;
float: left;
background: transparent;
margin: -15px 0 0 120px;
padding: 20px 0 0 0;
border: 0;
text-align: center;
font: normal 13px Trebuchet MS, Verdana;
}
.sbarbody {
padding: 0;
}
li.sbartitle {
list-style: none;
border: 0;
background: transparent;
text-transform: uppercase;
color: #664e2f;
font: bold 13px Trebuchet MS, Verdana;
margin-bottom: 8px;
margin-top: 18px;
}
li.sbaritem {
background: #5f442b;
margin: 5px 0 2px 0;
padding: 5px 2px;
list-style: none;
font: normal 13px Trebuchet MS, Verdana;
line-height:1em;
}
li.sbaritem a,
li.sbaritem a:link {
color: #ffffff !important;
text-decoration: none;
}
li.sbaritem a:visited {
color: #ffffff;
text-decoration: none;
}
li.sbaritem a:hover {
color: #d4a56f !important;
text-decoration: none;
}
/* ------ sidebar userpic ------ */
.defaultuserpic img {
padding: 10px;
background: #f3e8db;
border: 1px dashed #be8c53;
}
/* ------ sidebar summary ------ */
#sidebar_summary li.sbaritem {
padding: 5px 0;
margin: 5px 0 2px 0;
color:#ffffff;
font: normal 13px Trebuchet MS, Verdana;
border: 0;
}
/* ------ sidebar calendar ------ */
.calendar td {
font: normal 12px Trebuchet MS, Verdana;
padding: 1px 4px;
color: #664e2f;
border: 0;
}
#sidebar_calendar ul.sbarlist {
padding: 0;
}
.sbarcalendarposts {
background: #664e2f;
font: normal 11px Trebuchet MS, Verdana !important;
}
.sbarcalendarposts a,
.sbarcalendarposts a:link,
.sbarcalendarposts a:visited {
color: #ffffff !important;
text-decoration: none;
}
.sbarcalendarposts a:hover {
color: #d4a56f !important;
text-decoration: none;
}
/* ------ sidebar links ------ */
#sidebar_linklist li.sbaritem {
font: normal 13px Trebuchet MS, Verdana;
}
/* ------ sidebar tags ------ */
li.tagcloud {
text-align: center;
padding: 0;
}
li.tagcloud a {
font: normal 13px Trebuchet MS, Verdana;
color: #ac702c !important;
text-decoration: none;
}
li.tagcloud a:hover {
color: #d4a56f !important;
text-decoration: underline !important;
}
/* ------ sidebar blurb ------ */
.sbarbody2 {
font: normal 13px Trebuchet MS, Verdana;
color: #664e2f !important;
padding: 0;
}
.sbarbody2 a, .sbarbody2 a:link {
color: #ac702c !important;
text-decoration: none;
}
.sbarbody2 a:hover {
color: #d4a56f !important;
text-decoration: underline !important;
}
.sbarbody2 a:visited {
color: #be8c53 !important;
text-decoration: none;
}
/* --------- MAIN CONTENT --------- */
#maincontent {
border: 0;
margin: -15px auto 0 100px;
padding: 0px 10px 20px 200px;
background: #ffffff;
width: 60%;
min-width: 620px;
}
.subcontent {
border: 0;
padding: 10px 0 0 0;
margin: 0;
}
/* ------- content: date & subject ------- */
.datesubject {
background: transparent;
color: #664e2f;
}
.date {
background: url(
http://ruthenia-alba.webs.com/004coffee-layout/004coffee-date-bg.gif) no-repeat transparent;
margin:0;
padding: 3px 0 0 20px;
font: bold 13px Trebuchet MS, Verdana;
text-transform: uppercase;
text-align: left;
color:#664e2f;
}
.subject,
.replytosubject {
padding: 5px 0;
margin-left: 23px;
font: bold 15px Trebuchet MS, Verdana;
color: #664e2f;
}
.subject a .subj-link,
.subject a,
.subject a:link,
.subject a:visited {
color: #664e2f !important;
}
/* ------- content: userpic ------- */
.userpic,
.userpicfriends {
position: relative;
float:right;
border: 1px solid #be8c53;
background: #ffffff !important;
padding: 5px;
margin: 0 5px 5px 15px;
font: normal 12px Trebuchet MS, Verdana;
color: #664e2f !important;
}
.userpicfriends a font,
.userpicfriends a:link font,
.userpicfriends a:visited font {
color: #ac702c;
padding: 0 2px;
}
.userpicfriends a:hover font {
color: #d4a56f;
text-decoration: underline;
}
/* ------- content: entry ------- */
.entry {
background: transparent;
border: 0;
margin: 0;
padding: 5px;
font: normal 13px Trebuchet MS, Verdana;
text-align: justify;
line-height:1.4em;
color: #664e2f;
}
.entry_text {
color: #664e2f;
min-height: 60px;
}
.entry p {
font: normal 13px Trebuchet MS, Verdana;
margin-top: 0;
}
blockquote {
background: #f3e8db;
margin-left: 50px;
margin-right: 200px;
padding: 10px;
line-height: 16px;
font: normal 12px Trebuchet MS, Verdana;
border: 1px dashed #be8c53;
}
ul {
margin: 0;
padding:0;
}
li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
/* ---- content: tags & currents ---- */
.ljtags {
padding:10px 0 0;
font: bold 13px Trebuchet MS, Verdana;
}
.ljtags a,
.ljtags a:link {
font: normal 13px Trebuchet MS, Verdana;
color: #ac702c;
text-decoration: none;
}
.ljtags a:hover {
color: #d4a56f;
text-decoration: underline;
}
.ljtags a:visited {
color: #be8c53;
text-decoration: none;
}
.currents {
padding: 0;
background: transparent;
}
.currents div {
color:#664e2f;
font: normal 13px Trebuchet MS, Verdana;
}
/* ------- content: comments ------- */
.comments {
background: transparent;
text-align: center;
padding: 0 10px 10px 0;
font: bold 13px Trebuchet MS, Verdana;
color: #ffffff;
}
.comments a,
.comments a:link {
background: url(
http://ruthenia-alba.webs.com/004coffee-layout/004coffee-comments-bg.gif) no-repeat transparent top left;
background-position: 0px;
color: #ac702c !important;
text-decoration: none;
padding: 0 0 0 20px;
}
.comments a:hover {
color: #d4a56f !important;
text-decoration: underline !important;
}
.comments a:visited {
color: #be8c53;
text-decoration: none;
}
.separator {
height: 10px;
border-bottom: 1px dashed #be8c53;
margin: 10px 0 0;
}
.clear {
height: 0;
}
/* ------- content: footer ------- */
#footer {
width: 500px;
background: #F3E8DB;
margin: 20px auto !important;
border: 1px dashed #be8c53;
padding: 5px;
font: bold 13px Trebuchet MS, Verdana;
}
ul.navfooter {
color: #664e2f;
}
ul.navfooter a,
ul.navfooter a:link {
color: #ac702c !important;
text-decoration: none;
}
ul.navfooter a:visited {
color: #be8c53 !important;
text-decoration: none;
}
#footer a:hover {
color: #d4a56f !important;
text-decoration: underline !important;
}
/* ------ CALENDAR PAGE ------ */
/* ------ years ------ */
ul.year {
margin: 10px;
padding: 0;
font: bold 12px Trebuchet MS, Verdana;
}
ul.year a {
padding: 0 10px;
}
li.active {
padding: 0 10px;
font: bold 12px Trebuchet MS, Verdana;
color: #664e2f;
}
/* ------ months ------ */
td.yearmonth {
padding-bottom: 5px;
font: bold 12px Trebuchet MS, Verdana;
color:#664e2f;
}
/* ------ days ------ */
table.yeartable td.yearday {
background: #664e2f;
border: 0;
font: bold 12px Trebuchet MS, Verdana;
color: #ffffff;
}
table.yeartable td.yeardate {
border: 0;
border-bottom: 1px dashed #d4a56f;
border-right: 1px dashed #d4a56f;
padding: 2px 5px;
font: normal 11px Trebuchet MS, Verdana;
color:#664e2f;
}
td.yeardate a {
background: #664e2f;
padding: 1px 7px;
color: #ffffff;
}
/* ------- COMMENTS PAGE ------- */
/* ------- links to posts ------- */
.skiplinks {
color: #ffffff !important;
font: normal 12px Trebuchet MS, Verdana;
text-transform: uppercase;
letter-spacing: 1px;
color: #664e2f;
}
.skiplinks a {
margin: 0 3px;
}
/* ------- comments ------- */
.box {
border: 0;
padding: 0;
margin: 0;
font: normal 13px Trebuchet MS, Verdana;
color: #664e2f;
}
.box center {
margin: 10px;
}
.box center a {
}
div.box form table {
border: 0 !important;
margin: 10px auto 30px auto;
color: #664e2f;
font: normal 13px Trebuchet MS, Verdana;
}
.commentbox,
.commentboxpartial {
background: #f3e8db;
border: 0;
margin: 10px 0;
padding:5px 10px;
font: normal 13px Trebuchet MS, Verdana;
border-radius: 3px;
}
.commentreply {
font: normal 13px Trebuchet MS, Verdana;
color:#664e2f;
}
.datesubjectcomment {
background: #e3c094;
border: 0;
padding-left: 0;
border-radius: 3px;
}
.datesubjectcomment a,
.datesubjectcomment a:link,
.datesubjectcomment a:visited {
color: #664e2f;
text-decoration: none;
}
.datesubjectcomment a:hover {
color: #ac702c;
text-decoration: underline;
}
.userpiccomment {
position: relative;
border: 10px solid #e3c094;
padding: 0;
margin: 10px 10px 0 0;
border-radius: 4px;
}
/* ----- REPLY PAGE ----- */
#add_comment.box {
margin: 0 !important;
background: transparent;
color: transparent !important;
}
.b-postform {
margin: 15px 0 0;
padding: 15px;
background: #F3E8DB !important;
border: 0;
}
.b-postform table, div.box form table {
background: transparent;
border: 0 !important;
margin: 0 0 10px 30px;
align: center;
color: #664e2f;
}
div.box form table td,
div.box form table b {
font: normal 13px Trebuchet MS, Verdana !important;
}
#qrform {
margin: 0 0 0 10px !important;
padding: 0 !important;
align: center;
}
#qrformdiv {
background: #F3E8DB;
margin: 0 0 15px 0;
padding: 10px 0;
}
#qrform table {
margin: 10px 0;
}
#qrform table tbody tr td {
text-align: left !important;
color: #664e2f;
}
#qrform table img {
margin: 0 0 0 20px;
}
.quickreply table {
margin: 0 auto 0 50px !important;
}
#lj_userpicselect {
align: right;
width: 21%;
}
.textbox {
margin: 0 10px 0 20px !important;
width: 95%;
background: #fff;
}
#submitpost {
margin: 0 10px 0 20px !important;
}
option {
margin: 0 !important;
width: 100%;
}
.helplink {
display: none;
}
#qrform a {
margin: 0 !important;
padding: 0 !important;
}
/* ------- MISCELLANEOUS ------- */
/* ------- input & textarea ------- */
input, textarea, select {
border: 1px solid #E3C094;
background: #F3E8DB;
font: normal 13px Trebuchet MS, Verdana;
color:#664e2f;
}
/* -------- lj user & images --------------- */
img[src*="userinfo.gif"] {
background: url(
http://ruthenia-alba.webs.com/004coffee-layout/004coffee-ljuser.gif) no-repeat transparent;
width: 0;
height: 0;
padding: 7px 5px 10px 11px;
}
img[src*="community.gif"] {
background: url(
http://ruthenia-alba.webs.com/004coffee-layout/004coffee-ljcomm.gif) no-repeat transparent;
width: 0;
height: 0;
padding: 7px 5px 10px 11px;
}
/* ----- NAVIGATION STRIP ------ */
#lj_controlstrip_new {
background: #F9F4ED;
border: 0;
border-bottom: 1px dashed #be8c53;
}
.w-cs {
color: #664e2f !important;
font: normal 12px Arial, sans serif !important;
}
.w-cs A:link,
.w-cs A:visited,
.w-cs A:active {
border: none !important;
color: #ac702c !important;
text-decoration: none;
}
.w-cs A:hover {
color: #d4a56f !important;
text-decoration: underline;
}
.w-cs .w-cs-menu li {
background: url(
http://webzoom.freewebs.com/ruthenia-alba/004coffee-layout/004coffee-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 Arial, serif !important;
}
/* ----- left part: total ------ */
.w-cs .w-cs-userinfo {
background: transparent !important;
border-right: 1px dashed #be8c53;
}
/* ----- left part: message window ------ */
.w-cs-summary {
margin-top: -1px !important;
background: #fff !important;
border: 1px solid #be8c53;
}
.w-cs .w-cs-summary LI.w-cs-i-tokens {
border-right: 1px solid #be8c53;
}
/* ----- right part: viewing journal ------ */
.w-cs-status p {
font: normal 12px Arial, serif !important;
color: #664e2f !important;
}
/* ----- buttons: logout, search ------ */
.w-cs input.submit,
.w-cs input.text {
background: #f3e8db;
height: 20px;
border: 1px solid #be8c53;
border-radius: 2px;
padding: 0 5px 4px 5px;
box-shadow: 0 0 0;
text-shadow: 0 0;
color: #664e2f !important;
font: normal 12px Arial, sans serif !important;
}
.w-cs FORM.w-cs-search INPUT.text {
background: #f3e8db;
border: 1px solid #be8c53;
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/004coffee-layout/004coffee-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: #664e2f !important;
}
/* ----- Contextual Popup ----- */
.b-popup-outer {
background: #fff;
opacity: .9;
border: 0;
border-radius: 3px;
}
.b-popup-inner {
border: 0;
}
.i-popup-arr {
display: none;
}
.b-contextualhover a:link {
background: transparent;
color: #ac702c !important;
}
.b-contextualhover a:hover {
color: #d4a56f !important;
text-decoration: none !important;
}
.b-contextualhover a:visited {
color: #be8c53 !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: #664e2f;
}
.b-contextualhover-options {
border: 0;
border-top: 1px solid #664e2f !important;
}
.b-contextualhover h3 strong {
font: normal 13px Trebuchet MS, Arial !important;
text-transform: none;
color: #664e2f;
}
Если вдруг захотите меня отблагодарить, я всегда рада
своей кнопке в вашем профайле или на другом видном месте.
If you're eager to show me your gratitude, I'm always happy to see
my button in your profile or any other place.
Like it?