Tessisamess

image preview: left sidebar | image preview: right sidebar | tess058

Information

Hey guys, it's time for another layout remake! This time around I'm remaking Cerchio, an S1 Generator layout from 2014! I remember being really proud at the time because I'd gotten some pretty sketch stuff to work, haha. This time around things are more fluid, there's more padding on elements, and there are two sidebar options: One to center-align it like in the original, and one to bottom align it. This layout also features more link capabilities than the last, and you can put as much or little in your sidebar blurb as you like! Enjoy! ♥

Layout Coding

/*-- INTERSECTIONAL - TESSISAMESS - 2018 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --darkest: #000; /* sidebar background, entry titles, poster info background, entry comments link, day name background on calendar */ --darker: #222; /* page text */ --dark: #333; /* sidebar nav link backgrounds */ --medium: #999; /* entry date & tags */ --lightest: #fff; /* entries background, poster info links, day name on calendar, sidebar text */ --light-accent: #d8e0e3; /* page background, page links, blockquote background */ --accent: #296d8e; /* sidebar border, sidebar title, sticky note title, entry links */ --main-font: Roboto Condensed,helvetica,arial,sans-serif; --headings: Roboto Condensed,helvetica,arial,sans-serif; --title-font: Broadcast; --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:Broadcast;src:url(https://dl.dropbox.com/s/1xvsf0ivv73xfp7/Broadcast_Matter.otf);} @font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;src:local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.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 */ body{margin:0;padding:0;background:var(--light-accent);font-family:var(--main-font);font-size:15px;color:var(--darker);} blockquote{font-style:italic;background:var(--light-accent);padding:15px;} h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--headings);} a, a:visited, a:active{color:var(--light-accent);text-decoration:none;} a:hover{text-decoration:none;opacity:0.5;} /* WHOLE PAGE CONTAINERS */ #container{background:transparent;} .layout-two-column-left #alpha, .layout-two-column-right #alpha{margin:0 9vw 0 39vw;position:relative;z-index:2;min-height:100vh;} .layout-two-column-left #beta, .layout-two-column-right #beta{float:none;width:auto;position:fixed;z-index:1;left:0;right:0;background:var(--darkest);border-top:8px solid var(--accent);} .layout-two-column-left #beta{top:50%;transform:translateY(-50%);} .layout-two-column-right #beta{bottom:0;} /* HEADER */ #header{display:none;} /* MAIN COLUMN */ #alpha{background:var(--lightest);border:none;box-shadow:0 0 5px 5px rgba(0,0,0,0.1);padding:0;} #alpha-inner{padding:4vw;} #alpha a, #alpha a:visited{color:var(--accent);} .content-nav{margin:2vw 0 0 0;text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:2vw;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:center;} #sticky-note .entry-header h2{padding:0;font-family:var(--title-font);font-size:60px;font-weight:normal;color:var(--accent);} #sticky-note .entry-text{min-height:0;padding:0;} #sticky-note .entry-footer{display:none;} .extra-links{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;text-transform:uppercase;letter-spacing:1px;} .extra-links a{width:23%;padding:2px;margin:3px;background:rgba(0,0,0,0.1);} /* ENTRIES */ .entry{margin:0 0 2vw 0;padding:0 0 2vw 0;border-bottom:1px solid rgba(0,0,0,0.1);} .entry-header{background:transparent;border:none;padding:0;} .entry-header h3{padding:0;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);} .entry-datetime{text-transform:uppercase;letter-spacing:1px;font-size:10px;color:var(--medium);} .lj-view-friends .mid-entry-userpic{display:initial;float:left;text-align:center;padding:0 10px 0 0;position:relative;} .mid-entry-userpic img{width:40px;height:40px;padding:3px;border:1px solid rgba(0,0,0,0.1);} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--darkest);margin:-10px auto 5px auto;} .pic-poster{z-index:3;left:-30px;position:absolute;background:var(--darkest);margin-top:-30px;padding:5px;text-align:center;font-size:9px;letter-spacing:1px;text-transform:uppercase;display:block;width:95px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);opacity:0;-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;} .mid-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;} .pic-poster img{display:none;} .pic-poster a{color:var(--lightest)!important;} .ljuser a[href*="profile"] img{display:none;} .ljuser a[href*="profile"]:before{content:'@';} .ljuser a[href*="asylum"][href*="profile"]:before{content:'#';} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:1vw;} .entry-text{min-height:20px;overflow:hidden;line-height:1.7;text-align:justify;} .ljtags{margin:1vw 0 0 0;text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:bold;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);} .entry-metadata{display:none;} .entry-linkbar{margin:1vw 0 0 0;font-size:0;text-align:right;} .entry-linkbar ul{list-style:none;padding:0;} .entry-linkbar li{display:inline;border:none;padding:0;margin:0;} .entry-linkbar li a{margin-left:15px;display:inline-block;width:24px;height:24px;text-align:center;line-height:24px;font-weight:bold;overflow:hidden;border-radius:30px;border:2px solid rgba(0,0,0,0.05);color:var(--darkest)!important;} .entry-linkbar li a[href*=reply]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/4HDm2vx.png)center no-repeat;background-size:12px;} .entry-linkbar li a[href$=html]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/CqDacZM.png)center no-repeat;background-size:12px;} .entry-linkbar li a[href*=editjournal]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/brD8WR4.png)center no-repeat;background-size:12px;} .entry-linkbar li a[href*=edittags]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/nSm7Sij.png)center no-repeat;background-size:12px;} .entry-linkbar li a[href*=comments]{background:rgba(0,0,0,0.05);font-size:9px;} .entry-linkbar li a:hover{opacity:1;background-size:15px;} .entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;} /* ARCHIVE VIEW */ .lj-view-archive .entry-content{margin-top:0;} .yearlinks{text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-size:30px;color:rgba(0,0,0,0.5);} .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;font-size:20px;} td.monthlable{text-align:left;} td.viewmonth{text-align:right;} .dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--darkest)!important;color:var(--lightest);font-size:14px;} .yeartable td{border:none!important;background:rgba(0,0,0,0.05);padding:5px;} /* TAGS VIEW */ .lj-view-tags #alpha{padding:0;} /* SIDEBAR */ #beta-inner{font-size:11px;color:var(--lightest);width:34vw;padding:2vw;position:relative;} .module{padding:0;background:transparent;margin:0;border:none;} .module-header{display:none;background:transparent;border:none;font-size:60px;line-height:1;} .module-header h3{padding:0;font-weight:normal;font-family:var(--title-font);color:var(--accent);} .module-header a, .module-header a:visited{color:var(--accent);} .module-about{display:none;float:left;margin-right:15px;} .module-about .module-content{padding:0;} .userpic img{border:none;border-radius:100%;width:60px;height:60px;} .username, .journalname, .usersite{display:none;} .module-customtext .module-header{display:block;} .module-customtext .module-content{padding:0 0 10px 0;text-transform:uppercase;letter-spacing:3px;} .module-viewlinks{position:absolute;top:-25px;left:2vw;font-size:0;} .module-viewlinks ul{list-style:none;margin:0;padding:0;display:flex;} .module-viewlinks li{margin-right:9px;} .module-viewlinks li a{display:block;width:40px;height:40px;line-height:40px;text-align:center;border-radius:100%;} .module-viewlinks li:nth-of-type(1) a{background:var(--dark) url(https://i.imgur.com/T9zbBoB.png)center no-repeat;background-size:15px;} .module-viewlinks li:nth-of-type(2) a{background:var(--dark) url(https://i.imgur.com/729usXf.png)center no-repeat;background-size:15px;} .module-viewlinks li:nth-of-type(3) a{background:var(--dark) url(https://i.imgur.com/lHVzejZ.png)center no-repeat;background-size:15px;} .module-viewlinks li:nth-of-type(4) a{background:var(--dark) url(https://i.imgur.com/EubFs7h.png)center no-repeat;background-size:15px;} .module-viewlinks li a:hover{opacity:1;background-size:20px;} .module-typelist ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;text-align:center;text-transform:uppercase;letter-spacing:1px;font-weight:bold;} .module-typelist li{width:33.3%;} .module-typelist li a{display:block;padding:3px;margin:3px;background:rgba(255,255,255,0.1);} .module-layoutcredit{position:fixed;bottom:2vw;right:2vw;font-size:20px;font-weight:bold;} .module-layoutcredit p{padding:0;margin:0;} .module-pagesummary, .module-calendar, .module-categories, .module-customtext2, .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) for a center-aligned sidebar
Two column (sidebar on right) for a bottom-aligned sidebar

♡ Disable customized comment pages for your journal: Yes
♡ Fill in sticky note if desired. Check below for a custom span class for this journal's sticky and/or entry for block links as shown in the demo!
♡ Fill in custom sidebar module if desired. This is your sidebar title and subtitle/blurb.
♡ Person to credit if you have an individually created layout: ©
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

Custom Block Links

<span class="extra-links"> <a href="URL">Link 1</a> <a href="URL">Link 2</a> <a href="URL">Link 3</a> <a href="URL">Link 4</a> </span>

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!