Tessisamess

image preview | tess089 | Home Page (Optional)

Information

Hey guys! I know my old Generator layout, Revenant is a favorite for a lot of people, and I technically did remake this years ago for Patreon, but since it's one of my favorites too I figured a 2022 update to the backend was needed LOL. You can now very easily resize pretty much everything in this layout, and there's an option to add a background to both the sidebar and the page itself. This new S2 version also includes a click-to-open link menu to give you more sidebar capabilities than the original version, and a home page option! 👀

I stayed pretty faithful to the original design, so I definitely recommend only using this version going forward since it's easier to edit and the backend is nicer. Enjoy! 💖

Layout Coding

/*-- DISTILLED - TESSISAMESS - 2022 --*/ /*-- 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 */ --headings-color: #000; --text-color: #222; --date-tags: #999; --lightest: #fff; --page-bg: #E3E4E7; --content-bg: #fff; --borders: rgba(0,0,0,0.1); --accent: #171A23; --accent2: #48516E; /* FONTS */ --main-font: Open Sans,calibri,sans-serif; --headings: Saira Extra Condensed; --title-font: Kristi; --body-text: 12px; --title-text: 18px; --subtitle-text: 27px; --nav-text: 15px; --links-text: 12px; --home-title-text: 23px; --home-subtitle-text: 37px; --home-links-text: 13px; --entry-titles: 18px; --entry-info: 13px; /* DIMENSIONS */ --content-width: 600px; --nav-icons: 45px; --side-width: 450px; --credit-width: 80px; --side-borders: 10px; --side-padding: 20px; --side-icon-padding: 10px; --margin: 50px; --padding: 40px; --entry-icon: 60px; --date-width: 105px; --home-img-width: 275px; --home-content-width: 400px; /* IMAGES */ --bg-img: url()center fixed; --side-bg-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: 'Kristi'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/kristi/v17/uK_y4ricdeU6zwdhDRcS.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; font-stretch: 100%; src: url(https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.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: 'Saira Extra Condensed'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrG2vh2wph.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: 'Barlow Condensed'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/barlowcondensed/v12/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuQ.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/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} /* GENERAL */ ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} *, *:before, *:after{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(--text-color);} blockquote:before, blockquote:after{display:block;content:'';width:20px;height:20px;position:absolute;} blockquote:before{top:-6px;right:-6px;border-top:5px solid var(--borders);border-right:5px solid var(--borders);} blockquote:after{bottom:-6px;left:-6px;border-bottom:5px solid var(--borders);border-left:5px solid var(--borders);} blockquote{position:relative;font-style:normal;padding:10px;border:1px solid var(--borders);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-transform:uppercase;font-weight:normal;} img{max-width:100%;} ul{list-style:square;} hr{border:none;width:5px;height:5px;background:var(--accent);box-shadow:-10px 0 0 0,10px 0 0 0;} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--headings-color);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{color:var(--accent);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-three-column-middle #alpha{margin:0 var(--credit-width) 0 var(--side-width);} .layout-three-column-middle #beta{float:none;width:calc(var(--side-width) - var(--nav-icons));position:fixed;top:0;left:calc((var(--nav-icons) - var(--side-borders)) / 2);bottom:0;} .layout-three-column-middle #gamma{float:none;width:var(--side-width);position:fixed;top:0;left:0;bottom:0;} /* HEADER */ #header{display:none;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:var(--margin) 0;} #alpha-inner{max-width:var(--content-width);margin:0 auto;} #alpha a, #alpha a:visited{color:var(--accent2);} #alpha a:hover{color:var(--date-tags);} .content-nav{margin:var(--margin) 0 0 0;text-transform:uppercase;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:var(--margin);} .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(--headings-color);} #sticky-note .entry-header h2{margin:0;padding:0;font-family:var(--title-font);font-size:var(--subtitle-text);text-transform:none;line-height:1;} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry:before, .entry:after{display:block;content:'';width:20px;height:20px;position:absolute;} .entry:before{top:-5px;left:-5px;border-top:5px solid var(--accent);border-left:5px solid var(--accent);} .entry:after{bottom:-5px;right:-5px;border-bottom:5px solid var(--accent);border-right:5px solid var(--accent);} .entry{margin:0 0 var(--margin) 0;padding:var(--padding);background:var(--content-bg);position:relative;} .entry-header{background:transparent;border:none;padding:0;} .entry-header h3{margin:0;padding:0 0 0 calc(var(--date-width) + 10px);font-size:var(--entry-titles);} .lj-view-day .entry-header h3{padding:0;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--headings-color);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;top:var(--padding);left:var(--padding);width:var(--date-width);background:var(--accent);font-size:var(--entry-titles);color:var(--lightest);text-transform:uppercase;text-align:center;} .inner-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + 20px) * -1);float:right;text-align:center;padding:5px;background:var(--accent);font-family:var(--headings);} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{margin:5px 0 0 0;text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;} .pic-poster img{display:none;} .pic-poster a{color:var(--lightest)!important;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:10px;} .entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;} .ljtags{margin:10px 0 0 0;font-family:var(--headings);font-size:var(--entry-info);text-transform:uppercase;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--date-tags);} .entry-metadata{display:none;} .entry-linkbar{margin:0;font-size:var(--entry-info);text-align:right;text-transform:uppercase;} .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:10px 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: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-inner:before, .lj-view-tags #alpha-inner:after{display:block;content:'';width:20px;height:20px;position:absolute;} .lj-view-tags #alpha-inner:before{top:-5px;left:-5px;border-top:5px solid var(--accent);border-left:5px solid var(--accent);} .lj-view-tags #alpha-inner:after{bottom:-5px;right:-5px;border-bottom:5px solid var(--accent);border-right:5px solid var(--accent);} .lj-view-month #alpha-inner:before, .lj-view-month #alpha-inner:after{display:block;content:'';width:20px;height:20px;position:absolute;} .lj-view-month #alpha-inner:before{top:-5px;left:-5px;border-top:5px solid var(--accent);border-left:5px solid var(--accent);} .lj-view-month #alpha-inner:after{bottom:-5px;right:-5px;border-bottom:5px solid var(--accent);border-right:5px solid var(--accent);} .lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{padding:var(--padding);background:var(--content-bg);position:relative;} /* SIDEBAR */ #beta, #gamma{display:flex;align-items:center;justify-content:center;} #beta-inner{font-size:var(--links-text);color:var(--headings-color);} #gamma-inner{width:65%;font-size:0;color:var(--headings-color);} #gamma{background:var(--accent) var(--side-bg-img);border-right:var(--side-borders) solid var(--content-bg);} #beta{display:none;z-index:2;} #beta:target{display:flex;} #beta:target ~ #gamma .module-customtext{display:none;} .module{display:none;padding:0;background:transparent;margin:0;border:none;} .module-header{display:none;} #beta .module-about{display:block;} .module-about .module-content{text-align:center;padding:0;margin:0 0 var(--side-padding) 0;} .userpic img{border:none;background:var(--content-bg);padding:var(--side-icon-padding);} .username, .journalname, .usersite{display:none;} #gamma .module-customtext2{display:block;} #gamma .module-customtext{display:block;background:var(--content-bg);padding:var(--side-padding);line-height:0.5;} .module-customtext .module-content{padding:0;} .module-customtext img{margin:0 0 var(--side-padding) 0;} .module-customtext .title{font-size:var(--title-text);text-transform:uppercase;} .module-customtext .subtitle{font-size:var(--subtitle-text);font-family:var(--title-font);text-align:right;display:block;color:var(--accent);} .menu{position:fixed;top:calc(((var(--nav-icons) + 10px) * 4) + var(--nav-icons));left:calc(var(--side-width) - (var(--side-borders) / 2) - (var(--nav-icons) / 2));width:var(--nav-icons);height:var(--nav-icons);line-height:var(--nav-icons);background:var(--content-bg);text-align:center;border-radius:100%;font-family:'Material Icons';font-size:var(--nav-text);} .menu a{position:absolute;top:0;left:0;right:0;bottom:0;} .open, #beta:target ~ #gamma .close{display:block;} .close, #beta:target ~ #gamma .open{display:none;} #gamma .module-viewlinks{position:fixed;top:var(--nav-icons);left:calc(var(--side-width) - (var(--side-borders) / 2) - (var(--nav-icons) / 2));display:block;text-align:center;font-family:'Material Icons';} .module-viewlinks ul{list-style:none;margin:0;padding:0;} .module-viewlinks li a{display:block;margin:0 0 10px 0;width:var(--nav-icons);height:var(--nav-icons);line-height:var(--nav-icons);background:var(--content-bg);border-radius:100%;} .module-viewlinks li a:after{font-size:var(--nav-text);} .module-viewlinks li a[href$='com/']:after{content:'home';} .module-viewlinks li a[href*='calendar']:after{content:'search';} .module-viewlinks li a[href*='friends']:after{content:'group';} .module-viewlinks li a[href*='profile']:after{content:'star';} #beta .module-typelist{display:block;} .module-typelist ul{width:250px;list-style:none;margin:0;padding:0;text-align:center;text-transform:uppercase;display:flex;flex-wrap:wrap;justify-content:space-between;} .module-typelist li{width:calc((100% / 2) - 2px);} .module-typelist li a{display:block;background:var(--content-bg);margin:2px 0;padding:2px 0;} .module-typelist li a:hover{background:var(--accent2);color:var(--lightest);} #gamma .module-layoutcredit{position:fixed;top:0;right:0;bottom:0;display:block;width:var(--credit-width);background:var(--accent);border-left:var(--side-borders) solid var(--content-bg);} .module-layoutcredit p{padding:0;margin:0;position:fixed;bottom:var(--nav-icons);right:calc(var(--credit-width) - (var(--side-borders) / 2) - (var(--nav-icons) / 2));display:block;text-align:center;} .module-layoutcredit a{display:block;width:var(--nav-icons);height:var(--nav-icons);line-height:var(--nav-icons);background:var(--content-bg);border-radius:100%;} .module-layoutcredit a:after{font-family:'Material Icons';font-size:var(--nav-text);content:'code';} /* 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);} /* HOME */ .lj-view-recent .home{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;background:var(--accent) var(--side-bg-img);display:flex;align-items:center;justify-content:center;} .home img{margin:0 var(--side-padding) 0 0;background:var(--content-bg);padding:var(--side-padding);max-width:var(--home-img-width);} .home main{color:var(--lightest);min-width:var(--home-content-width);} .home main h1{font-size:var(--home-title-text);line-height:0.5;} .home main h2{font-size:var(--home-subtitle-text);font-family:var(--title-font);text-align:right;display:block;text-transform:none;line-height:0.5;color:var(--accent2);position:relative;} .home main nav{font-family:var(--headings);font-size:var(--home-links-text);display:flex;flex-wrap:wrap;text-align:center;text-transform:uppercase;} .home main nav a{width:calc((100% / 3) - 5px);margin:5px 5px 1px 0;background:var(--content-bg);padding:2px 0;} .home main nav a:hover{background:var(--accent2);color:var(--lightest)!important;}

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: Three Column (Content in Middle)
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No !IMPORTANT
♡ Show Userpics on Entries: Yes or No

♡ Fill in sticky note if desired.

♡ Body of custom sidebar module:

<img src="SIDE_IMG">
<span class="title">TITLE_HERE</span><span class="subtitle">SUBTITLE_HERE</span>

♡ Body of second custom sidebar module:

<div class="menu"><a href="#beta" class="open">menu</a><a href="#" class="close">close</a></div>

(If you don't want a hidden link menu, skip this!)

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

♡ Custom stylesheet: Input the CSS provided and save!

Splash Page

<lj-raw><article class="home"> <img src="HOME_IMG"> <main> <h1>TITLE_HERE</h1> <h2>SUBTITLE_HERE</h2> <nav> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> </nav> </main> </article></lj-raw><noembed>

Installation: Splash Pages

♡ Post new entry.
♡ Use the following settings:

♡ Add your splash page code 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!