Layout #035: Monday Feeling

Oct 17, 2011 14:37

Style: S2 Smooth Sailing
Account type: all types (Ad Account might have issues)
Screen Resolution: 1024+
Entries: stretch
Browsers: Mozilla, Chrome, Safari, IE9
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):


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 #35: Monday Feeling */
/* Date: October 16, 2011 */
/* S2 Style: Smooth Sailing */

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

/* Design & Codes: Ruthenia Alba (ruthenia_alba.livejournal.com) */
/* Header Images: Shutterstock */
/* Tiny Icons: Berlin set (www.19eighty7.com) */

@font-face {
font-family: 'Philosopher';
font-style: normal;
font-weight: normal;
src: local('Philosopher Bold Italic'), url('http://themes.googleusercontent.com/static/fonts/philosopher/v2/PuKlryTcvTj7-qZWfLCFIBBJbNC_o6dSdMhcrMKcxkU.woff') format('woff');
}

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

/*
#bb7c2d - a;
#d08221 - a hover;
#8e5815 - a visited;
#eae7d6 - sidebox background;
#6f5545 - text;
#d0ccb3 - borders;
*/

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

a:hover {
color: #d08221;
text-shadow: #fff 1px 1px 2px;
-moz-text-shadow: #fff 1px 1px 2px;
-webkit-text-shadow: #fff 1px 1px 2px;
}

a:visited {
color: #8e5815;
}

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

body {
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-credit.png) bottom right no-repeat,
url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-footer-bg.png) bottom right repeat-x,
url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-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/035monday-layout/upload/035monday-entry-bg.jpg) repeat;
}

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

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

.header-title {
height: 40px;
padding-top: 200px;
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-header.jpg) no-repeat transparent;
text-align: right !important;
font: normal 22px Philosopher, Arial;
color: #d0ccb3;
letter-spacing: 0.3px;
}

.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/035monday-layout/upload/035monday-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: #8e5815;
}

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

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

.bodyblock {
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-entry-bg.jpg) repeat;
margin: 190px 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: 200px;
width: 70%;
min-width: 900px;
max-width: 1090px;
top: 415px;
position: absolute;
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-entry-bg.jpg) repeat;
padding: 0 !important;
margin: 0 auto !important;
}

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

.sideboxTitle {
padding: 2px 5px 2px 5px;
background: transparent;
border: 0;
border-bottom: 1px solid #d0ccb3;
font: normal 17px Philosopher, Arial;
color: #715941;
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/035monday-layout/upload/035monday-menu-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/035monday-layout/upload/035monday-menu-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: #6f5545;
margin: 1px;
padding: 2px;
}

.latestmonth-active {
margin: 0 2px;
padding: 1px 0;
border: 1px solid #d0ccb3;
}

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

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

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

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

#freetext {
color: #6f5545;
}

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

.body-title {
display: none;
}

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

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

.entryHeader {
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-date-bg.png) no-repeat,
url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-subject-bg.png) repeat-x;
height: 50px;
margin: 0 0 0 -19px !important;
padding: 10px 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: #715941;
}

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

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

.entryHeaderSubject a {
}

.entryHeaderSubject a:hover {
}

.subj-link {
font: normal 17px Philosopher, Arial !important;
color: #715941 !important;
letter-spacing: .0px;
}

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

.entryText {
background: transparent;
margin: -10px 20px 0px 20px;
padding: 0 0 15px 0;
border: 0;
border-bottom: 1px solid #d0ccb3;
min-height: 160px;
font: normal 12px Arial;
color: #6f5545;
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: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-subject-bg.png) repeat;
}

blockquote {
background: #eae7d6;
margin: 20px auto 10px auto;
padding: 5px 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #d0ccb3;
color: #846855;
line-height: 20px;
max-width: 500px;
text-shadow: #fff 1px 1px 2px;
-moz-text-shadow: #fff 1px 1px 2px;
-webkit-text-shadow: #fff 1px 1px 2px;
}

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

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

.entryMetadata-label {
font: bold 12px Arial;
color: #6f5545;
}

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

.entryMetadata-content,
.entryMetadata-content a {
color: #8e5815;
}

.entryMetadata-content a:hover {
color: #d08221;
}

