tesscodes | Layout: Stacked

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

Information

Hey guys! It's been a while since I've done a free layout; sorry about that! 😬 I don't know how that happened, but the next few months I'm going to make sure more layouts start coming!

Today we have Stacked, a minimalist layout with two very different sidebar options and optional hover navigation. Make sure to go past the :root and delete the noted section if using this layout for a community rather than a journal. Enjoy! 💖

Setting a static height for your sidebar image: Info here!

Layout Coding

/*-- STACKED - TESSISAMESS - 2020 --*/
/*-- 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{
	--darkest: #000; /* headings */
	--darker: #222; /* page text */
	--medium: #999; /* entry date & tags */
	--lightest: #fff; /* sidebar text and links; bottom nav hover */

--page-bg: #fff;
	--accent: #BD9F94;

--main-font: Open Sans,helvetica,arial,sans-serif;
	--headings: Cutive Mono;
	--title-font: Tiffany;

--margin: 30px;
	--padding: 100px;

--side-img: url()center;

/* LARGE SIDEBAR */
	--container-width: 1300px;
	--side-width: 450px;
	--nav-height: 200px;

/* ICON SIDEBAR */
	--container-width2: 1000px;
	--side-width2: 100px;

--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;
}

/* DELETE THIS SECTION IF USING FOR A COMMUNITY */

.lj-view-recent .entry, .lj-view-day .entry{border:none;padding:0;}
.lj-view-recent .entry-header, .lj-view-day .entry-header, .lj-view-recent .entry-datetime, .lj-view-day .entry-datetime, .lj-view-recent .ljtags, .lj-view-day .ljtags{text-align:center;}
.mid-entry-userpic{display:none!important;}
.lj-view-friends .mid-entry-userpic{display:block!important;}
.lj-view-recent .entry-linkbar, .lj-view-day .entry-linkbar{text-align:center;letter-spacing:3px;}
.lj-view-recent .entry-linkbar a, .lj-view-day .entry-linkbar a, .ljtags a{margin:0 10px;}

/* FONTS */

@font-face{font-family:Tiffany;src:url(https://dl.dropbox.com/s/z5ae8b6dzysia09/TiffanyScript.otf);}

@font-face {
  font-family: 'Cutive Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Cutive Mono Regular'), local('CutiveMono-Regular'), url(https://fonts.gstatic.com/s/cutivemono/v8/m8JWjfRfY7WVjVi2E-K9H6RCTm4.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: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/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;
}

/* GENERAL */

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

*{box-sizing:border-box;}
body{margin:0;padding:0;background:var(--page-bg);font-family:var(--headings);font-size:13px;color:var(--darker);}

blockquote{font-style:normal;padding:10px;border:1px solid var(--accent);}
h1,h2,h3,h4,h5,h6{margin:0;}
img{max-width:100%;}
ul{list-style:square;}
hr{width:40%;max-width:250px;height:5px;background:var(--accent);border:none;margin-left:auto;margin-right:auto;}
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);}

.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 #container-inner{max-width:var(--container-width);margin:0 auto;}
.layout-two-column-left #alpha{margin:0 0 0 var(--side-width);}
.layout-two-column-left #beta{float:left;width:var(--side-width);}

.layout-two-column-right #container-inner{max-width:var(--container-width2);margin:0 auto;}
.layout-two-column-right #alpha{margin:0 0 0 var(--side-width2);}
.layout-two-column-right #beta{float:left;width:var(--side-width2);}

/* HEADER */

#header{display:none;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:var(--padding);}
#alpha a, #alpha a:visited{color:var(--accent);}
#alpha a:hover{color:var(--darkest);}

.content-nav{position:fixed;right:10px;bottom:40px;width:30px;font-size:0;}
.content-nav a{display:block;border:1px solid var(--accent);height:30px;line-height:30px;margin:0 0 5px 0;}
.content-nav a:hover{background:var(--accent);color:var(--lightest)!important;}
.content-nav a:before{font-size:20px;font-weight:bold;}
.content-nav a:before{content:'<';}
.content-nav a + a:before{content:'>';}

.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:0 0 var(--margin) 0;border-bottom:5px solid var(--accent);}
#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:20px;}

#sticky-note .entry-text{padding:0;}

#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0 0 var(--margin) 0;padding:0 0 var(--margin) 0;background:transparent;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3{margin:0;padding:0;font-size:20px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);}

.lj-view-day .entry-datetime{display:none;}
.entry-datetime{font-size:9px;letter-spacing:3px;text-transform:uppercase;text-align:left;font-weight:bold;color:var(--medium);}

.mid-entry-userpic{display:none;float:left;text-align:center;padding:0 10px 0 0;}
.mid-entry-userpic img{max-width:50px;max-height:50px;}
.outer-entry-userpic, .inner-entry-userpic{display:none;}

