Post Friends My journal
yam in mentahelada

044 - Layout 22 [Smooth Sailing: The World Tonight]

Apr 29, 2009 20:13


Hello! I've been staring at this layout for a long time because I feel that something is missing. I think the problem is that all my layouts are very colorful and this is kind of... dark. Anyway, I hope you like it! :)



Live preview | Image Preview



/********************DO NOT REMOVE THIS******************** Layout 022 [The World Tonight] by Yam @ MentaHelada (mentahelada.livejournal.com) ----------CREDITS: Icons by Splashyfish: http://splashyfish.com/icons/ Color palette: http://www.colourlovers.com/palette/616176/Noche_Mexicana *************************************************************/ /*****BASIC LAYOUT*****/ body { background:#000 url(http://www.mentahelada.net/lj-layouts/layout022/bg-body.jpg) top left no-repeat; color:#333; font-family:Arial, Helvetica, sans-serif; font-size:100%; line-height:103%; } .pageblock{ /*the content*/ background:transparent; margin:20px auto; position:absolute; width:100%; } .pageheaderblock { width:960px; margin:0 auto; text-align:center; background:transparent; } .bodyblock { /*entries + sidebar*/ background:transparent; margin:0 auto; padding-top:270px; /*CHANGE TO FIT TOPBAR SIZE*/ width:960px; } .sidebar { background:transparent; position:absolute; top:70px; width:950px; margin-left:20px; font-size:0.75em; } /*****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:700px;} .clear{height:0;} .lj_embedcontent{max-width:700px;} #lj_controlstrip {background:#000!important; padding:3px; color:#fff!important;} #lj_controlstrip a{color:#fff; text-decoration:underline; text-transform:none;} #lj_controlstrip a b{color:#14AECC; text-decoration:underline; text-transform:none;} #lj_controlstrip a:hover{color:#fff; text-decoration:none;} #lj_controlstrip_statustext{color:#fff; font-weight:100;} #lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search{border:0;} a, a:link, a:visited { color:#690; font-weight:900; text-decoration:none; text-transform:none; } a:hover {color:#14AECC;text-decoration:underline;} blockquote { background:#f4f4f4 url(http://www.mentahelada.net/lj-layouts/layout022/bg-stripe1.png) repeat-x; border:1px solid #ccc; margin:15px auto; padding:20px; width:60%; color:#666; font:italic normal 100 1.0909em Georgia, "Times New Roman", Times, serif; text-align:left; line-height:1.6em; } blockquote a{color:#DE4130!important; text-transform:none!important;} ::-moz-selection {background:#ccc;color:#333;} b, strong{color:#14AECC;font-weight:900;} /*****HEADER*****/ .header-title, .header-subtitle, .header-icon {display:none;} .header-menu li{display:inline;} .header-menu { background:transparent; padding:20px 20px 10px; font-size:0.75em; text-align:center; } .header-menu a, .header-menu a:link, .header-menu a:visited { background:#000; float:left; margin-right:5px; padding:10px; color: #fff; font-weight:900; text-decoration:none; text-transform:uppercase; } .header-menu a:hover { background:#14AECC; margin-top:-2px; } /*****SIDEBAR*****/ .sidebar a{text-decoration:none; text-transform:none;} .sidebar a:hover{color:#E99C03;} .sidebox { background:#fff; border:1px solid #ccc; margin-bottom:10px; margin-right:20px; width:213px; height:210px;/*CHANGE THIS TO FIT YOUR LINKS*/ float:left; } .sideboxTitle, .listtitle { background:#fff; border-bottom:1px solid #ccc; padding:15px 5px 5px; color:#000; font:normal 900 1.1666em Arial, Helvetica, sans-serif; text-align:left; text-transform:none; /*letter-spacing:0.15em;*/ } .sideboxContent {padding:0;} #profile{text-align:center;padding:10px;} #profile b{color:#E99C03;} img.profile-userpic {border:5px solid #fff;} #freetext{padding:5px;} #latestmonth{padding:5px 0;} .sidebox #systemlinks {text-align:left;} .listitem a, .listitem a:link, .listitem a:visited { background:transparent; border-bottom:1px solid #ccc; display:block; padding:3px 5px; color:#333; font-size:1em; font-weight:100; } .listitem a:hover { background:#E99C03; border-bottom:1px solid #ccc; color:#292929; } .sidebox #latestmonth table{ width:95%; margin-left:auto; margin-right:auto; text-align:center; } .latestmonth-active{ background:#690; border:1px solid #690; 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:#fff; text-decoration:none; } .latestmonth-active a:hover{ color:#000; text-decoration:none!important; } .latestmonth-active:hover { background:#E99C03; border:1px solid #E99C03; } .profile-label { color:#690; font-weight:100; } /*****BODY*****/ .bodyheaderblock {display:none;} .body-title {display:none;} .bodynavblock {background:transparent;font-size:12px;} .body-midtitle {display:none;} /*****FOOTER *****/ #footer-menu { background:transparent; font-size:0.6875em/*11px*/; padding:10px 20px 20px; 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:#690; padding:5px; margin:2px; color:#fff; text-decoration:none; text-transform:uppercase; } #footer-menu a:hover{ background:#e14900; color:#ffff; } .pagefooterblock {display:none;} /*****ENTRY*****/ #welcomenoteText{background:#fff;} .ljuser a b{color:#DE4130;} .ljuser a:hover b{color:#DE4130!important; text-decoration:underline;} .entryHolder { background:#fff; border:1px solid #ccc; margin:0 20px 20px; width:920px; font-size:0.75em/*12px*/; } .entryHeader { /*date / time container*/ background:#fff; border-bottom:1px solid #ccc; clear:both!important; overflow:auto; color:#DE4130; font-weight:100; } .entryHeaderDate { background:#fff; padding:12px 10px 10px; width:190px; float:left; color:#333; font:normal 100 1em Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; } .entryHeaderSubject { border-left:1px solid #ccc; float:left; overflow:hidden; padding:10px; font:normal 900 1.1666em/1.2em Arial, Helvetica, sans-serif; letter-spacing:0.1em; text-transform:uppercase; } .entryHeader a, .entryHeader a:link, .entryHeader a:visited{ color:#000; font-weight:900; text-decoration:none; text-transform:uppercase; } .entryHeader a:hover{ color:#DE4130; text-decoration:none; } .entryUserinfo{ background:transparent; width:210px; text-align:center; } .entryUserinfo a b{font-size:0.9166em/*11px*/;color:#333!important;} .entryUserinfo b, .entryUserinfo strong{font-weight:100;color:#333;} .entryUserinfo-username{padding-top:5px;margin-bottom:20px;} .entryUserinfo-usericon a img{background:transparent;margin:20px 20px 5px;} .entryUserinfo-usericon a:hover img{background:transparent;margin:20px 20px 5px;} .entryText { background:#fff; border-left:1px solid #ccc; padding:20px; line-height:1.7em; min-height:130px; } /*--1st line: all images posted will have a fixed width. 2nd line: a fix for polls--*/ .entryText img{max-width:670px;height:auto;} .entryText table tbody img, .entryText p span img{width:auto;height:auto;} .entryText ul li { list-style:disc; margin-left:50px; padding-left:0px; } .entryText ol li { list-style:decimal-leading-zero; margin-left:50px; padding-left:0px; } .entryMetadata { background:#fff; border-left:1px solid #ccc; border-top:1px solid #ccc; padding:10px; text-align:left; } .entryMetadata-content {padding-left:5px;} .entryMetadata a{text-transform:none; font-size:0.9166em; text-transform:uppercase;} .entryMetadata-label {font-weight:100;} .entryMetadata li { background:transparent; display:block; list-style:none; margin:2px 0; padding:2px 0; } .entryLinkbar { background:#fff; border-top:1px solid #ccc; padding:7px 0; font-size:0.9090em/*10px*/; color:#163b58; text-align:right; } .entryLinkbar li { display:inline; list-style:none; font-weight:100; } .entryLinkbar li a, .entryLinkbar li a:link, .entryLinkbar li a:visited{ background:#fff; padding:7px; color:#666; text-decoration:none; text-transform:uppercase; } .entryLinkbar li a:hover { background:#DE4130; color:#fff; text-decoration:none; } /*****COMMENT PAGE *****/ .commentHolder { background:#fff; border:1px solid #ccc; color:#333; font-size:0.75em/*12px*/; margin:10px; } .commentUserinfo { margin:10px; padding:0; text-align:center; } .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; padding:10px; } .commentUserinfo-usericon a:hover img{ background:transparent; padding:10px; } .commentText {padding:10px;} .commentHeader { background:#fff; border-bottom:1px solid #ccc; padding:10px; color:#333; text-transform:none; } .commentHeader a, .commentHeader a:link, .commentHeader a:visited{ color:#690; text-decoration:underline; } .commentHeader a:hover {text-decoration:none;} .commentHeaderScreened{ 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:#690; 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:#292929; padding:3px; margin:1px; color:#ccc; text-decoration:none; } .commentLinkbar li a:hover { background:#690; color:#fff; } .replyform { background:#fff; margin:0 20px; padding:10px; color:#333; } #qrform table { border:0!important; margin:5px; padding:5px; height:auto; } #commenttext{width:100%;} #qrdiv, #qrformdiv{background:#fff;} #postform{font-size:0.75em/*12px*/;} /*****ARCHIVE PAGE *****/ .month { background:#fff; margin:30px auto; width:70%; } .daysubjects { background:#fff; color:#333; padding:30px 10px; } .daytitles { background:transparent; border:0; height:2em; color:#690; font-size:1.1666em/*14px*/; text-align:center; } .day-blank { background:#292929; border:2px solid #fff; } .day{ background:#ccc; border:2px solid #fff; padding:2px; 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:#690; text-decoration:none; } .day-count a:hover { color:#333; text-decoration:none; } /*****TAGS PAGE *****/ .tagstable { margin:10px auto; width:70%; 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/layout022/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-group.png) no-repeat; padding: 16px 16px 0 0!important;} .entryHeaderSubject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] { width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} .summaryList img[src="http://l-stat.livejournal.com/img/icon_protected.gif"] { width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} .subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} .entryHeaderSubject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{ width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} .entryHeaderSubject img[src="http://l-stat.livejournal.com/img/community.gif"]{ width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-group.png) no-repeat; padding: 16px 16px 0 0!important;} .entryHeaderSubject img[src="http://l-stat.livejournal.com/img/userinfo.gif"]{ width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} .daysubjects img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{ width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-lock.png) no-repeat; padding: 16px 16px 0 0!important;} #lj_controlstrip .ljuser img { width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} #lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} #lj_controlstrip .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; background:transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-group.png) no-repeat; padding: 16px 16px 0 0!important;} #ljuser_row img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; background: transparent url(http://www.mentahelada.net/lj-layouts/layout022/icon-user.png) no-repeat; padding: 16px 16px 0 0!important;} /*****CONTEXTUAL POPUP****/ div.ContextualPopup img {border:0;} div.ContextualPopup div.Inner {background:#fff!important; padding:5px;color:#333!important; font-size:1em; font-weight:100!important;border:2px solid #ccc;} div.ContextualPopup .Content {font-weight:100!important; margin-right:50px;} div.ContextualPopup .Relation {font-size:1.2727em/*14px*/; font-weight:100!important;color:#14AECC!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:#333!important;font-weight:100; text-decoration:none!important; text-transform:none;} div.ContextualPopup div.Inner a:hover{color:#690!important;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.
Body background: http://www.mentahelada.net/lj-layouts/layout022/bg-body.jpg
User, community, locked/protected icons:



Carlisle icon in the preview made by me. Find it here.
(Credits)
Light textures on background by weapon_icons
Icons by Splashyfish
Color palette:


Color by COLOURlovers

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
Remember: Keep your link list as short as possible and don't use more than 4 boxes on your sidebar!

ADDING A HEADER:
Let's see. Find this part pf the code:

.bodyblock { /*entries + sidebar*/
background:transparent;
margin:0 auto;
padding-top:270px; /*CHANGE TO FIT TOPBAR SIZE*/
width:960px;
}

And change the "background:transparent;" line to background:transparent url(HERE) no-repeat;. Add your url.
Then find this:

.sidebar {
background:transparent;
position:absolute;
top:70px;
width:950px;
margin-left:20px;
font-size:0.75em;
}

And play around with the top:70px; to fit your header.
Now, go back to the .bodyblock part and change the padding-top:270px; to fit your header and topbar.

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

@ mintyapple

Hey! Check out my new affiliate!:
tears_of_ruby
Go and join the comm, you'll find pretty awesome layouts (and more) there!

layouts:topbar, layouts:smooth sailing, layouts, ! affiliates

Leave a comment

Read comments 26
Previous post Next post
Up
Homepage Read journal... Full version Help Русская версия
© 1999-2025 LiveJournal, Inc.