Tessisamess

image preview | tess082

Information

Hey guys! Now that I'm back in action, it's long past time for a new layout!! If you want more layout content to fill the gap from my break, you can always subscribe to my Patreon for tons and tons of exclusive layouts and codes. c:

Exposure is a polaroid-themed layout with links and tags enabled in the sidebar; sidebar title and userpics on the main page are both optional and, as always, if you need things resized you can do that in the :root directory. Enjoy! 💖

Layout Coding

/*-- EXPOSURE - TESSISAMESS - 2021 --*/ /*-- 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 */ --darker: #222; /* page text */ --medium: #999; /* entry date & tags */ --lightest: #fff; --page-bg: #E3DED8; --content-bg: #fff; --borders: rgba(0,0,0,0.1); --polaroid-bg: #fefefe; --accent: #B28283; /* FONTS */ --main-font: calibri,sans-serif; --headings: Almonde; --body-text: 12px; --title-text: 25px; --subtitle-text: 9px; --nav-text: 9px; --side-text: 9px; --polaroid-title: 36px; --side-titles: 25px; --entry-titles: 25px; --entry-info: 9px; /* DIMENSIONS */ --content-width: 950px; --content-gap: 70px; --side-width: 250px; --side-padding: 20px; --margin: 30px; --padding: 60px; --entry-icon: 75px; /* OTHER */ --tags-header: 'Categories'; /* IMAGES */ --bg-img: url()center fixed; --side-img: url()center; --polaroid-texture: url(https://i.imgur.com/mezPhW2.png); --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:Almonde;src:url(https://dl.dropbox.com/s/fx5c7671017jf0o/Almonde.otf);} /* GENERAL */ ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} ::-webkit-scrollbar-track{background:var(--accent);} ::-webkit-scrollbar{width:4px;background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);} *, *: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(--darker);} blockquote{font-style:normal;padding:0 0 0 10px;border-left:2px solid var(--accent);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;} 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(--darker);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(--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));} .layout-two-column-left #beta{float:left;width:var(--side-width);} /* HEADER */ #header{padding:0 0 var(--margin) 0;color:var(--darker);} #banner-text{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;} #nav-above{list-style:none;margin:0;padding:0;font-size:var(--nav-text);text-transform:uppercase;letter-spacing:2px;} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} .banner-viewlinks:before{content:'|';margin:0 6px;} .banner-viewlinks:first-of-type:before{display:none;} #nav-above a{margin-left:0;} .current a{color:var(--darker);} #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(--headings);text-align:center;font-size:var(--title-text);} #banner-description{font-family:var(--main-font);text-align:center;font-size:var(--subtitle-text);margin:0 0 0 10px;text-transform:uppercase;letter-spacing:2px;} /* 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:var(--margin) 0 0 0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;} .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(--darker);} #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);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);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(--darker);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{position:absolute;top:var(--padding);right:var(--padding);font-size:var(--entry-info);color:var(--medium);text-transform:uppercase;letter-spacing:2px;} .inner-entry-userpic{position:absolute;top:10px;right:calc((var(--entry-icon) - 5px) * -1);float:none;text-align:center;padding:0;line-height:1;background:var(--polaroid-bg) var(--polaroid-texture);border-radius:2px/7px;box-shadow:1px 1px 1px 0 rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);transform:rotate(4deg);min-height:calc(var(--entry-icon) * 1.23);} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);border:4px solid rgba(0,0,0,0.03);} .outer-entry-userpic, .mid-entry-userpic{display:none;} .pic-poster{text-align:center;font-size:8px;letter-spacing:.5px;text-transform:uppercase;display:block;margin:3px 0;} .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.7;text-align:justify;} .ljtags{margin:10px 0 0 0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;} #alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);} .entry-metadata{display:none;} .entry-linkbar{margin:0;font-size:var(--entry-info);text-align:right;text-transform:uppercase;letter-spacing:2px;} .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;font-size:var(--side-titles);font-family:var(--headings);} .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);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);} /* SIDEBAR */ #beta-inner{font-size:var(--side-text);color:var(--darker);text-align:right;} .module{padding:0;background:transparent;margin:0 0 20px 0;border:none;} .module-header{background:transparent;border:none;} .module-header h3{margin:0;padding:0;font-size:var(--side-titles);color:var(--accent);} .module-header a, .module-header a:visited{color:var(--accent);} .module-customtext{transform:rotate(-3deg);height:calc(var(--side-width) * 1.2);width:var(--side-width);background:var(--polaroid-bg) var(--polaroid-texture);border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.05);border-radius:2px/7px;} .module-customtext .module-header{display:none;} .module-customtext .module-content{height:100%;background:var(--medium) var(--side-img);background-size:cover;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1);} .module-customtext .module-inner{height:var(--side-width);border:12px solid rgba(0,0,0,0.03);} .name{padding:0 10px;height:calc(var(--side-width) * 1.08);text-align:center;display:flex;align-items:flex-end;justify-content:center;font-size:var(--polaroid-title);font-family:var(--headings);color:var(--darker)!important;line-height:0.7;} .module-typelist ul{list-style:none;margin:0 0 0 20px;padding:0;line-height:2.5;text-transform:uppercase;letter-spacing:2px;} .module-typelist li a{display:block;border-bottom:1px solid var(--borders);} .module-typelist li a:hover{padding:0 20px 0 0;} .module-categories .module-header{display:block;} .module-categories .module-header h3{font-size:0;} .module-categories .module-header h3:after{content:var(--tags-header);font-size:var(--side-titles);} #tag-cloud ul{list-style:none;padding:0;margin:0;line-height:2.5;text-transform:uppercase;letter-spacing:2px;} #tag-cloud li{float:none;padding:0;} #tag-cloud li a{font-size:var(--side-text)!important;display:block;border-bottom:1px solid var(--borders);} #tag-cloud li a:hover{padding:0 20px 0 0;} #tagclear{clear:both;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:0;font-size:var(--side-titles);font-family:var(--headings);} .module-layoutcredit a{color:var(--accent);} .module-customtext2, .all-link, .module-viewlinks, .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, 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 the friends page

♡ Link text to leave a comment: Comment
♡ Navigation link names: Recent/Archive/Friends/Profile

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

<a href="URL" class="name">title</a>

♡ Person to credit if you have an individually created layout: Layout by
♡ URL to link the credit to: https://tessisamess.insanejournal.com/139513.html
♡ Display of tags in sidebar: Cloud

♡ 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!