.pic-poster{position:absolute;left:0;bottom:var(--margin);display:flex;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:bold;}
.pic-poster img{display:none;}
.pic-poster .ljuser ~ .ljuser:before{content:'/';margin:0 5px;}
.pic-poster a[href*="profile"]{display:none;}

.entry-content{margin-top:var(--margin);}
.entry-text{font-family:var(--main-font);min-height:0;overflow:hidden;line-height:1.6;text-align:justify;}

.ljtags{margin:var(--margin) 0 0 0;font-family:var(--headings);font-size:0;text-transform:uppercase;font-weight:bold;text-align:left;}
.ljtags a{font-size:10px;letter-spacing:1px;margin:0 10px 0 0;}
.ljtags a:before{content:'#';}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);}

.entry-metadata{display:none;}

.entry-linkbar{margin:var(--margin) 0 0 0;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:bold;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{margin:0 0 0 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;margin-bottom:10px;}
.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(--padding);}

/* SIDEBAR */

#beta{position:sticky;top:0;height:100vh;}
#beta-inner{height:100%;display:flex;flex-direction:column;justify-content:space-between;text-align:center;font-size:11px;color:var(--lightest);letter-spacing:3px;text-transform:uppercase;font-weight:bold;}

.module{padding:20px;background:var(--accent);margin:0;border:none;display:flex;justify-content:center;}

.module-customtext{height:var(--nav-height);align-items:flex-end;}
.module-customtext .module-content{padding:0;}
.module-customtext h1{font-family:var(--title-font);font-size:30px;line-height:1;text-transform:none;color:var(--lightest);letter-spacing:0;}

.module-viewlinks{height:var(--nav-height);align-items:flex-start;}
.module-viewlinks .module-inner{width:100%;}
.module-viewlinks ul{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;}
.module-viewlinks li{width:calc(25% - 5px);}
.module-viewlinks li a{display:block;color:var(--lightest);}
.module-viewlinks li a:hover{opacity:0.5;}

.module-typelist, .module-customtext2{background:var(--side-img);background-size:cover;height:calc(100% - (var(--margin) * 2) - (var(--nav-height) * 2));font-size:9px;}
.module-typelist .module-inner{padding:20px;height:100%;width:100%;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;}
.module-typelist .module-content{display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:rgba(255,255,255,0.7);padding:0 20px;}
.module-typelist ul{width:100%;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.module-typelist li{margin:0;padding:0;width:50%;}
.module-typelist li a{display:block;color:var(--darkest);border:1px solid rgba(255,255,255,0.5);margin:3px;padding:5px 0;}
.module-typelist li a:hover{background:rgba(255,255,255,0.5);}
.module-typelist:hover .module-inner{opacity:1;}

.module-layoutcredit{position:fixed;right:10px;bottom:10px;padding:0;background:transparent;letter-spacing:0;}
.module-layoutcredit p{padding:0;margin:0;}
.module-layoutcredit a{display:block;border:1px solid var(--accent);width:30px;height:30px;line-height:30px;font-size:20px;}
.module-layoutcredit a:hover{background:var(--accent);color:var(--lightest);}

.module-header, .module-pagesummary, .module-calendar, .module-categories, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* ICON SIDEBAR */

.layout-two-column-right #beta-inner:before{content:'';background:var(--accent);height:calc(100% - (var(--side-width2) * 5) - (20px * 5));}

.layout-two-column-right .module-typelist, .layout-two-column-right .module-customtext2{background:var(--lightest) var(--side-img);background-size:cover;height:var(--side-width2);font-size:9px;}
.layout-two-column-right .module-typelist .module-inner{display:none;}

.layout-two-column-right .module-viewlinks{padding:0;height:calc((var(--side-width2) * 4) + (20px * 3));background:transparent;}
.layout-two-column-right .module-viewlinks .module-inner, .layout-two-column-right .module-viewlinks .module-content{height:100%;}
.layout-two-column-right .module-viewlinks ul{height:100%;flex-direction:column;justify-content:space-between;}
.layout-two-column-right .module-viewlinks li{width:100%;height:calc(25% - 20px);}
.layout-two-column-right .module-viewlinks li a{display:flex;align-items:center;justify-content:center;height:100%;background:var(--accent);}

.layout-two-column-right .module-customtext{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, 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) - Large Sidebar
Two Column (Sidebar on Right) - Icon Sidebar
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No (Not required, but recommended)

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

♡ Fill in sticky note if desired.
♡ Body of custom sidebar module:
<a href="http://JOURNALNAME.insanejournal.com/"><h1>Title</h1></a>Subtitle
♡ Person to credit if you have an individually created layout: ©
♡ URL to link the credit to: https://tessisamess.insanejournal.com/128007.html

♡ Sidebar ordering:
Custom Text
Links List or Custom Text Two (for image only)*
Nav Links
Layout Credit
(none) for the rest of the Primary items. Don't worry about the Secondary items.
*Please note that you can use either of these for either layout type and your picture will work, but the icon sidebar version does NOT have a links list visible.

♡ 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!