Tessisamess

Two Column (Sidebar on Left) | Two Column (Sidebar on Right) | Home Page (Optional) | tess095

Information

Hey guys, and happy holidays! We're closing in on the new year fast, which means this will be one of the last layouts of 2022! We all know I love image galleries, so let's have another gallery wall-eque design! This layout comes with sidebar and topbar options, as well as (obviously) a splash page image gallery. I don't really recommend resizing the splash page gallery since everything's positioned absolutely, but if you're comfortable with editing that kind of thing, then you'll be totally fine to change it as needed. Enjoy! 💖

Layout Coding

/*-- GALERIE - 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: #999; --lightest: #fff; --page-bg: #E8E2DA; --entry-bg: rgba(255,255,255,0.7); --content-bg: #fff; --accent: #BB9B80; /* FONTS */ --main-font: Open Sans,calibri,arial,sans-serif; --headings: Lexend; --title-font: Lexend; --body-text: 13px; --title-text: 30px; --subtitle-text: 9px; --nav-text: 9px; --side-text: 12px; --side-titles: 18px; --entry-titles: 20px; --entry-info: 10px; /* DIMENSIONS */ --content-width: 1000px; --page-inset: 50px; --side-width: 270px; --side-padding: 25px; --side-margin: 15px; --side-img-border: 12px; --margin: 20px; --padding: 30px; --entry-icon: 80px; /* IMAGES */ --bg-img: url()center fixed; --side-img: url()center; --gallery1: url()center; --gallery2: url()center; --gallery3: url()center; --gallery4: url()center; --gallery5: url()center; --gallery6: url()center; --gallery7: 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: 'Lexend'; font-style: normal; font-weight: 200; src: url(https://fonts.gstatic.com/s/lexend/v17/wlptgwvFAVdoq2_F94zlCfv0bz1WC7sWzLdneg.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: '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; } /* 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(--headings);font-size:var(--body-text);color:var(--text-color);} blockquote{background:var(--content-bg);padding:15px;font-style:normal;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;text-transform:uppercase;} img{max-width:100%;} ul{list-style:circle;} 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;padding:var(--page-inset);} #container-inner{max-width:var(--content-width);margin:0 auto;} .layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--margin));} .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);} #alpha a:hover{color:var(--date-tags);} .content-nav{margin:var(--margin) 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: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(--entry-bg);border:var(--padding) solid var(--content-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{position:absolute;top:var(--padding);right:var(--padding);font-size:var(--entry-info);color:var(--date-tags);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .inner-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + 5px) * -1);width:var(--entry-icon);float:right;text-align:left;padding:0;} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);border:10px solid var(--content-bg);} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{text-align:center;font-size:9px;letter-spacing:1px;text-transform:uppercase;display:inline-block;margin:5px 0 0 10px;} .pic-poster img{display:none;} .pic-poster a{background:var(--accent);color:var(--content-bg)!important;padding:2px 5px 3px 5px;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:10px;} .entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;} .ljtags{margin:10px 0 0 0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;font-weight:bold;} #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:2px;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{display:inline-block;margin:10px 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(--padding);background:var(--content-bg);} /* SIDEBAR */ .layout-two-column-right #beta-inner:before{grid-area:img;width:var(--side-width);height:auto;margin:0 4px 0 0;} #beta-inner:before{content:'';display:block;margin:0 0 var(--side-margin) 0;height:calc(var(--side-width) * 1.2);background:var(--accent) var(--side-img);background-size:cover;border:var(--side-img-border) solid var(--content-bg);} .layout-two-column-right #beta-inner{display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto auto;grid-gap:0;grid-auto-flow:row;grid-template-areas:'img title title''img blurb blurb''img nav nav''img links links';margin:0 0 var(--margin) 0;} #beta-inner{font-size:var(--side-text);color:var(--text-color);} .layout-two-column-right .module{margin:0;} .module{padding:var(--side-padding);background:var(--content-bg);margin:0 0 var(--side-margin) 0;border:none;} .module-header{background:transparent;border:none;text-align:center;} .module-header h3{margin:0;padding:0;font-size:var(--side-titles);} .module-header a, .module-header a:visited{color:var(--headings-color);} .layout-two-column-right .module-customtext{grid-area:title;text-align:left;margin:0 0 -10px 10px;position:relative;} .module-customtext{padding:0;background:transparent;text-align:center;line-height:1;margin:0;} .layout-two-column-right .module-customtext .module-header h3{text-align:left;} .module-customtext .module-header h3{font-size:var(--title-text);} .module-customtext .module-content{padding:0;font-size:var(--subtitle-text);text-transform:uppercase;letter-spacing:3px;font-weight:bold;} .layout-two-column-right .module-customtext .module-content{display:none;} .layout-two-column-right .module-customtext2{grid-area:blurb;margin:4px 0 0 0;} .layout-two-column-right .module-customtext2 .module-header{display:none;} .module-customtext2{text-align:justify;} .layout-two-column-right .module-viewlinks{grid-area:nav;} .module-viewlinks{padding:0;background:transparent;text-align:center;font-size:var(--nav-text);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .module-viewlinks .module-header{display:none;} .module-viewlinks ul{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;margin:0;padding:0;} .module-viewlinks li{width:calc(50% - 2px);} .layout-two-column-right .module-viewlinks li{width:calc(25% - 4px);} .module-viewlinks li a{display:block;background:var(--content-bg);margin:4px 0 0 0;padding:7px;} .module-viewlinks li a:hover{background:var(--accent);color:var(--content-bg);} .layout-two-column-right .module-typelist{grid-area:links;} .module-typelist{padding:0;background:transparent;font-size:var(--nav-text);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .module-typelist .module-header{display:none;} .layout-two-column-right .module-typelist ul{display:flex;flex-wrap:wrap;justify-content:space-between;text-align:center;} .module-typelist ul{list-style:none;margin:0;padding:0;} .layout-two-column-right .module-typelist li{width:calc(25% - 4px);} .module-typelist li a{display:block;background:var(--content-bg);margin:4px 0 0 0;padding:10px;} .module-typelist li a:hover{background:var(--accent);color:var(--content-bg);} #tag-hierarchy ul{padding:0;margin:0;list-style:none;font-size:var(--nav-text);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} #tag-hierarchy ul li ul{padding-left:0;margin-left:25px;list-style:circle;font-size:var(--side-text);text-transform:capitalize;letter-spacing:0;font-weight:normal;} #tag-hierarchy ul li ul li a{padding:4px 0;display:block;} .tag-count{font-size:x-small;} .module-layoutcredit{margin:0;padding:0;background:transparent;font-size:var(--nav-text);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:0;} .layout-two-column-right .module-layoutcredit{position:fixed;bottom:10px;left:10px;} .layout-two-column-right .module-categories, .module-pagesummary, .module-calendar, .all-link, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;} /* HOME PAGE */ .lj-view-recent .home{position:fixed;left:0;right:0;bottom:0;top:0;z-index:2;background:var(--page-bg) var(--bg-img);display:flex;align-items:center;justify-content:center;} .home .home-header{text-align:right;line-height:1;} .home .home-header h1{font-size:var(--title-text);letter-spacing:0;} .home .home-header h2{font-size:var(--subtitle-text);font-weight:bold;letter-spacing:3px;} .home .home-nav{position:fixed;top:0;left:0;padding:20px;font-size:var(--subtitle-text);letter-spacing:3px;text-transform:uppercase;color:var(--accent);} .home .home-nav a{font-weight:bold;color:var(--text-color)!important;} .home .home-nav a:hover{color:var(--accent)!important;} .home .gallery{position:relative;width:848px;height:543px;} .home .gallery .img{position:absolute;border:9px solid var(--content-bg);background-size:cover!important;box-shadow:2px 2px 0 0 rgba(0,0,0,0.1);} .home .gallery .img1{background:var(--gallery1);top:125px;left:0;width:170px;height:170px;} .home .gallery .img2{background:var(--gallery2);top:325px;left:20px;width:130px;height:130px;} .home .gallery .img3{background:var(--gallery3);top:0;left:215px;width:205px;height:295px;} .home .gallery .img4{background:var(--gallery4);top:90px;right:195px;width:185px;height:245px;} .home .gallery .img5{background:var(--gallery5);top:195px;right:0;width:145px;height:210px;} .home .gallery .img6{background:var(--gallery6);bottom:5px;left:190px;width:205px;height:205px;} .home .gallery .img7{background:var(--gallery7);bottom:0;right:170px;width:250px;height:175px;} /* 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, 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
♡ Fill in sticky note if desired.

♡ Title to use for custom text sidebar module: Journal title
♡ URL to link to from custom text sidebar module: Journal URL
♡ Body of custom sidebar module: Journal Subtitle

♡ Fill in second custom sidebar module if desired.

♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: https://tessisamess.insanejournal.com/149401.html
♡ Custom stylesheet: Input the CSS provided and save!

Splash Page

<lj-raw><article class="home"> <main class="gallery"> <div class="home-nav"> <a href="URL">Link</a> & <a href="URL">Link</a> & <a href="URL">Link</a> & <a href="URL">Link</a> </div> <div class="home-header"> <h1><a href="/">Title</a></h1> <h2>Subtitle</h2> </div> <section class="img img1"></section> <section class="img img2"></section> <section class="img img3"></section> <section class="img img4"></section> <section class="img img5"></section> <section class="img img6"></section> <section class="img img7"></section> </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!