Tessisamess

image preview | tess047

Information

Hey, guys! Today we've got Low Profile, a minimal clutter layout that stows your extras away in a slide-out sidebar. This is an S2 Complete Style layout trick I've been meaning to do for a while now, but don't worry! If you're loving the look but don't need a sidebar panel, you can choose One Column and get a great minimalist, almost Generator inspired layout out of the deal, hell yeah!

Layout Coding

/*-- LOW PROFILE - TESSISAMESS - 2018 --*/ /*-- Credit me in profile if removing my credit link from main block --*/ /*-- Find more fun stuff at: tessisamess.insanejournal.com --*/ /* GENERAL CLASSES */ @font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;src:local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.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:'Syncopate';font-style:normal;font-weight:400;src:local('Syncopate Regular'), local('Syncopate-Regular'), url(https://fonts.gstatic.com/s/syncopate/v9/pe0sMIuPIYBCpEV5eFdCBfe_.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;} body{margin:0 0 40px 30px;padding:0;background:#fff url(https://i.imgur.com/GNPqyaw.jpg)fixed;font-family:Roboto Condensed,helvetica,arial,sans-serif;font-size:15px;color:#222;} blockquote{font-style:italic;padding-left:10px;border-left:3px solid #000;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-family:Syncopate,arial black,gadget,sans-serif;font-weight:normal;text-transform:uppercase;} a, a:visited, a:active{color:#000;text-decoration:none;} a:hover{text-decoration:none;color:#bbb;} /* WHOLE PAGE CONTAINERS */ #container{margin:0 auto;width:70vw;max-width:800px;min-width:400px;background:transparent;} .layout-one-column{margin:0 0 40px 0;} .layout-one-column #nav-above{margin:0;} .layout-one-column #alpha{margin:0;} .layout-two-column-left #alpha{margin:0;} .layout-two-column-left #beta{width:350px;} /* HEADER */ #header{padding:30px 0 0 0;color:#000;height:50vh;min-height:200px;display:flex;align-items:center;justify-content:center;} #header-inner{display:flex;align-items:center;} #header-inner:before{content:'';display:block;width:90px;height:90px;background:#ddd url(USERPIC)center;background-size:100%;border-radius:120px;} #banner{margin-left:20px;} #nav-above{position:absolute;top:10px;left:40px;right:40px;list-style:none;margin:0 0 0 30px;padding:0 0 10px 0;font-size:small;text-align:right;border-bottom:1px solid #ddd;} #nav-above li:last-of-type{display:none;} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0 8px;border-left:1px solid #ddd;} .first{border-left:none;} .current a{color:#000;} .current a:hover{color:#bbb;} #header-text{background:transparent;border:none;margin:0;padding:0;} #banner-header{font-family:Syncopate,arial black,gadget,sans-serif;text-align:left;font-size:27px;line-height:0.8;} #banner-description{margin:0;padding:0;font-family:Roboto Condensed,helvetica,arial,sans-serif;text-align:left;font-size:13.6px;letter-spacing:3px;text-transform:lowercase;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} #alpha a, #alpha a:visited{color:#000;} #alpha a:hover{text-decoration:none;color:#bbb;} .content-nav{margin:20px 0 0 0;font-family:Syncopate,arial black,gadget,sans-serif;font-weight:normal;text-transform:uppercase;} .nav-top{display:none;} .nav-bottom{text-align:right;} #tagpage-header{text-align:center;} #tagpage-header h2{margin-bottom:20px;} .date-header{display:none;} #column-footer{clear:both;} /* STICKY NOTE */ #sticky-note .entry{padding:50px;} #sticky-note .entry-inner{border:none;} #sticky-note .entry-header{text-align:center;color:#000;} #sticky-note .entry-header h2{margin:0;padding:0;font-size:23px;} #sticky-note .entry-text{min-height:0;padding:0;} #sticky-note .entry-footer{display:none;} /* ENTRIES */ .entry{margin:0 0 3vw 0;padding:50px 50px 75px 50px;background:#fff;border:1px solid #ddd;position:relative;} .entry-header{background:transparent;border:none;padding:0;} .entry-header h3{margin:0;padding:0;font-size:21px;} #alpha .entry-header a, #alpha .entry-header a:visited{color:#000;} .entry-datetime{color:#999;font-size:13px;letter-spacing:2px;text-transform:lowercase;} .mid-entry-userpic{display:block;float:left;text-align:center;padding:0;margin-top:-5px;margin-right:15px;} .mid-entry-userpic img{width:50px;height:50px;border-radius:60px;margin-bottom:5px;} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000;margin:-10px auto 5px auto;} .pic-poster{left:28px;position:absolute;background:#000;margin-top:-30px;padding:5px;text-align:center;font-size:9px;letter-spacing:1px;text-transform:uppercase;display:block;width:85px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);opacity:0;-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;} .mid-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;} .pic-poster img{display:none;} .pic-poster a{color:#ddd!important;} .pic-poster a:hover{color:#999!important;} .entry-content{margin-top:20px;} .entry-text{min-height:80px;overflow:auto;line-height:160%;text-align:justify;} .entry-text img{max-width:100%;} .entry-text a{font-weight:bold;} .ljtags{margin:20px 0 0 0;font-size:12px;} #alpha .ljtags a, #alpha .ljtags a:visited{color:#999;font-weight:normal;} .entry-metadata{display:none;} .entry-linkbar{font-size:9px;text-transform:uppercase;letter-spacing:2px;background:#000;position:absolute;left:-1px;right:-1px;bottom:-1px;text-align:center;} .entry-linkbar ul{list-style:none;padding:0;margin:0;} .entry-linkbar li{display:inline;border:none;padding:0;margin:0 6px;} .entry-linkbar li a{display:inline-block;padding:7px 4px;color:#ddd!important;} .entry-linkbar li a:hover{color:#999!important;} /* ARCHIVE VIEW */ .yearlinks{text-align:center;font-family:Syncopate,arial black,gadget,sans-serif;text-transform:uppercase;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:collapse;border:4px solid transparent;width:100%;} td.monthlable, td.viewmonth{font-family:Syncopate,arial black,gadget,sans-serif;text-transform:uppercase;background:transparent!important;} td.monthlable{text-align:left;} td.viewmonth{text-align:right;} .dayname{font-family:Syncopate,arial black,gadget,sans-serif;text-transform:uppercase;text-align:center;background:#000!important;color:#fff;} .yeartable td{border:3px solid #fff!important;background:rgba(0,0,0,0.03);padding:5px;} /* TAGS & MONTH VIEW */ .lj-view-tags #alpha h2{font-size:21px;} .lj-view-tags #alpha, .lj-view-month #alpha{padding:50px;background:#fff;border:1px solid #ddd;} .ljtaglist{margin:0;padding:0;list-style:none;} .ljtaglist li{margin-top:5px;} /* SIDEBAR */ #beta{position:fixed;z-index:2000;top:0;bottom:0;left:-350px;background:#000;display:flex;align-items:center;justify-content:center;border-right:30px solid #000;box-shadow:2px 0 3px 0 rgba(0,0,0,0.4);-webkit-transition:all 0.9s ease-in-out;-moz-transition:all 0.9s ease-in-out;-ms-transition:all 0.9s ease-in-out;-o-transition:all 0.9s ease-in-out;transition:all 0.9s ease-in-out;} #beta:target{left:0;} #beta-inner{font-size:8px;text-transform:uppercase;color:#ddd;padding:80px 0;width:100%;} #beta-inner a{color:#bbb;} .module{padding:0 50px 15px 80px;background:transparent;margin:0;border:none;} .module-header{display:none;} .module-customtext{letter-spacing:1px;} .module-customtext img{max-width:94%;border:5px solid rgba(255,255,255,0.2);display:block;margin:0 auto;} .module-customtext .module-content{padding:0;line-height:150%;text-align:justify;} .module-customtext2{padding:0;} #beta:target .toggle{left:390px;} .toggle{position:fixed;top:50%;margin-top:-30px;left:40px;background:#000;border:5px solid #000;text-align:center;line-height:50px;font-size:40px;box-shadow:2px 0 3px 0 rgba(0,0,0,0.4);-webkit-transition:all 0.9s ease-in-out;-moz-transition:all 0.9s ease-in-out;-ms-transition:all 0.9s ease-in-out;-o-transition:all 0.9s ease-in-out;transition:all 0.9s ease-in-out;} .toggle, .toggle a, .toggle img{border-radius:60px;width:50px;height:50px;} .toggle a{display:block;} .close{position:absolute;top:0;display:none!important;overflow:hidden;background:#000;} #beta:target .close{display:block!important;} #beta:target .open{display:none!important;} .module-typelist{letter-spacing:2px;} .module-typelist ul{list-style:none;margin:0;padding:0;} .module-typelist li a{display:block;padding:3px;margin-bottom:2px;background-size:200% 100%;background-image:linear-gradient(to right, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2) 50%);transition:background-position 1.4s;} .module-typelist li a:hover{opacity:1;background-position:-100% 0;} .module-layoutcredit{text-align:center;font-family:Syncopate,arial black,gadget,sans-serif;letter-spacing:3px;text-transform:uppercase;} .module-layoutcredit p{padding:0;margin:0;} .module-categories, .module-pagesummary, .module-calendar, .module-viewlinks, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;} /* CONTENT FOOTER */ #content-footer{clear:both;height:0;} /* TINYICONS */ img[src*="img/userinfo.gif"], img[src*="img/community.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_private.gif"], img[src*="img/icon_groups.gif"]{background:transparent url(https://i.imgur.com/qJMbjT9.png)no-repeat!important;width:0!important;height:0!important;padding:16px 0 0 18px!important;margin-bottom:3px;} .entry-header img{margin-bottom:0;}

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: One Column for no slideout panel or Two Column (sidebar on left) for slideout panel
♡ Disable customized comment pages for your journal: Yes
♡ Navigation link names: Recent/Archive/Friends/Profile
♡ Fill in sticky note if desired. If you have chosen One Column skip the next steps, paste the CSS, and save! Make sure you put credit in your profile in this case.
♡ Fill in custom sidebar module if desired. This is where your image and blurb goes.
♡ Fill in second custom sidebar module: <div class="toggle"><a href="#beta" class="open"><img src="TOGGLEPIC"></a><a href="#" class="close">&times;</a></div>
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

Roboto Condensed - Page text
Syncopate - Headings

IMAGES

TOGGLEPIC - Sidebar toggle button userpic
USERPIC - Header userpic
https://i.imgur.com/GNPqyaw.jpg - Background
https://i.imgur.com/qJMbjT9.png - User and lock icon

COLORS

255,255,255

Sidebar image border, sidebar link background and hover background (semi-transparent rgba value)

#fff

Page background, entry background, calendar page day name

#ddd

Top nav borders, entry border, userpic poster link, linkbar text, tags page border, sidebar text

#bbb

Link hover color, sidebar link color

#999

Entry date and tags, userpic poster link hover, linkbar hover

#222

Page text

#000

Sidebar background, toggle button background/border, blockquote border, header text/link color, entry heading and link color, userpic hover info background, linkbar background, calendar page day name background

0,0,0

All box shadows (semi-transparent rgba value)

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!