037 - Layout 16 [Smooth Sailing: Feel The City Breakin']

[yam]

Hello! At last, I changed frozen_mint's layout, and I'm really happy with it.
Anyway, this is the big brother of I Woke Up In A Soho Doorway, which means that they are very, very similar. I made it some time ago for personal use (you can still watch it with some real stuff in my journal: _yam_), but now you can use it. Enjoy! :)



Live preview | Image Preview



/********************DO NOT REMOVE THIS******************** Layout 016 [Feel The City Breakin'] by Yam @ Frozen Mint (frozen_mint.livejournal.com) Style: Smooth Sailing Account level: Basic / Paid / Plus Tested on: IE (7 and higher), Firefox, Safari and Chrome ----------CREDITS: Body background: http://www.noctua-graphics.de/english/Tex/wood_01.htm Background of header links: http://www.squidfingers.com/patterns/ Header image (clouds): http://community.livejournal.com/frozen_mint/5171.html Icons: http://www.dezinerfolio.com/2008/08/28/on-stage-free-vector-psd-icon-set *************************************************************/ /*****BASIC LAYOUT*****/ body { background:#fff url(http://www.mentahelada.net/lj-layouts/layout016/bg-body.jpg) top left repeat fixed; color:#333; font-family:Georgia, "Times New Roman", Times, serif; font-size:100%; /*line-height:103%;*/ } .pageblock{ /*the content*/ background:#fff; margin:25px auto; padding:20px; width:920px; } .pageheaderblock { background:transparent url(http://www.mentahelada.net/lj-layouts/layout016/bg-header.jpg) top left no-repeat; margin-bottom:20px; font-size:0.6875em/*11px*/; text-align:left; } .bodyblock { /*entries + sidebar*/ background:transparent; padding:0; font-size:0.75em/*12px*/; } .sidebar { background:transparent; margin:0 20px 0 0; width:294px; } /*****BASICS*****/ * {margin: 0; padding: 0;} .ippu {font-size:11px;} a{outline:none;} a img{border:0;} p, td {font-size:inherit;} code, kbd, pre, tt {font-family:monospace;} i, em{font-style:italic;} textarea {max-width:400px;} .clear{height:0;} .lj_embedcontent{max-width:450px;} #lj_controlstrip {background:#fff!important; border-bottom:1px solid #d4d4d4; padding:3px; color:#0389e6!important;} #lj_controlstrip a{color:#0389e6; text-decoration:underline; text-transform:none;} #lj_controlstrip a:hover{color:#333; text-decoration:none;} #lj_controlstrip_statustext{color:#0389e6; font-weight:100;} #lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search{border:0;} a, a:link, a:visited { color:#0389e6; font-weight:200; text-decoration:underline; text-transform:none; } a:hover { color:#333; text-decoration:underline; } blockquote { background:transparent url(http://www.mentahelada.net/lj-layouts/layout016/pattern-gray.jpg) repeat; border-left:20px solid #333; margin:10px auto; padding:20px 20px 20px 8px; width:80%; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.1666em/*14px*/; font-style:italic; text-align:left; line-height:1.6em; } ::-moz-selection { background:#eae8e8; color:#0389e6; } b, strong{ color:#0389e6; font-weight:900; } /*****HEADER*****/ .header-title {display:none;} .header-subtitle {display:none;} .header-icon {display:none;} .header-menu ul{} .header-menu li{display:inline;} .header-menu { background:#000 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-link.jpg) repeat; margin-left:314px; padding:100px 0 10px; } .header-menu a, .header-menu a:link, .header-menu a:visited { background:#000 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-link.jpg) repeat; border-right:1px solid #fff; margin:0; padding:100px 8px 10px ; color:#ccc; font-weight:normal!important; text-decoration:none; text-transform:uppercase; } .header-menu a:hover { background:#0389e6 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-hover.jpg) repeat; padding:100px 8px 10px; color:#fff; } /*****SIDEBAR*****/ .sidebar a{text-decoration:none;} .sidebox { background:transparent; margin-bottom:20px; } #freetext{} .sideboxTitle { background:#000 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-link.jpg) repeat; padding:15px 8px 8px; color:#ccc; font-size:0.9166em/*11px*/; text-align:left; text-transform:uppercase; } .sideboxContent { text-align:left; padding:5px 0; } .sidebox #systemlinks { text-align:left; } #summary, #search, #tags_sidebox { padding:5px; } .sidebox #summary b{ color:#0389e6; line-height:2em; } .sidebox #summary a{ background:transparent; margin-bottom:1px; color:#333; font-size:1em/*12px*/; font-weight:100; } .sidebox #summary a:hover { color:#0389e6; text-decoration:underline; } .listitem a, .listitem a:link, .listitem a:visited { background:transparent; border-bottom:1px solid #333; display:block; padding:3px 8px; color:#333; font-size:1.1666em/*14px*/; font-weight:100; } .listitem a:hover { background:#0389e6; border-bottom:1px solid #0389e6; color:#f4f4f4; } .sidebox #latestmonth table{ width:95%; margin-left:auto; margin-right:auto; text-align:center; } .latestmonth-active{ background:#0389e6; border:1px solid #0389e6; margin:1px; padding:3px; } .latestmonth-inactive{ background:transparent; border:1px solid #ccc; margin:1px; padding:3px; } .latestmonth-active a, .latestmonth-active a:link, .latestmonth-active a:active { color:#f4f4f4; text-decoration:none; } .latestmonth-active a:hover{ text-decoration:underline; } .latestmonth-active:hover { background:#333; border:1px solid #333; } .listtitle { /*titles in the link list*/ background:#000 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-link.jpg) repeat; margin:20px 0 5px 0; padding:15px 8px 8px; color:#ccc; font-size:0.9166em/*11px*/; text-align:left; text-transform:uppercase; } .profile-label { /*bold words in the profile blurb*/ color:#0389e6; font-weight: bold; } /*****BODY*****/ .bodyheaderblock {display:none;} /*the title above entry, is NOT child of .bodyblock*/ .body-title {display:none;} /*the title above entry :/ is NOT child of .bodyblock*/ .bodynavblock {background:transparent; padding:20px;} /*the body footer omg.wtf.with.the.classes.names*/ .body-midtitle {display:none;} /*the title/separator of the comments*/ /*****FOOTER *****/ #footer-menu { background:#000 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-link.jpg) repeat; font-size:0.9166em/*11px*/; } #footer-menu ul { list-style:none; } #footer-menu li { display:inline; } #footer-menu a, #footer-menu a:link, .footer-menu a:visited { background:#000; padding:7px; margin:2px; color:#ccc; text-decoration:none; text-transform:uppercase; } #footer-menu a:hover{ background:#0389e6; color:#f4f4f4; } .pagefooterblock { /*the "this page was loaded..." part*/ background:transparent; padding:10px 0; font-size:0.6875em/*11px*/; text-align:right; text-transform:uppercase; } .pagefooterblock a, .pagefooterblock a:link, .pagefooterblock a:visited { color:#0389e6; text-decoration:underline; text-transform:none; } .pagefooterblock a:hover { text-decoration:none; } /*****ENTRY*****/ #welcomenoteText{ background:transparent; padding-top:83px; max-width:606px!important; } .entryHolder { background:transparent; margin-bottom:5px; } .entryUserinfo { /*around the icon / user*/ text-align:left; margin-bottom:10px; } .entryUserinfo a{ font-size:0.9166em/*11px*/; color:#666; } .entryUserinfo b, .entryUserinfo strong{ font-weight:100; color:#666; } .entryUserinfo-username{ padding-top:5px; margin-bottom:20px; } .entryUserinfo-usericon a img{ background:transparent; border:1px solid #ccc; padding:10px; margin:10px 10px 0 0; } .entryUserinfo-usericon a:hover img{ background:transparent; border:1px solid #eae8e8; padding:10px; margin:10px 10px 0 0; } .entryText { padding:10px 0 10px 0; line-height:1.6em; max-width:474px; } .entryText img{/*all the images posted will have a fixed width*/ max-width:400px; height:auto; } .entryText table tbody img{/*the polls look weird with if you use a max-width for the images posted; with this you fix the problem*/ width:auto; height:auto; } .entryText p span img{/*for the polls too*/ width:auto; height:auto; } .entryText ul li { list-style:circle; margin-left:30px; padding-left:0px; } .entryText ol li { list-style:decimal-leading-zero; margin-left:30px; padding-left:0px; } .entryHeader { /*date / time container*/ background:transparent; border-top:2px solid #333; overflow:auto; padding:10px 0 0; color:#333; font-variant:small-caps; font-weight:100; clear:both!important; } .entryHeaderSubject { float:left; padding:10px 0 0; font-size:2.5em/*30px*/; font-style:normal; line-height:1.2em; } .entryHeaderDate { float:right; color:#333; font-size:1em/*12px*/; text-decoration:none; } .entryHeader a, .entryHeader a:link, .entryHeader a:visited{ color:#333; font-weight:100; font-variant:small-caps; text-decoration:none; text-transform:none; } .entryHeader a:hover{ color:#0389e6; text-decoration:none; } .entryMetadata { background:transparent; border-top:1px solid #333; margin-bottom:10px; text-align:left; } .entryMetadata li { background:transparent; display:block; list-style:none; margin:3px 0; padding:2px 0; } .entryMetadata-label { font-weight:100; } .entryLinkbar { background:#000 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-link.jpg) repeat; padding:15px 0; font-size:0.8333em/*10px*/; color:#163b58; text-align:left; } .entryLinkbar li { display:inline; list-style:none; font-weight:100; } .entryLinkbar li a, .entryLinkbar li a:link, .entryLinkbar li a:visited{ background:transparent; border-right:1px solid #fff; padding:15px 5px; color:#ccc; text-decoration:none; text-transform:uppercase; } .entryLinkbar li a:hover { background:#000 url(http://www.mentahelada.net/lj-layouts/layout016/pattern-hover.jpg) repeat; text-decoration:none; } /*****COMMENT PAGE *****/ .commentHolder { background:#fff; color:#333; margin:10px 0; } .commentUserinfo { margin:0; padding:0; text-align:left; } .commentUserinfo-usericon a{color:#666;} .commentUserinfo b, .commentUserinfo strong{ font-weight:100; color:#666; } .commentUserinfo-username { padding-top:5px; margin-bottom:20px; font-size:11px!important; } .commentUserinfo-usericon a img{ background:transparent; border:1px solid #ccc; padding:10px; margin:10px 10px 0 0; } .commentUserinfo-usericon a:hover img{ background:transparent; border:1px solid #eae8e8; padding:10px; margin:10px 10px 0 0; } .commentText {padding:10px 0;} .commentHeader { background:#000; padding:10px; color:#ccc; text-transform:none; } .commentHeader a, .commentHeader a:link, .commentHeader a:visited{ color:#0389e6; text-decoration:underline; } .commentHeader a:hover {text-decoration:none;} .commentHeaderScreened { /*this changes just the commentHeader*/ background:#999; padding:10px; color:#fff; text-transform:none; } .commentHeaderSubject { font-weight:100; text-transform:uppercase; } .commentLinkbar { background:transparent; padding:10px; font-size:0.9166em/*11px*/; color:#0389e6; text-align:right; } .commentLinkbar li { display:inline; list-style:none; font-weight:100; } .commentLinkbar li a, .commentLinkbar li a:link, .commentLinkbar li a:visited{ background:#000; padding:3px; margin:1px; color:#ccc; text-decoration:none; } .commentLinkbar li a:hover { background:#0389e6; color:#fff; } .replyform { background:#fff; padding:10px; color:#333; } #qrform table { border:0!important; margin:5px; padding:5px; height:auto; } #commenttext{width:100%;} /*****ARCHIVE PAGE *****/ .month { margin:10px auto; width:90%; } .daysubjects { color: #333; padding:10px; } .daytitles { background:transparent; border:0; height:2em; color:#0389e6; font-size:1.1666em/*14px*/; text-align:center; } .day-blank { background:transparent; border:0; } .day{ background:transparent; border:1px solid #eae8e8; color: #333; } .day-date { border:0; color:#333; width:50%; text-align:center; } .day-count { float: right; text-align:center; width:50%; font-size:1.6666em/*20px*/; } .day-count a, .day-count a:link, .day-count a:visited { color:#0389e6; text-decoration:none; } .day-count a:hover { color:#333; text-decoration:underline; } /*****TAGS PAGE *****/ .tagstable { margin:10px auto; width:90%; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.1666em/*14px*/; } .tagstable td { background:transparent; border:1px solid #eae8e8; padding:5px; } /*****LJ-USER / COMMUNITY / PROTECTED ICONS*****/ .ljuser img { width: 0; height: 0; background-repeat:no-repeat; background-color: transparent; background-image: url(http://www.mentahelada.net/layouts-stuff/buddy-lil.png); padding: 16px 14px 0 0!important; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-color:transparent; background-image: url(http://www.mentahelada.net/lj-layouts/layout016/buddy-lil.png); padding: 16px 14px 0 0!important; } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; background-color:transparent; background-image:url(http://www.mentahelada.net/lj-layouts/layout016/home-lil.png); padding: 16px 16px 0 0!important; } .entryHeaderSubject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] { width: 0; height: 0; background: url(http://www.mentahelada.net/lj-layouts/layout016/lock-big.png); padding: 30px 26px 0 0!important; } .summaryList img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] { width: 0; height: 0; background: url(http://www.mentahelada.net/lj-layouts/layout016/lock-lil.png); padding: 16px 14px 0 0!important; } .subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; background: url(http://www.mentahelada.net/lj-layouts/layout016/lock-lil.png); padding: 16px 14px 0 0!important; } .entryHeaderSubject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; background: url(http://www.mentahelada.net/lj-layouts/layout016/lock-big.png); padding: 30px 26px 0 0!important; } .entryHeaderSubject img[src="http://p-stat.livejournal.com/img/community.gif"]{ width: 0; height: 0; background: url(http://www.mentahelada.net/lj-layouts/layout016/home-big.png); padding: 30px 30px 0 0!important; } .entryHeaderSubject img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{ width: 0; height: 0; background: url(http://www.mentahelada.net/lj-layouts/layout016/buddy-big.png); padding: 30px 27px 0 0!important; } .daysubjects img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; background: url(http://www.mentahelada.net/lj-layouts/layout016/lock-lil.png); padding: 16px 14px 0 0!important; } #lj_controlstrip .ljuser img { width: 0; height: 0; background-repeat:no-repeat; background-color: transparent; background-image: url(http://www.mentahelada.net/lj-layouts/layout016/buddy-lil.png); padding: 16px 14px 0 0!important; } #lj_controlstrip .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background-color:transparent; background-image:url(http://www.mentahelada.net/lj-layouts/layout016/buddy-lil.png); padding: 16px 14px 0 0!important; } #lj_controlstrip .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; background-color:transparent; background-image:url(http://www.mentahelada.net/lj-layouts/layout016/home-lil.png); padding: 16px 16px 0 0!important; } /*****CONTEXTUAL POPUP****/ div.ContextualPopup img {border:0;} div.ContextualPopup div.Inner {background:#000!important; padding:5px; color:#f4f4f4!important; font-family:Georgia, "Times New Roman", Times, serif; font-size:1em; font-weight:100!important;} div.ContextualPopup .Content {font-weight:100!important; margin-right:50px;} div.ContextualPopup .Relation {font-size:1.2727em/*14px*/; font-weight:100!important;} div.ContextualPopup .Content .OnlineStatus {font-weight:100!important;} div.ContextualPopup .Userpic {font-weight:100!important;} div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {color:#0389e6!important; font-family:Georgia, "Times New Roman", Times, serif; font-weight:100; text-decoration:none!important;} div.ContextualPopup div.Inner a:hover{color:#f4f4f4!important; font-family:Georgia, "Times New Roman", Times, serif; font-weight:100; text-decoration:underline!important;}
LAYOUT INFO:

• Style: Smooth Sailing
• Account level: Basic, Paid, Plus
• Tested on: IE (7 and higher), Firefox Safari and Chrome.

IMAGES:
Please upload the images to your own server. Thanks.
Background (by Noctua Graphics): http://www.mentahelada.net/lj-layouts/layout016/bg-body.jpg
Header image from this set that I made: http://www.mentahelada.net/lj-layouts/layout016/bg-header.jpg
User, community, locked/protected icons:





(by Deziner Folio)
Carlisle icon in the preview made by me. Find it here.
BASIC INSTRUCTIONS:

1. Choose a Smooth Sailing layout
2. Go to Customize Journal Style
3. Select NO in the dropdowns
4. Leave "Custom External Stylesheet URL" empty
5. Paste the CSS that I give you in the "Custom Stylesheet" box
6. Save.

• Make changes if you know how (but still credit me!)
• Ask if you have doubts, I'll try to answer asap

CHANGING THE HEADER IMAGE:
Find this part of the code:

.pageheaderblock {
background:transparent url(http://www.mentahelada.net/lj-layouts/layout016/bg-header.jpg) top left no-repeat;
margin-bottom:20px;
font-size:0.6875em/*11px*/;
text-align:left;
}

And change the url to your own. The image must be 294x124px to fit the layout.
Note: Keep short and simple your header links!
EASY RULES:

• Credit frozen_mint if you use. Please don't credit mintyapple, please change the credit you have in your userinfo. Thanks!
• Comment if you like / if you take

• Affiliate?
• Resources
• Friend frozen_mint for updates!

@ mintyapple