Tessisamess

CODING

Information

Hey guys! It's been a little bit since we've had an advertising code (that could easily be used for other things!) so that's what we've got today. This code is heavily inspired by this lovely code by Emme on Tumblr. I saw it and thought, you know what, I think I know how to make something similar in an entry-safe way—so that's what I did!

The navigation section clicks to expand and add a link nav on the side without need for hidden sectiond or static positioning. Enjoy! 💖

The Coding

<lj-raw><div style="margin:0 auto;width:500px;height:550px;padding:50px 50px 50px 0;background:#666 url(BG_IMG)center;background-size:cover;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;outline:1px solid #fff;outline-offset:-15px;line-height:1;"> <!--CONTENT--> <details style="font-family:calibri,sans-serif;font-size:12px;color:rgba(255,255,255,0.8);text-align:center;"> <!--INFO--> <summary style="width:calc(500px / 2);height:100%;padding:20px;cursor:pointer;font-size:0;display:inline-flex;align-items:center;justify-content:center;background:#222;border:1px solid rgba(255,255,255,0.2);box-sizing:border-box;float:left;"> <div style="font-size:12px;line-height:1.5;"> <!--TITLE--> <div style="display:inline-block;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#fff;border-bottom:2px solid #777;padding:0 10px 10px 10px;margin:0 0 20px 0;">GAME_NAME</div><br> PREMISE_SUMMARY <!--MORE--> <br><div style="display:inline-block;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#fff;line-height:3;background:#777;padding:2px 20px 0 20px;margin:20px auto 0 auto;">NAVIGATE</div> </div> </summary> <!--NAV--> <div style="width:calc(500px / 3.45);height:100%;padding:20px;display:inline-flex;align-items:center;justify-content:center;background:#222;border:1px solid rgba(255,255,255,0.2);margin:0 0 0 5px;box-sizing:border-box;"><div style="width:100%;line-height:2;font-family:times,serif;font-size:8px;text-transform:uppercase;letter-spacing:1px;"> <img src="IMG_OR_ICON" style="margin:0 0 15px 0;width:90px;outline:1px solid rgba(255,255,255,0.1);outline-offset:8px;box-sizing:content-box;"> <a href="URL" style="color:#fff;text-decoration:none;display:block;padding:2px 0 0 0;margin:3px 0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1);">LINK</a> <a href="URL" style="color:#fff;text-decoration:none;display:block;padding:2px 0 0 0;margin:3px 0;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1);">LINK</a> </div></div> </details> </div><center style="margin:5px 0 0 0;font-size:7px;letter-spacing:3px;font-weight:bold;"><a href="https://tessisamess.insanejournal.com/140003.html" style="color:#aaa;text-decoration:none;">CODING</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

BG_IMG - Background image
IMG_OR_ICON - Nav image

Editing Guide

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

FONTS

calibri,sans-serif - Body text
times,serif - Acdent text

COLORS

#fff

Container border; body text

rgba(255,255,255,0.1)

Image border; link background and border

#777

Title border; 'navigate' faux link background

#666

Container background

#222

Content background

#000

weee

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!