Tessisamess

Two Column (Sidebar on left) | Two Column (Sidebar on right) | tess080

Information

Hey guys! After a small break due to personal reasons, I'm back—and this month I'm thinking we'll do nothing but layouts! So if you've been dying for some fresh new content to give your journals a facelift, hopefully this month will bring you some fun stuff! I also have over 75 layouts on Patreon if that still doesn't do it for you. 👀

Glad to be back in action, and enjoy! 💖

Layout Coding

/*-- INSOMNIA - TESSISAMESS - 2021 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at: tessisamess.insanejournal.com tesscodes.dreamwidth.org patreon.com/tessisamess --*/ /* REPLACEMENTS */ :root{ /* COLORS */ --darkest: #000; /* page links & headings */ --darker: #222; /* page text */ --medium: #999; /* entry date & tags */ --lightest: #fff; --page-bg: #E3E3E3; --content-bg: #fff; --side-links: #000; --side-links-text: #fff; --accent: #997569; --shadow: 1px 1px 2px 0 rgba(0,0,0,0.1); /* FONTS */ --main-font: Open Sans,helvetica,arial,sans-serif; --headings: PT Mono; --body-text: 11px; --side-text: 7px; --entry-headers: 8px; --details: 8px; --tags-title: 'Categories'; /* DIMENSIONS */ --page-inset: 30px; --entry-width: 500px; --content-spacing: 10px; --lg-side-width: 220px; --sm-side-width: 115px; --side-padding: 7px; --side-link-padding: 10px 0; --entry-padding: 15px; --entry-content-margin: 10px; --entry-icon: 70px; /* IMAGES */ --bg-img: url(https://i.imgur.com/CPQCXtc.png)center fixed; --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: 'Open Sans'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.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: 'PT Mono'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/ptmono/v8/9oRONYoBnWILk-9AnC8zMw.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);} ::-webkit-scrollbar-track{background:rgba(0,0,0,0.1);} ::-webkit-scrollbar{width:4px;background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);} *{box-sizing:border-box;} body{margin:0;padding:0;background:var(--page-bg) var(--bg-img);font-family:var(--headings);font-size:var(--body-text);color:var(--darker);} blockquote{font-style:normal;padding:10px;box-shadow:var(--shadow);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);text-transform:uppercase;font-weight:normal;color:var(--darkest);} img{max-width:100%;} ul{list-style:circle;} hr{border:none;border-top:1px dotted var(--accent);} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--darkest);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;} .ljuser{font-weight:bold;} .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;} .layout-two-column-left #alpha{margin:0 0 0 calc(var(--lg-side-width) + var(--content-spacing));} .layout-two-column-left #beta{float:left;width:var(--lg-side-width);} .layout-two-column-right #alpha{margin:0 0 0 calc(var(--sm-side-width) + var(--content-spacing));} .layout-two-column-right #beta{float:left;width:var(--sm-side-width);} /* HEADER */ #header{display:none;} /* BODY OF PAGE */ #pagebody{padding:var(--page-inset);} .layout-two-column-left #pagebody-inner{max-width:calc(var(--lg-side-width) + var(--content-spacing) + var(--entry-width));margin:0 auto;} .layout-two-column-right #pagebody-inner{max-width:calc(var(--sm-side-width) + var(--content-spacing) + var(--entry-width));margin:0 auto;} /* 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:var(--content-spacing) 0 0 0;font-size:var(--details);text-transform:uppercase;letter-spacing:2px;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:var(--content-spacing);font-size:var(--details);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:center;color:var(--darkest);} #sticky-note .entry-header h2{margin:0;padding:0;font-size:var(--entry-headers);} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 var(--content-spacing) 0;padding:var(--entry-padding);background:var(--content-bg);box-shadow:var(--shadow);position:relative;} .entry-header{background:transparent;border:none;padding:0;letter-spacing:2px;} .entry-header h3{margin:0;padding:0;font-size:var(--entry-headers);} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;top:var(--entry-padding);right:var(--entry-padding);font-size:var(--details);color:var(--medium);text-transform:uppercase;letter-spacing:2px;} .mid-entry-userpic{display:block;position:absolute;top:0;right:calc((var(--entry-icon) + 8px) * -1);float:none;text-align:center;padding:5px;background:var(--content-bg);box-shadow:var(--shadow);width:var(--entry-icon);} .mid-entry-userpic img{width:100%;height:calc(var(--entry-icon) - 10px);} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster{font-size:7px;text-transform:uppercase;letter-spacing:1px;} .pic-poster img{display:none;} .pic-poster .ljuser{display:inline-block;margin:3px 0 0 0;} .pic-poster b{font-weight:normal;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:var(--entry-content-margin);} .entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;} .ljtags{margin:var(--entry-content-margin) 0 0 0;font-family:var(--headings);font-size:0;text-align:left;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--accent);} #alpha .ljtags a{font-size:var(--details);text-transform:uppercase;margin:0 5px 0 0;} #alpha .ljtags a:before{content:'#';} .entry-metadata{display:none;} .entry-linkbar{margin:0;font-size:var(--details);text-transform:uppercase;letter-spacing:2px;text-align:right;} .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;margin:var(--entry-content-margin) 0 0 10px;} .entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions], .entry-linkbar li a[href$=html]{display:none;} /* ARCHIVE VIEW */ .yearlinks{text-align:center;margin-bottom:var(--content-spacing);} .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;} 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);} .yeartable td{border:none!important;background:rgba(0,0,0,0.05);padding:5px;} /* TAGS & MONTH VIEW */ .lj-view-tags #alpha, .lj-view-month #alpha{padding:var(--entry-padding);background:var(--content-bg);} .lj-view-tags #alpha h2{font-size:var(--entry-headers);letter-spacing:2px;} /* SIDEBAR */ #beta-inner{font-size:var(--side-text);color:var(--darker);text-transform:uppercase;letter-spacing:2px;} .module{padding:0;background:transparent;margin:0;border:none;} .module-header{display:none;background:var(--side-links);color:var(--side-links-text);border:none;} .module-header h3{margin:0;text-align:center;padding:var(--side-link-padding);color:var(--side-links-text);font-size:0;} .module-header a, .module-header a:visited{color:var(--side-links-text);} .module-customtext{padding:var(--side-padding);background:var(--content-bg);box-shadow:var(--shadow);margin:0 0 5px 0;text-align:center;} .module-customtext .module-content{padding:0;position:relative;} .module-customtext .blurb{position:absolute;bottom:15px;left:15px;right:15px;background:var(--content-bg);box-shadow:var(--shadow);padding:var(--side-padding);} .module-list{text-align:center;} .module-list-item{margin:0 0 1px 0;} .module-list-item a{display:block;background:var(--side-links);color:var(--side-links-text);padding:var(--side-link-padding);} .module-list-item a:hover{background:var(--accent);} .layout-two-column-left .module-list{display:flex;flex-wrap:wrap;} .layout-two-column-left .module-list-item{width:calc(50% - .5px);} .layout-two-column-left .module-list-item:nth-of-type(odd){margin:0 1px 0 0;} .module-viewlinks ul, .module-typelist ul{list-style:none;margin:0;padding:0;} .module-categories .module-header{display:block;} .module-categories .module-header h3:after{font-size:var(--side-text);content:var(--tags-title);} .module-categories .module-content{max-height:0;overflow:hidden;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;} .module-categories:hover .module-content{max-height:250px;} #tag-hierarchy{padding:var(--side-link-padding);max-height:200px;overflow:auto;} #tag-hierarchy ul{padding-left:0;margin-left:20px;line-height:2;} .all-link p{margin:0;} .all-link a{display:block;background:var(--side-links);color:var(--side-links-text);text-align:center;padding:var(--side-link-padding);} .all-link a:hover{background:var(--accent);} .module-layoutcredit{position:fixed;left:10px;bottom:15px;} .module-layoutcredit p{padding:0;margin:0;} .module-layoutcredit a{padding:5px 5px 5px 7px;background:var(--content-bg);box-shadow:var(--shadow);} .tag-count, .module-customtext2, .module-pagesummary, .module-calendar, .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, 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:

Two Column (Sidebar on left) - Wide navigation
Two Column (Sidebar on right) - Narrow navigation

♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No (recommended)
♡ Show Userpics on Entries: Either!

♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Link text to read comments: Comment

♡ Fill in sticky note if desired.
♡ Fill in custom sidebar module with your image and (optional) blurb:

<img src="IMG_URL">
<div class="blurb">BLURB_TEXT</div>

♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/136765.html

♡ Display of tags in sidebar: List

♡ Custom stylesheet: Input the CSS provided and save!

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!