Tessisamess

image preview | tess084

Information

Hey guys! We're kicking the year off with a minimalist mini-header layout with an easily recolored terrazzo background pattern. If there are any code types or themes you'd like to see for 2022, let me know! Enjoy! 💖

Layout Coding

/*-- DAYDREAMING - 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 */ --darker: #222; /* page text */ --medium: #999; /* entry date & tags */ --lightest: #fff; --page-bg: #EEEEE7; --content-bg: #fff; --borders: #E0D0C3; --accent: #D99B7A; /* FONTS */ --main-font: Poppins,calibri,sans-serif; --headings: Poppins Bold,calibri,sans-serif; --title-font: Birthstone Bounce; --body-text: 10px; --title-size: 30px; --header-text: 7px; --entry-titles: 11px; --entry-info: 8px; /* DIMENSIONS */ --entry-width: 475px; --margin: 10px; --padding: 30px; --entry-icon: 55px; --header-icon: 60px; /* IMAGES */ --bg-img: url(https://cdn.discordapp.com/attachments/851970510397112340/928191367715377212/terrazzo.png)center fixed; --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: 'Birthstone Bounce'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/birthstonebounce/v7/ga6SaxZF43lIvTWrktHOTBJZGH7dEd29MZcXL5I.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: 'Poppins'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.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: 'Poppins Bold'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFQ.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);} ::-webkit-scrollbar-track{background:var(--borders);background-size:4px auto;background-position:center;background-repeat:no-repeat;} ::-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);font-family:var(--main-font);font-size:var(--body-text);color:var(--darker);} blockquote{font-style:normal;border-left:1px dotted var(--borders);padding:0 0 0 10px;margin:10px 25px;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-transform:uppercase;letter-spacing:2px;color:var(--accent);font-weight:normal;} img{max-width:100%;} ul{list-style:circle;} hr{border:none;border-bottom:1px dotted var(--borders);margin:10px 25px;} 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{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:calc(var(--margin) * 2);} #container-inner{width:var(--entry-width);margin:0 auto;} .layout-two-column-left #alpha{margin:0;} .layout-two-column-left #beta{float:none;width:auto;} /* 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(--medium);} .content-nav{margin:var(--margin) 0 0 0;font-family:var(--headings);font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;} .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(--entry-info);} .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(--accent);} #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;line-height:1;} .entry-header h3{margin:0;padding:0 0 3px 0;font-size:var(--entry-titles);} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;left:var(--padding);bottom:var(--padding);font-size:var(--entry-info);color:var(--medium);text-transform:uppercase;letter-spacing:2px;} .inner-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + 10px) * -1);float:right;text-align:left;padding:0;width:var(--entry-icon);} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);padding:3px;background:var(--borders);border-radius:20%;box-shadow:1px 1px 1px 0 rgba(0,0,0,0.2);margin:0 0 3px 0;} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;} .pic-poster img{display:none;} .pic-poster a{padding:0 0 0 5px;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:0;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:10px 0 0 0;font-size:0;text-align:left;} #alpha .ljtags a{font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;margin:0 5px 0 0;text-shadow:0 0 0 rgba(0,0,0,0);} #alpha .ljtags a:before{content:'#';} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--borders);} #alpha .ljtags a:hover{text-shadow:.5px 0 0 rgba(0,0,0,0.8);} .entry-metadata{display:none;} .entry-linkbar{margin:0;text-align:right;font-size:var(--entry-info);text-transform:uppercase;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{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 */ .lj-view-archive #alpha-inner{position:relative;} .yearlinks{position:absolute;width:100px;top:calc(var(--header-icon) / 2.3);left:-100px;text-align:center;margin-bottom:0;text-align:right;font-family:var(--headings);font-size:15px;color:var(--borders);text-shadow:1px 1px 1px rgba(0,0,0,0.3);} .year{list-style:none;margin:0;padding:0 10px 0 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:0;position:relative;z-index:3;} #beta-inner{text-transform:uppercase;letter-spacing:1px;font-size:var(--header-text);color:var(--darker);text-align:left;display:flex;align-items:flex-end;line-height:0.5;} .module{display:none;padding:0;background:transparent;margin:0;border:none;} .module-header{display:none;} .module-about{display:block;margin:0 5px calc((var(--header-icon) / 2.5) * -1) -20px;} .module-about .module-content{text-align:center;padding:0;} .userpic a{display:block;} .userpic a:hover{transform:rotate(-8deg);} .userpic img{width:var(--header-icon);height:var(--header-icon);padding:4px;background:var(--content-bg);border:1px solid var(--borders);border-radius:100%;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.05);} .username, .journalname, .usersite{display:none;} .module-customtext{display:block;} .module-customtext .module-content{padding:0;} .module-customtext h1{font-family:var(--title-font);text-transform:none;letter-spacing:0;font-size:var(--title-size);} .module-customtext a{text-shadow:2px 1px 0 var(--lightest),3px 2px 2px rgba(0,0,0,0.3);} .module-customtext a:hover{text-shadow:2px 1px 0 var(--lightest),2px 2px 2px rgba(0,0,0,0.3);} .module-viewlinks{display:block;margin:0 10px 0 auto;} .module-viewlinks ul{list-style:none;margin:0;padding:0;display:flex;} .module-viewlinks li{margin:0 0 0 5px;} .module-viewlinks li a{background:var(--borders);padding:0 4px 0 5px;border-radius:2px;} .module-viewlinks li a:hover{background:var(--accent);color:var(--lightest);} .module-layoutcredit{display:block;position:fixed;bottom:0;left:0;padding:0;margin:15px;width:auto;} .module-layoutcredit p{padding:0;margin:0;} .module-layoutcredit a{background:var(--content-bg);border:1px solid var(--borders);padding:3px 6px 3px 8px;} /* 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.
♡ 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

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

♡ Fill in sticky note if desired.

♡ Body of FIRST custom sidebar module: <a href="https://user.insanejournal.com/"><h1>title;</h1></a>

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