S2 Smooth Sailing: Promises, Promises

[tessisamess]

LIVE PREVIEW [temporary] // STATIC PREVIEW [permanent]




PROMISES, PROMISES
s2smoothsailing

Instructions

♥ Go to CUSTOMIZE and choose any S2 Smooth Sailing layout, apply it.
♥ Go to CUSTOMIZE JOURNAL STYLE and then to CUSTOM CSS.
♥ Set dropdown menus to YES, NO, paste the code in and save!
♥ Most important of all, PLEASE read the notes to the right.
♥ Keep scrolling for that matching profile code I mentioned!
Code
/*--Promises, Promises by Tessisamess--*/
/*--Made On: February 2012--*/
/*--S2 Style: Smooth Sailing--*/

/*--------CREDITS---------*/
/*--Coding + Design + Tinyicons: tessisamess@LJ--*/
/*--Tessisamess Layout Comm: layouttesst@LJ--*/

/* PAGE */

body {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
margin: 0px;
color: #555555;
background: #f1f1f1 url(http://i.imgur.com/S0B0z.png) center bottom no-repeat fixed;
line-height: 150%;
overflow-x: hidden;
}

a, a:active, a:visited {
color: #7F3B81;
text-decoration: none;
}

a:hover {
color: #9F9F9F;
text-decoration: none;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}

.pageblock{
position:absolute;
width:100%;
margin: 0 auto;
}

.pageheaderblock {
background-image: url(http://i.imgur.com/r1eDC.png);
background-position: top center;
background-repeat: no-repeat;
background-color: #f1f1f1;
padding-top: 186px;
}

.pagefooterblock {
border: none;
background: #FF7745;
color: #ffffff;
padding: 4px 4px 4px 24px;
margin-top: 15px;
}

.pagefooterblock a, .pagefooterblock a:visited {
color: #7F3B81;
}

blockquote, pre {
background: #7F3B81 url(http://i.imgur.com/yxvaR.png) bottom left no-repeat;
color: white;
letter-spacing: 0.15em;
text-align: justify;
padding: 10px;
border-left: 5px solid #6D0F70;
border-bottom: 5px solid #6D0F70;
margin: 10px 60px 10px 60px;
}

blockquote::first-letter {
font-family: 'Bowlby One SC', Impact;
font-size: 34px;
line-height: 34px;
float: left;
margin: -5px 2px 1px 0px;
color: #6D0F70;
padding: 0px;
}

code {
color: #FF7745;
}

textarea {
background: #7F3B81;
color: #ffffff;
padding: 5px;
border: none;
}

h1 {
color: #7F3B81;
font-weight: normal;
font-family: 'Bowlby One SC', Impact;
font-size: 28px;
margin-bottom: 1px;
}

h2 {
color: #7F3B81;
font-weight: normal;
font-family: 'Bowlby One SC', Impact;
font-size: 30px;
letter-spacing: 1px;
margin-bottom: 1px;
}

h3 {
color: #FF7745;
font-weight: normal;
font-family: 'Bowlby One SC', Impact;
font-size: 22px;
letter-spacing: 1px;
margin-bottom: 1px;
}

/* HEADER */

.pageheaderblock {
text-align: left;
}

.header-title {
background: #FF7745;
font-family: 'Bowlby One SC', Impact;
font-size: 30px;
color: #ffffff;
text-transform: uppercase;
padding: 20px;
text-align: center;
letter-spacing: 2px;
}

.header-subtitle {
background: #A82FAD;
font-family: 'Bowlby One SC', Impact;
font-size: 22px;
color: #ffffff;
text-transform: uppercase;
padding: 9px;
padding-left: 20px;
text-align: center;
letter-spacing: 1px;
}

.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 3px solid #7F3B81;
border-bottom: 3px solid #7F3B81;
}

