Tessisamess

image preview | tess092

Information

Hey guys! This asymmetrical header layout has room for three pictures, and a clip mask design that can be recolored or swapped for a new image via the :root directory; this means the lineart florals can be changed to any transparent image shape and colored to match your layout colors.

Please keep in mind that this feature is not intended for images with their own colors, like photos, but rather transparent lineart (ex. complex or simple silhouettes). It doesn't matter if your chosen image has color, as it will be washed out with a HEX color (this is why transparent images of PBs etc. won't work. Think of it like a stencil you're painting over, or a stamp.) Enjoy! 💖

Layout Coding

/*-- THE LINEWORKS - 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: #F8F4F3; --content-bg: #fff; --borders: rgba(0,0,0,0.1); --accent: #6D4235; --accent2: #ECE0DD; /* FONTS */ --main-font: calibri,arial,sans-serif; --headings: Cormorant Garamond; --title-font: Cormorant Garamond; --body-text: 16px; --title-text: 14px; --subtitle-text: 11px; --nav-icons: 14px; --header-links: 12px; --blurb-text: 13px; --entry-titles: 22px; --entry-info: 15px; /* DIMENSIONS */ --content-width: 1100px; --entry-width: 700px; --header-height: 40px; --board-height: 600px; --board-width: 500px; --board-gap: 10px; --margin: 30px; --padding: 30px; --entry-icon: 80px; /* IMAGES */ --img1: url()center; --img2: url()center; --img3: url()center; --flower-img: url(https://i.imgur.com/TJpiXbm.png); --flower-height: 60%; --flower-inset: 60px; --flower-display: block; /* CHANGE TO none TO DISABLE */ --flower-color: #79574B; /* ICON REPLACEMENTS */ --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: 'Cormorant Garamond'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/cormorantgaramond/v16/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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);font-family:var(--main-font);font-family:var(--headings);color:var(--text-color);} blockquote{font-style:normal;border:1px solid var(--borders);padding:15px;background:var(--accent2);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;text-transform:uppercase;letter-spacing:1px;} img{max-width:100%;} ul{list-style:circle;} hr{border:none;border-bottom:1px solid var(--borders);} 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;} .layout-two-column-left #alpha{margin:var(--margin) 0 0 0;} .layout-two-column-left #beta{float:none;width:auto;} /* HEADER */ #header{padding:0;color:var(--headings-color);margin:0;position:sticky;top:0;left:calc(var(--header-height) / 2);z-index:3;display:inline-block;background:var(--accent2);padding:15px;border:1px solid var(--borders);border-top:0;} #banner-text{display:inline-flex;align-items:center;justify-content:center;flex-direction:column-reverse;} #nav-above{display:flex;list-style:none;margin:0;padding:0;font-size:0;} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-above a:before{font-family:'Material Icons';font-size:var(--nav-icons);} #nav-above a[href$='com/']:before{content:'home';} #nav-above li a[href*='calendar']:before{content:'schedule';} #nav-above li a[href*='friends']:before{content:'group';} #nav-above li a[href*='profile']:before{content:'favorite';} #nav-above a{margin:0 3px;border:1px solid var(--borders);padding:5px;display:block;border-radius:100%;color:var(--accent);opacity:0.5;} .current a{color:var(--accent);} #nav-above a:hover{opacity:1;} #header-text{background:transparent;border:none;margin:0;padding:0;} #banner-header{font-family:var(--title-font);text-align:center;font-size:var(--title-text);letter-spacing:3px;} #banner-description{font-family:var(--headings);text-align:center;font-size:var(--subtitle-text);text-transform:uppercase;letter-spacing:2px;margin:2px 0;padding:0;} /* BODY OF PAGE */ #pagebody{padding:calc(var(--margin) * 2) var(--margin);} #pagebody-inner{max-width:var(--content-width);margin:0 auto;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha-inner{max-width:var(--entry-width);margin:0 auto;} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--date-tags);} .content-nav{margin:var(--margin) 0 0 0;} .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;z-index:1;} .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);} .inner-entry-userpic{float:right;text-align:center;padding:0;position:absolute;top:0;left:calc((var(--entry-icon) + 15px) * -1);} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);border:5px solid var(--accent2);background:var(--page-bg);padding:4px;margin:0 0 5px 0;} .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:15px;} .entry-text{min-height:0;overflow:hidden;font-size:var(--body-text);line-height:1.6;text-align:justify;} .ljtags{margin:15px 0 0 0;font-size:var(--entry-info);} #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;} .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:15px 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-inner, .lj-view-month #alpha-inner{max-width:var(--entry-width);margin:0 auto;padding:var(--padding);background:var(--content-bg);border:1px solid var(--borders);} /* SIDEBAR */ #beta-inner{font-size:var(--blurb-text);color:var(--text-color);position:relative;} .module{padding:0;background:transparent;margin:0 0 calc(var(--margin) * 2) 0;border:none;} .module-header{display:none;background:transparent;border:none;} .module-header h3{margin:0;padding:0;font-size:var(--side-titles);} .module-header a, .module-header a:visited{color:var(--headings-color);} .module-customtext{position:relative;} .module-customtext:before{display:var(--flower-display);position:absolute;content:'';top:0;left:0;right:0;bottom:0;background:var(--flower-color);-webkit-mask:var(--flower-img) var(--flower-inset) center no-repeat;mask:var(--flower-img) var(--flower-inset) center no-repeat;-webkit-mask-size:auto var(--flower-height);mask-size:auto var(--flower-height);z-index:1;} .module-customtext:after{position:absolute;content:'';top:25%;bottom:25%;left:0;right:0;background:var(--accent2);} .module-customtext .module-content{position:relative;z-index:1;height:var(--board-height);width:var(--board-width);margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr;grid-gap:var(--board-gap);grid-auto-flow:row;grid-template-areas:'. . . right right right''. top-left top-left right right right''. top-left top-left right right right''bottom-left bottom-left bottom-left right right right''bottom-left bottom-left bottom-left right right right''bottom-left bottom-left bottom-left . . .';} .module-customtext .module-content div{background-size:cover!important;} .top-left{grid-area:top-left;background:var(--accent) var(--img1);} .bottom-left{grid-area:bottom-left;background:var(--accent) var(--img2);} .right{grid-area:right;background:var(--accent) var(--img3);} .module-customtext2{position:absolute;top:0;right:0;bottom:0;z-index:1;width:calc(50% - (var(--board-width) / 2));margin:0;display:flex;align-items:center;} .module-customtext2 .module-inner{padding:20px;} .module-viewlinks{display:none;} .module-typelist{position:fixed;top:0;right:0;left:0;z-index:2;height:var(--header-height);background:var(--content-bg);border-bottom:1px solid var(--borders);padding:0 calc((var(--header-height) / 2) - 10px) 0 0;text-align:right;display:flex;align-items:center;justify-content:flex-end;font-size:var(--header-links);text-transform:uppercase;letter-spacing:1px;} .module-typelist ul{list-style:none;margin:0;padding:0;display:flex;} .module-typelist li a{border-left:1px solid var(--accent2);padding:0 10px;} .module-typelist li:first-of-type a{border-left:none;} .module-layoutcredit{position:fixed;left:10px;bottom:10px;margin:0;} .module-layoutcredit p{padding:0;margin:0;} .module-categories, .module-pagesummary, .module-calendar, .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);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle if desired, 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
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Can choose No if you only want them on your friends page

♡ Fill in sticky note if desired.
♡ Fill in first custom sidebar module with your image grid:

<div class="top-left"></div><div class="bottom-left"></div><div class="right"></div>

♡ Fill in second custom sidebar module with your blurb if desired.

♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/147415.html
♡ 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!