Will all my sincere I wish you Merry Christmas, and dedicate the brand new layout to this wonderful and festive day!
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. 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 -1px;
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;
}