.header-menu {
padding: 5px;
background-color: #E53E73;
border: none;
padding-left: 19px;
padding-top: 9px;
padding-bottom: 9px;
font-family: 'Bowlby One SC', Impact;
text-transform: uppercase;
font-size: 20px;
line-height: 20px;
text-align: center;
}

.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 1px 6px 1px 6px;
color: #f3f3f3 !important;
text-decoration: none;
}

.header-menu a:hover {
border-bottom: none;
background-color: #E53E73;
color: #555555 !important;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}

.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}

.header-menu li, #footer-menu li {
display: inline;
}

/* BODY */

.bodyblock {
margin:0 auto;
padding-top:250px;
width:755px;
}

.bodyheaderblock {
border: none;
background-color: transparent;
padding: 4px 0px 4px 0px;
}

.bodynavblock {
border-top: none;
background-color: transparent;
color: #7F3B81;
margin: 10px 0px 4px 0px;
padding: 8px;
}

.bodynavblock a, .bodynavblock a:visited {
color: #7F3B81;
}

.body-title {
display: none;
}

.body-midtitle {
font-family: 'Bowlby One SC', Impact;
font-size: 18px;
color: #7F3B81;
text-align: center;
padding: 8px;
}

/*ENTRIES*/

.entryHolder {
color: #9F9F9F;
background: #ffffff;
font-family: Tahoma;
font-size: 12px;
border: none;
margin: 4px 0px 50px 0px;
}

.entryText {
padding: 15px;
color: #666666;
}

.entryHeader {
padding: 15px;
background-color: transparent;
font-size: 15px;
letter-spacing: 1px;
font-size: 25px;
color: #7F3B81;
font-family: 'Bowlby One SC', Impact;
}

.entryHeader a{
color: #7F3B81;
font-family: 'Bowlby One SC', Impact;
}

.entryHeaderSubject {
font-family: 'Bowlby One SC', Impact;
font-size: 25px;
color: transparent;
font-weight: normal;
margin-left: -15px;
}

.entryHeaderSubject a, .entryHeaderSubject a:visited, .entryHeaderSubject a:active {
color: #7F3B81;
text-decoration: none;
}

.entryHeaderSubject a:hover {
color: #555555;
}

.entryHeaderDate a {
color: #F26D98;
text-decoration: none;
}

.entryHeaderDate {
font-size: 10px;
float: right;
padding-bottom: 10px;
padding-right: 5px;
letter-spacing: 2px;
color: #F26D98 !important;
font-family: monospace;
}

.entryHeaderDate a:hover {
color: #D380D6;
text-decoration: none;
}

.entryMetadata {
padding: 6px;
}

.entryMetadata ul {
margin: 0px;
padding: 0px;
}

.entryMetadata li {
list-style: none;
display: inline;
padding-right: 10px;
}

.entryMetadata-label {
font-weight: bold;
padding-right: 4px;
padding-left: 3px;
border-left: 6px solid #FF7745;
}

.entryLinkbar {
font-family: 'Bowlby One SC', Impact;
font-size: 15px;
margin-top: 15px;
letter-spacing: 1px;
color: #ffffff;
background: #E53E73;
text-align: center;
padding: 10px;
}

.entryLinkbar a {
color: #ffffff;
}

.entryLinkbar a:hover {
color: #555555;
}

.entryLinkbar ul {
margin: 0px;
padding: 0px;
}

.entryLinkbar li {
padding: 7px;
margin: 0px;
display: inline;
text-decoration: none;
}

.entryUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
margin-left: -110px;
background-color: transparent;
font-size: 8pt;
}

.entryUserinfo-usericon img {
background: #7F3B81;
padding: 5px;
height: 75px;
width: 75px;
}

.entryUserinfo-usericon img:hover {
background: #FF7745;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}

.entryUserinfo a {
color: #555555 !important;
font-size: 8pt;
text-decoration: none;
border: 0px;
}

.entryUserinfo a:hover {
color: #7F3B81 !important;
text-decoration: none;
border: 0px;
}

/*FOOTER*/

#footer-menu {
font-size: 23px;
font-family: 'Bowlby One SC', Impact;
background: transparent;
text-align: center;
border: none;
}

