Tessisamess

image preview | tess077

Information

Hey guys! This month's layout is a more classic setup, and has a ton of easily edits specs, including all dimensions, padding, and font sizes, so you can truly make this look any way you like. Enjoy! 💖

Layout Coding

/*-- CHARACTERIZE - 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{ --darkest: #000; /* headings */ --medium: #999; /* entry date */ --lightest: #fff; --accent: #64C0B0; --text: #333; --page-bg: #ddd; --bg-img: url(https://i.imgur.com/8vRBVC8.png)center fixed; --content: rgba(255,255,255,0.6); --borders: rgba(255,255,255,0.6); --content-width: 600px; --icon: 65px; --padding: 20px; --top-pic: 130px; --top-radius: 100%; --top-border: 4px; --top-pic-img: url()center; --shadow: 7px 7px 0 0; /* box shadow on top pic; color is BORDERS */ --top-title: 80px; --title-font: Sacramento; --subtitle-spacing: 6px; /* letter spacing for topbar subtitle */ --main-font: Open Sans,helvetica,arial,sans-serif; --headings: Sacramento; --font1: 12px; /* page text */ --font2: 30px; /* headings */ --font3: 9px; /* entry date/tags/footer */ --font4: 8px; /* header & nav */ --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: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/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; } @font-face { font-family: 'Sacramento'; font-style: normal; font-weight: 400; src: local('Sacramento'), local('Sacramento-Regular'), url(https://fonts.gstatic.com/s/sacramento/v8/buEzpo6gcdjy0EiZMBUG4C0f_Q.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(--page-bg) var(--bg-img);font-family:var(--main-font);font-size:var(--font1);color:var(--text);} blockquote{font-style:normal;padding:calc(var(--padding) / 2);border:1px dashed var(--content);background:linear-gradient(var(--content),var(--content))padding-box,linear-gradient(to bottom right,var(--accent),var(--borders) 49%, var(--accent))border-box;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);line-height:1;font-weight:normal;} img{max-width:100%;} ul{list-style:circle;} hr{border:none;border-top:1px dashed var(--accent);} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--darkest);text-decoration:none;} 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:calc(var(--padding) * 2.5) 0 0 0;} .layout-two-column-left #beta{float:none;width:auto;} /* HEADER */ #header{padding:0;color:var(--darkest);} #nav-above{position:fixed;z-index:2;top:10px;right:10px;list-style:none;margin:0;padding:0;font-size:var(--font4);letter-spacing:2px;font-weight:bold;text-transform:uppercase;} #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:none;} /* BODY OF PAGE */ #pagebody{padding:calc(var(--padding) * 2.5);} #pagebody-inner{margin:0 auto;max-width:var(--content-width);} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--darkest);} .content-nav{margin:var(--padding) 0 0 0;font-size:0;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} .content-nav a{margin:0 5px;font-size:var(--font3);text-transform:uppercase;font-weight:bold;letter-spacing:2px;padding:3px 10px 3px 12px;background:var(--content);border:1px solid var(--borders);} #tagpage-header, .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:calc(var(--padding) * -1) 0 var(--padding) 0;padding:0;font-size:var(--font2);line-height:0;} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 calc(var(--padding) * 2) 0;padding:var(--padding);background:var(--content);border:1px solid var(--borders);position:relative;} .entry-header{background:transparent;border:none;padding:0;line-height:0;} .entry-header h3{margin:calc(var(--padding) * -1) 0 var(--padding) 0;padding:0;font-size:var(--font2);line-height:0;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);} .entry-header b{font-weight:normal!important;} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;top:-9px;right:0;font-size:var(--font3);text-transform:uppercase;font-weight:bold;letter-spacing:2px;color:var(--medium);} .inner-entry-userpic{float:right;text-align:center;padding:0;} .inner-entry-userpic img{position:absolute;top:0;right:calc((var(--icon) + 10px) * -1);width:var(--icon);height:var(--icon);padding:3px;border:1px dashed var(--content);background:linear-gradient(var(--content),var(--content))padding-box,linear-gradient(to bottom right,var(--accent),var(--borders) 49%, var(--accent))border-box;border-radius:10px;} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{position:absolute;bottom:var(--padding);left:var(--padding);display:flex;font-size:var(--font3);text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .pic-poster .ljuser ~ .ljuser:before{content:'in ';margin:0 0 0 4px;} .entry-content{margin-top:calc(var(--padding) / 2);} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:0 0 2px 0;font-size:0;text-align:left;} #alpha .ljtags a, #alpha .ljtags a:visited{background:var(--content);border:1px solid var(--accent);border-radius:3px;padding:2px 4px 2px 7px;margin:0 5px 0 0;font-size:var(--font3);text-transform:uppercase;font-weight:bold;letter-spacing:1px;color:var(--text);} .entry-metadata{display:none;} .entry-linkbar{margin:0;font-size:var(--font3);text-transform:uppercase;font-weight:bold;letter-spacing:2px;text-align:right;} .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:var(--padding) 0 0 10px;display:inline-block;} .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(--font2);font-family:var(--headings);} .year{list-style:none;margin:0;padding:0;} .year li{display:inline;padding:0;margin:0 5px;} .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);border:1px solid var(--borders);} /* SIDEBAR */ #beta:before{display:block;content:'';width:var(--top-pic);height:var(--top-pic);margin:0 25px 0 0;background:var(--content) var(--top-pic-img);background-size:cover;border-radius:var(--top-radius);box-shadow:var(--shadow) var(--borders);border:var(--top-border) solid var(--accent);} #beta{display:flex;align-items:center;justify-content:center;} #beta-inner{font-size:var(--font4);text-transform:uppercase;color:var(--darkest);width:calc(100% - var(--top-pic) - 25px);} .module{display:none;padding:0;background:transparent;margin:0;border:none;} .module-header{display:none;} .module-customtext{display:block;} .module-customtext h1{font-family:var(--title-font);font-size:var(--top-title);line-height:0;color:var(--accent)!important;text-transform:none;} .module-customtext b{letter-spacing:var(--subtitle-spacing);display:block;margin:-30px 0 5px 0;opacity:0.7;} .module-customtext .module-content{padding:0;} .module-typelist{display:block;} .module-typelist ul{list-style:none;margin:0 0 40px 0;padding:0;display:flex;letter-spacing:3px;} .module-typelist li{margin:0 5px 0 0;} .module-typelist li a{background:var(--content);border:1px solid var(--borders);padding:2px 4px 2px 7px;} .module-layoutcredit{display:block;} .module-layoutcredit{position:fixed;left:10px;bottom:10px;font-size:20px;line-height:1;} .module-layoutcredit p{padding:0;margin:0;} /* 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 !IMPORTANT
♡ Show Userpics on Entries: Can choose No if you only want them on the Friends page.
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ Fill in custom sidebar module with your header:

<a href="http://USER.insanejournal.com/"><h1>Title</h1></a><b>Subtitle</b>

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