tesscodes | Layout: Coupled

two column (sidebar on left) | three column (sidebars on right) | three column (sidebars on left) |

Information

Hey guys! I want to put words here but I'm tired and have a thousand things to do lmfao. Anyway, I love this layout lmao. Some info: It has three different options for the sidebar: Both sidebar and tags list, just the sidebar, or just the tags list, depending on your preference! To use this for a community with icons enabled and entry columns disabled, delete the very last section of code in the CSS and you'll be set to use any sidebar combo in this layout. Enjoy! ♥

Layout Coding

/*-- COUPLED - TESSISAMESS - 2019 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--darkest: #000; /* links & headings */
	--darker: #222; /* page text */
	--dark: #333; /* sidebar background */
	--medium: #999; /* entry date & tags; link hover */
	--lightest: #fff; /* sidebar text, tags background, entry background */
	--light-accent: #f8f8f8; /* page background */
	--accent: #296d8e; /* tags list headings & entry links */

--borders: rgba(0,0,0,0.08);

--side-width: 360px;
	--tags-width: 240px;

--main-font: Livvic,helvetica,arial,sans-serif;
	--headings: Anton;
	--title-font: Anton;

--side-bg: url(https://i.imgur.com/v1yJ0G7.jpg)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: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v11/1Ptgg87LROyAm3Kz-C8.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: 'Livvic';
  font-style: normal;
  font-weight: 400;
  src: local('Livvic Regular'), local('Livvic-Regular'), url(https://fonts.gstatic.com/s/livvic/v2/rnCp-x1S2hzjrlfXaOM7.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(--light-accent);font-family:var(--main-font);font-size:13px;color:var(--darker);}

blockquote{font-style:italic;}
h1,h2,h3,h4,h5,h6{font-family:var(--headings);text-transform:uppercase;font-weight:normal;margin:0;}
img{max-width:100%;}
ul{list-style:circle;}
hr{margin-left:10%;margin-right:10%;border:none;height:1px;background:var(--borders);}
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;font-style:italic;}

.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;}
#pagebody-inner{display:flex;}

.layout-two-column-left #alpha{margin:0 0 0 var(--side-width);}
.layout-two-column-left #beta{width:var(--side-width);}

.layout-three-column-right #alpha{margin:0;width:calc(100% - var(--tags-width));}
.layout-three-column-right #beta{display:none;}
.layout-three-column-right #gamma{width:var(--tags-width);}

.layout-three-column-left #alpha{margin:0;width:calc(100% - var(--tags-width));}
.layout-three-column-left #beta{width:var(--side-width);}
.layout-three-column-left #gamma{width:var(--tags-width);margin:0 0 0 var(--side-width);}

/* HEADER */

#header{display:none;padding:20px 5vw 0 5vw;color:var(--darkest);font-family:var(--headings);text-transform:uppercase;}
.layout-three-column-right #header{display:initial;position:absolute;left:var(--tags-width);top:0;right:0;}

#banner-text{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;}

#nav-above{list-style:none;margin:0;padding:0;font-size:small;letter-spacing:1px;}
#nav-below{display:none;}
.banner-viewlinks{display:inline;padding:0;border:none;}
.banner-viewlinks:last-of-type{display:none;}

#nav-above a{margin-left:10px;}
.current a{color:var(--darkest);}

#header-text{display:flex;align-items:center;justify-content:center;background:transparent;border:none;margin:0;padding:0;}
#banner-header{font-family:var(--title-font);text-align:center;font-size:22px;}
#banner-header a{color:var(--accent);}
#banner-description{font-family:var(--headings);text-align:center;margin:0 0 0 10px;font-size:22px;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;padding:0;}
#alpha-inner{padding:5vw;}

#alpha a, #alpha a:visited{color:var(--accent);}
#alpha a:hover{color:var(--medium);}

.content-nav{margin:2vw 0 0 0;-webkit-column-span:all;column-span:all;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;-webkit-column-span:all;column-span:all;}
#tagpage-header h2{margin-bottom:2vw;}

.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:15px;}
#sticky-note .entry-text{padding:0;}
#sticky-note .entry-footer{display:none;}

/* ENTRIES */

.entry{margin:0 0 2vw 0;padding:30px;background:var(--lightest);border:1px solid var(--borders);-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;max-width:600px;position:relative;}

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

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

.inner-entry-userpic{float:right;text-align:center;position:absolute;top:0;right:-70px;padding:0;}
.inner-entry-userpic img{max-width:60px;max-height:60px;padding:5px;background:var(--lightest);border:1px solid var(--borders);margin:0 0 4px 0;}
.outer-entry-userpic, .mid-entry-userpic{display:none;}

