Tessisamess

left sidebar | right sidebar | full page | tess088

Information

Hey guys! So, someone in my server was using High Contrast (2017) for their journal, and I still love the design, but oh boy the backend. OH. BOY. After helping them with the edit they wanted to do, I knew what I had to do. I knew... I needed to remake this layout right then and there, so that's what I did.

Visual Perception keeps a lot of the original design, while being miles more user-friendly and much simpler to edit. If you loved High Contrast, but had trouble working with it, or just want an updated code refresh, here's your solution! Enjoy! 💖

(And yes, you can still use it with a stark white header rather than a background image. Just leave the image URL empty and you're all set!)

Layout Coding

/*-- VISUAL PERCEPTIONS - 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: #aaa; --lightest: #fff; --headings-titles-color: #000; --page-bg: #fff; --entry-bg: transparent; --accent: #8D000C; --accent2: #111; /* FONTS */ --main-font: Raleway,calibri,arial,sans-serif; --headings: Antro; --title-font: Antro; --body-text: 13px; --title-text: 70px; --subtitle-text: 12px; --nav-text: 9px; --side-text: 12px; --side-titles: 25px; --side-links:10px; --entry-titles: 30px; --entry-info: 9px; /* DIMENSIONS */ --content-width: 925px; --content-gap: 90px; --content-inset: 60px; --header-height: 300px; --side-width: 250px; --side-margin: 35px; --sticky-padding: 35px; --entry-padding: 0; --entry-margin: 60px; --entry-icon: 50px; /* IMAGES */ --header-bg: url()center; --side-img: url()center; --img-round: 100%; --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: 'Raleway'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/raleway/v27/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.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:Antro;src:url(https://dl.dropbox.com/s/2gbxrwiso82gsii/Antro_Vectra.otf);} /* 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);font-family:var(--main-font);font-size:var(--body-text);color:var(--text-color);} blockquote{font-style:normal;padding:0 0 0 15px;border-left:5px solid var(--accent2);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;color:var(--headings-color);} img{max-width:100%;} ul{list-style:square;} hr{border:none;height:2px;background:var(--accent2);} 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-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--content-gap));} .layout-two-column-left #beta{float:left;width:var(--side-width);} .layout-two-column-right #alpha{margin:0 calc(var(--side-width) + var(--content-gap)) 0 0;} .layout-two-column-right #beta{float:right;width:var(--side-width);} /* HEADER */ #header{padding:0;color:var(--headings-color);} #nav-below{display:block;max-width:var(--content-width);margin:0 auto;box-shadow:var(--content-width) 0 0 0 var(--accent2),calc(var(--content-width) * -1) 0 0 0 var(--accent2);background:var(--accent2);list-style:none;padding:0;font-size:var(--nav-text);text-align:center;text-transform:uppercase;letter-spacing:4px;position:relative;} #nav-above{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-below a{display:inline-block;padding:10px 0 10px 4px;width:25%;color:var(--lightest);border-right:1px solid;box-shadow:0 0 0 0 var(--accent2),0 0 0 0 var(--accent2);} .current a{color:var(--lightest);border-left:1px solid;} #nav-below a:hover{letter-spacing:6px;box-shadow:0 -10px 0 0 var(--accent2),0 10px 0 0 var(--accent2);} #header-text{height:var(--header-height);display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--page-bg) var(--header-bg);background-size:cover;border:none;margin:0;padding:0;line-height:0.5;} #header-text a{color:var(--headings-titles-color);} #banner-header{font-family:var(--title-font);text-align:center;font-size:var(--title-text);} #banner-description{font-family:var(--main-font);text-align:center;font-size:var(--subtitle-text);margin:0;text-transform:uppercase;letter-spacing:6px;color:var(--headings-titles-color);} /* BODY OF PAGE */ #pagebody{padding:var(--content-inset);} #pagebody-inner{max-width:var(--content-width);margin:0 auto;} /* 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(--entry-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(--entry-margin);font-family:var(--main-font);font-size:var(--entry-info);text-transform:uppercase;letter-spacing:4px;color:var(--date-tags);} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry{background:var(--accent2);padding:var(--sticky-padding);} #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:center;} #sticky-note .entry-header h2{margin:0;padding:0;font-size:var(--entry-titles);color:var(--lightest);} #sticky-note .entry-text{padding:0;color:var(--lightest);} #sticky-note .entry-content{margin:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 var(--entry-margin) 0;padding:var(--entry-padding);background:var(--entry-bg);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{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:var(--entry-info);color:var(--date-tags);width:var(--entry-icon);line-height:var(--entry-icon);position:absolute;top:calc(var(--entry-icon) + 10px);left:0;text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .mid-entry-userpic{display:initial;float:left;text-align:center;padding:0;margin:0 15px 0 0;width:var(--entry-icon);} .mid-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);border-radius:var(--img-round);} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster{text-align:center;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:10px;} .entry-text{padding:0 0 0 calc(var(--entry-icon) + 15px);min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:20px 0 0 0;font-size:0;text-align:left;} #alpha .ljtags a, #alpha .ljtags a:visited{font-size:var(--entry-info);color:var(--date-tags);display:inline-block;margin:0 8px 0 0;border:1px solid var(--date-tags);font-weight:bold;opacity:0.8;padding:2px 5px;border-radius:2px;} #alpha .ljtags a:before{content:'#';} #alpha .ljtags a:hover{opacity:1;color:var(--accent2)!important;border:1px solid var(--accent2);} .entry-metadata{display:none;} .entry-linkbar{margin:0;font-size:var(--entry-info);text-align:right;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:20px 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, .lj-view-month #alpha{padding:var(--entry-padding);background:var(--entry-bg);} .lj-view-tags #alpha h2{font-size:var(--entry-titles);} /* SIDEBAR */ #beta-inner:before{content:'';display:block;height:var(--side-width);background:var(--date-tags) var(--side-img);background-size:cover;border-radius:var(--img-round);margin:0 0 var(--side-margin) 0;} #beta-inner{font-size:var(--side-text);color:var(--headings-color);line-height:1.5;} .module{padding:0;background:transparent;margin:0 0 var(--side-margin) 0;border:none;} .module-header{background:transparent;border:none;} .module-header h3{margin:0;padding:0;font-size:var(--side-titles);} .module-header a, .module-header a:visited{color:var(--headings-color);} .module-customtext .module-header{display:none;} .module-customtext .module-content{padding:0;text-align:center;font-style:italic;} .module-typelist ul{list-style:none;margin:0;padding:0;font-size:var(--side-links);text-transform:uppercase;letter-spacing:2px;} .module-typelist li:after{content:'';display:block;border-bottom:1px solid;opacity:0.1;} .module-typelist li a{display:block;padding:5px 0;} .module-typelist li a:hover{background:var(--accent2);color:var(--lightest);padding:5px 0 5px 5px;} #tag-hierarchy ul{padding-left:0;margin-left:20px;} .tag-count{font-size:x-small;} .all-link{text-align:center;line-height:1;font-size:var(--entry-info);} .all-link p{margin:0;padding:15px 0 0 0;} .all-link a{background:var(--accent2);color:var(--lightest);text-transform:uppercase;letter-spacing:2px;padding:10px;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:0;font-family:var(--headings);font-size:var(--side-titles);font-weight:bold;} .module-pagesummary, .module-calendar, .module-viewlinks, .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, fill in your title and subtitle, 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) - Left sidebar
Two Column (Sidebar on Right) - Right sidebar

♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ Fill in first custom sidebar (italics under image) module if desired.
♡ Fill in second custom sidebar (regular blurb) module if desired.

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