Layout #030: Glass of Wine

Jun 22, 2011 11:34

Style: S2 Smooth Sailing
Account type: all types
Screen Resolution: 1024+
Entries: stretch
Browsers: Mozilla, Chrome, Safari
Comments in journal's style: yes
Controlstrip: enabled
Sidebar: topbar
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 - Yes

3. In left menu choose "Sidebar", and enable any four blocks there. Other blocks are to be disabled by choosing "hide" position.

4. In left menu choose "Entry Text", in Page section change date formatting:

- Format for Date and Time (Recent/Friends/Entry/Reply page): %%d%% %%mon%%, %%yyyy%%

5. 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)

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

/* Layout #30: Glass of Wine */
/* Date: June 20, 2011 */
/* S2 Style: Smooth Sailing */

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

/* Design & Codes: Ruthenia Alba (ruthenia_alba.livejournal.com) */
/* Header Images: Shutterstock */
/* Tiny Icons: Pixel Mixer (www.pixel-mixer.com) */

@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: normal;
src: local('Lobster'), url('http://themes.googleusercontent.com/font?kit=YHwahPJKvqdYc59-GJRXxD8E0i7KZn-EPnyo3HZu7kw') format('truetype');
}

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

/*
#ad5360 - a, a visited;
#e57a8a - a hover;
#E7E2D8 - sidebox background;
#EFECE5 - text background;
#5e4235 - text;
*/

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

a:hover {
color: #e57a8a;
}

a:visited {
color: #ad5360;
}

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

body {
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-footer-bg.jpg) bottom right repeat-x,
url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-bg.jpg) top left repeat !important;
}

.pageblock {
width: 70%;
min-width: 900px;
max-width: 1090px;
padding: 0 !important;
margin: 70px auto 120px auto !important;
}

.pageheaderblock {
margin: 50px 0 0 0;
padding: 20px 20px 15px 20px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-entry-bg.jpg) repeat;
}

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

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

.header-title {
height: 40px;
padding-top: 190px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-header.jpg) no-repeat transparent;
text-align: right !important;
font: normal 26px Lobster, Arial;
color: #9d7164;
letter-spacing: .2px;
}

.header-subtitle {
display: none;
}

.header-menu {
background: transparent;
text-align: center;
margin: 10px 0 0;
padding: 0 0 2px 0;
border: 0;
}

.header-menu ul {
margin: 0;
}

.header-menu li {
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-menu-bullet.png) no-repeat;
padding: 0 5px 0 15px;
font: normal 13px Arial;
}

.header-menu li a,
.header-menu li a:visited {
background: transparent !important;
color: #9d7b5d;
}

.header-menu li a:hover {
color: #bc9673;
}

/*-------- bodyblock ---------*/

.bodyblock {
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-entry-bg.jpg) repeat;
margin: 160px 0 0 0 !important;
padding: 5px 0 15px 0 !important;
border: 0;
}

.bodyblock table tbody tr {
padding: 0 !important;
}

.bodyheaderblock {
display: none;
}

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

.sidebar {
height: 170px;
width: 70%;
min-width: 900px;
max-width: 1090px;
top: 405px;
position: absolute;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-entry-bg.jpg) repeat;
padding: 0 !important;
margin: 0 auto !important;
}

.sidebox {
background: #E7E2D8;
margin: 0px 0px 0 20px;
padding: 2px;
width: 21.8%;
height:150px;
float:left;
overflow: auto;
color: #5E4235;
}

.sideboxTitle {
padding: 2px 5px 2px 5px;
background: transparent;
border: 0;
border-bottom: 1px solid #d3cabe;
font: normal 18px Lobster, Arial;
color: #5e4235;
text-align: center;
letter-spacing: .4px;
}

.sideboxContent {
padding: 5px;
font: normal 12px Arial;
}

.sideboxContent .listitem {
text-align: left;
margin: 0 0 7px 0;
padding: 0 0 0 20px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-meta-bullet.png) no-repeat;
}

/* --------- sidebar profile -------------- */

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

.summaryList {
text-align: left;
margin: 0 0 7px 0;
padding: 0 0 0 20px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-meta-bullet.png) no-repeat;
}

.summaryList b {
display: none;
}

.summaryList a b {
display: inline !important;
}

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

#latestmonth {
font: normal 10px Arial;
}