/* --------- 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/035monday-layout/upload/035monday-meta-bullet.png) no-repeat;
}

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

.entryLinkbar li a:hover {
}

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

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

.bodynavblock, .bodynavblock b, .bodynavblock li {
font: normal 20px Philosopher, Arial;
color: #6f5545;
}

.bodynavblock a {
font-weight: normal;
color: #8e5815 !important;
}

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

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

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

.bodyblock .bodyheaderblock {
display: none;
}

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

.commentHolder table {
background: transparent;
}

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

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

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

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

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

.commentUserinfo-usericon img {
}

.commentText {
padding: 5px 0;
}

.commentText a i {
padding: 0 5px 0 20px;
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-meta-bullet.png) no-repeat left;
}

.commentText img {
}

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

.commentLinkbar li {
margin: 0;
padding: 0 8px 0 20px;
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-meta-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: #6f5545;
}

.quickreply_entry form table,
.quickreply_comment form table,
#postform table {
color: #6f5545;
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: #bb7c2d;
text-decoration: none;
}

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

.quickreply_entry form table a:visited,
.quickreply_comment form table a:visited,
#postform table a:visited {
color: #8e5815;
}

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

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

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

textarea, input, select {
margin: 2px;
padding: 3px 5px;
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-subject-bg.png) repeat-x !important;
border: 1px solid #d0ccb3 !important;
font: normal 12px Arial;
color: #6f5545;
}

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

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

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

/* ----------- 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 #d0ccb3;
margin: 15px;
padding: 2px;
text-transform: uppercase;
letter-spacing: 1px;
font: normal 12px Arial !important;
text-transform: uppercase;
text-align: center;
color: #6f5545;
}

.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: #8e5815 !important;
font: normal 12px Arial !important;
align: center !important;
text-align: center !important;
}

.day-count {
float: right;
text-align: center;
width: 50%;
color: #6f5545 !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: ;
}

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

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/035monday-layout/upload/035monday-ljcomm.png) no-repeat transparent;
}

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

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

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

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

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

.w-cs .w-cs-menu li {
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-strip.png) no-repeat;
}

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

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

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

.w-cs-summary {
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-entry-bg.jpg) repeat !important;
border: solid #d0ccb3 1px;
}

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

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

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

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

.w-cs input.submit,
.w-cs input.text {
background: #DADADA;
border: solid #d0ccb3 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: #6f5545 !important;
}

.w-cs FORM.w-cs-search INPUT.text {
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-entry-bg.jpg) repeat !important;
border: solid #d0ccb3 1px;
}

.w-cs FORM.w-cs-search INPUT.submit {
border: 0 !important;
height: 20px;
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-search.png) no-repeat !important;
background-position: -2px 1px !important;
}

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

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

div.ContextualPopup img {
border:0 none;
}

div.ContextualPopup div.Inner {
opacity: 0.9;
background: #eae7d6 !important;
border: 1px solid #d0ccb3;
color: #6f5545 !important;
font: normal 12px Arial;
margin:0;
padding:5px;
}

div.ContextualPopup .Relation {
border: 0;
color: #8e5815;
font: bold 12px Arial;
margin: 2px 0;
padding: 2px 0;
}

div.ContextualPopup .Userpic {
padding: 8px 8px 0 0;
}

div.ContextualPopup .Userpic img {
padding: 5px;
border: 0;
background: url(http://ruthenia-alba.webs.com/035monday-layout/upload/035monday-subject-bg.png) repeat;
}

div.ContextualPopup div.Inner a,
div.ContextualPopup div.Inner a:link,
div.ContextualPopup div.Inner a:visited {
color: #bb7c2d !important;
font: normal 12px Arial;
text-decoration: none !important;
}

div.ContextualPopup div.Inner a:hover {
color: #d08221 !important;
font: normal 12px Arial;
text-decoration:none !important;
}

div.ContextualPopup .Content .OnlineStatus {
font-weight: bold;
}

N.B. Warning! The Navigation Strip must be enabled in your Settings (Navigation Strip -> Always show on my journal/community). If you'd like to hide it, add the following code to the end of CSS code:

#lj_controlstrip_new {display: none;}

style: smooth sailing, maker: ruthenia_alba

Previous post Next post
Up