Layout #038: Gingerbread

Dec 22, 2011 23:10

От души поздравляю тех, кто празднует Рождество 25 декабря, и посвящаю новый дизайн этому прекрасному светлому празднику!
Will all my sincere I wish you Merry Christmas (for those of you who celebrate it the 25th of December), and dedicate the brand new layout to this wonderful and festive day!
Правила: Стандартные
Стиль: S2 Smooth Sailing
Тип аккаунта: любой
Разрешение экрана: 1280+
Посты: резиновые
Картинки: до 750рх
Браузеры: Mozilla, Chrome, Safari, IE (Opera - наверное)
Комментарии в стиле журнала: да
Контрольная панель: включена
Сайдбар: полный
Заголовок и подзаголовок: только заголовок
Terms: Standard
Style: S2 Smooth Sailing
Account type: all types
Screen Resolution: 1280+
Entries: flexible
Images: max width 750px
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 // friends // comments



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

2. В левом меню выбираете "Display", в разделе Basic Options ставите:

- Userinfo Position in Entries - Right side of the entry text

В разделе Additional Options ставите:

- Wrap Entry text under userinfo - Yes
- Wrap Comment text under userinfo - No

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

- Use layout's stylesheet(s): Yes
- Use layout's stylesheet(s) when including custom external stylesheet: Yes
- Custom external stylesheet URL: (пусто)

4. В окошко Custom stylesheet вставляете текст:
1. In Customize section choose Smooth Sailing style (sidebar on the left!) and click "Customise selected theme ->" below.

2. In left menu choose "Display", in Basic Options section:

- Userinfo Position in Entries - Right side of the entry text

In Additional Options section:

- Wrap Entry text under userinfo - Yes
- Wrap Comment text under userinfo - No

3. In left menu choose "Custom CSS". In Page section:

- Use layout's stylesheet(s): Yes
- Use layout's stylesheet(s) when including custom external stylesheet: Yes
- Custom external stylesheet URL: (leave blank)

4. In Custom stylesheet block, insert the following code:
/* Layout #38: Gingerbread */
/* Date: December 22, 2011 */
/* S2 Style: Smooth Sailing */

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

/* Design & Codes: Ruthenia Alba (ruthenia_alba.livejournal.com) */
/* Tiny Icons: Festive Icons Pack by smashingmagazine.com */

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

#b39178 - a (coffee brown);
#cab19e - a:hover (light brown);
#917057 - a alternative (header & footer), title (brown);
#c08d67 - a:hover alternative (header & footer) (orange brown);
#7a5f4a - entry text (brown);
#dcc394 - main border (light brown);
#f3e5c7 - lighter border (very light brown);
#fef8ed - background (userpic, menu) (creamy);
*/

@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: normal;
src: local('UbuntuCons'), url('http://themes.googleusercontent.com/static/fonts/ubuntucondensed/v2/DBCt-NXN57MTAFjitYxdrOC933fdLZhbewWVDyX-fYw.woff') format('woff');
}

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

body {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-bg.jpg) transparent repeat scroll;
}

.bodyheaderblock {
display: none;
}

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

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

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

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

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

.pageheaderblock {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-header-bg.jpg) transparent repeat scroll;
background-position: 20px 35px;
height: 160px;
}

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

.header-title {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-bg.jpg) transparent repeat-x scroll;
color: #917057;
font: normal 16px Ubuntu, century gothic;
text-transform: uppercase;
letter-spacing:1px;
height: 28px;
padding-top: 9px;
text-align: center;
}

.header-subtitle {
display: none;
}

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

.header-menu {
border: 0;
border-bottom: 5px solid #dcc394;
margin-top: 125px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-bg.jpg) transparent repeat-x scroll;
height: 26px;
text-align: center;
}

.header-menu ul li {
font: normal 14px Ubuntu, Century Gothic;
text-transform: uppercase;
padding: 10px;
}

.header-menu ul a:hover {
background: transparent;
color: #c08d67 !important;
}

.header-menu ul a:link,
.header-menu ul a:visited {
background: transparent;
color: #917057;
}

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

