Tessisamess

image preview | tess072

Information

Hey guys! This layout is a match for the HTML page for this month so that we can have something IJ-friendly! Obviously you can't combine-search the tags like in the HTML page, but AH WELL. This layout is intended for tagging systems that use the tag: tagname system, but if you don't use multi-level tags this will still work! You just won't have sectioned off tag groups. You can retroactively rename tags without needing to re-tag anything here!

This is also a layout remake of my very first public layout over at tess001. Yikes, I know lmfao. It's a hard layout to use, but the idea was there! This is a much better execution of the sentiment lmfao. Enjoy! ♥

Icons used in the demo are from the lovely figmented!

Layout Coding

/*-- ICON DIRECTORY - TESSISAMESS - 2019 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at:tessisamess.insanejournal.com --*/ /* REPLACEMENTS */ :root{ --dark: #111; /* page text */ --medium: #999; /* entry date & tags */ --lightest: #fff; /* things */ --accent: #8DB4D0; /* headings & entry links; sidebar link hover bg; sticky note header bg */ --accent2: #111; /* page links */ --borders: rgba(0,0,0,0.15); --page-bg: #ddd; --bg-img: url(https://i.imgur.com/AS1qwm3.png)top left repeat fixed; --side-width: 170px; --margins: 4vw; --main-font: Open Sans,helvetica,sans-serif; --headings: Khula; --title-font: Khula; --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:'Khula';font-style:normal;font-weight:300;src:local('Khula Light'), local('Khula-Light'), url(https://fonts.gstatic.com/s/khula/v5/OpNPnoEOns3V7G-ljBvTpi8.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:'Khula';font-style:normal;font-weight:800;src:local('Khula ExtraBold'), local('Khula-ExtraBold'), url(https://fonts.gstatic.com/s/khula/v5/OpNPnoEOns3V7G-piBvTpi8.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;src:local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.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:0;padding:0;background:var(--page-bg) var(--bg-img);font-family:var(--main-font);color:var(--dark);font-size:12px;} blockquote{font-style:normal;border:1px solid var(--accent);padding:10px;} 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;} hr{margin-left:20%;margin-right:20%;height:1px;border:none;background:var(--borders);} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--accent2);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;margin:3vw;} .layout-two-column-left #alpha{margin:0 0 0 var(--side-width);} .layout-two-column-left #beta{float:left;width:var(--side-width);} /* HEADER */ #header{padding:0;color:var(--dark);margin-bottom:3vw;letter-spacing:3px;text-transform:uppercase;} #banner-text{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;} #nav-above{list-style:none;margin:0;padding:0;font-size:10px;font-weight:bold;} #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;} .current a{color:var(--accent);} #header-text{background:transparent;border:none;margin:0;padding:0;display:flex;align-items:center;} #header-text a{color:var(--accent);} #banner-header{font-family:var(--title-font);margin:0 10px 0 0;font-size:22px;font-weight:bold;} #banner-description{font-family:var(--headings);font-size:22px;opacity:0.6;padding:0;margin:0;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha-inner{padding:0 0 0 var(--margins);} .lj-view-recent #alpha-inner, .lj-view-day #alpha-inner, .lj-view-archive #alpha-inner{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;-webkit-column-gap:var(--margins);-moz-column-gap:var(--margins);column-gap:var(--margins);-webkit-column-width:360px;-moz-column-width:360px;column-width:370px;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--accent2);} .content-nav{margin:var(--margins) 0 0 0;font-weight:bold;font-size:13px;letter-spacing:7px;padding:0 0 0 7px;text-transform:uppercase;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:var(--margins);font-weight:bold;font-size:13px;letter-spacing:7px;padding:0 0 0 7px;} .date-header{display:none;} #column-footer{clear:both;} .content-nav, .yearlinks{-webkit-column-span:all;column-span:all;} /* STICKY NOTE */ #sticky-note .entry{padding:0;} #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{padding:10px 10px 2px 10px;border-bottom:1px solid var(--borders);text-align:center;color:var(--lightest);background:var(--accent);} #sticky-note .entry-header h2{margin:0;padding:0;font-size:27px;} #sticky-note .entry-body{padding:20px;} #sticky-note .entry-text{padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 var(--margins) 0;padding:20px;background:var(--lightest);border:1px solid var(--borders);max-width:700px;position:relative;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;} .lj-view-recent .entry, .lj-view-day .entry, .lj-view-archive .entry{box-sizing:content-box;} .entry-header{text-align:center;background:transparent;border:none;padding:0;} .entry-header h3{margin:0;padding:0;font-size:27px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--accent);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{text-transform:uppercase;font-size:9px;font-weight:bold;letter-spacing:1px;color:var(--medium);position:absolute;bottom:20px;left:20px;} .mid-entry-userpic{text-align:center;padding:0;position:absolute;top:0;right:-90px;} .lj-view-friends .mid-entry-userpic{display:block;} .mid-entry-userpic img{width:80px;max-height:80px;padding:5px;margin:0 0 5px 0;border:1px solid var(--borders);background:var(--lightest);} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster{font-size:9px;text-transform:uppercase;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .entry-content{margin-top:10px;} .lj-view-recent .entry-content, .lj-view-day .entry-content, .lj-view-archive .entry-content{margin:0;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:20px 0 0 0;font-size:0;text-align:left;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);font-size:9px;margin:0 10px 0 0;} #alpha .ljtags a:before{content:'#';} .entry-metadata{display:none;} .entry-linkbar{margin:10px 0 0 0;padding:10px 0 0 0;border-top:1px solid var(--borders);text-transform:uppercase;font-size:9px;font-weight:bold;letter-spacing:1px;text-align:right;} .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 10px;} .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;} /* CUSTOM ICON ENTRY STYLE */ .set h3{padding:5px 0;font-size:27px;color:var(--accent);} .set h4{font-weight:bold;font-size:13px;letter-spacing:7px;padding:0 0 0 7px;} /* CUSTOM DETAILS STYLE */ .lj-view-recent details summary, .lj-view-day details summary{padding:10px;border:1px solid var(--borders);text-transform:uppercase;letter-spacing:2px;font-weight:bold;font-size:10px;-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;} .lj-view-recent details[open] summary, .lj-view-day details[open] summary{margin:0 0 10px 0;} .lj-view-recent details summary:hover, .lj-view-day details summary:hover{color:var(--lightest);background:var(--accent);} /* ARCHIVE VIEW */ .yearlinks{margin:0 0 10px 0;text-align:left;font-family:var(--headings);font-weight:bold;font-size:18px;} .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{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:0 0 0 var(--margins);} .lj-view-tags #alpha-inner, .lj-view-month #alpha-inner{padding:20px;background:var(--lightest);border:1px solid var(--borders);max-width:700px;} /* SIDEBAR */ #beta-inner{font-size:12px;color:var(--dark);} .module{padding:0;background:transparent;margin:0;border:none;} .module-header{background:transparent;border:none;} .module-header h3{margin:0;padding:0;font-weight:bold;letter-spacing:2px;text-transform:uppercase;font-size:14px;color:var(--accent);} .module-header a, .module-header a:visited{color:var(--accent);} .module-typelist ul, .module-pagesummary ul{list-style:none;margin:0;padding:0;text-transform:capitalize;} .module-typelist li a, .module-pagesummary li a{display:block;background:var(--lightest);padding:5px;margin:6px 0;border:1px solid var(--borders);} .module-typelist li a:hover, .module-pagesummary li a:hover{background:var(--accent);color:var(--lightest);} .module-pagesummary{display:none;} .lj-view-friends .module-pagesummary{display:block;} .lj-view-friends .module-categories{display:none;} .module-categories .module-header{display:none;} #tag-hierarchy ul{list-style:none;padding:0;margin:0;font-family:var(--headings);font-weight:bold;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-size:14px;} #tag-hierarchy ul li ul{text-align:right;color:var(--accent2);} #tag-hierarchy a{display:block;text-align:left;background:var(--lightest);padding:5px;margin:6px 0;border:1px solid var(--borders);font-family:var(--main-font);font-weight:normal;letter-spacing:0;text-transform:capitalize;font-size:12px;} #tag-hierarchy a:hover{background:var(--accent);color:var(--lightest);} .tag-count{font-size:x-small;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:10px 0 0 0;text-transform:uppercase;font-size:8px;letter-spacing:3px;text-align:center;} .module-customtext, .module-customtext2, .module-viewlinks, .module-calendar, .all-link, .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);}

Entry Coding

If you'd like your entries to look just like the demo the setup is super simple! Just use the PB name as your journal title and the code below for your entry content. As long as your icons are multiples of three you can use less or more previews if desired!

<lj-raw><div class="set" style="max-width:360px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;text-align:center;"> <h4 style="width:100%;line-height:1;">In MEDIA</h4> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <img src="PREV_ICON" style="margin:10px;"> <h4 style="width:100%;line-height:1;"><lj-cut text="### Icons"></h4> </div></lj-raw> YOUR ICONS HERE</lj-cut>

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
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired.
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Display of tags in sidebar: List
♡ 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!