S2 SMOOTH SAILING: Gotham Nights
LIVE PREVIEW [temporary] // STATIC PREVIEW [permanent]
GOTHAM NIGHTS
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.
Code
/*--Gotham Nights by Tessisamess--*/
/*--Made On: March 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: #222222 url(http://pics.livejournal.com/tessisamess/pic/00073x0d) top left no-repeat fixed;
line-height: 150%;
overflow-x: hidden;
}
a, a:active, a:visited {
color: #999999 !important;
text-decoration: none;
}
a:hover {
color: #FFFFFF !important;
text-decoration: none;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
.pageblock{
position:absolute;
width:100%;
margin: 0 auto;
}
.pageheaderblock {
background-image: url(http://pics.livejournal.com/tessisamess/pic/0006x8kc);
background-position: top right;
background-repeat: no-repeat;
background-color: transparent;
padding-top: 125px;
}
.pagefooterblock {
border: none;
background: #888888;
color: #333333;
font-family: 'Six Caps';
font-size: 23px;
padding: 8px;
margin-top: 15px;
text-align: center;
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
letter-spacing: 2px;
-webkit-box-shadow: 0px -10px 10px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px -10px 10px 1px rgba(0, 0, 0, .2);
box-shadow: 0px -10px 10px 1px rgba(0, 0, 0, .2);
}
.pagefooterblock a, .pagefooterblock a:visited {
color: #888888;
}
blockquote, pre {
background: #333333;
color: #FFFFFF;
letter-spacing: 0.5px;
text-align: justify;
padding: 15px;
border: none;
margin: 10px 70px 10px 70px;
-webkit-box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 10px 3px rgba(0, 0, 0, .3);
}
blockquote::first-line{
font-family: 'Six Caps', Georgia;
font-size: 35px;
line-height: 45px;
letter-spacing: 2px;
float: left;
margin: 2px 2px 1px 0px;
color: #888888;
padding: 0px;
}
i img {
border: 5px solid #888888;
-webkit-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, .2);
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, .2);
margin-left: 19%;
}
code {
color: #888888;
}
textarea {
background: #888888;
color: #111111;
padding: 5px;
border: none;
}
h1 {
color: #888888;
font-weight: normal;
font-family: 'Six Caps', Georgia;
font-size: 36px;
margin-bottom: 1px;
letter-spacing: 2px;
}
h2 {
color: #FFFFFF;
font-weight: normal;
font-family: 'Six Caps', Georgia;
font-size: 32px;
margin-bottom: 1px;
letter-spacing: 2px;
}
h3 {
color: #444444;
font-weight: normal;
font-family: 'Six Caps', Georgia;
font-size: 30px;
letter-spacing: 1px;
margin-bottom: 1px;
}
/* HEADER */
.pageheaderblock {
text-align: left;
}
.header-title {
background: #000000;
font-family: 'Six Caps', Georgia;
font-size: 45px;
color: #999999;
text-transform: uppercase;
padding: 20px;
text-align: center;
letter-spacing: 3px;
-webkit-box-shadow: 0px -10px 10px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px -10px 10px 1px rgba(0, 0, 0, .2);
box-shadow: 0px -10px 10px 1px rgba(0, 0, 0, .2);
}
.header-subtitle {
display: none;
}
.header-icon {
top: 0px;
right: 0px;
position: absolute;
z-index: 1;
border-left: 3px solid #888888;
border-bottom: 3px solid #888888;
}
.header-menu {
padding: 5px;
background-color: #000000;
border: none;
padding-left: 25px;
padding-right: 25px;
padding-top: 13px;
padding-bottom: 13px;
font-family: 'Six Caps', Georgia;
text-transform: uppercase;
font-size: 30px;
line-height: 20px;
text-align: center;
letter-spacing: 1px;
-webkit-box-shadow: 0px 10px 10px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 10px 10px 1px rgba(0, 0, 0, .2);
box-shadow: 0px 10px 10px 1px rgba(0, 0, 0, .2);
}
.header-menu a, .header-menu a:visited {
white-space: nowrap;
text-align: center;
padding: 1px 6px 1px 6px;
color: #999999 !important;
text-decoration: none;
padding-left: 25px;
}
.header-menu a:hover {
border-bottom: none;
background-color: transparent;
color: #f5f5f5 !important;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
.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:850px;
}
.bodyheaderblock {
border: none;
background-color: transparent;
padding: 4px 0px 4px 0px;
}
.bodynavblock {
border-top: none;
background-color: transparent;
color: #888888;
margin: 10px 0px 4px 0px;
padding: 8px;
}
.bodynavblock a, .bodynavblock a:visited {
color: #888888;
}
.body-title {
display: none;
}
.body-midtitle {
font-family: 'Six Caps', Georgia;
font-size: 35px;
color: #888888;
text-align: center;
padding: 8px;
letter-spacing: 1px;
}
/*ENTRIES*/
.entryHolder {
color: #9F9F9F;
background: #111111;
font-family: Tahoma;
font-size: 12px;
border: none;
margin: 4px 0px 50px 0px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
}
.entryText {
padding: 15px;
color: #666666;
}
.entryHeader {
padding: 15px;
background-color: transparent;
font-size: 15px;
letter-spacing: 1px;
font-size: 25px;
color: #888888;
font-family: 'Six Caps', Georgia;
}
.entryHeader a{
color: #888888;
font-family: 'Six Caps', Georgia;
}
.entryHeaderSubject {
font-family: 'Six Caps', Georgia;
font-size: 32px;
color: transparent;
font-weight: normal;
margin-left: -15px;
}
.entryHeaderSubject a, .entryHeaderSubject a:visited, .entryHeaderSubject a:active {
color: #888888;
text-decoration: none;
}
.entryHeaderSubject a:hover {
color: #555555;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
.entryHeaderDate a {
color: #FFFFFF;
text-decoration: none;
}
.entryHeaderDate {
font-size: 10px;
float: right;
padding-bottom: 10px;
padding-right: 5px;
letter-spacing: 2px;
color: #FFFFFF!important;
font-family: monospace;
}
.entryHeaderDate a:hover {
color: #D380D6;
text-decoration: none;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
.entryMetadata {
padding: 6px;
margin-left: -95px;
}
.entryMetadata ul {
margin: 0px;
padding: 0px;
}
.entryMetadata li {
list-style: none;
display: inline;
padding-right: 10px;
}
.entryMetadata-label {
font-family: 'Six Caps';
font-weight: normal;
font-size: 25px;
padding-right: 4px;
padding-left: 3px;
}
.entryLinkbar {
font-family: 'Six Caps', Georgia;
font-size: 25px;
margin-top: 15px;
letter-spacing: 1px;
color: #ffffff;
background: #111111 url() center center repeat;
text-align: center;
padding: 10px;
}
.entryLinkbar a {
color: #999999;
}
.entryLinkbar a:hover {
color: #FFFFFF;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
.entryLinkbar ul {
margin: 0px;
padding: 0px;
}
.entryLinkbar li {
padding: 7px;
margin: 0px;
display: inline;
text-decoration: none;
}
.entryUserinfo {
text-align: center;
margin: 8px;
background-color: transparent;
font-size: 8pt;
}
.entryUserinfo-usericon img {
background: #888888;
padding: 5px;
height: 75px;
width: 75px;
}
.entryUserinfo-usericon img:hover {
background: #f5f5f5;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
.entryUserinfo a {
color: #555555 !important;
font-size: 8pt;
text-decoration: none;
border: 0px;
}
.entryUserinfo a:hover {
color: #888888 !important;
text-decoration: none;
border: 0px;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
/*FOOTER*/
#footer-menu {
font-size: 33px;
font-family: 'Six Caps', Georgia;
background: transparent;
text-align: center;
border: none;
margin-bottom: 35px;
}
#footer-menu a, .footer-menu a:visited {
color: #888888;
white-space: nowrap;
padding: 6px;
text-align: center;
text-decoration: none;
}
/*SIDEBAR*/
.sidebar {
top: 270px;
font-family: ;
font-size: 13px;
margin-right: 0px;
width: 100%;
position: absolute;
}
.sidebox {
color: #777777;
background-color: #111111;
overflow: hidden;
float:left;
margin-right:0px;
width: 283px;
height:190px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
}
.sideboxTitle {
background: #111111 url() center center repeat;
color: #ffffff;
border: none;
font-family: 'Six Caps', Georgia;
font-size: 30px;
padding: 5px;
padding-top: 10px;
margin-bottom: 5px;
text-align: center;
font-weight: normal;
letter-spacing: 2px;
}
.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;
font-weight: normal;
}
.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: #f5f5f5;
background: #444444;
border: 3px solid #666666;
font-size: 12px;
margin: 4px 0px 4px 0px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, .2);
}
.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
padding: 15px;
background-color: transparent;
}
.commentUserinfo a {
color: #333333 !important;
}
.commentUserinfo a:hover {
color: #FFFFFF !important;
}
.commentUserinfo-usericon img {
background: #222222;
padding: 5px;
height: 75px;
width: 75px;
opacity:0.9;
filter:alpha(opacity=90);
-webkit-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, .2);
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, .2);
}
.commentUserinfo-usericon img:hover {
background: #888888;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !important;
}
.commentText {
}
.commentHeader {
background-color: transparent;
color: #111111;
text-align: right;
font-family: monospace;
font-size: 11px;
padding: 8px 4px 4px 10px;
}
.commentHeader a{
color: #111111;
}
.commentHeaderScreened {
font-family: ;
font-size: 12px;
background-color: #cccccc;
padding: 4px 0px 4px 8px;
}
.commentHeaderSubject {
font-family: 'Six Caps', Georgia;
font-weight: normal;
font-size: 24px;
letter-spacing: 2px;
}
.commentLinkbar a {
font-family: 'Six Caps', Georgia;
font-size: 23px;
color: #222222;
text-align: center;
padding-top: 8px;
padding-bottom: 4px;
letter-spacing: 1px;
}
commentLinkbar a:hover {
color: #FFFFFF !important;
}
.commentLinkbar {
font-family: 'Six Caps', Georgia;
font-size: 23px;
color: #111111;
text-align: center;
padding-top: 8px;
padding-bottom: 4px;
letter-spacing: 1px;
}
.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 170px;
background: url() bottom right no-repeat;
}
.daysubjects {
color: #bbbbbb;
padding: 8px 8px 8px 40px;
}
.daytitles {
text-align: center;
text-transform: uppercase;
font-family: 'Six Caps', Georgia;
font-size: 29px;
padding-bottom: 6px;
border: none;
background: transparent;
color: #FFFFFF;
}
.day-blank {
border: none;
}
.day {
border: none;
}
.day-date {
border:none;
background: transparent;
color: #888888;
width: 50%;
text-align: center;
}
.day-count {
width: 50%;
text-align: center;
float: right;
font-size: 20px;
}
.day-count a {
text-decoration: none;
color: #FFFFFF;
font-family: 'Six Caps';
}
/*TAGS PAGE*/
.tagstable, .tagstable td {
border: none;
}
.tagstable { width: 500px;
background: url() bottom right no-repeat;}
/* SELCTION */
::selection {
background: #FFFFFF;
color:#111111;
}
-moz-selection {
background: #FFFFFF;
color:#111111;
}
::-webkit-selection {
background: #FFFFFF;
color: #111111;
}
/* Cleaned CSS for new ControlStrip */
.w-cs {
background: #111111 url() repeat-x center;
color: #9F9F9F !important;
border-bottom: none;
-webkit-box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, .2);
box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, .2);
}
.w-cs A:link,
.w-cs A:visited,
.w-cs A:active {
color: #999999 !important;
}
.w-cs A:hover {
color: #FFFFFF !important;
-webkit-transition: all .5s ease-in !important;
-moz-transition: all .5s ease-in !important;
-o-transition: all .5s ease-in !important;
transition: all .5s ease-in !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: #999999;
}
@font-face {
font-family: 'Six Caps';
font-style: normal;
font-weight: normal;
src: local('Six Caps'), local('SixCaps'), url('http://themes.googleusercontent.com/static/fonts/sixcaps/v4/tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA.woff') format('woff');
}
/* Generated by Malionette's Tiny Icon Generator */
/* Tinyicons by Tessisamess @ Layouttesst */
img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/vcJTE.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/OiPdg.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/2YnEA.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/4vF0J.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/2YnEA.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 a redesign of my last layout, Promises, Promises. I recently retooled it into a Wonder Woman layout for a friend of mine and then decided to make a Batman one since I love the comics so much.
For those of you who have not used SS layouts that have top bars before, please keep this in mind: You must have three content boxes. They don't have to be what I have, but there does need to be three of them, no more, no less. Another thing to mention is that if you take out the title and/or header, or put the subtitle back in, you'll need to make adjustments to the .sidebar top padding, or the top bar will ride up onto the menu or down onto the entries. Changing the width will also screw it up.
Hidden:
Subtitle.
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