.sidebar {
background: url() transparent repeat scroll;
padding: 0;
margin: 0 50px 0 0;
width: 190px;
}

.sidebox {
background: url() transparent repeat scroll;
margin: 0;
padding: 0;
}

.sideboxTitle {
position: relative;
border: 1px solid #dcc394;
border-bottom: 1px solid #f3e5c7;
background: #fef8ed;
margin: 0 20px 0 40px;
padding: 8px 15px 6px 15px;
font: normal 12px Ubuntu, century gothic;
text-transform:uppercase;
letter-spacing:1px;
text-align: center;
color: #917057;
z-index: 1;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
}

.sideboxContent {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-entry-bg.jpg) transparent repeat scroll;
margin: -1px 0px 20px 0;
padding: 10px;
font: normal 13px Trebuchet MS, Sans Serif;
color: #7a5f4a;
border: solid 1px #dcc394;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
}

.profile-userpic {
padding: 2px;
background: #fef8ed;
border: 1px solid #f3e5c7;
padding: 10px;
margin: 10px auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}

/* --------- sidebar items (summary, links) ------------------------- */

#summary b {
color: transparent;
}

.summaryList,
.listitem {
margin: 10px auto;
padding-left: 7px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-bullet.png) transparent no-repeat;
background-position: 2px 6px;
text-align: left;
}

.listitem a {
padding-left: 10px;
}

/* --------- sidebar items (tags etc.) ------------------------- */

#tags_sidebox {
color: transparent;
font: normal 8px Trebuchet MS, Sans Serif;
padding: 20px 10px;
}

#tags_sidebox a {
display: block;
padding-left: 20px !important;
padding-left: 7px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-bullet.png) transparent no-repeat;
background-position: 2px 6px;
text-align: left;
line-height: 16px;
font: normal 13px Trebuchet MS, Sans Serif;
}

#freetext,
#search {
padding: 10px 15px 20px 15px;
}

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

.latestmonth-inactive {
height: 20px;
width: 20px;
margin: 2px;
}

.latestmonth-active {
height: 20px;
width: 20px;
background: #fef8ed;
margin: 2px;
border: solid 1px #f3e5c7;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
}

.latestmonth-active a:hover {
color: # !important;
}

.latestmonth-active a,
.latestmonth-active a:visited {
color: # !important;
}

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

.bodyblock {
margin: 70px 180px 50px 50px !important;
padding: 0;
}

.entryHolder {
border: 0;
margin: 0 0 30px 0;
background: url() transparent repeat scroll;
font: normal 13px Trebuchet MS, Sans Serif;
color: #7a5f4a;
}

/* ------ entry header: date & subject ------ */

.entryHeader,
.commentHeader {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-entry-bg.jpg) transparent repeat scroll;
height: 22px;
padding: 10px 20px 0px 20px;
font: normal 14px Ubuntu, century gothic;
text-transform:uppercase;
letter-spacing: 0px;
color: #917057;
border: solid 1px #dcc394;
border-bottom: 0;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-o-border-radius: 4px 4px 0 0;
}

.entryHeader span,
.commentHeader span {
padding: 0 0 5px 0;
border-bottom: solid 1px #eeddba;
}

.commentHeaderSubject,
.entryHeaderSubject a,
.entryHeaderSubject a:hover,
.entryHeaderSubject a:visited {
font: normal 14px Ubuntu, century gothic;
color: #c08d67;
}

.entryUserinfo {
position: relative;
float: right !important;
margin: -13px -131px 10px 20px;
padding: 15px 15px;
background: #fef8ed;
border: 1px solid #dcc394;
border-left: solid 1px #f3e5c7;
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-o-border-radius: 0 5px 5px 0;
}

.entryUserinfo:hover,
.commentUserinfo:hover {
background: #fff;
}

.entryUserinfo-username {
margin-top: 5px;
width: 100px !important;
font-size: 11px;
}

/* -------- entry text -------------- */

