Tessisamess

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

Information

Hey guys! We're living in the worst timeline, so here's a layout to help games and their players archive their much more satisfying timelines. Or use it as a regular layout—it's up to you!

Entries display tags and userpics on hover (friends page displays this information by default.) Header fonts are sized for the header option, so if you're using the sidebar version you'll most likely need to scale them down in the :root directory. Enjoy! 💖

Layout Coding

/*-- TIMELINE - 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 */ --darker: #222; /* page text */ --medium: #999; /* entry date & tags */ --lightest: #fff; /* header text */ --accent: #3E8386; --page-bg: #f5f5f5; --content-bg: #fff; --borders: rgba(0,0,0,0.14); --connector: #999; /* FONTS */ --main-font: Open Sans,helvetica,arial,sans-serif; --headings: Lato; --title-font: Quentin; --page-text: 12px; --header-title: 85px; --header-text: 14px; --sidebar-text: 12px; --sidebar-tags: 9px; --entry-title: 25px; --entry-date: 14px; --entry-meta: 8px; --entry-footer: 10px; /* TEXT REPLACEMENTS */ --prev-link: 'Earlier'; --next-link: 'Later'; --end-entries: 'Beginning'; --end-archive: 'End'; /* DIMENSIONS */ --page-inset: 4vw; --padding: 30px; --margin: 15px; --header-height: 370px; --sidebar-width: 300px; --entry-width: 550px; --connector-height: 50px; --entry-icon: 65px; /* IMAGES */ --header-img: url()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:Quentin;src:url(https://dl.dropbox.com/s/4wa0x19ns4gy7a1/Quentin.otf);} @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPGQ.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: 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; } /* GENERAL */ ::-webkit-scrollbar-track{background:var(--borders);} ::-webkit-scrollbar{width:4px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--accent);} ::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:var(--page-text);color:var(--darker);} blockquote{font-style:normal;padding:calc(var(--padding) / 2);border:1px solid var(--borders);margin:10px 20px;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;text-transform:uppercase;letter-spacing:2px;} img{max-width:100%;} ul{list-style:circle;} hr{height:1px;background:var(--borders);border:none;} 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{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;} .layout-two-column-left #beta{float:none;width:var(--sidebar-width);position:fixed;top:var(--header-height);left:0;bottom:0;} .layout-two-column-right #alpha{margin:0;} .layout-two-column-right #beta{float:none;width:auto;} /* HEADER */ #header{padding:0;color:var(--lightest);text-align:center;background:var(--accent) var(--header-img);background-size:cover;text-transform:uppercase;line-height:1;} .layout-two-column-left #header{width:var(--sidebar-width);position:fixed;top:0;left:0;} #banner-text{display:flex;flex-direction:column;justify-content:space-between;height:var(--header-height);padding:20px 0;} #nav-above{list-style:none;margin:0;padding:0;font-size:var(--header-text);letter-spacing:2px;} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-above a{margin:0 10px;padding:0 0 0 2px;color:var(--lightest);border-bottom:3px solid transparent;} #nav-above a:hover{border-bottom:3px solid var(--lightest);} .current a{color:var(--lightest);} #header-text{background:transparent;border:none;margin:0;padding:0;} #header-text a{color:var(--lightest);} #banner-header{font-family:var(--title-font);text-align:center;text-transform:none;font-size:var(--header-title);} #banner-description{font-family:var(--headings);text-align:center;font-size:var(--header-text);margin:0;letter-spacing:3px;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:var(--page-inset) calc(var(--page-inset) + var(--entry-icon) + 10px);} .layout-two-column-left #alpha{margin:0 0 0 var(--sidebar-width);} #alpha-inner{max-width:var(--entry-width);margin:0 auto;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--medium);} .content-nav{margin:var(--margin) auto 0 auto;max-width:300px;display:flex;justify-content:center;font-size:0;text-transform:uppercase;background:var(--content-bg);border:1px solid var(--borders);} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} .content-nav a{width:50%;padding:10px;} .content-nav a ~ a{border-left:1px solid var(--borders);} .content-nav a:before{letter-spacing:2px;font-size:var(--entry-date);content:var(--prev-link);} .content-nav a ~ a:before{content:var(--next-link);} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:var(--margin);} .date-header{display:none;} #column-footer{clear:both;} #column-footer:after{content:var(--end-entries);text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:var(--entry-title);color:var(--accent);display:block;} .lj-view-archive #column-footer:after{content:var(--end-archive);} .lj-view-tags #column-footer:after, .lj-view-month #column-footer:after, .content-nav ~ #column-footer:after{display:none;} /* STICKY NOTE */ #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:center;color:var(--accent);} #sticky-note .entry-header h2{margin:0;padding:0;font-size:var(--entry-title);letter-spacing:3px;} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0;padding:calc(var(--entry-date) + 5px) 0 0 0;position:relative;} .lj-view-day .entry, .lj-view-archive .entry{padding:0;} .entry-inner:after{content:'';display:block;margin:var(--margin) auto;height:var(--connector-height);width:1px;background:var(--connector);} .entry-header{background:transparent;border:none;padding:0;text-align:center;height:calc(var(--entry-title) + var(--entry-date) + 1px);line-height:1;} .entry-header h3{margin:0;padding:0;font-size:var(--entry-title);letter-spacing:3px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;top:0;left:0;right:0;font-size:var(--entry-date);color:var(--medium);text-align:center;text-transform:uppercase;letter-spacing:2px;} .outer-entry-userpic{display:block;float:right;text-align:center;padding:0;position:absolute;top:calc(var(--entry-title) + (var(--entry-date) * 2) + 5px);right: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;z-index:1;opacity:0;} .outer-entry-userpic img{max-width:var(--entry-icon);max-height:var(--entry-icon);background:var(--content-bg);border:1px solid var(--borders);padding:5px;margin:0 0 5px 0;} .entry:hover .outer-entry-userpic, .lj-view-friends .outer-entry-userpic{right:calc((var(--entry-icon) + 10px) * -1);opacity:1;} .inner-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{text-transform:uppercase;font-size:var(--entry-meta);letter-spacing:1px;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .entry-content{padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);margin:0;} .entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;position:relative;z-index:2;} .ljtags{margin:0;font-size:0;text-align:left;text-transform:uppercase;font-weight:bold;max-height:0;opacity:0;overflow:hidden;-webkit-transition:all 0.8s ease-in-out;-moz-transition:all 0.8s ease-in-out;-ms-transition:all 0.8s ease-in-out;-o-transition:all 0.8s ease-in-out;transition:all 0.8s ease-in-out;} .entry:hover .ljtags, .lj-view-friends .ljtags{max-height:400px;opacity:1;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--accent);display:inline-block;font-size:var(--entry-meta);letter-spacing:1px;margin:20px 5px 0 0;} #alpha .ljtags a:before{content:'#';} .entry-metadata{display:none;} .entry-linkbar{margin:0;font-size:var(--entry-footer);text-align:right;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{display:inline-block;margin:20px 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:10px;font-size:var(--entry-title);letter-spacing:3px;} .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(--page-inset);} .lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);} /* SIDEBAR */ #beta{background:var(--content-bg);overflow:auto;} .layout-two-column-left #beta{border-right:1px solid var(--borders);} #beta-inner{font-size:var(--sidebar-text);color:var(--darker);text-transform:uppercase;} .module{background:transparent;margin:0;padding:0;border:none;} .module-typelist ul{list-style:none;margin:0;padding:0;text-align:center;letter-spacing:2px;} .layout-two-column-right .module-typelist ul{display:flex;} .layout-two-column-right .module-typelist li{width:100%;} .module-typelist li a{display:block;padding:10px;border-bottom:1px solid var(--borders);} .layout-two-column-right .module-typelist li a{border-right:1px solid var(--borders);} .layout-two-column-right .module-typelist li:last-of-type a{border-right:none;} .module-typelist li a:hover{background:var(--borders);} #tag-hierarchy ul{padding:10px;margin:0;list-style:none;} #tag-hierarchy ul li ul{margin:0 0 11px 0;font-family:var(--main-font);font-size:var(--sidebar-tags);} #tag-hierarchy li{letter-spacing:3px;color:var(--accent);} #tag-hierarchy li a{display:block;color:var(--darker);padding:5px 0;border-bottom:1px solid var(--borders);font-weight:bold;letter-spacing:2px;} #tag-hierarchy li a:hover{color:var(--medium);} .module-layoutcredit{position:fixed;bottom:10px;right:10px;font-size:9px;text-transform:uppercase;letter-spacing:2px;} .module-layoutcredit p{padding:0;margin:0;} .layout-two-column-right .module-categories, .all-link, .module-header, .module-customtext, .module-customtext2, .module-viewlinks, .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 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:

Two Column (Sidebar on Right) - Header with links list
Two Column (Sidebar on Left) - Sidebar with links list and tags list

♡ Disable customized comment pages for your journal: Yes
♡ Show day header: No
♡ 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
♡ URL to link the credit to: https://tessisamess.insanejournal.com/133897.html
♡ 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!