Tessisamess

Two Column Left (Links List) | Two Column Right (List Tags) | Two Column Right (Cloud Tags) | tess078

Information

Hey guys! I came across a screenshot of a Tumblr theme and loved the floating entries backed by flanked sidebars, so I ran with a similar idea built for S2 Complete's framework. I tracked down the theme creator to add to this post, and they can be found at 7th-district on Tumblr, though their blog does seem to be defunct as of 4-5 years ago.

Triunity features either a links list (Two Column Left) for the righthand side, or a tags list (Two Column Right), which supports both tiered hierarchy or tag cloud. As always, fonts, dimensions, etc. are editable in the :root directory, including toggling on/off the 3D borders on the content, if that's a vibe you're not into. Enjoy, and remember: my October Bundles sale is going until the end of the month! 💖

Layout Coding

/*-- TRIUNITY - 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{ /* COLORS */ --darkest: #000; /* headers & page links */ --darker: #222; /* page text */ --medium: #999; /* entry date & tags */ --lightest: #fff; /* content background & block link hover text */ --page-bg: #F1F1F1; --accent: #B97873; --accent2: #D6BCB5; /* FONTS */ --main-font: Anonymous Pro,monospace; --headings: Anonymous Pro,monospace; --title-font: Anonymous Pro,monospace; --body-text: 11px; --side-text: 9px; --meta-text: 9px; --icon-text: 14px; /* SIZING */ --container-width: 1200px; --container-height: 600px; --side-width: 350px; --icon: 40px; --sidebar-padding: 50px; --padding: 30px; --margin: 30px; /* ICONS */ --recent: 'person_outline'; --profile: 'favorite_border'; --friends: 'people_outline'; --archive: 'access_time'; /* BORDERS */ --borders: #B97873; --3d-border: 1px 1px 0 0 var(--borders),2px 2px 0 0 var(--borders),3px 3px 0 0 var(--borders); /* IMAGES */ --bg-img: url(https://images.unsplash.com/photo-1521515428649-7f27b37d88f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80)center bottom fixed; --side-img: url(https://images.unsplash.com/photo-1541832186590-2bffabbc08db?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)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: 'Anonymous Pro'; font-style: normal; font-weight: 400; src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'), url(https://fonts.gstatic.com/s/anonymouspro/v14/rP2Bp2a15UIB7Un-bOeISG3pHls29Q.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:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} /* GENERAL */ ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} ::-webkit-scrollbar-track{background:rgba(255,255,255,0.8);} ::-webkit-scrollbar{width:4px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--accent);} *{box-sizing:border-box;} body{margin:0;padding:0;background:var(--page-bg) var(--bg-img);background-size:cover;font-family:var(--main-font);font-size:var(--body-text);color:var(--darker);} blockquote{font-style:normal;padding:0 0 0 10px;border-left:1px solid var(--accent2);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);text-transform:uppercase;letter-spacing:2px;} img{max-width:100%;} ul{list-style:square;} hr{border:none;border-bottom:1px solid var(--accent2);} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--darkest);text-decoration:none;} a:hover{color:var(--lightest);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, .layout-two-column-right #alpha{width:var(--container-width);margin:100px auto 0 auto;} .layout-two-column-left #beta, .layout-two-column-right #beta{float:none;width:auto;} /* HEADER */ #header{display:none;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha-inner{margin:0 var(--side-width);position:relative;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--accent2);} .content-nav{margin:var(--margin) 0 0 0;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:var(--margin);font-size:var(--meta-text);text-transform:uppercase;font-weight:bold;letter-spacing:3px;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry{padding:var(--padding);} #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:13px;} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 var(--margin) 0;padding:0 var(--padding) var(--padding) var(--padding);background:var(--lightest);border:1px solid var(--borders);box-shadow:var(--3d-border);position:relative;} .entry-header{background:transparent;border:none;padding:0;} .entry-header-inner{display:flex;align-items:center;} .entry-header h3{margin:0;padding:0 0 0 35px;height:var(--icon);line-height:var(--icon);font-size:13px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;top:-10px;right:0;font-size:var(--meta-text);text-transform:uppercase;font-weight:bold;letter-spacing:2px;color:var(--accent);} .mid-entry-userpic{display:block;text-align:center;padding:0;} .mid-entry-userpic img{width:var(--icon);height:var(--icon);position:absolute;top:0;left:10px;border:1px solid var(--borders);border-top:none;} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster{position:absolute;bottom:var(--padding);left:var(--padding);display:flex;font-size:var(--meta-text);text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .pic-poster a{color:var(--accent)!important;} .pic-poster a:hover{color:var(--accent2)!important;} .pic-poster .ljuser ~ .ljuser:before{content:'/';margin:0 4px;} .entry-content{margin-top:10px;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:15px 0 0 0;font-size:var(--meta-text);text-transform:uppercase;font-weight:bold;letter-spacing:1px;text-align:left;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);} .entry-metadata{display:none;} .entry-linkbar{margin:20px 0 0 0;text-align:right;font-size:var(--meta-text);text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .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 5px;} .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:15px;} .year{list-style:none;margin:0;padding:0;} .year li{display:inline;padding:0;background:var(--lightest);border:1px solid var(--borders);box-shadow:var(--3d-border);padding:5px 10px;} .lj-view-archive .entry{padding:var(--padding);} .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:0;} .lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{padding:var(--padding);background:var(--lightest);border:1px solid var(--borders);box-shadow:var(--3d-border);} .lj-view-tags #alpha-inner h2{text-align:center;font-size:13px;} .lj-view-tags #alpha-inner ul{line-height:2;} /* SIDEBAR */ #beta{position:fixed;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;text-align:center;} #beta-inner{background:rgba(255,255,255,0.85);width:var(--container-width);height:var(--container-height);padding:var(--sidebar-padding);font-size:var(--side-text);color:var(--darkest);position:relative;} #beta-inner a{background:var(--lightest);border:1px solid var(--borders);box-shadow:var(--3d-border);} #beta-inner a:hover{background:var(--accent2);} .module{display:none;padding:0;background:transparent;margin:0;border:none;width:calc(var(--side-width) - var(--sidebar-padding) - var(--sidebar-padding));align-items:center;justify-content:center;} .module-viewlinks{display:flex;height:100%;} .module-viewlinks .module-inner{width:100%;} .module-viewlinks ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;} .module-viewlinks a{display:flex;align-items:center;font-size:0;margin:0 5px;padding:5px;} .module-viewlinks a:hover{font-size:var(--side-text);text-transform:uppercase;font-weight:bold;letter-spacing:3px;} .module-viewlinks a:before{font-family:Material Icons;font-size:var(--icon-text);text-transform:none;font-weight:normal;letter-spacing:0;} .module-viewlinks a:hover:before{letter-spacing:5px;} .module-viewlinks a[href$='com/']:before{content:var(--recent);} .module-viewlinks a[href*='calendar']:before{content:var(--archive);} .module-viewlinks a[href*='friends']:before{content:var(--friends);} .module-viewlinks a[href*='profile']:before{content:var(--profile);} .module-viewlinks .module-inner:after{content:'';display:block;height:calc(var(--container-height) / 1.7);background:var(--accent) var(--side-img);background-size:cover;margin:10px 0 0 0;outline:10px solid var(--lightest);outline-offset:-11px;border:1px solid var(--borders);box-shadow:var(--3d-border);} .module-typelist{display:none;position:absolute;top:var(--sidebar-padding);right:var(--sidebar-padding);bottom:var(--sidebar-padding);} .layout-two-column-left .module-typelist{display:flex;} .module-typelist .module-inner{width:100%;} .module-typelist ul{list-style:none;margin:0;padding:0;text-transform:uppercase;font-weight:bold;letter-spacing:3px;} .module-typelist li a{display:block;margin:7px 0;padding:10px 0;} .module-categories{display:none;position:absolute;top:var(--sidebar-padding);right:var(--sidebar-padding);bottom:var(--sidebar-padding);overflow:auto;} .layout-two-column-right .module-categories{display:flex;} .module-categories .module-inner{width:100%;text-transform:uppercase;font-weight:bold;letter-spacing:3px;} #tag-hierarchy ul{padding:0;margin:0;list-style:none;text-align:left;font-size:var(--body-text);} #tag-hierarchy li{padding:5px 0 0 0;} #tag-hierarchy li ul{text-align:center;font-size:var(--side-text);} #tag-hierarchy li ul li{padding:0;} #tag-hierarchy li ul a{display:block;margin:7px 0;padding:10px 0;} #tag-cloud ul{list-style:none;padding:0;margin:0 5px 0 0;} #tag-cloud li{float:none;padding:0;} #tag-cloud li a{display:block;margin:7px 0;padding:10px 0;font-size:var(--side-text)!important;} #tagclear{display:none;} .module-layoutcredit{display:block;text-transform:uppercase;font-weight:bold;letter-spacing:3px;} .module-layoutcredit p{padding:0;margin:0;position:fixed;left:15px;bottom:20px;} .module-layoutcredit a{padding:5px 10px 5px 13px;} .tag-count, .all-link, .module-header, .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 Left - Links List (No tags)
Two Column Right - Tags (No links list)

♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No

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

♡ Fill in sticky note if desired.
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: https://tessisamess.insanejournal.com/132098.html

♡ Display of tags in sidebar - List OR Cloud (use cloud if you don't use a colon to group tags, or if you just don't want tag group headers.) This is for Two Column Right only.

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