Tessisamess

Information

Hey guys! How about a new bio code? 👀 This bio features a simple version with stats on the left and written bio on the right; as well as a more complex hidden click version, with stats, abilities, relationships, and player info on the right in different panels. Enjoy, and let me know if there are any specific types of codes you'd like to see posted over the next few months! 💖

Coding: Basic

<lj-raw><div style="margin:0 auto;width:950px;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:calibri,sans-serif;font-size:11px;color:#333;"> <!--STATS--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);padding:50px;box-sizing:border-box;"> <!--INNER--> <div style="background:#fff;padding:40px 60px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-family:times;font-size:7px;letter-spacing:3px;text-transform:uppercase;line-height:2;"><div style="width:100%;"> <!--IMAGE--> <div style="background:#eee url(STATS_IMG)center;background-size:cover;width:140px;height:175px;margin:0 auto 10px auto;display:block;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:50%;box-sizing:border-box;"></div> <center><b>NAME_HERE</b></center><br> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> </div></div> </div> <!--BIO--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);box-sizing:border-box;padding:50px;"> <!--INNER--> <div style="background:#fff;padding:20px 20px 10px 20px;height:100%;max-height:500px;overflow:auto;line-height:1.5;text-align:justify;box-sizing:border-box;"> <!--ABOUT--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">ABOUT</legend> ABOUT_INFO </fieldset> <!--PERSONALITY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">PERSONALITY</legend> PERSONALITY_INFO </fieldset> <!--BACKSTORY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">BACKSTORY</legend> BACKSTORY_INFO </fieldset> </div> </div> <!--PLAYER INFO--> <div style="width:100%;text-align:right;margin:5px 0 0 0;font-family:times;font-size:8px;letter-spacing:2px;text-transform:uppercase;"> NAME • AGE • TZ • DISCORD#1234 • PB NAME • <a href="https://tessisamess.insanejournal.com/140402.html" style="color:#333;text-decoration:none;">CODING</a> </div> </div></lj-raw>

Coding: Multi-Panel Sidebar

<lj-raw><div style="margin:0 auto;width:950px;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:calibri,sans-serif;font-size:11px;color:#333;"> <!--STATS--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);padding:50px 50px 0 50px;box-sizing:border-box;"> <div style="height:500px;overflow:hidden;"> <!--STATS--> <a name="stats"></a> <div style="background:#fff;padding:40px 60px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-family:times;font-size:7px;letter-spacing:3px;text-transform:uppercase;line-height:2;"><div style="width:100%;"> <!--IMAGE--> <div style="background:#eee url(STATS_IMG)center;background-size:cover;width:140px;height:175px;margin:0 auto 10px auto;display:block;border:10px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:50%;box-sizing:border-box;"></div> <center><b>NAME_HERE</b></center><br> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> INFO <div style="text-align:right;border-top:1px solid rgba(0,0,0,0.1);color:#000;">FIELD</div> </div></div> <!--ABILITIES--> <a name="abilities"></a> <div style="background:#fff;padding:30px;height:100%;line-height:1.5;box-sizing:border-box;overflow:auto;"> <center style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;"><b>ABILITIES</b></center> <!--ABILITY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:5px 10px 10px 10px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">ABILITY</legend> ABILITY_INFO </fieldset> </div> <!--RELATIONSHIPS--> <a name="relationships"></a> <div style="background:#fff;padding:30px;height:100%;line-height:1.5;box-sizing:border-box;overflow:auto;"> <center style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;"><b>RELATIONSHIPS</b></center> <!--SHIP--> <fieldset style="width:calc(50% - 15px);border:1px solid rgba(0,0,0,0.1);padding:5px 10px 10px 10px;margin:5px;font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;text-align:center;display:inline-block;box-sizing:border-box;"> <legend><img src="SHIP_ICON" style="height:70px;border:4px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:100%;box-sizing:border-box;"></legend> NAME<br> TYPE </fieldset> </div> <!--PLAYER INFO--> <a name="player"></a> <div style="background:#fff;padding:40px 60px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-family:times;font-size:7px;letter-spacing:3px;text-transform:uppercase;line-height:2;text-align:center;"><div style="width:100%;"> <img src="PLAYER_ICON" style="height:90px;margin:0 auto 10px auto;display:block;border:8px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.1),2px 2px 2px 0 rgba(0,0,0,0.1);border-radius:100%;box-sizing:border-box;"> <center><b>PLAYER INFO</b></center> NAME • AGE • TZ<br> DISCORD#1234<br> PB NAME </div></div> </div> <!--LEFT BOTTOM NAV--> <div style="height:50px;display:flex;align-items:center;justify-content:center;line-height:0;font-size:25px;letter-spacing:7px;"> <a href="#stats" title="stats." style="color:#fff;text-decoration:none;">•</a> <a href="#abilities" title="abilities." style="color:#fff;text-decoration:none;">•</a> <a href="#relationships" title="relationships." style="color:#fff;text-decoration:none;">•</a> <a href="#player" title="player info." style="color:#fff;text-decoration:none;">•</a> </div> </div> <!--BIO--> <div style="background:#ddd url(BG_IMG)center;background-size:cover;width:calc(50% - 5px);box-sizing:border-box;padding:50px;"> <!--INNER--> <div style="background:#fff;padding:20px 20px 10px 20px;height:100%;max-height:500px;overflow:auto;line-height:1.5;text-align:justify;box-sizing:border-box;"> <!--ABOUT--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">ABOUT</legend> ABOUT_INFO </fieldset> <!--PERSONALITY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">PERSONALITY</legend> PERSONALITY_INFO </fieldset> <!--BACKSTORY--> <fieldset style="border:1px solid rgba(0,0,0,0.1);padding:10px 15px 15px 15px;margin:0 0 10px 0;"> <legend style="font-family:times;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#000;">BACKSTORY</legend> BACKSTORY_INFO </fieldset> </div> </div> <div style="width:100%;text-align:right;margin:5px 0 0 0;font-family:times;font-size:8px;letter-spacing:2px;text-transform:uppercase;"><a href="https://tessisamess.insanejournal.com/140402.html" style="color:#aaa;text-decoration:none;">CODING</a></div></div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

BG_IMG - Background border image (both sides)
STATS_IMG - Lefthand image
SHIP_ICON - Relationship icons (multi-panel only)
PLAYER_ICON - Player info icon (multi-panel only)

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 - Headings

Font too small? No worries! Here's your resize guide:
font-size:11px; - Body text
font-size:8px; - Written bio headings
font-size:7px; - Small text

COLORS

#fff

Content background

#333

Body text

#000

"Field" titles; written bio headings

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!