Tessisamess

Two Column (Sidebar on Left) | tess097

Information

Hey guys! A user needed help with the original version of this layout, Tilt (2017), and when I went to look at the CSS I basically said, "Nah, I'm making it again" lmfao. This remake stays pretty close to the original, but I did simplify the date/tags/entry links because, as cute as they were in the original, they were also really easy to break.

Like the original, this layout utilizes a transparent image for the header background, and you have the option of using an additional background image for the page itself that the image will overlay itself on for added fun. Enjoy! 💖

Layout Coding

/*-- OFF-KILTER - 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: #000; --text-color: #222; --date-tags: #999; --lightest: #fff; --header-footer-bg: #AE8C8A; --content-bg: #FCF7F7; --borders: rgba(0,0,0,0.1); --accent: #7D7254; --accent2: #E5E0E0; --accent3: #AF7673; /* FONTS */ --main-font: Open Sans,calibri,arial,sans-serif; --headings: Economica; --title-font: Economica; --body-text: 14px; --title-text: 56px; --subtitle-text: 17px; --nav-text: 12px; --side-text: 13px; --side-titles: 27px; --side-links: 16px; --entry-titles: 30px; --entry-info: 13px; /* DIMENSIONS */ --content-width: 1200px; --content-spacing: 80px; --page-inset: 50px; --header-height: 375px; --header-img-height: 105%; --header-title-margin: 350px; /* position title & subtitle */ --footer-height: 70px; --side-width: 330px; --margin: 40px; --padding: 30px; --entry-icon: 60px; /* DISPLAY */ --side-img-display: block; /* CHANGE TO none FOR NO IMAGE */ /* IMAGES */ --header-footer-img: url()center; --header-transparent-img: url()center bottom no-repeat; --sidebar-img: 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 */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.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: 'Economica'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/economica/v13/Qw3aZQZaHCLgIWa29ZBTjecUDXx4.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(--content-bg);} ::-webkit-scrollbar{width:7px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--content-bg);border-radius:5px;} *, *:before, *:after{box-sizing:border-box;} body{margin:0;padding:0;background:var(--header-footer-bg) var(--header-footer-img);background-size:cover;font-family:var(--headings);font-size:var(--body-text);color:var(--text-color);} blockquote{margin:45px 12%;padding:10px 20px;font-style:normal;position:relative;background:var(--accent2);z-index:2;} blockquote:before, blockquote:after{content:'';background:var(--accent2);height:30px;left:0;right:0;z-index:-1;} blockquote:before{transform:skewY(-2deg);position:absolute;top:-15px;} blockquote:after{transform:skewY(-2deg);position:absolute;bottom:-15px;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;text-transform:uppercase;color:var(--accent3);} img{max-width:100%;} ul{list-style:circle;} hr{border:none;border-bottom:1px solid var(--borders);} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--accent);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:0 0 var(--footer-height) 0;} .layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--content-spacing));} .layout-two-column-left #beta{float:left;width:var(--side-width);} /* HEADER */ #header{padding:0;color:var(--headings-color);height:var(--header-height);background:transparent var(--header-transparent-img);background-size:auto var(--header-img-height);} #banner-text{height:var(--header-height);margin:0 calc(50vw - var(--header-title-margin)) 0 0;display:flex;align-items:center;justify-content:flex-end;text-transform:uppercase;letter-spacing:1px;line-height:0.9;} #nav-above{position:absolute;top:0;left:0;list-style:none;margin:0;padding:15px;font-size:var(--nav-text);} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-above a{margin-right:10px;color:var(--content-bg);} .current a{color:var(--content-bg);} #header-text{background:transparent;border:none;margin:0;padding:0;} #header-text a{color:var(--content-bg);} #banner-header{font-family:var(--title-font);text-align:center;font-size:var(--title-text);} #banner-description{background:var(--content-bg);margin:0;padding:5px 10px;font-family:var(--headings);text-align:center;font-size:var(--subtitle-text);color:var(--header-footer-bg);} /* BODY OF PAGE */ #pagebody{background:var(--content-bg);position:relative;padding:var(--page-inset);z-index:2;} #pagebody:before, #pagebody:after{content:'';background:var(--content-bg);height:60px;left:0;right:0;z-index:1;} #pagebody:before{transform:skewY(-1.8deg);position:absolute;top:-30px;} #pagebody:after{transform:skewY(1.8deg);position:absolute;bottom:-30px;} #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(--margin) 0 0 0;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);color:var(--borders);} .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(--accent3);} #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;} #sticky-note .entry{padding:10px 40px 0 40px;border:none;margin:0 0 calc(var(--margin) * 1.6) 0;font-style:normal;position:relative;background:var(--accent2);z-index:2;} #sticky-note .entry:before, #sticky-note .entry:after{content:'';background:var(--accent2);height:40px;left:0;right:0;z-index:-1;} #sticky-note .entry:before{transform:skewY(-2deg);position:absolute;top:-13px;} #sticky-note .entry:after{transform:skewY(-2deg);position:absolute;bottom:-20px;} /* ENTRIES */ .entry{margin:0 0 var(--margin) 0;padding:0 var(--padding) 0 0;position:relative;border-right:1px solid var(--borders);} .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(--accent3);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;top:0;right:var(--padding);font-size:var(--entry-info);color:var(--date-tags);text-transform:uppercase;letter-spacing:1px;} .inner-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + var(--padding) + 5px) * -1);width:calc(var(--entry-icon) + var(--padding) + 5px);float:right;text-align:left;padding:0;} .inner-entry-userpic img{width:calc(var(--entry-icon) + 5px + 2px);height:var(--entry-icon);border-left:5px solid var(--accent3);padding:0 0 0 2px;margin:0 0 3px 0;} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{text-align:left;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:inline-block;padding:0 0 0 7px;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:10px;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;font-family:var(--main-font);} .ljtags{margin:15px 0 0 0;border-left:10px solid var(--accent3);padding:0 0 0 5px;font-size:var(--entry-info);font-family:var(--headings);text-transform:uppercase;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:uppercase;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:15px 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{padding:0;border:none;} .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);} /* SIDEBARS */ #beta:before{content:'';display:var(--side-img-display);margin:0 auto var(--margin) auto;height:calc(var(--side-width) / 1.2);width:calc(var(--side-width) / 1.2);border-radius:100%;background:var(--borders) var(--sidebar-img);background-size:cover;} #beta-inner{font-size:var(--side-text);color:var(--text-color);} .module{padding:0;background:transparent;margin:0 0 var(--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-content, .module-customtext2 .module-content{padding:0;font-family:var(--main-font);} .module-list{text-transform:uppercase;letter-spacing:2px;font-size:var(--side-links);} .module-list-item a{display:block;padding:4px;border-bottom:1px solid var(--borders);} .module-typelist ul, .module-pagesummary ul{list-style:none;margin:0;padding:0;} .module-calendar .module-content{text-align:center;} .module-calendar table{border:none;font-size:small;margin-right:auto;margin-left:auto;margin-top:10px;width:100%;} .module-calendar td{border:3px solid var(--content-bg);background:var(--accent2);padding:5px;margin:5px;position:relative;} .module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:var(--accent3);padding:5px;color:var(--content-bg);} .module-calendar th{background:var(--accent);padding:5px;border:3px solid var(--content-bg);color:var(--content-bg);font-weight:bold;} #tag-hierarchy ul{padding:0;margin:0;list-style:none;text-transform:uppercase;letter-spacing:2px;font-size:var(--side-links);} #tag-hierarchy ul li a{display:block;} #tag-hierarchy ul li ul{padding-left:0;margin-left:20px;} #tag-hierarchy ul li ul li a{padding:4px;border-bottom:1px solid var(--borders);} .tag-count{font-size:x-small;} .all-link{text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:smaller;} .all-link p{margin:10px 0 0 0;padding:0;} .module-layoutcredit{position:absolute;bottom:calc(var(--footer-height) * -1);left:20px;line-height:calc(var(--footer-height) / 1.4);z-index:2;margin:0;text-transform:uppercase;letter-spacing:2px;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:0;} .module-layoutcredit a{color:var(--content-bg);} .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, 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 !IMPORTANT or you'll have a weird righthand border with nothing on it.

♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.

♡ Fill in first custom sidebar module if desired.
♡ Fill in second custom sidebar module if desired.

♡ Person to credit if you have an individually created layout: © Tessisamess
♡ URL to link the credit to: https://tessisamess.insanejournal.com/150605.html

♡ Display of tags in sidebar: List

♡ Reorder sidebar as needed. The demo uses the following ordering: Custom Text, Custom Text Two, Links, Page Summary, Calendar, Tags, Layout Credit
♡ 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!