#latestmonth a {
font: normal 10px Arial !important;
text-transform: uppercase;
letter-spacing: 1px;
}

.latestmonth-inactive {
color: #5e4235;
margin: 1px;
padding: 2px;
}

.latestmonth-active a {
color: #;
text-decoration: none;
padding: 2px 5px;
background: #;
border: 1px solid #;
}

.latestmonth-active a:hover {
color: #;
text-decoration: none;
}

.latestmonth-active a:visited {
color: #;
text-decoration: none;
}

/* --------- sidebar freetext --------- */

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

.body-title {
display: none;
}

.entryHolder {
border: 0;
background: transparent;
margin: 0 !important;
padding: 0 !important;
}

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

.entryHeader {
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-date-bg2.png) no-repeat,
url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-subject-bg.jpg) repeat-x;
height: 50px;
margin: 0 0 0 -19px !important;
padding: 8px 20px 8px 25px;
font: bold 14px Arial;
}

.entryHeader, x:-moz-any-link {
margin: 0 0 0 -18px !important; /* --- ff hack --- */
}

.entryHeader a {
font: bold 14px Arial;
color: #a38660;
}

.entryHeaderDate {
margin: 0px 20px 0px 0px;
font: bold 14px Arial;
color: #a38660;
white-space: nowrap;
text-transform: uppercase;
}

.entryHeaderSubject {
color: #DFD3C7;
color: transparent;
}

.entryHeaderSubject a {
}

.entryHeaderSubject a:hover {
}

.subj-link {
font: normal 18px Lobster, Arial !important;
color: #8d7155 !important;
letter-spacing: .5px;
}

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

.entryText {
background: transparent;
margin: -10px 20px 0px 20px;
padding: 0 0 15px 0;
border: 0;
border-bottom: 1px solid #d3cabe;
min-height: 160px;
font: normal 12px Arial;
color: #5e4235;
line-height: 20px;
text-align: justify;
}

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

.entryUserinfo {
align: right;
float: right !important;
margin: -8px 20px 0px 20px;
padding: 10px;
background: #ded3c6;
}

blockquote {
background: #E7E2D8;
margin: 20px auto 10px auto;
padding: 5px 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #d3cabe;
color: #8d7155;
line-height: 20px;
max-width: 500px;
}

/* --------- entry metadata: tags etc. ------------------ */

.entryMetadata {
margin: 0 20px 5px 20px;
padding: 10px 0 0 0;
border: 0;
color: #9d7b5d;
}

.entryMetadata-label {
font: bold 12px Arial;
color: #5e4235;
}

.entryMetadata li {
margin: 0 10px 0 0;
}

.entryMetadata-content,
.entryMetadata-content a {
}

.entryMetadata-content a:hover {
}

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

.entryLinkbar {
margin: 0 20px 20px 20px;
padding: 7px 0 0 0;
text-align: right;
}

.entryLinkbar li {
font: normal 13px Arial;
margin: 0;
padding: 0 8px 0 20px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-menu-bullet.png) no-repeat left;
}

.entryLinkbar li a {
text-decoration: none;
}

.entryLinkbar li a:hover {
}

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

.bodynavblock {
border: 0;
background: transparent;
text-align: center;
}

.bodynavblock, .bodynavblock li {
font: normal 18px Lobster, Arial;
color: #5e4235;
}

.bodynavblock a {
color: #c0a078 !important;
}

.bodynavblock a:hover {
color: #d9b890 !important;
}

.pagefooterblock {
border: 0;
height: 40px;
background: transparent;
color: transparent;
//color: #C9A376;
}

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

.bodyblock .bodyheaderblock {
display: none;
}

.commentHolder {
margin: 0px 0;
padding: 1px 15px 3px 15px;
background: transparent;
border: 0;
font: normal 12px Arial;
color: #5e4235;
line-height: 20px;
text-align: justify;
}

.commentHolder table {
background: transparent;
}

.commentHeader {
position: relative;
background: transparent;
padding: 5px 0;
font: normal 11px Arial !important;
color: #5e4235;
text-transform: uppercase;
display: block;
text-align: left;
border: 0;
border-bottom: 1px solid #d3cabe;
}

.commentUserinfo {
float: left;
margin: 10px 10px 5px 0px;
padding: 5px 5px 4px 5px;
background: #ded3c6 !important;
}