#footer-menu a, .footer-menu a:visited {
color: #7F3B81;
white-space: nowrap;
padding: 6px;
text-align: center;
text-decoration: none;
}

/*SIDEBAR*/

.sidebar {
top: 351px;
font-family: ;
font-size: 11px;
margin-right: 0px;
width: 100%;
position: absolute;
}

.sidebox {
color: #777777;
background-color: #ffffff;
overflow: hidden;
float:left;
margin-right:0px;
width: 189px;
height:180px;
}

.sideboxTitle {
background: #FF7745;
color: #ffffff;
border: none;
font-family: 'Bowlby One SC', Impact;
font-size: 15px;
padding: 4px 0px 4px 8px;
margin-bottom: 5px;
text-align: center;
font-weight: normal;
letter-spacing: 1px;
}

.sideboxContent {
text-align: center;
padding: 5px;
}

.sidebox #profile, .sidebox #latestmonth, .sidebox #search {
text-align: center;
}

.sidebox #tags_sidebox {
text-align: center;
}

.sidebox #systemlinks {
text-align: center;
}

.sidebox #latestmonth table{
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
}

.listtitle {
font-weight: bold;
}

.profile-label {
font-weight: bold;
}

/*OTHER PAGES*/

/* COMMENT PAGE */

.commentHolder {
color: #ffffff;
background: #E53E73;
border-left: 10px solid #FF7745;
border-top: none;
font-size: 12px;
margin: 4px 0px 4px 0px;
}

.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
padding: 15px;
background-color: transparent;
}

.commentUserinfo-usericon img {
background: #7F3B81;
padding: 5px;
height: 75px;
width: 75px;
opacity:0.9;
filter:alpha(opacity=90);
}

.commentText {
}

.commentHeader {
background-color: transparent;
color: #7F3B81;
text-align: right;
font-family: monospace;
font-size: 11px;
padding: 8px 4px 4px 8px;
}

.commentHeader a{
color: #ffffff;
}

.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}

.commentHeaderSubject {
font-family: 'Bowlby One SC', Impact;
font-weight: normal;
font-size: 14px;
}

.commentLinkbar {
font-family: 'Bowlby One SC', Impact;
font-size: 13px;
color: #ffffff;
text-align: center;
padding-top: 8px;
padding-bottom: 4px;
}

.commentLinkbar ul {
margin: 0px;
padding: 0px;
}

.commentLinkbar li {
padding: 0px 5px 0px 5px;
margin: 0px;
display: inline;
}

.replyform {
background-color: #f8f8f8;
color: #000000;
padding-left: 10px;
border: none;
}

#commenttext{
width:100%;
}

/*ARCHIVE PAGE*/

.yearlinks{
text-align: right;
}

.yearlink{
padding-left:4px;
padding-right: 4px;
}

.month {
width: 500px;
border: none;
padding: 40px;
margin: 8px 8px 8px 120px;
background: url(http://i.imgur.com/Pkghz.png) bottom right no-repeat;
}

.daysubjects {
color: #bbbbbb;
padding: 8px 8px 8px 40px;
}

.daytitles {
text-align: center;
text-transform: uppercase;
font-family: 'Bowlby One SC', Impact;
font-size: 15px;
padding-bottom: 6px;
border: none;
background: transparent;
color: #A82FAD;
}

.day-blank {
border: none;
}

.day {
border: none;
}

.day-date {
border-left: 6px solid #FF7745;
border-bottom: none;
background: #E53E73;
color: #ffffff;
width: 50%;
text-align: center;
}

.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}

.day-count a {
text-decoration: none;
color: #7F3B81;
}

/*TAGS PAGE*/

.tagstable, .tagstable td {
border: none;
}

