S2 Smooth Sailing [A Thing Called Spring]

[yam]

Hello!


Live preview | Image Preview


/********************DO NOT REMOVE THIS******************** Layout 035 [A Thing Called Spring] by Yam @ MentaHelada (mentahelada.livejournal.com) ----------CREDITS: Icons: http://splashyfish.com/icons/ Flower vectors: http://dragonartz.wordpress.com/ *************************************************************/ /*****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:420px;} a, a:link, a:visited { color:#2db4d7; font-weight:100; text-decoration:none; text-transform:none; } a:hover { color:#000; text-decoration:underline; } blockquote { background:#f4f4f4 url(http://www.mentahelada.net/lj-layouts/layout035/bg-quote.png) top right no-repeat; border:1px solid #dbdbdb; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -ms-border-radius:20px; margin:10px auto; padding:30px 80px 20px 20px; width:70%; color:#252525; text-align:left; line-height:1.3em; } blockquote a{color:#292929!important; text-transform:none!important; text-decoration:underline!important;} ::-moz-selection {background:#ccc;color:#252525;} b, strong{color:#5cc90d;font-weight:900;} /*****BASIC LAYOUT*****/ body { background:#a2df86 url(http://www.mentahelada.net/lj-layouts/layout035/bg-body.png) top left repeat; color:#252525; font-family:Calibri, "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif; font-size:100%; line-height:104%; } .pageblock{ /*the content*/ background:transparent url(http://www.mentahelada.net/lj-layouts/layout035/bg-header.png) top center no-repeat; margin:0 auto; width:900px; } .pageheaderblock { background:transparent; margin:15px 10px 0; padding:20px; overflow:hidden; font-size:1em; text-align:center; } .bodyblock { /*entries + sidebar*/ background:transparent url(http://www.mentahelada.net/lj-layouts/layout035/bg-content.png) top center repeat-y; margin:260px auto 0; *margin:230px auto 0; padding:0; overflow:hidden; } .sidebar { background:transparent; margin-right:20px; margin-top:-15px; margin-bottom:20px; width:241px; font-size:0.875em/*14px*/; } /*****HEADER*****/ .header-title, .header-subtitle, .header-icon {display:none;} .header-menu ul{margin:0;} .header-menu li{display:inline;} .header-menu {padding:0;} .header-menu a, .header-menu a:link, .header-menu a:visited { background:#c3e9ec url(http://www.mentahelada.net/lj-layouts/layout035/bg-nav.png) repeat; border:1px solid #b1dce0; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -ms-border-radius:20px; margin:0 5px; padding:12px 15px 12px; color:#f4f4f4; font-weight:100!important; text-decoration:none; text-transform:lowercase; } .header-menu a:hover { background:#c3e9ec; color:#48cbd5; } /*****SIDEBAR*****/ .sidebar a{text-decoration:none; text-transform:none;} .sidebox { background:transparent; width:201px; margin:0; padding:0 20px; overflow:auto; } .sideboxTitle, .listtitle { background:transparent; border-bottom:1px solid #dfdfdf; margin-bottom:3px; padding:15px 5px 0px; color:#5cc90d; font-size:1.7142em; font-style:normal; font-weight:100; /*text-shadow:#dfdfdf 0 1px 0; */ text-align:left; text-transform:lowercase; } .sideboxContent {text-align:left;padding:5px 0;} .sidebox #systemlinks {text-align:left;} .summaryList{padding:3px 8px; background:transparent; margin-bottom:2px;border-bottom:1px solid #dbdbdb;} .summaryList b{color:#dbdbdb; font-size:1.5em;} .summaryList .ljuser b{color:#5cc90d; font-size:1em!important;} #profile {text-align:left;} #summary, #search, #tags_sidebox, #freetext {padding:5px 0;} .listitem a, .listitem a:link, .listitem a:visited { background:transparent; border-bottom:1px solid #dfdfdf; display:block; padding:3px 8px; margin-bottom:2px; color:#252525; font-size:1em; font-weight:100; } .listitem a:hover {background:transparent; border-bottom:1px solid #2db4d7;color:#2db4d7;} .sidebox #summary a, .sidebox #tags_sidebox a{ background:transparent; color:#252525; font-size:1em; font-weight:100; } .sidebox #summary a:hover, .sidebox #tags_sidebox a:hover {color:#2db4d7;} .sidebox #latestmonth table{ width:90%; margin-left:auto; margin-right:auto; text-align:center; } .latestmonth-active{ background:#5cc90d; border:1px solid #5cc90d; 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:#5cc90d; border:1px solid #5cc90d; } .profile-label { color:#48cad4; font-size:0.8571em; font-weight:900; text-transform:uppercase; } #freetext4, #freetext5, #freetext2, #freetext3 {padding:5px 0;} /*****BODY*****/ .bodyheaderblock, .body-title, .body-midtitle {display:none;} .bodynavblock {background:transparent; padding:20px;} .bodynavblock a{color:#252525;font-weight:100; font-size:13px;} /*****FOOTER *****/ #footer-menu { background:transparent; font-size:0.6875em/*11px*/; font-weight:900; padding:10px; text-align:right; } #footer-menu ul {list-style:none;} #footer-menu li {display:inline;} #footer-menu a, #footer-menu a:link, .footer-menu a:visited { background:#2db4d7; padding:5px; margin:2px; color:#f4f4f4; text-decoration:none; text-transform:uppercase; } #footer-menu a:hover{ background:#5cc90d; color:#f4f4f4; } .pagefooterblock { /*the "this page was loaded..." part*/ background:#5cc90d; border:1px solid #ccc; padding:20px; color:#f4f4f4; font-size:0.8125em/*13px*/; text-align:center; text-transform:uppercase; } .pagefooterblock a, .pagefooterblock a:link, .pagefooterblock a:visited { color:#000; text-decoration:underline; text-transform:none; } .pagefooterblock a:hover {text-decoration:none;} /*****ICONS*****/ .entryUserinfo, .commentUserinfo{ background:transparent; text-align:left; margin:10px 0; } .entryUserinfo a, .commentUserinfo a{ font-size:0.9em; color:#252525; text-transform:lowercase; } .entryUserinfo b, .entryUserinfo strong, .commentUserinfo b, .commentUserinfo strong{ font-weight:100; color:#252525; } .entryUserinfo-username, .commentUserinfo-username { padding-top:5px; margin:0 0 20px 10px; font-size:11px!important; } .commentUserinfo-usericon a{color:#252525;} .entryUserinfo-username{ padding-top:5px; margin:0 0 20px 10px; } .entryUserinfo-usericon a img, .commentUserinfo-usericon a img{ background:transparent; margin:0 10px 0 0; } .entryUserinfo-usericon a:hover img, .commentUserinfo-usericon a:hover img{ background:transparent; margin:0 10px 0 0; } /*****ENTRY / COMMENTS*****/ #welcomenoteText{background:transparent; border:0;} .entryHolder, .commentHolder { background:transparent url(http://www.mentahelada.net/lj-layouts/layout035/bg-entry.png) bottom left no-repeat; margin-bottom:20px; padding:0 20px; max-width:599px; font-size:0.875em/*14px*/; } .entryText { background:transparent; line-height:1.4em; min-height:150px; margin:10px 0 10px 0; max-width:489px; } .entryText a{text-decoration:underline!important;} .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:479px;height:auto;} .entryText table tbody img, .entryText p span img{width:auto;height:auto;} .entryText ul li { list-style:disc; 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; margin-top:15px; padding:0 0 10px 0; overflow:hidden; color:#252525; font-weight:100; clear:both!important; } .entryHeaderSubject, .commentHeaderSubject { background:transparent; color:#5cc90d; font-size:1.7142em; font-style:normal; font-weight:100; text-align:left; text-transform:lowercase; } .commentHeaderSubject {font-size:1.3em!important;} .entryHeaderDate { background:transparent; display:block; 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:#5cc90d; font-size:1em; font-style:normal; text-decoration:none; text-transform:none; } .entryHeader a:hover, .commentHeader a:hover{ color:#2db4d7; text-decoration:none; } .entryMetadata { background:transparent; border-top:1px solid #dbdbdb; margin-bottom:10px; max-width:479px; padding:5px; 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-bottom:1px solid #dbdbdb; max-width:599px; padding:7px 0; font-size:0.8333em; color:#48cad4; 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:7px 6px; color:#252525; text-decoration:none; text-transform:uppercase; } .entryLinkbar li a:hover, .commentLinkbar li a:hover { background:#5cc90d; color:#f4f4f4; text-decoration:none; } .commentHeaderScreened{ background:#252525; padding:10px; color:#f4f4f4; text-transform:none; } .commentHeaderScreened .commentHeaderSubject{background:transparent!important;} .replyform { background:transparent; padding:10px; color:#252525; } #qrform table { background:transparent; border:1px solid #e6e6e6!important; margin:0 5px 5px; padding:5px; height:auto; } #commenttext{width:100%;} #qrdiv, #qrformdiv{background:transparent;} #postform{font-size:0.75em/*12px*/;} /*****ARCHIVE PAGE *****/ .month { background:transparent; margin:30px auto; width:70%; font-family:Calibri, "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif; } .daysubjects { background:transparent; border-bottom:1px solid #5cc90d; color:#252525; padding:5px 10px; } .daytitles { background:#5cc90d; border:1px solid #5cc90d; height:2em; color:#f4f4f4; font-size:1em; text-align:center; text-transform:uppercase; } .day-blank { background:#f4f4f4; border:2px solid #e6e6e6; } .day{ background:#f4f4f4; border:2px solid #e6e6e6; padding:2px; color: #252525; } .day-date { border:0; color:#252525; 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:#2db4d7; text-decoration:none; } .day-count a:hover { color:#252525; text-decoration:none; } /*****TAGS PAGE *****/ .tagstable { margin:10px auto; width:90%; font-size:1.1em; } .tagstable td { background:#f4f4f4; border:1px solid #ccc; padding:5px; } /*****LJ-USER / COMMUNITY / PROTECTED ICONS*****/ .ljuser img {width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout035/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/layout035/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/layout035/icon-group.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/layout035/icon-lock.png) no-repeat !important; padding: 16px 0 0 16px !important; } /*****CONTEXTUAL POPUP****/ div.ContextualPopup img {border:10px solid #dfdfdf;} div.ContextualPopup div.Inner {background:#fff!important; padding:5px;color:#252525!important; font-size:1em; font-weight:100!important;border:2px solid #dfdfdf;} div.ContextualPopup .Content {font-weight:100!important; margin-right:50px;} div.ContextualPopup .Relation {font-size:1.4em;font-weight:100!important;color:#2db4d7!important;text-transform:lowercase;} 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:#2db4d7!important;font-weight:100; text-decoration:none!important; text-transform:none;} div.ContextualPopup div.Inner a:hover{color:#252525!important;font-weight:100; text-decoration:underline!important;} /*****NEW CONTROLSTRIP****/ .w-cs { background:transparent; background-image:none!important; color:#111; min-height:60px; } .w-cs .w-cs-userinfo { background:transparent; background-image:none!important; border-color:#f4f4f4; } /*.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: #111 !important;} .w-cs .w-cs-summary {background:#f4f4f4;} .w-cs .w-cs-summary LI.w-cs-i-tokens {border-color:#fff;} .w-cs-user-controls .w-cs-status p{color:#111!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.
  NOTE: Ads in Internet Explorer break a little the layout if they are horizontally placed (and that's the only way it seems you can place them when you are using Smoth Sailing) and there's an ugly little gap between the header and the content. Otherwise, the layout works just fine.

IMAGES:
Please upload the images to your own server. Thanks.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Credits:
Icons: Splashyfish
Flower vectors: DragonArtz
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Body background: http://www.mentahelada.net/lj-layouts/layout035/bg-body.png
Content background: http://www.mentahelada.net/lj-layouts/layout035/bg-content.png
Entry flowers: http://www.mentahelada.net/lj-layouts/layout035/bg-entry.png
Header: http://www.mentahelada.net/lj-layouts/layout035/bg-header.png
Buttons background: http://www.mentahelada.net/lj-layouts/layout035/bg-nav.png
Blockquote background: http://www.mentahelada.net/lj-layouts/layout035/bg-quote.png

User, community, locked/protected icons:

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

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

- http://www.mentahelada.net/lj-layouts/layout035/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

NEW EXTRA STUFF that I just found about when finishing this layout:
The navigation strip has changed. I dont' use it so I just discovered it when I uploaded this layout to my testing comm. Please, if you use it and it's acting funny because of the styles I gave to it, let me know (or get rid of all the code under the /*****NEW CONTROLSTRIP****/ flag. I think it looks pretty even without matching colors and all.)
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!