.commentUserinfo .ljuser a {
color: #ae3a4b;
text-decoration: none !important;
}

.commentUserinfo-username {
font: normal 12px Arial;
padding: 2px 0 0;
margin: 0;
}

.commentUserinfo-usericon img {
}

.commentText {
padding: 5px 0;
}

.commentText img {
}

.commentLinkbar {
margin: 5px 0 0px 0;
text-align: right;
border-top: 1px solid #d3cabe;
font: normal 13px Arial;
color: #5e4235;
}

.commentLinkbar li {
margin: 0;
padding: 0 8px 0 20px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-menu-bullet.png) no-repeat left;
}

.commentLinkbar a {
text-decoration: none;
}

.commentLinkbar a:hover {
color: # !important;
}

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

#postform {
background: transparent !important;
margin: 0px 40px !important;
}

#postform b {
color: #5e4235;
}

.quickreply_entry form table,
.quickreply_comment form table,
#postform table {
color: #5e4235;
width: 75%;
background: transparent !important;
padding: 20px 0 20px 70px;
margin: 0;
border: 0 !important;
font: normal 12px Arial;
}

.quickreply_entry form table a,
.quickreply_comment form table a,
#postform table a {
color: #ae3a4b;
text-decoration: none;
}

.quickreply_entry form table a:hover,
.quickreply_comment form table a:hover,
#postform table a:hover {
color: #d36273;
text-decoration: none;
}

.textbox {
border: 0;
width: 100%;
padding: 2px;
text-align: justify;
background: #E7E2D8 !important;
border: 1px solid #d3cabe !important;
font: normal 12px Arial;
color: #5e4235;
margin-bottom: 15px;
}

.replyform {
background: transparent;
border: 0;
margin: 0;
padding: 0px;
font: normal 12px Arial;
line-height: 20px;
color: #5e4235;
}

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

textarea, input, select {
margin: 2px;
padding: 3px 5px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-subject-bg.jpg) repeat-x !important;
border: 1px solid #d3cabe !important;
font: normal 12px Arial;
color: #5e4235;
}

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

.tagstable {
width: 50%;
border: 0;
padding: 20px;
}

.tagstable tbody tr td {
border: 0;
border-bottom: 1px solid #d3cabe;
}

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

.month {
background: transparent;
width: 60% !important;
margin: 0 auto;
padding: 20px 60px;
border: 0;
}

.daysubjects {
}

.daytitles {
background: transparent;
border: 0;
border-bottom: 1px solid #d3cabe;
margin: 15px;
padding: 2px;
text-transform: uppercase;
letter-spacing: 1px;
font: normal 12px Arial !important;
text-transform: uppercase;
text-align: center;
color: #8d7155;
}

.day-blank {
border: 0;
}

.day {
background: transparent;
border: 0;
margin:10px 20px;
padding:3px 0 0 35px;
}

.day-date {
width:30%;
border: 0;
padding: 5px 2px;
color: #5e4235 !important;
font: normal 12px Arial !important;
align: center !important;
text-align: center !important;
}

.day-count {
float: right;
text-align: center;
width: 50%;
color: #5e4235 !important;
font: normal 12px Arial !important;
}

.day-count a,
.day-count a:visited {
padding:5px;
text-decoration:none;
font: normal 12px Arial !important;
}

.day-count a:hover {
}

/* ------- LJ USER & IMAGES --------- */

.ljuser a b {
font: ;
}

.entryText img[src*="userinfo.gif"] {
width: 0;
height: 0;
padding: 10px 16px 8px 16px;
margin: 0 0 0 3px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-ljuser.png) no-repeat transparent;
}

.entryText img[src*="community.gif"] {
width: 0;
height: 0;
padding: 9px 16px 8px 18px;
margin: 0 0 0 3px;
background: url(http://ruthenia-alba.webs.com/030wine-layout/upload/030wine-ljcomm.png) no-repeat transparent;
}

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

#lj_controlstrip_new {
background: #E7E2D8;
border: 0;
}

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

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

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

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

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

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

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

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

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

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

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

.w-cs input.submit,
.w-cs input.text {
background: #EAEAE2;
border: solid #d3cabe 1px;
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;
color: #9d7b5d !important;
}

style: smooth sailing, maker: ruthenia_alba

Previous post Next post
Up