059 - Layout 036 [Smooth Sailing: Abandon All Hope]

[yam]

Hello! This is not a new layout, I've been using it for over a year now and I love it because it's simple and easy to read. Anyway, I hope you like it. :)



Live preview | Image Preview



/********************DO NOT REMOVE THIS******************** Layout 036 [Abandon All Hope] by Yam @ MentaHelada (mentahelada.livejournal.com) ----------CREDITS: Icons by Pinvoke: http://www.pinvoke.com/ Background pattern by C130: http://c130.deviantart.com/art/Wallpaper-Patterns-for-PS7-37656885 ************************************************************/ /*****BASIC LAYOUT*****/ .currents{border-top:1px solid #ccc;margin-bottom:10px;font-style:italic;color:#818181;} .currents a{color:#666!important; font-weight:100!important; text-decoration:none; text-transform:none; font-style:italic;} .currents a:hover{color:#cb533f!important;} h2{color:#333;font-weight:100;font-size:2em; text-decoration:none;text-transform:uppercase;padding:20px 0 5px;border-bottom:2px solid #cb533f;} h3{color:#333;font-weight:100;font-size:1.1em; text-decoration:none;text-transform:uppercase;padding:5px 0 0;border-bottom:1px dotted #ccc;} body { background:#f4f4f4 url(http://www.mentahelada.net/lj-layouts/layout036/bg-content.png) top left repeat; color:#333; font-family:Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:100%; line-height:104%; } .pageblock{ /*the content*/ background:transparent; margin:0 auto; width:100%; } .pageheaderblock { background:#000 url(http://www.mentahelada.net/lj-layouts/layout036/header.png) bottom center no-repeat; border-bottom:1px solid #ccc; font-size:0.75em/*12px*/; text-align:center; width:100%; height:295px; margin:0 auto; } .bodyblock { /*entries + sidebar*/ background:transparent; margin:0 auto; overflow:hidden; width:960px; } .sidebar { background:transparent; width:230px; font-size:0.875em; } /*****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:440px;} .clear{height:0;} .lj_embedcontent{max-width:550px;} /**/ #lj_controlstrip {background:#111!important; border-bottom:1px solid #ccc; padding:3px; color:#f4f4f4!important;} #lj_controlstrip a, #lj_controlstrip a b{color:#f4f4f4; text-decoration:underline; text-transform:none;} #lj_controlstrip a:hover{text-decoration:none;} #lj_controlstrip_statustext{color:#cb533f; font-weight:100;} #lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search{border:0;} /**/ a, a:link, a:visited { color:#cb533f;/*red*/ font-weight:100; text-decoration:underline; text-transform:none; font-style:italic; } a:hover { color:#111; text-decoration:underline; } blockquote { background:#f4f4f4; border:1px solid #ccc; border-left:10px solid #ccc; margin:10px auto; padding:20px 20px 20px 10px; width:70%; color:#818181; font:italic normal 100 1em Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:left; line-height:1.6em; } blockquote a{color:#cb533f!important; text-transform:none!important;} blockquote a:hover{color:#111!important;} ::-moz-selection {background:#ccc;color:#111;} b, strong{color:#111;font-weight:900;} /*****HEADER*****/ .header-title, .header-subtitle, .header-icon {display:none;} .header-menu ul{margin:0;} .header-menu li{display:inline;} .header-menu {background:#000; padding:9px 0;} .header-menu a, .header-menu a:link, .header-menu a:visited { background:transparent; margin:0 10px; padding:10px 5px 2px; color:#777c84; font-weight:900!important; font-style:normal!important; text-decoration:none; text-transform:uppercase; } .header-menu a:hover { background:transparent; border-bottom:1px solid #cb533f; color:#d0d0d0; } /*****SIDEBAR*****/ .sidebar a{text-decoration:underline; text-transform:none; font-style:italic;} .sidebox { background:transparent; width:215px; margin-bottom:10px; overflow:auto; color:#818181; } .sideboxTitle, .listtitle { background:transparent; border-bottom:1px solid #dcdcdc; padding:15px 5px 1px; color:#cb533f; font-size:1.2em; font-weight:900; /*text-shadow:#dfdfdf 0 1px 0; */ text-align:left; text-transform:uppercase; } .sideboxContent {text-align:left;padding:5px 0;} .sidebox #systemlinks {text-align:left;} .summaryList{padding:3px 0; background:transparent; margin-bottom:2px;} .summaryList b{color:#cb533f; font-size:1.5em;} .summaryList .ljuser b{color:#cb533f; font-size:1em!important;} #profile {text-align:center;} #summary, #search, #tags_sidebox, #freetext {padding:5px;} .listitem a, .listitem a:link, .listitem a:visited { background:transparent; border-bottom:1px solid #dcdcdc; display:block; padding:3px 0 0; margin-bottom:2px; color:#818181; font-size:1em; font-weight:100; text-decoration:none!important; } .listitem a:hover {background:transparent; border-bottom:1px solid #cb533f; color:#333;} .sidebox #summary a, .sidebox #tags_sidebox a{ background:transparent; color:#818181; font-size:1em; font-weight:100; } .sidebox #summary a:hover, .sidebox #tags_sidebox a:hover {color:#cb533f;} .sidebox #latestmonth table{ width:90%; margin-left:auto; margin-right:auto; text-align:center; } .latestmonth-active{ background:#666; border:1px solid #dcdcdc; margin:1px; padding:3px; } .latestmonth-inactive{ background:#f4f4f4; border:1px solid #dcdcdc; 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:#111; border:1px solid #ccc; } .profile-label { color:#cb533f; font-weight:900; } /*****BODY*****/ .bodyheaderblock, .body-title, .body-midtitle {display:none;} .bodynavblock {background:transparent; padding:20px;} .bodynavblock a{color:#111;font-weight:100; font-size:12px;font-style:normal!important;} /*****FOOTER *****/ #footer-menu { background:transparent; font-size:0.75em; font-weight:900; padding:10px; text-align:center; } #footer-menu ul {list-style:none;} #footer-menu li {display:inline;} #footer-menu a, #footer-menu a:link, .footer-menu a:visited { background:#cb533f; padding:5px; margin:2px; color:#f4f4f4; text-decoration:none; text-transform:uppercase; font-style:normal!important; } #footer-menu a:hover{ background:#333; color:#f4f4f4; } .pagefooterblock { /*the "this page was loaded..." part*/ background:transparent; padding:3px; color:#818181; font-size:0.75em; text-align:center; text-transform:uppercase; } .pagefooterblock a, .pagefooterblock a:link, .pagefooterblock a:visited { color:#cb533f; text-decoration:underline; text-transform:none; } .pagefooterblock a:hover {text-decoration:none;} /*****ICONS*****/ .entryUserinfo, .commentUserinfo{ background:#f4f4f4; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; text-align:left; margin:0 0 10px; padding:10px 5px 10px; } .commentUserinfo{border-left:0!important;} .entryUserinfo a, .commentUserinfo a{ font-size:0.9em; color:#111; text-transform:lowercase; text-decoration:none!important; } .entryUserinfo b, .entryUserinfo strong, .commentUserinfo b, .commentUserinfo strong{ font-weight:100; color:#818181; } .entryUserinfo-username, .commentUserinfo-username { padding-top:5px; margin:0 0 5px 10px; font-size:12px!important; } .commentUserinfo-usericon a{color:#333;} .entryUserinfo-usericon a img, .commentUserinfo-usericon a img{ background:transparent; margin:0 10px; } .entryUserinfo-usericon a:hover img, .commentUserinfo-usericon a:hover img{ background:transparent; margin:0 10px; } /*****ENTRY / COMMENTS*****/ #welcomenoteText{background:transparent; border:0;} .entryHolder, .commentHolder { background:transparent; margin-bottom:20px; font-size:0.875em; } .commentHolder{border:1px solid #dcdcdc;} .entryText { background:transparent; line-height:1.7em; min-height:150px; margin:10px; max-width:550px; } .entryText blockquote img{max-width:300px!important;height:auto;} .commentText {padding:10px;} /*--1st line: all images posted will have a fixed width. 2nd line: a fix for polls--*/ .entryText img{max-width:550px;height:auto;} .entryText table tbody img, .entryText p span img{width:auto;height:auto;} .entryText ul li { list-style:circle; margin-left:30px; padding-left:0px; } .entryText ol li { list-style:decimal; margin-left:30px; padding-left:0px; } .entryHeader, .commentHeader { /*date / time container*/ background:transparent; border-bottom:1px solid #dcdcdc; overflow:hidden; padding:5px 5px 3px; color:#111; font-weight:100; clear:both!important; } .commentHeader{text-align:right;} .entryHeaderSubject, .commentHeaderSubject { background:transparent; font-size:1.3em; font-style:italic; font-weight:100; line-height:1em; /*letter-spacing:0.09em;*/ text-transform:none; overflow:hidden; padding:3px; } .entryHeaderDate { background:transparent; display:block; padding-bottom:7px; color:#333; font-size:0.9em; letter-spacing:0.14em; text-align:right; text-decoration:none; } .entryHeader a, .entryHeader a:link, .entryHeader a:visited, .commentHeader a, .commentHeader a:link, .commentHeader a:visited{ color:#111; font-weight:100; text-decoration:none; text-transform:none; } .entryHeader a:hover, .commentHeader a:hover{ color:#cb533f; text-decoration:none; } .entryMetadata { background:transparent; border-top:1px solid #dcdcdc; padding:3px 5px 5px; font-size:0.9166em; font-style:italic; text-align:left; } .entryMetadata-content {padding-left:4px;} .entryMetadata a{text-transform:none;} .entryMetadata-label {font-weight:100;} .entryMetadata li { background:transparent; display:block; list-style:none; } .entryLinkbar, .commentLinkbar { background:transparent; border-top:1px solid #dcdcdc; padding:7px 0; font-size:0.8571em; color:#163b58; text-align:center; } .entryLinkbar li, .commentLinkbar li { display:inline; list-style:none; font-weight:100; } .entryLinkbar li a, .entryLinkbar li a:link, .entryLinkbar li a:visited, .commentLinkbar li a, .commentLinkbar li a:link, .commentLinkbar li a:visited{ background:transparent; padding:5px 3px 1px; margin:0 3px 0; color:#818181; text-decoration:none; text-transform:lowercase; font-style:normal!important; } .entryLinkbar li a:hover, .commentLinkbar li a:hover { background:transparent; border-bottom:1px solid #cb533f; color:#333; text-decoration:none; } .commentHeaderScreened{ background:#999; padding:10px; color:#f4f4f4; text-transform:none; } .replyform { background:transparent; padding:10px; color:#111; } #qrform table { border:0!important; margin:5px; padding:5px; height:auto; } #commenttext{width:100%;} #qrdiv, #qrformdiv{background:transparent;} #postform{font-size:0.75em/*12px*/;} /*****ARCHIVE PAGE *****/ .month { background:#f4f4f4; margin:30px auto; width:70%; } .daysubjects { background:#f4f4f4; color:#111; padding:30px 10px; } .daytitles { background:transparent; border:0; height:2em; color:#cb533f; font-size:1.1666em/*14px*/; text-align:center; } .day-blank { background:#292929; border:2px solid #f4f4f4; } .day{ background:#ccc; border:2px solid #f4f4f4; padding:2px; color: #111; } .day-date { border:0; color:#111; 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:#cb533f; text-decoration:none; } .day-count a:hover { color:#111; text-decoration:none; } /*****TAGS PAGE *****/ .tagstable { margin:10px auto; width:90%; font-size:1.1666em/*14px*/; } .tagstable td { background:transparent; border:2px solid #ccc; padding:5px; } /*****LJ-USER / COMMUNITY / PROTECTED ICONS*****/ .ljuser img {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout036/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} /* Generated by Malionette's Tiny Icon Generator:*/ img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://www.mentahelada.net/lj-layouts/layout036/icon-user.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://www.mentahelada.net/lj-layouts/layout036/icon-home.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://www.mentahelada.net/lj-layouts/layout036/icon-lock.png) no-repeat !important; padding: 16px 0 0 16px !important; } /*****CONTEXTUAL POPUP****/ div.ContextualPopup img {background:#dfdfdf; padding:15px;} div.ContextualPopup div.Inner {background:#f4f4f4!important; padding:5px;color:#111!important; font-size:1em; font-weight:100!important;border:1px solid #dfdfdf;} div.ContextualPopup .Content {font-weight:100!important; margin-right:50px;} div.ContextualPopup .Relation {font-size:1.4em; font-weight:100!important;color:#cb533f!important;font-style:italic;font-weight:900!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:#cb533f!important;font-weight:100; text-decoration:none!important; text-transform:none;} div.ContextualPopup div.Inner a:hover{color:#111!important;font-weight:100; text-decoration:underline!important;} /*****NEW CONTROLSTRIP****/ .w-cs { background:#000; background-image:none!important; color:#fff; min-height:60px; } .w-cs .w-cs-userinfo { background:transparent; background-image:none!important; border-color:#f4f4f4; } .w-cs a b{color:#f4f4f4!important;} /*.w-cs-menu li a{padding-left:14px!important;margin-right:5px!important;}*/ .w-cs a:link, .w-cs a:visited, .w-cs a:hover, .w-cs a:active {color: #f4f4f4 !important;} .w-cs .w-cs-summary {background:#666;} .w-cs .w-cs-summary LI.w-cs-i-tokens {border-color:#666;} .w-cs-user-controls .w-cs-status p{color:#f4f4f4!important;}
LAYOUT INFO:

• Style: Smooth Sailing
• Account level: Basic, Paid and Plus. For some reason I can't change the ad placement to vertical or between entries and I think this is a constant problem. Keep it in mind if you are a Plus user! (or if you are viewing your journal logged out.)
• Tested on: IE (8 and higher), Firefox, Safari and Chrome.
  

IMAGES:
Please upload the images to your own server. Thanks.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Credits:
Icons: Pinvoke
Background pattern: C130
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Content background: http://www.mentahelada.net/lj-layouts/layout036/bg-content.png
Header: http://www.mentahelada.net/lj-layouts/layout036/header.png

User, community, locked/protected icons:

- http://www.mentahelada.net/lj-layouts/layout036/icon-user.png

- http://www.mentahelada.net/lj-layouts/layout036/icon-group.png

- http://www.mentahelada.net/lj-layouts/layout036/icon-lock.png

Pride & Prejudice icon in the live preview made by me. Find it here.
BASIC INSTRUCTIONS:

1. Choose a Smooth Sailing layout
2. Under "3. Choose a Page Setup" choose "2 Column (sidebar on left)" and apply the layout
3. Go to the customize main page and, under "Additional Options", choose "no" in "Wrap Entry text under userinfo" line. Save
4. Go to the Custom CSS page
5. Select NO in the dropdowns
6. Leave "Custom External Stylesheet" empty
7. Paste the CSS that I give you in the "Custom Stylesheet" box. Save your changes.

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

CHANGING THE HEADER:
Easy. Find this part of the code:
.pageheaderblock {
background:#000 url(http://www.mentahelada.net/lj-layouts/layout036/header.png) bottom center no-repeat;
border-bottom:1px solid #ccc;
font-size:0.75em/*12px*/;
text-align:center;
width:100%;
height:295px;
margin:0 auto;
}
And change the url to your own. The image must be 240px tall (and whatever-you-want wide) to fit the layout without making major changes to the code. If the header's height is different, change the height:295px; line to fit your needs.

EASY RULES:

• Credit mentahelada 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