Tessisamess

image preview | tess068

Information

This layout brought to you by gradients lmfao. It's been a super long week with trips in and out of town, so I'm gonna keep this short and sweet. The Console is a self-contained layout made to match the bio code Io I put up last week. Have fun customizing the colors to make cool gradient combos! (You can also replace any RGBA value with a HEX value for solid colors.) Can't wait to see edits of this, and maybe even some edits to make this layout non-scifi! A quick way to remove the scifi feel from this layout would be to scale back on the use of gradients and transparency and then to do a search on border-radius and remove all instances found. Enjoy! ♥

Layout Coding

/*-- THE CONSOLE - TESSISAMESS - 2019 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --dark: rgba(0,0,0,0.8); /* text shadow */ --medium2: rgba(255,255,255,0.2); /* blockquote gradient, horizontal rule gradient, page nav link border, sticky note gradient, entry header gradient, userpic border, date and links border, sidebar module gradient, sidebar image border, sidebar link gradient */ --medium1: rgba(255,255,255,0.1); /* scrollbar track, main container background & border, page nav link background, calendar each day background, sidebar link gradient */ --lightest: #fff; /* page selection text, page links, header text and links, entry content link hover, entry tag links */ --light-accent: #D9E9F6; /* scrollbar background, page text, end of heading gradient */ --accent: #A998FF; /* page selection background, page link hover, entry content links, calendar day name background, start of heading gradient */ --main-font: Saira Extra Condensed,monospace; --headings: Space,arial black,sans-serif; --title-font: Space,arial black,sans-serif; --container-height: 500px; --container-width: 1100px; --bg-overlay: rgba(0,5,55,0.6); /* overlay color on TOP of page background so that the background image doesn't overwhelm the page content */ --page-bg: url(https://i.imgur.com/NZmlJVT.jpg)center fixed; --side-img: url(https://i.imgur.com/g0oiVNY.gif)center no-repeat; --side-img-height: 150px; --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:'Saira Extra Condensed';font-style:normal;font-weight:400;src:local('Saira ExtraCondensed Regular'), local('SairaExtraCondensed-Regular'), url(https://fonts.gstatic.com/s/sairaextracondensed/v4/-nFiOHYr-vcC7h8MklGBkrvmUG9rbpkisrTj6Ej0.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:Space;src:url(https://dl.dropbox.com/s/g0kjps043h4vb92/space%20age.otf);} /* GENERAL */ ::-webkit-scrollbar-track{background:var(--medium1);border-radius:10px;} ::-webkit-scrollbar{width:5px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--light-accent);border-radius:10px;} ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} *{box-sizing:border-box;} html{background:var(--page-bg);background-size:cover;} body{margin:0;padding:0;background:var(--bg-overlay);font-family:var(--main-font);font-size:16px;color:var(--light-accent);text-shadow:1px 1px 0 var(--dark);} blockquote{margin:15px 25px 0 25px;padding:20px;background:linear-gradient(to bottom,var(--medium2),transparent);border-radius:50px/15px;font-style:italic;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);font-weight:normal;margin:0;color:transparent;-webkit-background-clip:text;background-image:linear-gradient(to right,var(--accent),var(--light-accent));text-shadow:none;} img{max-width:100%;} ul{list-style:square;} hr{background:linear-gradient(to right,var(--medium2),transparent)left bottom no-repeat;height:3px;border:none;} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--lightest);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;display:flex;align-items:center;justify-content:center;height:100vh;} #container-inner{width:var(--container-width);border-radius:60px/20px;padding:50px;background:var(--medium1);border:1px solid var(--medium1);margin:0 40px;} .layout-two-column-left #alpha{margin:0 0 0 300px;} .layout-two-column-left #beta{float:left;width:260px;} /* HEADER */ #header{padding:0 0 30px 0;color:var(--lightest);font-family:var(--headings);} #banner-text{display:flex;justify-content:space-between;} #nav-below{display:block;list-style:none;margin:0;padding:0;font-size:12px;} #nav-above{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-below a{margin-left:10px;display:inline-block;padding:3px 8px;background:var(--medium1);border:1px solid var(--medium2);border-radius:30px/10px;opacity:0.5;} #nav-below a:hover, .current a{color:var(--lightest);opacity:1!important;} #header-text{background:transparent;border:none;margin:0;padding:0;display:flex;align-items:center;} #banner-header{font-family:var(--title-font);text-align:center;font-size:14px;margin:0 10px 0 0;line-height:0;} #banner-description{font-family:var(--headings);text-align:center;font-size:large;margin:0;font-size:12px;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha-inner{max-height:var(--container-height);overflow:auto;padding:15px 20px 0 0;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--lightest);} .content-nav{margin:30px 0 0 0;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:40px;font-size:20px;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note{padding:20px;background:linear-gradient(to bottom,var(--medium2),transparent);border-radius:50px/15px;margin:-15px 0 10px 0;} #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:center;} #sticky-note .entry-header h2{margin:0;padding:0;} #sticky-note .entry-content{margin-top:5px;} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 50px 0;padding:0;position:relative;} .entry-header{background:transparent;border:none;padding:0;text-shadow:none;} .entry-header h3{margin:0 0 0 55px;background:linear-gradient(to right,var(--medium2),transparent)left bottom no-repeat;padding:0 0 0 10px;font-size:24px;height:24px;line-height:23px;} #alpha .entry-header h3 a, #alpha .entry-header h3 a:visited{color:transparent;-webkit-background-clip:text;background-image:linear-gradient(to right,var(--accent),var(--light-accent));} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} #alpha .entry-header a:hover{color:var(--lightest);} .entry-header h3 a:empty{display:block;height:24px;} .entry-datetime{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--light-accent);position:absolute;left:0;bottom:0;} .mid-entry-userpic{display:block;float:left;text-align:center;padding:0;margin:-15px 0 0 0;} .mid-entry-userpic img{width:55px;height:55px;padding:3px;background:linear-gradient(to right,var(--medium2),var(--medium2) 15%,transparent 15%,transparent 85%,var(--medium2) 85%);border-radius:50px/15px;} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster{z-index:3;position:absolute;right:5px;top:23px;text-align:right;font-size:12px;letter-spacing:1px;text-transform:uppercase;display:flex;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .pic-poster .ljuser:before{content:'Posted by ';} .pic-poster .ljuser ~ .ljuser:before{content:'in ';margin:0 0 0 4px;} .entry-content{margin-top:35px;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:30px 0 0 0;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--lightest);} .entry-metadata{display:none;} .entry-linkbar{margin:10px 0 0 0;padding:10px 0 0 0;border-top:1px solid var(--medium2);font-size:12px;text-transform:uppercase;text-align:right;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{margin:0 0 0 10px;} .entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;} /* ARCHIVE VIEW */ .yearlinks{text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-size:18px;} .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);font-size:14px;border-radius:30px/10px;} .yeartable td{border:none!important;background:var(--medium1);padding:5px;} /* TAGS & MONTH VIEW */ .lj-view-tags #alpha, .lj-view-month #alpha{padding:0;} /* SIDEBAR */ #beta-inner{font-size:12px;color:var(--light-accent);} .module{margin:0;border:none;padding:20px;background:linear-gradient(to bottom,var(--medium2),transparent);border-radius:50px/15px;} .module-content{text-transform:uppercase;letter-spacing:2px;} .module-header{background:transparent;border:none;padding:0 0 3px 0;} .module-header h3{margin:0;padding:0;font-size:16px;} .module-header a, .module-header a:visited{color:var(--lightest);} .module-about{padding:5px;;margin:0 0 15px 0;background:linear-gradient(to right,var(--medium2),var(--medium2) 15%,transparent 15%,transparent 85%,var(--medium2) 85%);max-width:100%;} .module-about .module-inner{background:var(--side-img);background-size:cover;height:var(--side-img-height);border-radius:50px/15px;} .module-about .module-header{display:none;} .userpic, .journalname, .usersite{display:none;} .module-customtext .module-content{padding:0;text-align:justify;font-size:11px;} .module-typelist ul{list-style:none;margin:0;padding:0;} .module-typelist li a{display:block;background:linear-gradient(to right,var(--medium1),transparent)left bottom no-repeat;padding:3px 0 3px 6px;margin:0 0 4px 0;} .module-typelist li a:hover{background:linear-gradient(to right,var(--medium2),transparent)left bottom no-repeat;color:var(--lightest);letter-spacing:4px;} .module-typelist li:last-of-type a{margin:0;} .module-layoutcredit{position:fixed;bottom:20px;left:20px;padding:0;background:transparent;text-align:center;} .module-layoutcredit .module-header{padding:0;} .module-layoutcredit .module-header h3{font-size:13px;} .module-layoutcredit p{padding:0 0 0 4.5px;margin:0;letter-spacing:4.5px;} .all-link, .module-categories, .module-customtext2, .module-viewlinks, .module-pagesummary, .module-calendar, .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 16px!important;filter:invert(100%);} 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, 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
♡ Link text to leave a comment: Comment
♡ Navigation link names: 01/02/03/04
♡ Text to put in the header when the entry has no subject: Remove brackets from 'No Subject', change to a new title, or add   for a blank gradient bar. Do NOT just blank the field or you'll have spacing issues.
♡ Fill in sticky note if desired.
♡ Fill in custom sidebar module if desired.
♡ Person to credit if you have an individually created layout: Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ 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!