.pic-poster{font-size:8px;}
.pic-poster img{display:none;}
.pic-poster a{color:var(--accent)!important;}
.pic-poster a[href*="profile"]{display:none;}

.entry-content{margin-top:20px;}
.entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;}

.ljtags{margin:20px 0 0 0;text-align:center;font-size:0;}
#alpha .ljtags a:before{content:'#';}
#alpha .ljtags a, #alpha .ljtags a:visited{font-size:9px;color:var(--medium);margin:0 5px;}

.entry-metadata{display:none;}

.entry-linkbar{margin:20px 0 0 0;padding:20px 0 0 0;border-top:1px solid var(--borders);text-align:center;font-size:8px;font-weight:bold;text-transform:uppercase;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{margin:0 7px;}
.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:left;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;-webkit-column-span:all;column-span:all;}
.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(--darkest)!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:0;}
.lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{margin:5vw;padding:30px;background:var(--lightest);border:1px solid var(--borders);}

/* SIDEBARS */

#beta{width:var(--side-width);background:var(--dark) var(--side-bg);background-size:cover;display:flex;align-items:center;justify-content:center;position:fixed;top:0;bottom:0;left:0;}
#beta-inner{padding:20px 50px;font-size:10px;color:var(--lightest);}
#beta a{color:var(--lightest);}
#beta a:hover{color:var(--medium);}

#gamma{width:var(--tags-width);background:var(--lightest);border-right:1px solid var(--borders);min-height:100vh;}
#gamma-inner{padding:20px;font-size:small;color:var(--darker);}

.module{padding:0;background:transparent;margin:0 0 10px 0;border:none;}
#gamma .module{display:none;}

.module-header{display:none;background:transparent;border:none;}
.module-header h3{margin:0;padding:0 0 5px 0;font-size:16px;}
.module-header a, .module-header a:visited{color:var(--darkest);}

.module-customtext .module-header{display:block;}
.module-customtext .module-content{padding:0;}

.module-viewlinks ul:before, .module-typelist ul:before{content:'';width:12px;height:12px;margin:0 8px 0 0;}
.module-viewlinks ul:before{background:url(https://i.imgur.com/kPvzRuC.png)center;background-size:100%;}
.module-typelist ul:before{background:url(https://i.imgur.com/NaQTF5b.png)center;background-size:100%;}
.module-viewlinks ul, .module-typelist ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;}
.module-viewlinks li, .module-typelist li{margin:0 5px 0 0;}
.module-viewlinks li:after, .module-typelist li:after{content:'/';margin:0 0 0 5px;}
.module-viewlinks li:last-of-type:after, .module-typelist li:last-of-type:after{display:none;}

.module-categories{display:none;}
#gamma .module-categories{display:block;}

#tag-hierarchy ul{padding:0;margin:0;list-style:none;text-transform:capitalize;}
#tag-hierarchy ul li ul{margin:0 0 11px 0;}
#tag-hierarchy li{font-family:var(--headings);letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-size:11px;}
#tag-hierarchy li li{font-family:var(--main-font);font-size:9px;text-transform:capitalize;}
#tag-hierarchy li a{display:block;margin:6px 0;color:var(--darker);padding:0 0 5px 0;border-bottom:1px solid var(--borders);}
#tag-hierarchy li a:hover{color:var(--medium);}

.module-layoutcredit p:before{content:'';display:block;width:12px;height:12px;margin:0 8px 0 0;background:url(https://i.imgur.com/6kAK231.png)center;background-size:100%;}
.module-layoutcredit p{padding:0;margin:0;display:flex;}

.module-customtext2, .module-pagesummary, .module-calendar, .all-link, .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);}

/* DELETE THIS SECTION IF YOU'D LIKE TO USE THIS AS A NORMAL LAYOUT FOR A COMMUNITY */

.lj-view-recent #alpha-inner{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;-webkit-column-gap:2vw;-moz-column-gap:2vw;column-gap:2vw;-webkit-column-width:320px;-moz-column-width:320px;column-width:320px;}

.lj-view-recent .entry-header, .lj-view-recent .entry-datetime{text-align:center;}

.lj-view-recent .inner-entry-userpic{display:none;}

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) - Sidebar only
Three Column (sidebars on right) - Tags only
Three Column (sidebars on left) - Sidebar and tags

♡ 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 custom sidebar module if desired. This is your sidebar blurb and title.
♡ Person to credit if you have an individually created layout: Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ 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!