Tessisamess

image preview | tess070

Information

Hey guys! I've been dying to do a layout with a CSS grid sidebar collage, so it's finally here! Left or right sidebar works just fine, and you have FIVE (5) grid options (hell yeah!!!), which you can read more about below. Enjoy! ♥

Layout Coding

/*-- SNAPSHOTS - TESSISAMESS - 2019 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --darkest: #000; /* header and sidebar links and texts */ --darker: #222; /* page text */ --medium: #999; /* entry tags, entry link hover */ --lightest: #fff; /* journal title, entry background, entry title and date */ --light-accent: #DEE5D7; /* page background */ --accent: #A7BA94; /* page selection, blockquote border, headings, hr border, journal title background, entry links, entry header background, userpic background, grid image backgrounds, sidebar links left borders, layout credit link */ --main-font: Rubik,helvetica,arial,sans-serif; --headings: Rubik,helvetica,arial,sans-serif; --title-font: Rubik,helvetica,arial,sans-serif; --bg-img: url(https://i.imgur.com/XndZ8X5.png)center fixed; --container-width: 850px; /* overall width of layout */ --alpha-margin: 230px; /* width of sidebar PLUS additional margin to put a gap between them */ --sidebar-width: 200px; /* width of sidebar */ --grid-height: 300px; /* height of image grid */ --img1: url(IMG_URL)center; --img2: url(IMG_URL)center; --img3: url(IMG_URL)center; --img4: url(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; --cursor: url(https://i.imgur.com/M5MWlFx.png); --hover-cursor: url(https://i.imgur.com/wcowMCy.png); } /* FONTS */ @font-face{font-family:'Rubik';font-style:normal;font-weight:400;src:local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v8/iJWKBXyIfDnIV7nBrXw.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);} *{box-sizing:border-box;} body{margin:35px 75px 0 0;padding:0;background:var(--light-accent) var(--bg-img);font-family:var(--main-font);font-size:11px;color:var(--darker);cursor:var(--cursor), auto;} blockquote{font-style:italic;padding:10px;border:1px dotted var(--accent);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);text-transform:uppercase;color:var(--accent);margin:0;} img{max-width:100%;} ul{list-style:square;} hr{border:none;border-bottom:1px dotted var(--accent);height:0;} summary{cursor:var(--hover-cursor), auto;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--darkest);text-decoration:none;cursor:var(--hover-cursor), auto;-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;} .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:2vw;} #container-inner{margin:0 auto;max-width:var(--container-width);} .layout-two-column-left #alpha{margin:0 0 0 var(--alpha-margin);} .layout-two-column-left #beta{float:left;width:var(--sidebar-width);} .layout-two-column-right #alpha{margin:0 var(--alpha-margin) 0 0;} .layout-two-column-right #beta{float:right;width:var(--sidebar-width);} /* HEADER */ #header{padding:0;color:var(--darkest);position:absolute;top:0;right:0;left:0;padding:0 10px;text-transform:uppercase;letter-spacing:1px;} #banner-text{height:35px;display:flex;align-items:center;justify-content:space-between;} #nav-below{display:block;list-style:none;margin:0;padding:0;font-size:8px;} #nav-above{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-below a{margin-right:10px;} .current a{color:var(--darkest);} #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:8px;margin:0 10px 0 0;background:var(--accent);padding:5px 7px;} #banner-header a{color:var(--lightest);} #banner-description{font-family:var(--headings);text-align:center;font-size:8px;margin:0;padding:0;} /* 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:15px 0 0 0;font-size:8px;text-transform:uppercase;letter-spacing:1px;font-weight:bold;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:15px;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:center;justify-content:center;} #sticky-note .entry-header h2{margin:0;padding:0;font-size:11px;color:var(--lightest);} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 15px 0;padding:0;background:var(--lightest);position:relative;} .entry-header{background:var(--accent);border:none;min-height:30px;padding:0 10px;display:flex;align-items:center;} .entry-header h3{margin:0;padding:0;font-size:11px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--lightest);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;right:10px;top:12px;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:var(--lightest);} .inner-entry-userpic{float:right;text-align:center;padding:5px;background:var(--accent);position:absolute;top:0;right:-75px;} .inner-entry-userpic img{width:60px;height:60px;} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{font-size:8px;text-transform:uppercase;letter-spacing:1px;} .pic-poster a{color:var(--lightest)!important;display:block;margin:3px 0 0 0;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:0;padding:20px;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:15px 0 0 0;font-size:8px;text-transform:uppercase;letter-spacing:1px;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);} .entry-metadata{display:none;} .entry-linkbar{margin:15px 0 0 0;text-align:right;font-size:8px;text-transform:uppercase;letter-spacing:1px;font-weight:bold;} .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 5px;} .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:5px;} .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:15px;background:var(--lightest);} /* SIDEBAR */ #beta{position:sticky;top:2vw;} #beta-inner{font-size:8px;color:var(--darkest);text-transform:uppercase;} .module{display:none;padding:0;background:transparent;margin:0 0 10px 0;border:none;} .module-header{display:none;} .module-customtext{display:block;} .module-customtext .module-content{padding:0;} .module-customtext div[class*=grid]{height:var(--grid-height);display:grid;grid-gap:5px;} .grid1{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:'one three' 'one four' 'two four';} .grid2{grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;grid-template-areas:'one' 'two' 'two' 'three' 'four';} .grid3{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:'one one .' '. two two' 'three three .';} .grid4{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;grid-template-areas:'one . .' 'one two .' '. two three' '. . three'} .grid5{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr;grid-template-areas:'one three' 'one three' 'one four' 'two four';} .one{grid-area:one;background:var(--accent) var(--img1);background-size:cover;} .two{grid-area:two;background:var(--accent) var(--img2);background-size:cover;} .three{grid-area:three;background:var(--accent) var(--img3);background-size:cover;} .four{grid-area:four;background:var(--accent) var(--img4);background-size:cover;} .five{grid-area:five;background:var(--accent) var(--img5);background-size:cover;} .module-customtext2{display:block;text-align:justify;} .module-typelist{display:block;font-weight:bold;} .module-typelist ul{list-style:none;margin:0;padding:0;} .module-typelist li a{display:flex;align-items:center;letter-spacing:2px;padding:2px 0;white-space:nowrap;} .module-typelist li a:before{content:'';height:3px;background:var(--accent);width:100%;margin:0 5px 0 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;} .module-typelist li:hover a:before{width:20%;} .module-layoutcredit{display:block;position:fixed;left:10px;bottom:10px;margin:0;font-size:25px;} .module-layoutcredit p{padding:0;margin:0;} .module-layoutcredit a{color:var(--accent)!important;text-shadow:1px 1px 1px rgba(0,0,0,0.2);} .module-layoutcredit a:hover{color:var(--darkest)!important;} /* 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)
Two Column (Sidebar on Right)

♡ 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 module if desired with your IMAGE GRID.
♡ Fill in second custom sidebar module if desired with your 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!

Grid Options

Use any of the grids below by adding the HTML provided to your FIRST custom text. The :root directory in the layout CSS is where you'll add your images for your grid, and there are heights and widths above your image options if you'd like to change the dimensions of your grid and layout!

Additionally, if you'd like some of the grid blocks to be solid colors rather than images, you can change that in the CSS by going to the grid item's class (ex. .one) and changing the background to your chosen color code!

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!