Tessisamess

image preview | tess099

Information

Hey guys! It was requested that I remake my 2015 layout, Shine Bright, and I had to do it pretty much immediately because I loved that layout and knew I could do a lot with it in 2023. This updated version makes it super easy to swap out image cutouts and gifs without being restricted to specific background colors, and overall I think it's just much prettier. 😭 Enjoy! 💖

Layout Coding

/*-- A CUT ABOVE - TESSISAMESS - 2023 --*/ /*-- 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: #7859AD; --text-color: #222; --date-tags: #999; --lightest: #fff; --page-bg: #F4F4F4; --content-bg: #fff; --borders: rgba(0,0,0,0.1); --accent: #7859AD; /* FONTS */ --main-font: calibri,arial,sans-serif; --headings: Allura; --title-font: Allura; --body-text: 13px; --title-text: 55px; --nav-text: 9px; --nav-icons: 12px; --side-text: 13px; --side-titles: 25px; --entry-titles: 30px; --entry-info: 10px; /* DIMENSIONS */ --content-width: 1100px; --header-height: 150px; --side-width: 300px; --side-padding: 30px; --margin: 30px; --padding: 30px; --entry-count: var(--side-width); /* DELETE var(--side-width) TO DISABLE COLUMNS */ --entry-icon-width: 95px; --entry-icon-height: 70px; /* IMAGES */ --bg-img: url(http://i.imgur.com/G3L9tcX.png)center fixed; --header-shape: url(https://i.imgur.com/M2UBKmK.png)center no-repeat; --header-img: url(https://i.imgur.com/JF2lIdN.gif)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: 'Allura'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/allura/v21/9oRPNYsQpS4zjuA_iwgW.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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 Symbols Outlined'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v120/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY40KH8nGzv3fzHVJU22ZZLsYEpzC_1ver5Y0.woff2) format('woff2'); } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* 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;margin:0 0 0 10px;padding:0 0 0 10px;border-left:3px 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:0;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;} #container:before{content:'';position:fixed;z-index:10;background:var(--borders);right:0;top:-29px;width:50.5vw;height:var(--header-height);transform:rotate(-6deg);} #container:after{content:'';position:fixed;z-index:10;background:var(--borders);left:0;top:-29px;width:50.5vw;height:var(--header-height);transform:rotate(6deg);} #container-inner:before{content:'';position:fixed;z-index:11;background:var(--content-bg);right:0;top:-30px;width:50.5vw;height:var(--header-height);transform:rotate(-6deg);} #container-inner:after{content:'';position:fixed;z-index:11;background:var(--content-bg);left:0;top:-30px;width:50.5vw;height:var(--header-height);transform:rotate(6deg);} .layout-two-column-left #alpha{margin:0 0 0 calc(var(--side-width) + var(--margin));} .layout-two-column-left #beta{float:left;width:var(--side-width);} .layout-two-column-right #alpha{margin:0;} .layout-two-column-right #beta{float:none;width:auto;} /* HEADER */ #header:before{content:'';width:50vw;height:calc(var(--header-height) / 2);background:var(--content-bg);position:fixed;z-index:1;top:0;} #header{position:sticky;top:0;z-index:12;height:var(--header-height);padding:0;color:var(--headings-color);display:flex;align-items:center;justify-content:center;line-height:1;} #header-inner{position:relative;padding:30px 0;background:var(--content-bg);} #header-inner:after{position:absolute;z-index:10;top:10px;bottom:10px;left:0;right:0;content:'';display:block;-webkit-mask:var(--header-shape);mask:var(--header-shape);-webkit-mask-size:auto 100%;mask-size:auto 100%;background:var(--borders) var(--header-img);background-size:auto 100%;} #banner{position:relative;z-index:13;} #nav-above{position:fixed;top:10px;right:10px;list-style:none;margin:0;padding:0;font-size:var(--nav-text);text-transform:uppercase;letter-spacing:2px;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:0 0 0 5px;display:inline-flex;border:1px solid var(--borders);padding:3px 5px;border-radius:4px;} #nav-above a:before{font-family:'Material Symbols Outlined';font-size:var(--nav-icons);margin:0 3px 0 0;font-weight:normal;} #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';} .current a{color:var(--headings-color);} #header-text{background:transparent;border:none;margin:0;padding:0;} #header-text a{color:var(--content-bg);} #banner-header{font-family:var(--title-font);text-align:center;font-size:var(--title-text);text-shadow:1px 1px 1px rgba(0,0,0,0.3),-1px -1px 1px rgba(0,0,0,0.3),1px -1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.3),-1px -1px 3px rgba(0,0,0,0.4);} #banner-description{display:none;} /* BODY OF PAGE */ #pagebody{padding:calc(var(--margin) * 2) var(--margin) var(--margin) var(--margin);} #pagebody-inner{max-width:var(--content-width);margin:0 auto;} /* MAIN COLUMN */ #alpha{background:transparent;border:none;padding:0;} .lj-view-recent #alpha{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;-webkit-column-gap:var(--margin);-moz-column-gap:var(--margin);column-gap:var(--margin);-webkit-column-width:var(--entry-count);-moz-column-width:var(--entry-count);column-width:var(--entry-count);} #alpha a, #alpha a:visited{color:var(--accent);} #alpha a:hover{color:var(--date-tags);} .content-nav{margin:var(--margin) 0 0 0;column-span:none;} .nav-top{display:none;} .nav-bottom, .entrypage{text-align:center;} #tagpage-header{text-align:center;column-span:none;} #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;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;} .entry-header{background:transparent;border:none;padding:0;line-height:1;} .entry-header h3{margin:0;padding:0;font-size:var(--entry-titles);text-align:center;} #alpha .entry-header a, #alpha .entry-header a:visited{color:var(--headings-color);} .lj-view-day .entry-datetime{display:none;} .entry-datetime{text-align:center;font-size:var(--entry-info);color:var(--date-tags);text-transform:uppercase;letter-spacing:3px;font-weight:bold;line-height:0;} .mid-entry-userpic{display:block;float:none;text-align:center;padding:0;margin:calc((var(--entry-icon-height) / 1.4) * -1) 0 0 0;} .mid-entry-userpic img{width:var(--entry-icon-width);height:var(--entry-icon-height);-webkit-mask:var(--header-shape);mask:var(--header-shape);-webkit-mask-size:100% 100%;mask-size:100% 100%;object-fit:cover;object-position:center;} .outer-entry-userpic{display:none;} .inner-entry-userpic img, .mid-entry-userpic .pic-poster{display:none;} .inner-entry-userpic{float:none;text-align:center;padding:0;position:absolute;bottom:var(--padding);left:var(--padding);} .inner-entry-userpic .pic-poster{text-align:center;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;font-weight:bold;display:block;line-height:1;} .pic-poster img{display:none;} .pic-poster a[href*="profile"]{display:none;} .pic-poster a{display:inline-flex;border:1px solid var(--borders);padding:3px 5px;border-radius:4px;} .pic-poster a:hover{background:var(--accent);color:var(--content-bg)!important;} .pic-poster a:before{font-family:'Material Symbols Outlined';font-size:var(--nav-icons);margin:0 3px 0 0;font-weight:normal;} .pic-poster a:before{content:'person';} .pic-poster .ljuser ~ .ljuser{margin:0 0 0 5px;} .pic-poster .ljuser ~ .ljuser a:before{content:'groups';} .entry-content{margin-top:20px;} .entry-text{min-height:0;overflow:hidden;line-height:1.6;text-align:justify;} .ljtags{margin:10px 0 0 0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:1px;font-weight:bold;} #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;text-transform:uppercase;letter-spacing:2px;font-weight:bold;line-height:1;} .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:15px 0 0 5px;display:inline-flex;border:1px solid var(--borders);padding:3px 5px;border-radius:4px;} .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;} .entry-linkbar a:before{font-family:'Material Symbols Outlined';font-size:var(--nav-icons);margin:0 3px 0 0;font-weight:normal;} .entry-linkbar a[href$='comments']:before{content:'comment';} .entry-linkbar li a[href*='reply']:before{content:'reply';} .entry-linkbar li a[href*='editjournal']:before{content:'edit';} .entry-linkbar li a[href*='edittags']:before{content:'label';} .entry-linkbar li a:hover{background:var(--accent);color:var(--content-bg)!important;} /* 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, .lj-view-month #alpha{padding:var(--padding);background:var(--content-bg);} /* SIDEBAR */ .layout-two-column-left #beta-inner:before{content:'';display:block;height:var(--side-width);background:var(--page-bg) var(--side-img);background-size:cover;border:var(--side-padding) solid var(--content-bg);outline:1px solid var(--borders);outline-offset:calc(1px * -1);margin:0 0 var(--margin) 0;} #beta-inner{font-size:var(--side-text);color:var(--text-color);} .layout-two-column-right .module{display:none;} .module{padding:var(--side-padding);background:var(--content-bg);border:1px solid var(--borders);margin:0 0 var(--margin) 0;} .module-header{background:transparent;border:none;} .module-header h3{margin:0;padding:0;font-size:var(--side-titles);color:var(--headings-color);text-align:center;} .module-header a, .module-header a:visited{color:var(--headings-color);} .module-customtext .module-content{padding:0;} .module-typelist{padding:0;background:transparent;border:0;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .module-typelist .module-header{display:none;} .module-typelist ul{list-style:none;margin:-5px 0 0 0;padding:0;} .module-typelist li a{display:block;background:var(--content-bg);border:1px solid var(--borders);padding:8px 15px;margin:5px 0 0 0;} .module-typelist li a:hover{background:var(--accent);color:var(--content-bg);} #tag-hierarchy ul{padding:0;margin:0;list-style:none;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} #tag-hierarchy ul li ul{padding-left:0;margin-left:20px;list-style:circle;font-size:var(--side-text);text-transform:capitalize;letter-spacing:0;font-weight:normal;} #tag-hierarchy ul li ul li{margin:5px 0;} .tag-count{font-size:x-small;} .all-link{margin:20px 0 0 0;text-align:center;font-size:var(--entry-info);text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .all-link a{padding:5px 10px;border:1px solid var(--borders);border-radius:4px;} .all-link a:hover{background:var(--accent);color:var(--content-bg);} .layout-two-column-right .module-layoutcredit{display:block;} .module-layoutcredit{position:fixed;bottom:10px;left:10px;padding:0;background:transparent;border:0;margin:0;} .module-layoutcredit .module-header{display:none;} .module-layoutcredit p{padding:0;margin:0;font-size:8px;text-transform:uppercase;letter-spacing:2px;font-weight:bold;} .module-layoutcredit a{padding:5px 10px 5px 12px;background:var(--content-bg);border:1px solid var(--borders);} .module-layoutcredit a:hover{background:var(--accent);color:var(--content-bg);} .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"], 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, 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) - Show sidebar
Two Column (Sidebar on right) - Hide 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 first custom sidebar module if desired. You'll want to disable Custom Text in the sidebar ordering dropdowns if you don't want to use this module.
♡ Fill in second custom sidebar module if desired. You'll want to disable Custom Text Two in the sidebar ordering dropdowns if you don't want to use this module.

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

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