Tessisamess

image preview | tess100

Information

Hey guys! It finally happened. It's... my 100th free layout. 🎉 Let's celebrate it with a remake of one of my first layouts, Embiggen! This updated version is pretty faithful to the original while still being updated to look, in my opinion, MUCH nicer. It's also, obviously, Complete Style instead of Generator this time, which means it's a lot easier to edit. Enjoy, and here's to a hundred more! 💖

Layout Coding

/*-- ROXANNE - TESSISAMESS - 2023 --*/ /*-- 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: #A82424; --text-color: #eee; --date-tags: #555; --lightest: #fff; --page-bg: #000; --content-bg: #101010; --links-bg: #151515; --borders: rgba(0,0,0,0.1); --accent: #A82424; /* FONTS */ --main-font: calibri,arial,sans-serif; --headings: georgia; --title-font: georgia; --body-text: 13px; --side-text: 13px; --side-titles: 25px; --entry-titles: 25px; --entry-info: 13px; /* DIMENSIONS */ --content-width: 1000px; --side-width: 375px; --side-padding: 20px; --side-margin: 10px; --side-icons: 100px; --nav-per-row: 4; --links-per-row: 2; --margin: 30px; --padding: 30px; --entry-icon: 70px; /* IMAGES */ --lg-img: url()center; --sm-img1: url()center; --sm-img2: 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 */ /* GENERAL */ ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} ::-webkit-scrollbar-track{background:var(--page-bg);} ::-webkit-scrollbar{width:7px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--page-bg);border-radius:5px;} *, *:before, *:after{box-sizing:border-box;} body{margin:0;padding:0;background:var(--page-bg) url(http://i.imgur.com/sbGFadU.png)top left repeat fixed;font-family:var(--headings);font-size:var(--body-text);color:var(--text-color);} blockquote{font-style:normal;padding:10px;background:var(--links-bg);border-left:3px solid var(--accent);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;text-transform:lowercase;font-style:italic;letter-spacing:-1px;} img{max-width:100%;} ul{list-style:circle;} hr{border:0;border-bottom:1px dotted var(--accent);} 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;padding:var(--margin);} #container-inner{max-width:var(--content-width);margin:0 auto;} .layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--margin));} .layout-two-column-left #beta{float:left;width:var(--side-width);} /* HEADER */ #header{display:none;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--date-tags);} .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);} .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-size:var(--entry-titles);} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 var(--margin) 0;padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);position:relative;} .entry-header{background:transparent;border:none;padding:0;} .entry-header h3{margin:0;padding:0;font-size:var(--entry-titles);} #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);right:var(--padding);font-size:var(--entry-info);text-transform:lowercase;font-style:italic;letter-spacing:-1px;color:var(--date-tags);} .inner-entry-userpic{position:absolute;top:15px;right:calc(var(--entry-icon) * -1);float:right;text-align:left;padding:0;width:var(--entry-icon);} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);border-radius:0 var(--entry-icon) var(--entry-icon) 0;padding:5px 5px 5px 0;background:var(--content-bg);border:1px solid var(--borders);border-left;0;object-fit:cover;object-position:center;} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{text-align:left;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;line-height:0.5;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .pic-poster a{background:var(--accent);display:inline-block;color:var(--text-color)!important;padding:5px;margin:5px 0 0 0;} .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:lowercase;font-style:italic;letter-spacing:-1px;} #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:lowercase;font-style:italic;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:10px 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;} .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);background:var(--content-bg);border:1px solid var(--borders);} /* SIDEBAR */ #beta{padding:var(--side-padding) var(--side-padding) calc(var(--side-padding) - var(--side-margin)) var(--side-padding);background:var(--content-bg);border:1px solid var(--borders);border-radius:100px 0 0 0;position:fixed;bottom:var(--margin);} #beta-inner{font-size:var(--side-text);color:var(--text-color);} .module{padding:0;margin:0 0 var(--side-margin) 0;background:transparent;border:none;} .module-header{background:transparent;border:none;display:none;} .module-header h3{margin:0;padding:0;font-family:var(--title-font);font-size:var(--side-titles);color:var(--headings-color);} .module-header a, .module-header a:visited{color:var(--headings-color);} .module-customtext .module-inner{display:grid;grid-template-columns:auto auto var(--side-icons);grid-template-rows:var(--side-icons) var(--side-icons);grid-gap:10px;grid-auto-flow:row;grid-template-areas:'lg lg sm1''lg lg sm2';} .module-customtext .module-inner:before{content:'';grid-area:sm1;background:var(--links-bg) var(--sm-img1);background-size:cover;} .module-customtext .module-inner:after{content:'';grid-area:sm2;background:var(--links-bg) var(--sm-img2);background-size:cover;} .module-customtext .module-content{padding:0;font-size:0;grid-area:lg;background:var(--links-bg) var(--lg-img);background-size:cover;border-radius:80px 0 0 0;} .module-customtext2 .module-header{display:block;} .module-customtext2 .module-content{font-family:var(--main-font);background:var(--links-bg);padding:8px;} .module-viewlinks{margin:0;} .module-viewlinks ul, .module-typelist ul{list-style:none;margin:0;padding:0;text-transform:lowercase;font-style:italic;letter-spacing:-1px;text-align:center;} .module-list{display:flex;flex-wrap:wrap;} .module-list-item a{display:block;background:var(--links-bg);padding:5px 8px;} .module-list-item a:hover{letter-spacing:1px;transform:scale(1.15);box-shadow:0 0 5px 0 rgba(0,0,0,0.5);} .module-viewlinks li{width:calc((100% / var(--nav-per-row)) - 4px);margin:0 2px 4px 2px;} .module-typelist li{width:calc((100% / var(--links-per-row)) - 4px);margin:0 2px 4px 2px;} .module-layoutcredit{position:fixed;bottom:10px;left:10px;margin:0;text-transform:lowercase;font-style:italic;letter-spacing:-1px;} .module-layoutcredit p{padding:0;margin:0;} .module-layoutcredit a{background:var(--content-bg);border:1px solid var(--borders);padding:3px 10px;} .module-pagesummary, .module-calendar, .module-categories, .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, 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)
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Yes or No

♡ Navigation link names: Recent/Archive/Friends/Profile

♡ Fill in sticky note if desired.

♡ Your first custom sidebar module displays your images, so if the spaces for those images aren't showing up, check your sidebar dropdowns and make sure it's enabled (it will hide text to account for this automatically).
♡ Fill in second custom sidebar module if desired. You'll want to disable Custom Text Two in the sidebar ordering dropdowns if you don't want to use this module.

♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/154635.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!