Tessisamess

image preview | tess094

Information

Hey guys! After making the Switch Lite mockup layout, obviously I needed to follow it with a Gameboy one. Since the screen on this console is so small, this time we're using it for sidebar information, and entries are a popout panel on Recent (open by default on all other pages.) Enjoy! 💖

Layout Coding

/*-- PRETENDO GAME KID - 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: #960254; --text-color: #ddd; --date-tags: #666; --lightest: #fff; --page-bg: #1D1D1B; --content-bg: rgba(0,0,0,0.1); --borders: rgba(255,255,255,0.2); --accent: #960254; --gameboy-bg: #D0CCC6; --gameboy-plate: #6B6A6F; --gameboy-plate-text: rgba(255,255,255,0.7); --gameboy-screen: #5A6C17; --gameboy-screen-text: #000; --gameboy-pad: #1D1D1B; --gameboy-accent1: #372670; --gameboy-accent2: #960254; --gameboy-options: #978D90; --gameboy-power: #FF2A40; /* FONTS */ --main-font: calibri,arial,sans-serif; --headings: Orbitron; --title-font: Orbitron; --body-text: 11px; --title-text: 30px; --subtitle-text: 20px; --nav-text: 12px; --side-text: 11px; --side-titles: 20px; --entry-titles: 12px; --entry-info: 8px; /* DIMENSIONS */ --content-width: 750px; --content-height: 490px; --side-width: 300px; --side-padding: 20px; --margin: 40px; --padding: 30px; --entry-icon: 35px; /* IMAGES */ --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: 'Orbitron'; font-style: normal; font-weight: 800; src: url(https://fonts.gstatic.com/s/orbitron/v25/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nymymBoWgz.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: 'Silkscreen'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/silkscreen/v1/m8JXjfVPf62XiF7kO-i9YLNlaw.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; } /* GENERAL */ ::selection{background:var(--accent);color:var(--lightest);} ::-moz-selection{background:var(--accent);color:var(--lightest);} ::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);border-radius:4px;} ::-webkit-scrollbar{width:4px;background:transparent;} ::-webkit-scrollbar-thumb{background:var(--borders);border-radius:4px;} *, *:before, *:after{box-sizing:border-box;} body{margin:0;padding:0;background:var(--page-bg);font-family:var(--headings);font-size:var(--body-text);color:var(--text-color);} blockquote{font-style:normal;border:1px dashed var(--borders);margin:10px;padding:10px;} h1,h2,h3,h4,h5,h6{font-family:var(--headings);margin:0;font-weight:normal;text-transform:uppercase;} img{max-width:100%!important;} ul{list-style:square;} hr{border:none;border-bottom:1px dotted var(--borders);} summary{cursor:pointer;} summary:focus{outline:none;} a, a:visited, a:active{color:var(--headings-color);text-decoration:none;} 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);height:100vh;display:flex;align-items:center;justify-content:center;} #container-inner{max-width:var(--content-width);} #pagebody-inner{display:flex;align-items:flex-start;justify-content:center;padding:10px 0 0 0;position:relative;} .layout-three-column-middle #alpha{margin:0;} .layout-three-column-middle #beta{float:left;width:var(--side-width);} .layout-three-column-middle #gamma{float:none;width:auto;} /* HEADER */ #header{display:none;} /* MAIN COLUMN */ #alpha{border:1px solid var(--borders);padding:calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2) 0;background:var(--content-bg);overflow:hidden;height:calc(var(--content-height) - 10px - 60px);margin:0 0 60px 0;width:calc(var(--content-width) - var(--side-width));} .lj-view-recent #alpha{display:none;} #alpha-inner{height:100%;overflow:auto;padding:var(--padding);} #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;letter-spacing:1px;} .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);text-transform:uppercase;letter-spacing:1px;} .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:0;position:relative;} .entry-header{background:transparent;border:none;padding:0;} .entry-header h3{margin:0;padding:7px 0 0 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{font-size:var(--entry-info);color:var(--date-tags);} .mid-entry-userpic{display:block;float:left;text-align:center;padding:0 5px 0 0;} .mid-entry-userpic img{width:var(--entry-icon);height:var(--entry-icon);} .outer-entry-userpic, .inner-entry-userpic{display:none;} .pic-poster{position:absolute;top:-5px;right:0;left:var(--entry-icon);display:flex;align-items:center;border-bottom:1px dashed var(--borders);text-align:right;font-size:8px;letter-spacing:1px;text-transform:uppercase;display:block;} .pic-poster img{display:none;} .pic-poster a{color:var(--date-tags)!important;} .pic-poster a[href*="profile"]{display:none;} .pic-poster .ljuser ~ .ljuser:before{content:'in';margin:0 5px;text-transform:lowercase;color:var(--accent);} .entry-content{margin-top:15px;} .entry-text{min-height:0;overflow:hidden;font-family:var(--main-font);line-height:1.6;text-align:justify;} .ljtags{margin:10px 0 0 0;font-family:var(--headings);font-size:var(--entry-info);text-transform:uppercase;} #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;} .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;} .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(255,255,255,0.05);padding:5px;} /* TAGS & MONTH VIEW */ .lj-view-tags #alpha, .lj-view-month #alpha{padding:calc(var(--padding) / 2) calc(var(--padding) / 2) calc(var(--padding) / 2) 0;background:var(--content-bg);margin:0 0 60px 0;} /* SIDEBARS */ #beta{margin:-10px 0 0 0;} #beta-inner{font-size:var(--side-text);color:var(--text-color);} #gamma{background:var(--gameboy-screen);border-radius:3px;box-shadow:inset 0 0 5px 0 rgba(0,0,0,0.3);width:162px!important;height:146px;overflow:auto;position:absolute;top:62px;left:67px;text-align:center;padding:10px;} .lj-view-recent #gamma{display:none;} #gamma:target{display:block;} #gamma:target ~ #alpha{display:block;} #gamma-inner{font-family:Silkscreen,ms gothic;font-size:8px;color:var(--gameboy-screen-text);} #gamma-inner a{color:var(--gameboy-screen-text);} #gamma-inner a:hover{opacity:0.4;background:rgba(0,0,0,0.1);} .module{display:none;padding:0;background:transparent;margin: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);} #beta .module-customtext{display:block;} .module-customtext .module-content{padding:0;} #gamma .module-customtext2{display:block;margin:0 0 5px 0;} #gamma .module-typelist{display:block;} .module-typelist ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;} .module-typelist li{width:50%;} .module-typelist li a{display:block;margin:1px;border:1px solid;padding:2px 0 2px 2px;border-radius:10px;} #beta .module-layoutcredit{display:block;position:fixed;text-transform:uppercase;letter-spacing:1px;font-size:6px;margin:8px 0 0 5px;} .module-layoutcredit p{padding:0;margin:0;} .module-layoutcredit a{border:1px solid;padding:2px 3px 2px 5px;border-radius:10px;color:var(--gameboy-plate-text);} .module-pagesummary, .module-calendar, .module-categories, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;} /* GAMEBOY */ .gameboy{height:490px;width:300px;background:var(--gameboy-bg);border-radius:8px 8px 65px 10px;overflow:hidden;text-align:center;box-shadow:inset -1px -1px 1px 0 rgba(0,0,0,0.3),inset -2px -2px 1px 0 var(--gameboy-bg),inset -3px -3px 3px 0 rgba(255,255,255,0.5),2px 2px 10px 0 rgba(0,0,0,0.2);} .gameboy .grooves{display:flex;justify-content:space-between;flex-wrap:wrap;} .gameboy .grooves div{background:rgba(0,0,0,0.1);box-shadow:inset 0 0 2px 0 rgba(0,0,0,0.2);} .gameboy .grooves .left{height:20px;width:5px;margin:0 0 0 22px;} .gameboy .grooves .right{height:20px;width:5px;margin:0 22px 0 0;} .gameboy .grooves .bottom{width:100%;height:5px;} .gameboy .plate{height:190px;padding:0 8px 44px 8px;margin:15px 22px 5px 22px;background:var(--gameboy-plate);border-radius:8px 8px 45px 8px;box-shadow:inset 0 0 1px 1px rgba(0,0,0,0.2),inset 1px 1px 2px 1px rgba(255,255,255,0.3),inset -1px -1px 2px 0 rgba(0,0,0,0.2);color:var(--gameboy-plate-text);} .gameboy .plate .title{height:22px;display:flex;align-items:center;justify-content:flex-end;text-align:right;} .gameboy .plate .title .borders{width:100%;line-height:0.3;border-top:1px solid var(--gameboy-accent2);border-bottom:1px solid var(--gameboy-accent1);font-family:var(--main-font);font-size:8px;letter-spacing:1px;} .gameboy .plate .title .text{background:var(--gameboy-plate);display:inline-block;padding:2px 5px;margin:-2px 30px -2px 0;} .gameboy .plate .power{font-family:var(--main-fo);float:left;height:100%;width:38px;display:flex;align-items:center;justify-content:center;padding:0 0 30px 0;box-sizing:border-box;font-family:var(--main-font);font-size:7px;letter-spacing:1px;text-shadow:1px 1px 0 rgba(0,0,0,0.1);} .gameboy .plate .power .light{background:var(--gameboy-power);width:10px;height:10px;box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.6);border-radius:100%;margin:0 0 5px 0;} @keyframes blink{to{visibility:hidden;}} @-webkit-keyframes blink{to{visibility:hidden;}} @-webkit-keyframes push{to{padding:0;}} .gameboy .plate .screen{height:100%;margin:0 40px 0 0;background:var(--gameboy-screen);border-radius:3px;box-shadow:inset 0 0 5px 0 rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;font-family:Silkscreen,ms gothic;font-size:9px;color:var(--gameboy-screen-text);} .gameboy .plate .screen *{height:146px;padding:160px 0 0 0;animation:push 2.5s steps(5, start) infinite;-webkit-animation:push 2.5s steps(5, start) infinite;} .gameboy .controls{position:relative;height:calc(100% - 25px - 190px - 15px - 5px);font-size:10px;color:var(--gameboy-accent1);} .gameboy .controls .title{text-align:left;padding:0 0 0 22px;font-size:13px;} .gameboy .controls .title i{font-size:17px;} .gameboy .controls .title span{font-family:var(--main-font);font-size:22px;} .gameboy .controls .arrows{position:absolute;left:24px;top:50px;height:75px;width:75px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-gap:0;grid-template-areas:'. top .''left center right''. bottom .';line-height:26px;font-size:10px;color:rgba(255,255,255,0.1);} .gameboy .controls .arrows a{color:rgba(255,255,255,0.1);background:var(--gameboy-pad);box-shadow:0 0 0 1px rgba(255,255,255,0.5),0 0 2px 1px rgba(0,0,0,0.4);} .gameboy .controls .arrows a:hover{color:rgba(255,255,255,0.4);} .gameboy .controls .arrows .center{grid-area:center;background:var(--gameboy-pad);position:relative;box-shadow:0 0 0 1px #1D1D1B;box-sizing:border-box;padding:4px 5px 5px 4px;} .gameboy .controls .arrows .center div{width:100%;height:100%;border-radius:100%;border:1px solid;} .gameboy .controls .arrows .up{grid-area:top;border-radius:4px 4px 0 0;} .gameboy .controls .arrows .left{grid-area:left;border-radius:4px 0 0 4px;} .gameboy .controls .arrows .right{grid-area:right;border-radius:0 4px 4px 0;} .gameboy .controls .arrows .down{grid-area:bottom;border-radius:0 0 4px 4px;} .gameboy .buttons{position:absolute;right:12px;top:60px;width:98px;transform:rotate(-25deg);display:flex;justify-content:space-between;} .gameboy .buttons .button{display:block;background:var(--gameboy-accent2);width:40px;height:40px;border-radius:100%;box-shadow:inset 0 3px 0 0 rgba(255,255,255,0.1);margin:0 0 8px 0;border-top:2px solid rgba(0,0,0,0.8);border-left:1px solid rgba(0,0,0,0.8);} .gameboy .buttons .button:hover{border:1.5px solid rgba(0,0,0,0.8);box-shadow:inset 0 0 0 40px rgba(0,0,0,0.2),inset 0 0 2px 1px rgba(0,0,0,0.2);} .gameboy .options{position:absolute;left:95px;bottom:52px;width:83px;transform:rotate(-27deg);display:flex;justify-content:space-between;font-size:9px;} .gameboy .options a{color:var(--gameboy-accent1);} .gameboy .options .select{width:47%;} .gameboy .options .start{width:47%;margin:23px 0 0 8px;} .gameboy .options .button{height:9px;border-radius:9px;background:var(--gameboy-options);box-shadow:1px 1px 0 0 rgba(0,0,0,0.8),0 0 0 0.5px rgba(0,0,0,0.8),0 0 5px 0 rgba(0,0,0,0.4);margin:0 0 5px 0;} .gameboy .options .button:hover{box-shadow:1px 1px 0 0 rgba(0,0,0,0.8),0 0 0 0.5px rgba(0,0,0,0.8),0 0 5px 0 rgba(0,0,0,0.4),inset 0 0 0 9px rgba(0,0,0,0.2);} .gameboy .speaker{position:absolute;right:15px;bottom:28px;height:50px;width:90px;transform:rotate(-30deg);display:flex;justify-content:space-between;} .gameboy .speaker .vent{background:rgba(0,0,0,0.15);width:6px;border-radius:6px;box-shadow:inset 1px 1px 1px 0 rgba(0,0,0,0.15);} /* 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);}

First Custom Text

<div class="gameboy"><div class="grooves"><div class="left"></div><div class="right"></div><div class="bottom"></div></div><div class="plate"><div class="title"><div class="borders"><div class="text">DOT MATRIX WITH STEREO SOUND</div></div></div><div class="power"><div><div class="light"></div>BATTERY</div></div><div class="screen"><div>PRESS START</div></div></div><div class="controls"><div class="title">Pretendo <i>GAME KID_{<span>™</span>}</i></div> <div class="arrows"> <a href="/profile" title="profile" class="up">▲</a> <a href="/calendar" title="calendar" class="left">◀</a> <div class="center"><div></div></div> <a href="/friends" title="friends" class="right">▶</a> <a href="/" title="home" class="down">▼</a> </div> <div class="buttons"> <div><a href="" title="" class="button"></a>B</div> <div><a href="" title="" class="button"></a>A</div> </div> <div class="options"> <a href="#" title="close" class="select"><div class="button"></div>SELECT</a> <a href="#gamma" title="open" class="start"><div class="button"></div>START</a> </div> <div class="speaker"><div class="vent"></div><div class="vent"></div><div class="vent"></div><div class="vent"></div><div class="vent"></div><div class="vent"></div></div></div></div>

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: Three Column (Content in Middle)
♡ Disable customized comment pages for your journal: Yes
♡ Show Posting Time on Entries: No
♡ Show Userpics on Entries: Yes or No

♡ Fill in sticky note if desired.
♡ Fill in first custom text with the game console coding (above)
♡ Fill in second custom text with your blurb (optional)

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

♡ Swap Links and Custom Text Two in the Secondary Sidebar ordering (dropdown menus)

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