Tessisamess

image preview | tess102

Information

Hey guys! As is often the case with my layout remakes, I decided to redo 2017's Punch it Up because someone needed help with an edit for it and I decided it deserved to be remade into a more current version that's easier to work with. This new version also allows for a sidebar in conjunction with the topbar, and everything's much easier to recolor and resize now. Additionally, now the width of the topbar and the width of the content below it are now able to be two different widths. Enjoy! 💖

Layout Coding

/*-- SOMETHING BEAUTIFUL - TESSISAMESS - 2024 --*/ /*-- 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 tessisamess.gumroad.com --*/ /* REPLACEMENTS */ :root{ /* COLORS */ --headings-color: #FFB118; --text-color: rgba(255,255,255,0.8); --date-tags: rgba(255,255,255,0.4); --lightest: rgba(255,255,255,1); --page-bg: #111010; --content-bg: #0B0A0A; --borders: rgba(0,0,0,0.1); --accent: #FFB118; /* FONTS */ --main-font: Open Sans,calibri,arial,sans-serif; --headings: jetamie; --title-font: jetamie; --body-text: 14px; --title-text: 95px; --subtitle-text: 10px; --nav-text: 8px; --topbar-text: 12px; --topbar-links: 9px; --side-text: 12px; --side-links: 9px; --side-titles: 32px; --tags-title: 'Browse By'; --entry-titles: 40px; --entry-info: 10px; /* DIMENSIONS */ --content-width: 1000px; --header-height: 55vh; --topbar-width: 1000px; --topbar-height: 250px; --topbar-margin: 60px; --topbar-spacing: 30px; --topbar1: 25%; --topbar2: 25%; --topbar3: 25%; --topbar4: 25%; --topbar5: 0%; /* OPTIONAL */ --topbar6: 0%; /* OPTIONAL */ --side-width: 250px; --side-padding: 20px; --side-img-height: 350px; --margin: 30px; --padding: 30px; --entry-icon: 70px; /* IMAGES */ --bg-img: url()center fixed; --header-img: url()center; --side-img: 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:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;} @font-face{font-family:'Open Sans';font-style:normal;font-weight:800;src:local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v15/EInbV5DfGHOiMmvb1Xr-hugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;} @font-face{font-family:jetamie;src:url(https://dl.dropbox.com/s/ls7jvrk6jt8o8rt/Je-Taime.otf);} /* GENERAL */ ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} ::-webkit-scrollbar-track{background:var(--page-bg);} ::-webkit-scrollbar{width:7px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--page-bg);border-radius:5px;} *, *: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(--text-color);} blockquote{font-style:normal;padding:0 0 0 20px;border-left:2px dashed var(--accent);} h1,h2,h3,h4,h5,h6{font-family:var(--headings);color:var(--headings-color);margin:0;font-weight:normal;} img{max-width:100%;} ul{list-style:circle;} hr{border:0;border-bottom:2px dashed var(--accent);margin:var(--padding) 0;} 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:0;} .layout-two-column-left #beta{float:none;width:100vw;} .layout-three-column-middle #alpha{margin:0 0 0 var(--margin);} .layout-three-column-middle #beta{float:none;width:100vw;} .layout-three-column-middle #gamma{float:none;width:var(--side-width);} /* HEADER */ #header{height:var(--header-height);display:flex;align-items:center;justify-content:center;background:var(--content-bg) var(--header-img);background-size:cover;border-bottom:5px solid var(--accent);padding:0;color:var(--lightest);text-shadow:1px 1px 1px rgba(0,0,0,0.5);} #nav-above{position:absolute;top:20px;right:20px;list-style:none;margin:0;padding:0;font-size:var(--nav-text);letter-spacing:2px;text-transform:uppercase;} #nav-below{display:none;} .banner-viewlinks{display:inline;padding:0;border:none;} .banner-viewlinks:last-of-type{display:none;} #nav-above a{margin:0 0 0 5px;color:var(--lightest);background:var(--page-bg);padding:4px 8px;} .current a{color:var(--lightest);} #header-text{background:transparent;border:none;margin:0;padding:0;} #header-text a{color:var(--lightest);} #banner-header{font-family:var(--title-font);text-align:center;font-size:var(--title-text);line-height:1;} #banner-description{font-family:var(--main-font);text-align:center;font-size:var(--subtitle-text);margin:0 0 0 6px;letter-spacing:6px;text-transform:uppercase;font-weight:bold;} /* BODY OF PAGE */ #pagebody-inner{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;width:calc(var(--content-width) - var(--side-width) - var(--margin));} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--date-tags);} .content-nav{margin:var(--margin) 0 0 0;font-size:var(--entry-info);text-transform:uppercase;font-weight:bold;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);font-size:var(--entry-info);font-family:var(--main-font);text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .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);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);text-transform:uppercase;font-weight:bold;letter-spacing:2px;color:var(--date-tags);} .inner-entry-userpic{position:absolute;top:0;right:calc((var(--entry-icon) + 10px) * -1);float:right;text-align:center;padding:0;} .inner-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);background:var(--accent);padding:5px;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:10px;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:20px 0 0 0;font-size:var(--entry-info);text-transform:uppercase;font-weight:bold;letter-spacing:1px;} #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-transform:uppercase;font-weight:bold;letter-spacing:2px;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:20px 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;} /* ARCHIVE VIEW */ .yearlinks{text-align:center;margin-bottom:var(--margin);padding:calc(var(--padding) / 2);background:var(--content-bg);font-family:var(--headings);font-size:var(--entry-titles);} .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);} /* TOPBAR */ #beta-inner{max-width:var(--topbar-width);display:flex;justify-content:space-between;font-size:var(--topbar-text);color:var(--text-color);margin:var(--topbar-margin) auto;} #beta .module{max-height:var(--topbar-height);overflow:auto;} #beta .module:not(.module-layoutcredit){padding:0;background:transparent;margin:0;border:none;} #beta .module:nth-of-type(1){width:calc(100% - var(--topbar2) - var(--topbar3) - var(--topbar4) - var(--topbar5) - var(--topbar6) - var(--topbar-spacing));} #beta .module:nth-of-type(2){width:calc(100% - var(--topbar1) - var(--topbar3) - var(--topbar4) - var(--topbar5) - var(--topbar6) - var(--topbar-spacing));} #beta .module:nth-of-type(3){width:calc(100% - var(--topbar2) - var(--topbar1) - var(--topbar4) - var(--topbar5) - var(--topbar6) - var(--topbar-spacing));} #beta .module:nth-of-type(4){width:calc(100% - var(--topbar2) - var(--topbar3) - var(--topbar1) - var(--topbar5) - var(--topbar6) - var(--topbar-spacing));} #beta .module:nth-of-type(5){width:calc(100% - var(--topbar2) - var(--topbar3) - var(--topbar1) - var(--topbar4) - var(--topbar6) - var(--topbar-spacing));} #beta .module:nth-of-type(6){width:calc(100% - var(--topbar2) - var(--topbar3) - var(--topbar1) - var(--topbar5) - var(--topbar4) - var(--topbar-spacing));} #beta .module:nth-of-type(4) ~ .module:not(.module-layoutcredit){display:none;} .module-header{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 .module-content{padding:0;} .module-typelist ul, .module-pagesummary ul{list-style:none;margin:0;padding:0;} .module-list-item a{display:block;border-bottom:1px solid;padding:7px 0 7px 5px;font-size:var(--topbar-links);text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .module-list-item a:hover{opacity:0.5;} .module-calendar .module-content{text-align:center;} .module-calendar table{border:0;border-collapse:collapse;font-size:x-small;margin:0;width:100%;} .module-calendar th{border:2px solid var(--page-bg);background:var(--accent);color:var(--lightest)!important;text-shadow:1px 1px 1px rgba(0,0,0,0.5);} .module-calendar td{border:2px solid transparent;height:25px;background:rgba(0,0,0,0.9);position:relative;} .module-calendar td a{position:absolute;top:1px;left:1px;right:1px;bottom:1px;line-height:20px;background:var(--accent);color:var(--lightest);font-weight:bold;text-shadow:1px 1px 1px rgba(0,0,0,0.5);} .module-calendar th{color:var(--text-color);font-weight:bold;height:25px;} .module-calendar .all-link{display:none;} /* SIDEBAR */ #gamma-inner{font-size:var(--side-text);color:var(--text-color);} #gamma .module{display:none;padding:var(--padding);background:var(--content-bg);margin:var(--margin) 0 0 0;border:none;} #gamma-inner:before{content:'';display:block;height:var(--side-img-height);background:var(--content-bg) var(--side-img);background-size:cover;border:20px solid var(--content-bg);} #gamma .module-categories .module-header h3{font-size:0;} #gamma .module-categories .module-header h3:after{content:var(--tags-title);font-size:var(--side-titles);} #gamma .module-customtext2, #gamma .module-categories{display:block;} #gamma .module-customtext2 ~ .module-customtext2, #gamma .module-categories ~ .module-categories{display:none;} #tag-hierarchy ul{padding:0;margin:0;list-style:none;font-size:var(--side-links);text-transform:uppercase;font-weight:bold;letter-spacing:2px;} #tag-hierarchy li ul{padding:0;margin-left:30px;list-style:circle;} #tag-hierarchy li ul li{margin:5px 0;} .tag-count{font-size:x-small;} /* OTHER */ .module-layoutcredit{position:fixed;left:10px;bottom:10px;padding:0;background:transparent;margin:0;border:0;font-weight:bold;font-size:8px;text-transform:uppercase;letter-spacing:2px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:0;} .all-link p{margin:30px 0 0 0;text-align:center;font-size:var(--side-links);text-transform:uppercase;font-weight:bold;letter-spacing:2px;} .all-link a{border:1px solid;padding:5px 10px;} .module-viewlinks, .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"], img[src*="entry/private.png"], img[src*="entry/protected.png"], img[src*="entry/groups.png"]{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);} img[src*="entry/private.png"]{background:transparent var(--private);} img[src*="entry/protected.png"]{background:transparent var(--locked);} img[src*="entry/groups.png"]{background:transparent var(--customs);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle (optional), then save.
♡ Fill in your Links List (required), 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) - Topbar only
Three Column (Content in middle) - Topbar and sidebar

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

♡ Fill in your custom texts if desired.

♡ Person to credit if you have an individually created layout: Layout
♡ URL to link the credit to: https://tessisamess.insanejournal.com/156311.html

♡ Display of tags in sidebar: List

♡ In your sidebar ordering make sure your first four dropdowns for the primary sidebar are the four you want in your topbar; anything after that doesn't matter as long as layout credit is one of the ones after the fourth dropdown. Duplicate modules do not matter, as they layout is set to hide anything after four topbar modules (except layout credit) and they don't need to be specified.

♡ If using Three Column (Content in middle), the dropdowns for the secondary sidebar do not matter as long as the tags list and/or second custom text are there. Those are the only modules available on the secondary sidebar. Duplicates do not matter here either.

♡ If you want fewer or more than four topbar sections (maximum six), go to #beta .module:nth-of-type(4) ~ .module:not(.module-layoutcredit){display:none;} and change (4) to your new number, keeping it inside the parentheses, and then adjust the widths in the root.

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