Tessisamess

image preview | tess062

Information

Hey guys! Today we've got a fun column-esque layout! It's not actually columns, but the sidebar and entries are the same width as each other, so it definitely has the same vibe! This layout supports three different page setups, and has a picture border feature, so really any circle-based frame png will work really nicely in this coding. Enjoy! ♥

*Currently trying to fix an iOS bug for this layout!

Layout Coding

/*-- ONE TRACK MIND - TESSISAMESS - 2018 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --darker: #222; /* page text */ --medium: #999; /* entry date & tags */ --lightest: #fff; /* content backgrounds */ --light-accent: #F3F7F8; /* page background */ --accent: #9FCDD6; --main-font: Montserrat,helvetica,arial,sans-serif; --headings: Montserrat,helvetica,arial,sans-serif; --title-font: Great Vibes,cursive; --wreath: url(https://i.imgur.com/Xost8UP.png)center bottom; --bg-img: url(https://i.imgur.com/2HzPNwN.gif)center; --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; } /* FONTS */ @font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;src:local('Great Vibes'), local('GreatVibes-Regular'), url(https://fonts.gstatic.com/s/greatvibes/v5/RWmMoKWR9v4ksMfaWd_JN9XFiaQ.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:'Montserrat';font-style:normal;font-weight:400;src:local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459Wlhyw.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:'Montserrat';font-style:normal;font-weight:300;src:local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gnD_g.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(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} body{margin:0;padding:0;background:var(--light-accent);border:2vw solid var(--lightest);position:absolute;top:0;left:0;right:0;bottom:0;font-family:var(--main-font);font-size:15px;color:var(--darker);} blockquote{font-style:italic;padding:15px;margin:15px 20px;border:1px solid rgba(0,0,0,0.1);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);color:var(--accent);margin:0;font-weight:300;text-transform:uppercase;letter-spacing:1px;} img{max-width:100%;} ul{list-style:circle;} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--darker);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(--accent);} .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;width:65vw;position:fixed;top:0;right:0;bottom:0;overflow:auto;} #container-inner{padding:4vw 3vw;} .layout-one-column #alpha{margin:0 auto;max-width:900px;} .layout-two-column-left #alpha{margin:0 0 0 30.5vw;} .layout-two-column-left #beta{float:left;width:28.5vw;} .layout-two-column-right #alpha{margin:0 30.5vw 0 0;} .layout-two-column-right #beta{float:right;width:28.5vw;} /* HEADER */ #header{padding:0;color:var(--darker);width:35vw;position:fixed;top:2vw;left:2vw;bottom:2vw;} #banner-text{height:96vh;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;position:relative;} #nav-below{display:block;list-style:none;margin:0;padding:0 0 15px 0;font-size:9px;position:absolute;left:0;right:0;bottom:2vw;font-size:9px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;} #nav-above{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-below a{margin:0 8px;} .current a{color:var(--darker);} #header-text:before{content:'';margin:0 auto;display:block;width:15vw;height:15vw;background:var(--accent) var(--bg-img);background-size:cover;border-radius:100%;opacity:0.7;filter:grayscale(50%);position:relative;z-index:1;} #banner-header:before{content:'';margin:-16vw auto 1vw auto;display:block;width:17vw;height:17vw;background:var(--wreath);background-size:cover;position:relative;z-index:2;} #header-text{background:transparent;border:none;margin:0;padding:0;} #header-text a{color:var(--accent);} #banner-header{font-family:var(--title-font);text-align:center;font-size:40px;text-transform:none;letter-spacing:0;} #banner-description{font-family:var(--headings);text-align:center;margin:0;font-size:12px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--medium);} .content-nav{margin:30px 0 0 0;font-size:11px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:40px;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry{padding:1vw;} #sticky-note .entry-inner{padding:1vw;border:1px solid rgba(0,0,0,0.1);} #sticky-note .entry-header{text-align:center;color:var(--accent);} #sticky-note .entry-header h2{margin:0;padding:0;} #sticky-note .entry-content{margin-top:0.5vw;} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 2vw 0;padding:2vw;background:var(--lightest);box-shadow:-5px 5px 25px 0 rgba(0,0,0,0.2);} .entry-header{background:transparent;border:none;padding:0;} .entry-header h3{margin:0;padding:0;font-size:23px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} .entry-datetime{font-size:9px;text-transform:uppercase;letter-spacing:2px;color:var(--medium);} .mid-entry-userpic{display:block;float:left;text-align:center;padding:0 10px 0 0;position:relative;} .mid-entry-userpic img{width:40px;height:40px;} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--accent);margin:-10px auto 5px auto;} .pic-poster{z-index:3;left:-30px;position:absolute;background:var(--accent);margin-top:-30px;padding:5px;text-align:center;font-size:9px;letter-spacing:1px;text-transform:uppercase;display:block;width:95px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);opacity:0;-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;} .mid-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;} .pic-poster img{display:none;} .pic-poster a{color:var(--lightest)!important;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:1vw;} .entry-text{min-height:0;overflow:hidden;text-align:justify;line-height:1.5;} .ljtags{margin:20px 0 0 0;font-size:0;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);font-size:10px;text-transform:uppercase;font-weight:bold;margin-right:10px;} #alpha .ljtags a:before{content:'#';} #alpha .ljtags a:hover{background:var(--accent);color:var(--lightest);} .entry-metadata{display:none;} .entry-linkbar{margin:15px 0 0 0;padding:15px 0 0 0;border-top:1px solid rgba(0,0,0,0.1);text-align:right;font-size:10px;text-transform:uppercase;font-weight:bold;} .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{margin-left:10px;} .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:1px;text-transform:uppercase;margin-bottom:10px;font-size:20px;color:rgba(0,0,0,0.3);} .year{list-style:none;margin:0;padding:0;} .year li{display:inline;padding:0;} .lj-view-archive .entry-content{margin:0;} .yeartable{border-collapse:separate;border:none;width:100%;} td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;font-size:16px;} td.monthlable{text-align:left;} td.viewmonth{text-align:right;} .dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--accent)!important;color:var(--lightest);font-size:14px;} .yeartable td{border:none!important;background:rgba(0,0,0,0.03);padding:5px;} /* TAGS & MONTH VIEW */ .lj-view-tags #alpha, .lj-view-month #alpha{padding:1vw;background:var(--lightest);box-shadow:-5px 5px 25px 0 rgba(0,0,0,0.2);} .lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{padding:1vw;border:1px solid rgba(0,0,0,0.1);} /* SIDEBAR */ #beta-inner{font-size:14px;color:var(--darker);} .module{padding:1vw;background:var(--lightest);margin:0 0 2vw 0;border:none;box-shadow:-5px 5px 25px 0 rgba(0,0,0,0.2);} .module-inner{padding:1vw;border:1px solid rgba(0,0,0,0.1);} .module-header{background:transparent;border:none;text-align:center;} .module-header h3{margin:0;padding:0;font-size:20px;} .module-header a, .module-header a:visited{color:var(--accent);} .module-customtext .module-content, .module-customtext2 .module-content{padding:0;text-align:justify;line-height:1.5;} .module-typelist ul, .module-pagesummary ul{list-style:none;margin:0;padding:0;font-size:10px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;} .module-typelist li a, .module-pagesummary li a{display:block;padding:9px 0;border-bottom:1px solid rgba(0,0,0,0.1);} .module-typelist li:last-of-type a, .module-pagesummary li:last-of-type a{padding:9px 0 0 0;border-bottom:none;} .module-calendar .module-content{text-align:center;} .module-calendar table{border:none;font-size:10px;margin-right:auto;margin-left:auto;margin-top:10px;width:98%;border-spacing:3px;border-collapse:separate;} .module-calendar td{border:1px solid rgba(0,0,0,0.1);padding:5px;margin:5px;position:relative;} .module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:var(--accent);padding:5px;color:var(--lightest);} .module-calendar th{background:var(--accent);color:var(--lightest);font-weight:bold;padding:5px;} #tag-hierarchy ul{padding:0;margin:0;list-style:none;font-weight:bold;text-transform:uppercase;font-size:10px;letter-spacing:1px;} #tag-hierarchy .tagItem .tagList{padding-left:0;margin:0 0 10px 20px;font-weight:normal;text-transform:capitalize;font-size:14px;letter-spacing:0;} #tag-hierarchy .tagItem:last-of-type .tagList{margin:0 0 0 20px;} #tag-hierarchy .tagItem .tagList li{margin-left:20px;} .tag-count{font-size:x-small;} .module-layoutcredit{padding:0;background:transparent;margin:0;border:none;box-shadow:none;} .module-layoutcredit .module-inner{padding:0;border:none;} .module-layoutcredit p{padding:0;margin:0;text-align:center;font-weight:bold;text-transform:uppercase;font-size:9px;letter-spacing:2px;} .module-layoutcredit .module-header, .all-link, .module-viewlinks, .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);} /* FOR MOBILE */ @media only screen and (max-width:1200px){ .layout-two-column-left #alpha, .layout-two-column-right #alpha{margin:0;} .layout-two-column-left #beta, .layout-two-column-right #beta{float:none;width:auto;} .module-layoutcredit{margin:0 0 2vw 0;} }

Installation Guide

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

♡ Layout Type:

One Column
Two Column (Sidebar on Left)
Two Column (Sidebar on Right)

♡ Disable customized comment pages for your journal: Yes

♡ Link text to leave a comment: Comment
♡ Navigation link names: Recent/Archive/Friends/Profile

♡ Fill in sticky note if desired.
♡ Fill in first and second custom sidebar modules if desired.

♡ If some modules are unneeded and showing up, use the dropdowns to set them to (none) where they appear.

♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/

♡ Custom stylesheet: Input the CSS provided and save!

Extra Wreaths

Need wreath ideas for your edits? You can find free transparent wreaths here on Pixabay, to get you started, but there are tons of places online to get nice transparent frames and wreaths! Here are a few bonus options from my collection of resources from various paid and free markets:


*These are obviously much larger; just rightclick and copy or rightclick and save as to grab 'em! Hotlinking is fine. The third image in IS transparent; I just had to add a background color so you guys could see it easier.

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!