Tessisamess

Preview: Left Sidebar | Preview: Right Sidebar | Preview: One Column | tess063

Information

Hey guys! Today's layout has a bunch of fun options, including clip mask shape headers, so be sure to play around with different layout page setups to see which you like best when you install this! Sidebar versions support: One custom text, nav links, and links list. I feel like butt so I'm keeping this note short, haha. Enjoy! ♥

Layout Coding

/*-- FLEETING FEELINGS - TESSISAMESS - 2018 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --darkest: #222; /* page text */ --lightest: #fff; /* page highlight text, calendar day name */ --light-accent: #f4e9e7; /* top of background gradient */ --medium-accent: #D2B6C8; /* bottom of background gradient, page highlight, calendar day name background, blockquote border, horizontal rule */ --accent: #AA798E; /* headings, links, entry date & tags */ --link-bg: rgba(255,255,255,0.2); --link-border: rgba(255,255,255,0.4); --content-bg: rgba(255,255,255,0.7); --content-border: rgba(255,255,255,0.8); --main-font: Roboto Condensed,helvetica,arial,sans-serif; --headings: Roboto Condensed,helvetica,arial,sans-serif; --title: Sail,Roboto Condensed,helvetica,arial,sans-serif; /* one column only */ --side-img: url(https://i.gifer.com/SYw7.gif)center; /* gif area for both sidebars & no sidebar header */ --img-height: 150px; /* left sidebar only */ --side-img-shape: url(https://i.imgur.com/uf5rXEH.png)center top no-repeat; /* right & no sidebar only */ --shape-height1: 190px; /* right sidebar only */ --shape-height2: 100px; /* no sidebar only */ --shape-width: 100px; /* no sidebar only */ --recent: url(https://i.imgur.com/T9zbBoB.png)center no-repeat; --profile: url(https://i.imgur.com/EubFs7h.png)center no-repeat; --friends: url(https://i.imgur.com/lHVzejZ.png)center no-repeat; --calendar: url(https://i.imgur.com/729usXf.png)center no-repeat; --private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important; --locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important; --customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important; --cursor: url(https://i.imgur.com/M5MWlFx.png); --hover-cursor: url(https://i.imgur.com/wcowMCy.png); } /* FONTS */ @font-face{font-family:'Sail';font-style:normal;font-weight:400;src:local('Sail'), local('Sail-Regular'), url(https://fonts.gstatic.com/s/sail/v9/DPEjYwiBxwYJJBPJAQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;src:local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* GENERAL */ ::selection{background:var(--medium-accent);color:var(--lightest);} ::-moz-selection{background:var(--medium-accent);color:var(--lightest);} body{margin:0;padding:0;font-family:var(--main-font);font-size:13px;color:var(--darkest);background:var(--medium-accent);background:-moz-linear-gradient(top, var(--light-accent) 0%, var(--medium-accent) 100%);background:-webkit-linear-gradient(top, var(--light-accent) 0%, var(--medium-accent) 100%);background:linear-gradient(to bottom, var(--light-accent) 0%, var(--medium-accent) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--light-accent)', endColorstr='var(--medium-accent)',GradientType=0 );min-height:100vh;cursor:var(--cursor), auto;} blockquote{font-style:italic;padding-left:10px;border-left:4px solid var(--medium-accent);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);color:var(--accent);} img{max-width:100%;} ul{list-style:circle;} hr{height:1px;background:var(--medium-accent);border:none;padding:0;margin:20px 20%;} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--accent);text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} a:hover{text-decoration:none;color:var(--darkest);cursor:var(--hover-cursor), auto;} .ljuser a[href*="profile"] img{display:none;} .ljuser a[href*="profile"]:before{content:'@';} .ljuser a[href*="asylum"][href*="profile"]:before{content:'#';} /* WHOLE PAGE CONTAINERS */ #container{background:transparent;padding:3vw;} #container-inner{width:900px;margin:0 auto;} .layout-one-column #container-inner{width:650px;} .layout-one-column #header{display:block;} .layout-one-column #alpha{margin:0;} .layout-two-column-left #alpha, .layout-two-column-right #alpha{margin:0 0 0 290px;} .layout-two-column-left #beta, .layout-two-column-right #beta{float:left;width:250px;position:sticky;top:3vw;} /* HEADER */ #header{display:none;padding:0;color:var(--darkest);margin:0 0 40px 0;font-size:11px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;text-align:left;} #header-inner{display:flex;justify-content:center;align-items:center;} #header-inner:before{content:'';display:block;height:var(--shape-height2);width:var(--shape-width);background:var(--medium-accent) var(--side-img);background-size:cover;-webkit-mask:var(--side-img-shape);mask:var(--side-img-shape);-webkit-mask-size:auto 100%;mask-size:auto 100%;margin:0 25px 0 0;} #nav-below{display:block;list-style:none;margin:5px 0 0 0;padding:0;font-size:9px;} #nav-above{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-below a{margin:0 10px 0 0;} .current a{color:var(--accent);} #header-text{background:transparent;border:none;margin:0;padding:0;} #banner-header{font-family:var(--title);text-align:left;font-size:35px;text-transform:none;font-weight:normal;letter-spacing:0;margin:0;} #banner-description{font-family:var(--headings);text-align:left;font-size:12px;margin:0;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--darkest);} .content-nav{margin:30px 0 0 0;font-size:11px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:40px;font-size:11px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:left;color:var(--accent);} #sticky-note .entry-header h2{margin:0;padding:0;font-size:11px;text-transform:uppercase;font-weight:bold;} #sticky-note .entry-text{padding:30px;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 40px 0;padding:0;position:relative;} .entry-header{background:transparent;border:none;padding:0;} .entry-header h3{margin:0;padding:0;font-size:11px;text-transform:uppercase;font-weight:bold;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{font-size:9px;text-transform:uppercase;font-weight:bold;color:var(--accent);position:absolute;right:0;top:0;} .lj-view-friends .inner-entry-userpic{display:block;} .inner-entry-userpic{display:none;float:right;text-align:center;padding:0;position:absolute;top:11px;right:-80px;} .inner-entry-userpic img{background:var(--link-bg);border:1px solid var(--link-border);padding:5px;border-radius:100%;width:60px;height:60px;margin-bottom:5px;} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:0;} .entry-text{min-height:0;overflow:hidden;padding:30px;background:var(--content-bg);border:1px solid var(--content-border);text-align:justify;line-height:1.5;} .ljtags{margin:20px 0 0 0;font-size:9px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--accent);} .entry-metadata{display:none;} .entry-linkbar{margin:5px 0 0 0;font-size:9px;text-transform:uppercase;font-weight:bold;text-align:right;letter-spacing:1px;} .entry-linkbar ul{list-style:none;padding:0;margin:0;} .entry-linkbar li{display:inline;border:none;padding:0;margin:0;} .entry-linkbar li a{display:inline-block;padding:3px 10px;background:var(--link-bg);border:1px solid var(--link-border);margin-left:5px;} .entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;} /* ARCHIVE VIEW */ .yearlinks{text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-size:20px;color:var(--content-bg);} .year{list-style:none;margin:0;padding:0;} .year li{display:inline;padding:0;} .lj-view-archive .entry-content{padding:30px;background:var(--content-bg);border:1px solid var(--content-border);} .yeartable{border-collapse:separate;border:none;width:100%;} td.monthlable, td.viewmonth{letter-spacing:1px;text-transform:uppercase;background:transparent!important;font-size:15px;} td.monthlable{text-align:left;} td.viewmonth{text-align:right;} .dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--medium-accent)!important;color:var(--lightest);font-size:12px;} .yeartable td{border:none!important;background:var(--content-bg);padding:5px;} /* TAGS & MONTH VIEW */ .lj-view-tags #alpha, .lj-view-month #alpha{padding:30px;background:var(--content-bg);border:1px solid var(--content-border);} /* SIDEBAR */ #beta-inner{font-size:9px;text-transform:uppercase;font-weight:bold;color:var(--darkest);text-align:center;} .layout-two-column-left #beta-inner:before{content:'';display:block;height:var(--img-height);background:var(--medium-accent) var(--side-img);background-size:cover;border:1px solid var(--content-border);margin:0 0 4px 0;} .layout-two-column-right #beta-inner:before{content:'';display:block;height:var(--shape-height1);background:var(--medium-accent) var(--side-img);background-size:cover;-webkit-mask:var(--side-img-shape);mask:var(--side-img-shape);-webkit-mask-size:auto 100%;mask-size:auto 100%;margin:0 0 15px 0;} .module{padding:0;background:transparent;margin:0 0 2px 0;border:none;} .module-customtext{padding:20px;background:var(--content-bg);border:1px solid var(--content-border);font-weight:normal;margin:0 0 3px 0;} .module-customtext .module-content{padding:0;} .module-viewlinks{margin:0 0 1px 0;letter-spacing:2px;} .module-viewlinks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;} .module-viewlinks li{width:50%;} .module-viewlinks li a{display:block;padding:10px 0;border:1px solid var(--link-border);color:transparent;} .module-viewlinks li:nth-of-type(even) a{margin:0 0 2px 0;} .module-viewlinks li:nth-of-type(odd) a{margin:0 2px 2px 0;} .module-viewlinks li:nth-of-type(1) a{background:var(--link-bg) var(--recent);background-size:18px;} .module-viewlinks li:nth-of-type(2) a{background:var(--link-bg) var(--calendar);background-size:18px;} .module-viewlinks li:nth-of-type(3) a{background:var(--link-bg) var(--friends);background-size:18px;} .module-viewlinks li:nth-of-type(4) a{background:var(--link-bg) var(--profile);background-size:18px;} .module-viewlinks li a:hover{background-size:0;color:var(--accent);} .module-typelist ul{list-style:none;margin:0;padding:0;letter-spacing:2px;} .module-typelist li a{display:block;padding:5px 0;background:var(--link-bg);border:1px solid var(--link-border);margin-top:2px;} .module-layoutcredit{position:fixed;left:8px;bottom:8px;} .module-layoutcredit .module-header{display:block;padding:0;background:transparent;border:none;} .module-layoutcredit .module-header h3{padding:0;font-size:15px;color:var(--lightest);} .module-layoutcredit p{padding:0;margin:0;letter-spacing:2px;} .module-header, .module-customtext2, .module-pagesummary, .module-calendar, .module-categories, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;} /* CONTENT FOOTER */ #content-footer{clear:both;height:0;} /* ICON REPLACEMENTS */ img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;} img[src*="img/icon_private.gif"]{background:transparent var(--private);} img[src*="img/icon_protected.gif"]{background:transparent var(--locked);} img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle if using One Column, then save.
♡ Fill in your Links List if using left or right sidebar, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:

♡ Layout Type:

Two Column (Sidebar on Left) - Rectangle image spot
Two Column (Sidebar on Right) - Shape cutout image spot
One Column - Shape cutout image w/header

♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ Fill in custom sidebar module if desired.
♡ Person to credit if you have an individually created layout: Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

Editing Notes

You can use any shape combined with any image for Right Sidebar (which is a lie because it's still on the left) and One Column! All you need is an image to display and a transparent png image for the shape. Replace the appropriate URLs in the replacement guide in the layout stylesheet, and you're good to go!

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!