.entryText {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-entry-bg.jpg) transparent repeat scroll;
text-align: justify;
line-height: 19px;
padding: 5px 20px 10px 20px;
min-height: 160px;
border: solid 1px #dcc394;
border-top: 0;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
}

.entryText img {
max-width: 750px !important;
}

blockquote {
font: normal 13px Trebuchet MS, Sans Serif;
letter-spacing:px;
margin: 10px 100px;
padding: 10px 15px;
text-align: justify;
color: #b39178;
line-height: 19px;
background: #fef8ed;
border: 1px solid #f3e5c7;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
}

/* -------- entry metadata -------------- */

.entryMetadata {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-entry-bg.jpg) transparent repeat scroll;
text-align: justify;
margin: -4px 0 0 0;
padding: 5px 20px 10px 20px;
font: normal 12px Trebuchet MS, Sans Serif;
border: solid 1px #dcc394;
border-top: 0;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
}

.entryMetadata ul {
border-top: solid 1px #eeddba;
padding: 6px 0 0 0;
}

.entryMetadata li {
padding: 1px 20px 0 0;
}

/* ------- entry links (comments, memories etc.) --------- */

.entryLinkbar {
background: transparent;
margin: 6px 0 0;
padding: 0px 10px 15px 20px;
font: normal 12px Ubuntu, century gothic;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
}

.entryLinkbar li {
background: #fef8ed;
padding:6px 15px 6px 15px;
border: solid 1px #dcc394;
border-top: solid 1px #f3e5c7;
margin: 0px 10px 0 0;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
}

.entryLinkbar li:hover {
background: #fff;
}

.entryLinkbar li:hover a {
color: #c08d67;
}

/* --------- FOOTER ----------- */

.bodynavblock {
background: transparent;
border: 0;
text-align: center;
margin: 50px 200px 0 200px;
color: #917057;
padding: 0;
}

.bodynavblock ul {
background: url() transparent repeat-x scroll;
height: 30px !important;
padding-top: 10px !important;
}

.bodynavblock b {
background: url() transparent repeat-x scroll;
height: 40px !important;
padding: 10px 3px !important;
font: normal 14px Ubuntu, century gothic;
letter-spacing: 0px;
text-transform: uppercase;
color: #917057;
}

#footer-menu a,
.bodynavblock b a,
#footer-menu a:link,
.bodynavblock b a:link,
#footer-menu a:visited,
.bodynavblock b a:visited {
font: normal 14px Ubuntu, century gothic;
text-transform: uppercase;
letter-spacing: 0px;
color: #917057 !important;
}

#footer-menu a:hover,
.bodynavblock b a:hover {
color: #c08d67 !important;
}

.pagefooterblock {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-credit.jpg) transparent bottom right no-repeat;
height: 45px;
border: 0;
border-top: 5px solid #dcc394;
color: transparent !important;
//color: #EBD5A6 !important;
font: normal 1px century gothic !important;
text-transform: uppercase;
//padding-top: 5px;
position: relative;
z-index: 10;
}

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

.commentHolder {
margin-bottom: 20px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-entry-bg.jpg) transparent repeat scroll;
border: solid 1px #dcc394;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
}

.commentHeader {
background: transparent;
border: 0;
}

.commentUserinfo {
margin: 10px 0 10px 20px;
padding: 10px 10px 5px 10px;
background: #fef8ed;
border: 1px solid #f3e5c7;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
}

.commentUserinfo-usericon {
margin-bottom: 3px !important;
}

.commentUserinfo-username {
color: transparent;
}

.commentText {
background: transparent;
font: normal 13px Trebuchet MS, Sans Serif;
color: #7a5f4a;
padding: 7px 20px 5px 10px;
}

.commentLinkbar ul {
background: transparent;
padding: 0px 20px 5px 20px;
font: normal 12px Ubuntu, century gothic;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
color: #7a5f4a;
}

/* ------ QUICK REPLY ------ */

.quickreply_entry form table,
.quickreply_comment form table,
#postform {
background: transparent;
border: 0 !important;
color: #7a5f4a;
font: normal 12px Trebuchet MS, Sans Serif;
line-height: 20px;
padding: 10px 50px;
margin: 30px;
}

