Tessisamess

Two Column (Sidebar on Left) | Two Column (Sidebar on Right) | Home Page (optional) | tess091

Information

Hey guys! A patron recently asked if I'd do an updated S2 Complete Style version of Gridlocked (2017), and I still very much love that layout's look, so I got right on it! This time around we, of course, have a much easier editing experience, as well as a topbar version, and an optional homepage to make this even more fun to play with. I think this one would be great for mod journals, especially in topbar mode with a home page! Enjoy! 💖

Layout Coding

/*-- GRIDLOCKED 2.0 - 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: #752d5e; --text-color: #222; --date-tags: #555; --lightest: #fff; --page-bg: #FAFAFA; --content-bg: #F9F9F9; --borders: #888; --accent: #752d5e; /* FONTS */ --main-font: Lato,calibri,arial,sans-serif; --headings: Work Sans; --title-font: Work Sans; --body-text: 13px; --icon-text: 18px; --title-text: 30px; --subtitle-text: 20px; --nav-text: 12px; --side-text: 8px; --home-text: 8px; --entry-titles: 22px; --entry-info: 10px; /* DIMENSIONS */ --content-width: 1100px; --content-gap: 90px; --side-width: 380px; --side-img-padding: 10px; --side-padding: 25px; --side-links-height: 25px; --side-links-per-row: 4; --side-nav-width: 35px; --header-img-height: 200px; /* TOPBAR VERSION ONLY */ --home-width: 380px; --home-img-padding: 10px; --home-padding: 25px; --home-links-height: 25px; --home-links-per-row: 4; --margin: 50px; --padding: 35px; --entry-icon: 65px; --entry-nav-width: 35px; /* IMAGES */ --bg-img: url(http://i.imgur.com/N70xBjL.png)fixed; --header-img: url()center; /* TOPBAR VERSION ONLY */ --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: 'Lato'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXg.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: 'Work Sans'; font-style: normal; font-weight: 900; src: url(https://fonts.gstatic.com/s/worksans/v17/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K-DQBi8Jpg.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:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');} /* 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) var(--bg-img);font-family:var(--main-font);font-size:var(--body-text);color:var(--text-color);} blockquote{font-style:normal;padding:0 10px;border-left:2px solid var(--accent);border-right:2px solid var(--accent);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);color:var(--headings-color);margin:0;font-weight:normal;text-transform:uppercase;} img{max-width:100%;} ul{list-style:square;} 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{opacity:0.5;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:var(--margin);} #container-inner{max-width:var(--content-width);margin:0 auto;} .layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--content-gap) + var(--side-nav-width));} .layout-two-column-left #beta{float:left;width:var(--side-width);} .layout-two-column-right #alpha{margin:0;} .layout-two-column-right #beta{float:none;width:auto;} /* HEADER */ #header{display:none;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha a, #alpha a:visited{color:var(--accent);} .content-nav{margin:var(--margin) 0 0 0;font-size:var(--entry-info);font-weight:bold;text-transform:uppercase;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:var(--margin);} .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(--headings-color);} #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;} /* ENTRIES */ .entry{margin:0 0 var(--margin) 0;padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);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{position:absolute;top:calc((var(--entry-info) + 3px) * -1);right:0;font-size:var(--entry-info);font-weight:bold;text-transform:uppercase;color:var(--date-tags);} .inner-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + 10px) * -1);float:right;text-align:center;padding:0;} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);padding:5px;background:var(--content-bg);border:1px solid var(--borders);} .outer-entry-userpic, .mid-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{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:10px 0 0 0;font-size:var(--entry-info);text-transform:uppercase;font-weight:bold;color:var(--accent);} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--date-tags);} .entry-metadata{display:none;} .entry-linkbar{position:absolute;bottom:0;right:calc(var(--entry-nav-width) * -1);width:var(--entry-nav-width);border:none;font-size:0;text-transform:none;letter-spacing:0;margin:0;font-size:0;text-align:center;} .entry-linkbar ul{list-style:none;padding:0;margin:0;} .entry-linkbar li{display:block;border:none;padding:0;margin:0;} .entry-linkbar li a{display:block;height:var(--entry-nav-width);line-height:var(--entry-nav-width);border-bottom:1px solid var(--borders);color:var(--text-color)!important;overflow:hidden;} .entry-linkbar li a:hover{background:var(--accent);color:var(--lightest)!important;opacity:1;} .entry-linkbar li a:after{font-family:Material Icons;font-size:var(--icon-text);} .entry-linkbar li a[href*='reply']:after{content:'edit';} .entry-linkbar li a[href*='editjournal']:after{content:'settings';} .entry-linkbar li a[href*='edittags']:after{content:'label';} .entry-linkbar li a[href$='comments']{font-size:var(--entry-info);font-weight:bold;text-transform:uppercase;} .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(--padding);background:var(--content-bg);border:1px solid var(--borders);} /* SIDEBARS */ #beta-inner{position:relative;font-size:var(--side-text);color:var(--text-color);text-transform:uppercase;letter-spacing:1px;text-align:center;} .layout-two-column-left #beta{position:fixed;top:0;bottom:0;display:flex;align-items:center;justify-content:center;} .layout-two-column-right #beta-inner{margin:0 0 var(--margin) 0;} .module{padding:0;background:transparent;margin:0;border:1px solid var(--borders);border-bottom:none;} .module-header{background:transparent;border:none;display:none;} .module-header h3{margin:0;padding:0;font-size:var(--side-text);} .module-header a, .module-header a:visited{color:var(--headings-color);} .module-customtext{padding:var(--side-img-padding);} .module-customtext .module-content{padding:0;} .layout-two-column-right .module-customtext .module-inner{height:var(--header-img-height);background:var(--header-img);} .layout-two-column-right .module-customtext .module-content{display:none;} .module-customtext2{padding:var(--side-padding);text-align:justify;line-height:1.5;} .module-customtext2 .module-header{float:left;margin:0 5px 0 0;display:block;} .module-customtext2 .module-header h3{font-family:var(--main-font);font-weight:bold;} .module-viewlinks{position:absolute;top:0;right:calc(var(--side-nav-width) * -1);width:var(--side-nav-width);border:none;font-size:0;text-transform:none;letter-spacing:0;} .module-viewlinks ul{list-style:none;margin:0;padding:0;} .module-viewlinks li a{display:block;height:var(--side-nav-width);line-height:var(--side-nav-width);border-bottom:1px solid var(--borders);color:var(--text-color);} .module-viewlinks li a:hover{background:var(--accent);color:var(--lightest);opacity:1;} .module-viewlinks li a:after{font-family:Material Icons;font-size:var(--icon-text);} .module-viewlinks li:nth-of-type(1) a:after{content:'home';} .module-viewlinks li:nth-of-type(2) a:after{content:'search';} .module-viewlinks li:nth-of-type(3) a:after{content:'group';} .module-viewlinks li:nth-of-type(4) a:after{content:'star';} .module-typelist{border-right:none;} .module-typelist ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;letter-spacing:2px;line-height:var(--side-links-height);} .module-typelist li{width:calc(100% / var(--side-links-per-row));} .module-typelist li a{display:block;height:var(--side-links-height);border-right:1px solid var(--borders);border-bottom:1px solid var(--borders);} .module-typelist li a:hover{background:var(--accent);color:var(--lightest);opacity:1;} .module-layoutcredit{border:1px solid var(--borders);position:fixed;bottom:10px;left:10px;} .module-layoutcredit p{padding:0;margin:0;} .module-layoutcredit a{display:block;padding:2px 5px;} .module-pagesummary, .module-calendar, .module-categories, .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);} /* HOME PAGE */ .lj-view-recent .home{position:fixed;top:0;left:0;bottom:0;right:0;z-index:5;background:var(--page-bg) var(--bg-img);display:flex;align-items:center;justify-content:center;} .home main{width:var(--home-width);font-size:var(--home-text);color:var(--text-color);text-transform:uppercase;letter-spacing:1px;} .home main section{border:1px solid var(--borders);border-bottom:none;} .home .img{padding:var(--home-img-padding);} .home .blurb{padding:var(--home-padding);text-align:justify;line-height:1.5;} .home .blurb .title{color:var(--accent);} .home nav{border:1px solid var(--borders);border-right:none;display:flex;flex-wrap:wrap;letter-spacing:2px;line-height:var(--home-links-height);text-align:center;} .home nav a{height:var(--home-links-height);border-right:1px solid var(--borders);width:calc(100% / var(--home-links-per-row));} .home nav a:hover{background:var(--accent);color:var(--lightest)!important;opacity:1;}

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) - Sidebar
Two Column (Sidebar on Right) - Topbar

♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Yes or No
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Link text to read comments: 1 // # !IMPORTANT

♡ Fill in sticky note if desired.
♡ Fill in custom sidebar module with your image.
♡ Fill in custom sidebar module with your blurb.

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

♡ Custom stylesheet: Input the CSS provided and save!

Splash Page

<lj-raw><article class="home"> <main> <section class="img"><img src="IMG_URL"></section> <section class="blurb"> <b class="title">Title</b> Blurb </section> <nav> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> </nav> </main> </article></lj-raw><noembed>

Installation: Splash Pages

♡ Post new entry.
♡ Use the following settings:

♡ Add your splash page code 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!