.tagstable { width: 500px;
background: url(http://i.imgur.com/Pkghz.png) bottom right no-repeat;}

/* SELCTION */

::selection {
background: #999999;
color:#7F3B81;
}

-moz-selection {
background: #999999;
color:#7F3B81;
}

::-webkit-selection {
background: #999999;
color:#7F3B81;
}

/* Cleaned CSS for new ControlStrip */

.w-cs {
background: #444444 url(http://i.imgur.com/T4mYB.png) repeat-x center;
color: #9F9F9F !important;
border-bottom: 2px solid #333333;
}

.w-cs A:link,
.w-cs A:visited,
.w-cs A:active {
color: #9f9f9f !important;
}

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

/* User info */

.w-cs .w-cs-userinfo {
background: transparent;
border-style: none;
}

/* Summary */

.w-cs .w-cs-summary {
background: transparent;
}

.w-cs .w-cs-summary LI.w-cs-i-tokens {
border: none;
}

.w-cs .w-cs-status p {
color: #9F9F9F;
}

@font-face {
font-family: 'Bowlby One SC';
font-style: normal;
font-weight: normal;
src: local('Bowlby One SC Regular'), local('BowlbyOneSC-Regular'), url('http://themes.googleusercontent.com/static/fonts/bowlbyonesc/v3/8ZkeXftTuzKBtmxOYXoReXSZ6Kd_eOJbDsY1hLBynIs.woff') format('woff');
}

/* Generated by Malionette's Tiny Icon Generator */

img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/Ave29.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/VwXhg.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/FKCan.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/FKCan.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_groups.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/FKCan.png) no-repeat !important; padding: 16px 0 0 16px !important; }

I offer a download of this layout in addition to the copy/paste code.

The download includes:
Layout code, all image files, all tinyicons, profile code images, profile code, and a replacement guide for customizing the colors, fonts, and images in this layout.



Notes

This is my first SS layout (that's up for public use, anyway), so I hope you all like it! For those of you who have not used SS layouts that have top bars before, please keep this in mind: You must have four content boxes. They don't have to be what I have, but there does need to be four of them, no more, no less. Another thing to mention is that if you take out the title and/or subtitle and/or header, you'll need to make adjustments to the .sidebar top padding, or the top bar will ride up onto the menu. Changing the width will also screw it up.

Hidden:
None.

Custom:
Tinyicons, archive page, tags page, comments page, controlstrip.
Tested in:


Credit

Credit when using this layout is a must, no matter how much you change in the code. There are three main ways to credit:

♥ In your profile with text and an LJ user link or HTML link to the layout.
♥ In your profile with a button.
♥ In your journal's linklist or blurb.

Basically anything visible. It doesn't have to be big, but it does need to be there.

tessisamess via layouttesst @ livejournal



Code

http://i.imgur.com/Yj553.png">

TITLE Le subtitle here. Aenean rutrum mi ut erat cursus ac ultrices sem consectetur. Sed lorem risus, dictum sed posuere laoreet, dignissim tristique erat. Integer in quam magna, et faucibus magna. Suspendisse aliquam viverra nisl quis lobortis. Nunc turpis leo, dignissim id ornare non, ultrices sed nibh. Donec vitae tortor sit amet odio molestie mollis. Proin viverra dignissim mi a faucibus. Aliquam turpis purus, faucibus at fringilla et, consequat ut metus. Cras leo est, tincidunt commodo viverra sed, iaculis nec nisi. Mauris condimentum diam eget ante imperdiet iaculis. In eget lorem arcu, ac lacinia quam. LINK · LINK · LINK · LINK · http://layouttesst.livejournal.com/10436.html">PROFILE

http://i.imgur.com/3CT2v.png">

Rules

+ Leave my credit.
+ You can change the credit symbol or placement; just make sure it's still visible.
+ You may change colors, fonts, widths, etc.
+ That's it!