#postform b {
color: #7a5f4a;
}

.replyform {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-entry-bg.jpg) transparent repeat scroll;
border: solid 1px #dcc394;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
}

.textbox {
border: 1px solid #f3e5c7;
padding: 3px;
}

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

table .tagstable {
border: 0;
margin: 20px auto 40px auto;
}

table .tagstable td {
border: 0;
border-bottom: 1px solid #eeddba;
}

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

.month {
background: transparent;
border: 0;
margin: 30px auto 70px auto;
padding:0;
width:500px;
}

.daysubjects {
}

.daytitles {
background: transparent;
border: 0;
border-bottom: 1px solid #DCC394;
padding: 5px;
font: normal 14px Ubuntu, Century Gothic;
text-transform: uppercase;
color: #917057;
text-align:left;
}

.day-blank {
border: 0;
}

.day {
background: tranparent;
border:0;
margin:5px;
padding:3px;

}

.day-date {
width:40%;
background: transparent;
border: 0;
padding: 7px 3px;
color: #7a5f4a;
text-align: left;
font: normal 12px Trebuchet MS, Sans Serif;
}

.day-count {
float:right;
text-align:left;
width: 100%;
}

.day-count a,
.day-count a:visited {
background: transparent;
padding:3px;
color: #;
font: normal 13px Trebuchet MS, Sans Serif;
text-decoration: none;
}

.day-count a:hover {
color: #;
}

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

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

textarea, select {
border: 1px solid #f3e5c7;
background: #fef8ed;
font: normal 12px Trebuchet MS, Sans Serif;
color: #7a5f4a;
line-height:19px;
margin:2px;
padding: 2px 5px;
}

input {
background: #fef8ed;
border: 1px solid #f3e5c7;
margin:3px;
padding: 2px 5px;
font: normal 12px Trebuchet MS, Sans Serif;
color: #7a5f4a;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
}

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

.ljuser a b {
color: #b39178 !important;
text-decoration: none;
}

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

img[src*="userinfo.gif"] {
width: 0;
height: 0;
padding: 9px 11px 10px 15px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-ljuser.png) no-repeat transparent;
}

img[src*="community.gif"] {
width: 0;
height: 0;
padding: 10px 10px 10px 15px;
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-ljcomm.png) no-repeat transparent;
}

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

#lj_controlstrip_new {
background: url(http://webzoom.freewebs.com/ruthenia-alba/038ginger-layout/upload/038ginger-entry-bg.jpg) repeat scroll;
border: 0;
border-bottom: solid 1px #dcc394;
}

.w-cs {
color: #7a5f4a !important;
font: normal 11px Trebuchet MS, Sans Serif;
}

.w-cs A:link,
.w-cs A:visited,
.w-cs A:active {
border: none !important;
text-decoration: none;
font: normal 11px Trebuchet MS, Sans Serif !important;
color: #b39178 !important;
}

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

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

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

.w-cs .w-cs-userinfo {
background: transparent !important;
border: 0;
border-right: solid 1px #eeddba;
}

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

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

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

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

.w-cs-status p {
color: #7a5f4a !important;
font: normal 11px Trebuchet MS, Sans Serif !important;
}

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

.w-cs input.submit,
.w-cs input.text {
background: #fef8ed;
border: 1px solid #f3e5c7 !important;
height: 19px;
padding: 0 5px 4px 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 0 0 !important;
-webkit-box-shadow: 0 0 0;
box-shadow: 0 0 0;
text-shadow: 0 0;
font: normal 11px Trebuchet MS, Sans Serif !important;
color: #7a5f4a !important;
}

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

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

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

.b-contextualhover a:link,
.b-contextualhover a:visited {
color: #b39178 !important;
}

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

.b-contextualhover h3 strong {
font: normal 14px Ubuntu, Century Gothic !important;
text-transform: uppercase;
color: #917057;
}

Like it?

layouts, layouts // smooth sailing, layouts [free]

Previous post Next post
Up