Tessisamess

PREVIEW: CLASSIC | PREVIEW: COMPACT | PREVIEW: FULL

Information

Hey guys! Today's code is actually three with matching styles across the board, so I decided to post them together, haha. All color/font/image values are the same for all three, so which one you choose is really more based on your preference of bio setup than anything.

Profiler comes in three setups: Classic, for those of you who prefer standard application-style setups with no hidden content; Compact, for anyone who prefers small-seeming bios that pack a punch; and Full, which is a large 'hidden click' bio like the ones I usually make.

Enjoy! ♥

Coding: Classic

<lj-raw><div style="margin:0 auto;width:950px;font-family:century gothic,arial,sans-serif;font-size:14px;text-align:justify;line-height:1.7;border:1px solid rgba(0,0,0,0.1);"> <div style="background:#000 url(BGIMG)center;background-size:cover;color:#fff;"><div style="height:300px;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;"><div> <img src="ICONHERE" style="width:80px;height:80px;border:2px solid #fff;border-radius:100%;"> <div style="font-size:27px;color:#AA5252;"> NAMEHERE </div> <div style="opacity:0.8;font-size:12px;"> BLURBHERE </div> </div></div></div> <div style="padding:40px;"> <div style="display:flex;"> <div style="width:30%;margin-right:4%;"> <div style="font-size:24px;color:#AA5252;">General Information</div> <b>name.</b> Name<br> <b>age.</b> 00<br> <b>birthday.</b> Month 00<br><br> <b>sexuality.</b> Orientation<br> <b>marital status.</b> Single/Married/Etc.<br> <b>occupation.</b> Career/Job<br> <b>current location.</b> City, ST<br><br> <div style="font-size:24px;color:#AA5252;">Characteristics</div> <b>height.</b> 0'0"<br> <b>build.</b> Bodytype<br> <b>hair.</b> Haircolor<br> <b>eyes.</b> Eyecolor<br><br> <div style="font-size:24px;color:#AA5252;">Family Background</div> <b>mother.</b> Momname<br> <b>father.</b> Dadname<br> <b>sibling.</b> Sibname<br> <b>other.</b> Relative<br><br> <div style="font-size:24px;color:#AA5252;">Extended Information</div> Add any genre-specific info fields you need here! </div> <div style="width:66%;"> <div style="font-size:24px;color:#AA5252;">About</div> <div style="padding:20px;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:5px;margin-bottom:10px;"> ABOUTINFOHERE </div> <div style="font-size:24px;color:#AA5252;">Personality</div> <div style="padding:20px;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:5px;margin-bottom:10px;"> PERSONALITYINFOHERE </div> <div style="font-size:24px;color:#AA5252;">Appearance</div> <div style="padding:20px;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:5px;margin-bottom:10px;"> APPEARANCEINFOHERE </div> </div> </div> <div style="font-size:24px;color:#AA5252;">History</div> <div style="padding:20px;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:5px;margin-bottom:10px;"> HISTORYINFOHERE </div> </div> <div style="background:#060606;padding:30px;text-align:center;color:#fff;display:flex;justify-content:space-between;align-items:center;letter-spacing:1px;font-size:12px;"> <div style="font-size:21px;color:#AA5252;">player</div> <div> <b>name.</b> name <b>age.</b> 00 <b>timezone.</b> 000 <b>pb.</b> pbname <b>code.</b> <a href="http://tessisamess.insanejournal.com/" style="color:#fff;text-decoration:none;">tessisamess</a> </div> </div> </div></lj-raw>

Coding: Compact

<lj-raw><div style="margin:0 auto;width:500px;font-family:century gothic,arial,sans-serif;font-size:14px;text-align:justify;line-height:1.7;border:1px solid rgba(0,0,0,0.1);"> <div style="background:#000 url(BGIMAGE)center;background-size:cover;color:#fff;"><div style="height:250px;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;"><div> <img src="ICONHERE" style="width:60px;height:60px;border:2px solid #fff;border-radius:100%;"> <div style="font-size:27px;color:#AA5252;"> NAMEHERE </div> <div style="opacity:0.8;font-size:12px;"> BLURBHERE </div> </div></div></div> <details style="padding:25px;border-bottom:1px solid rgba(0,0,0,0.1);"> <summary style="font-size:24px;color:#AA5252;letter-spacing:1px;cursor:pointer;"> Statistics </summary> <b>name.</b> Name<br> <b>age.</b> 00<br> <b>height.</b> 0'0"<br> <b>build.</b> Bodytype<br> <b>hair.</b> Haircolor<br> <b>eyes.</b> Eyecolor<br><br> <b>sexuality.</b> Orientation<br> <b>marital status.</b> Single/Married/Etc.<br> <b>occupation.</b> Career/Job<br> <b>current location.</b> City, ST<br><br> <b>mother.</b> Momname<br> <b>father.</b> Dadname<br> <b>sibling.</b> Sibname<br> <b>other.</b> Relative<br><br> </details> <details style="padding:25px;border-bottom:1px solid rgba(0,0,0,0.1);"> <summary style="font-size:24px;color:#AA5252;letter-spacing:1px;cursor:pointer;"> Personality </summary> <div style="display:flex;flex-wrap:wrap;text-align:center;font-size:11px;margin-bottom:25px;"> <b style="width:100%;letter-spacing:3px;">MIND</b> <div style="width:50%;background:#AA5252;color:#fff;text-align:left;">50% EXTROVERTED</div> <div style="width:50%;background:#eee;text-align:right;">50% INTROVERTED</div> <b style="width:100%;letter-spacing:3px;">ENERGY</b> <div style="width:50%;background:#eee;text-align:left;">50% INTUITIVE</div> <div style="width:50%;background:#AA5252;color:#fff;text-align:right;">50% OBSERVANT</div> <b style="width:100%;letter-spacing:3px;">NATURE</b> <div style="width:50%;background:#AA5252;color:#fff;text-align:left;">50% THINKING</div> <div style="width:50%;background:#eee;text-align:right;">50% FEELING</div> <b style="width:100%;letter-spacing:3px;">TACTICS</b> <div style="width:50%;background:#eee;text-align:left;">50% JUDGING</div> <div style="width:50%;background:#AA5252;color:#fff;text-align:right;">50% PROSPECTING</div> <b style="width:100%;letter-spacing:3px;">IDENTITY</b> <div style="width:50%;background:#eee;text-align:left;">50% ASSERTIVE</div> <div style="width:50%;background:#AA5252;color:#fff;text-align:right;">50% TURBULENT</div> </div> PERSONALITYINFOHERE </details> <details style="padding:25px;border-bottom:1px solid rgba(0,0,0,0.1);"> <summary style="font-size:24px;color:#AA5252;letter-spacing:1px;cursor:pointer;"> Appearance </summary> <div style="display:flex;justify-content:space-between;margin-bottom:25px;"> <img src="ICON1"> <img src="ICON2"> <img src="ICON3"> <img src="ICON4"> </div> APPEARANCEINFOHERE </details> <details style="padding:25px;border-bottom:1px solid rgba(0,0,0,0.1);"> <summary style="font-size:24px;color:#AA5252;letter-spacing:1px;cursor:pointer;"> Timeline </summary> <div style="font-size:17px;color:#AA5252;letter-spacing:1px;">Section</div> HISTORYINFOHERE<br><br> <div style="font-size:17px;color:#AA5252;letter-spacing:1px;">Section</div> HISTORYINFOHERE<br><br> </details> <details style="padding:25px;border-bottom:1px solid rgba(0,0,0,0.1);"> <summary style="font-size:24px;color:#AA5252;letter-spacing:1px;cursor:pointer;"> Soundtrack </summary> <a href="SONGURL" style="padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);text-decoration:none;color:#999;display:flex;align-items:center;justify-content:space-between;"> <img src="ALBUMIMG" style="width:50px;height:50px;"> <div style="width:100%;margin:0 10px;"><div style="font-size:15px;color:#AA5252;letter-spacing:1px;"> Song Title </div> <i>song artist</i></div> <div style="float:right;">0:00</div> </a> </details> <div style="background:#060606;padding:20px;text-align:center;color:#fff;letter-spacing:1px;font-size:12px;"> <div style="font-size:21px;color:#AA5252;">player</div> <b>name.</b> name <b>age.</b> 00 <b>timezone.</b> 000 <b>pb.</b> pbname<br> <b>code.</b> <a href="http://tessisamess.insanejournal.com/" style="color:#fff;text-decoration:none;">tessisamess</a> </div> </div></lj-raw>

Coding: Full

<lj-raw><div style="margin:0 auto;width:950px;font-family:century gothic,arial,sans-serif;font-size:14px;text-align:justify;line-height:1.7;border:1px solid rgba(0,0,0,0.1);"> <div style="height:600px;display:flex;"> <div style="width:100%;background:#000 url(BGIMAGE)center;background-size:cover;color:#fff;"><div style="width:100%;height:100%;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;text-align:center;"><div style="padding:40px;"> <img src="ICONHERE" style="width:70px;height:70px;border:2px solid #fff;border-radius:100%;"> <div style="font-size:25px;color:#AA5252;"> NAMEHERE </div> <div style="opacity:0.8;font-size:12px;"> BLURBHERE </div> </div></div></div> <div style="width:100%;overflow:hidden;"> <a name="home"></a><div style="height:100%;overflow:hidden;"> <div style="font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;color:#AA5252;"> Navigation </div> <a href="#1" style="display:block;font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Statistics </a> <a href="#2" style="display:block;font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Personality </a> <a href="#3" style="display:block;font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Appearance </a> <a href="#4" style="display:block;font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Timeline </a> <a href="#5" style="display:block;font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Soundtrack </a> <a href="#6" style="display:block;font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Aesthetics </a> <a href="CONTACTURL" style="display:block;font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Contact Me </a> </div> <a name="1"></a><div> <div style="font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;color:#AA5252;"> Statistics </div> <div style="padding:20px;height:444px;overflow:auto;"> <b>name.</b> Name<br> <b>age.</b> 00<br> <b>height.</b> 0'0"<br> <b>build.</b> Bodytype<br> <b>hair.</b> Haircolor<br> <b>eyes.</b> Eyecolor<br><br> <b>sexuality.</b> Orientation<br> <b>marital status.</b> Single/Married/Etc.<br> <b>occupation.</b> Career/Job<br> <b>current location.</b> City, ST<br><br> <b>mother.</b> Momname<br> <b>father.</b> Dadname<br> <b>sibling.</b> Sibname<br> <b>other.</b> Relative<br><br> </div> <a href="#home" style="display:block;font-size:22px;border-top:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Home </a> </div> <a name="2"></a><div> <div style="font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;color:#AA5252;"> Personality </div> <div style="padding:20px;height:444px;overflow:auto;"> <div style="display:flex;flex-wrap:wrap;text-align:center;font-size:11px;margin-bottom:25px;line-height:1.9;"> <b style="width:100%;letter-spacing:3px;">MIND</b> <div style="width:50%;background:#AA5252;color:#fff;text-align:left;">50% EXTROVERTED</div> <div style="width:50%;background:#eee;text-align:right;">50% INTROVERTED</div> <b style="width:100%;letter-spacing:3px;">ENERGY</b> <div style="width:50%;background:#eee;text-align:left;">50% INTUITIVE</div> <div style="width:50%;background:#AA5252;color:#fff;text-align:right;">50% OBSERVANT</div> <b style="width:100%;letter-spacing:3px;">NATURE</b> <div style="width:50%;background:#AA5252;color:#fff;text-align:left;">50% THINKING</div> <div style="width:50%;background:#eee;text-align:right;">50% FEELING</div> <b style="width:100%;letter-spacing:3px;">TACTICS</b> <div style="width:50%;background:#eee;text-align:left;">50% JUDGING</div> <div style="width:50%;background:#AA5252;color:#fff;text-align:right;">50% PROSPECTING</div> <b style="width:100%;letter-spacing:3px;">IDENTITY</b> <div style="width:50%;background:#eee;text-align:left;">50% ASSERTIVE</div> <div style="width:50%;background:#AA5252;color:#fff;text-align:right;">50% TURBULENT</div> </div> PERSONALITYINFOHERE </div> <a href="#home" style="display:block;font-size:22px;border-top:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Home </a> </div> <a name="3"></a><div> <div style="font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;color:#AA5252;"> Appearance </div> <div style="padding:20px;height:444px;overflow:auto;"> <div style="display:flex;justify-content:space-between;margin-bottom:25px;"> <img src="ICON1"> <img src="ICON2"> <img src="ICON3"> <img src="ICON4"> </div> APPEARANCEINFOHERE </div> <a href="#home" style="display:block;font-size:22px;border-top:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Home </a> </div> <a name="4"></a><div> <div style="font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;color:#AA5252;"> Timeline </div> <div style="padding:20px;height:444px;overflow:auto;"> <div style="font-size:17px;color:#AA5252;letter-spacing:1px;">Section</div> HISTORYINFOHERE<br><br> <div style="font-size:17px;color:#AA5252;letter-spacing:1px;">Section</div> HISTORYINFOHERE<br><br> </div> <a href="#home" style="display:block;font-size:22px;border-top:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Home </a> </div> <a name="5"></a><div> <div style="font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;color:#AA5252;"> Soundtrack </div> <div style="padding:20px;height:444px;overflow:auto;"> <a href="SONGURL" style="padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);text-decoration:none;color:#999;display:flex;align-items:center;justify-content:space-between;"> <img src="ALBUMIMG" style="width:50px;height:50px;"> <div style="width:100%;margin:0 10px;"><div style="font-size:15px;color:#AA5252;letter-spacing:1px;"> Song Title </div> <i>song artist</i></div> <div style="float:right;">0:00</div> </a> </div> <a href="#home" style="display:block;font-size:22px;border-top:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Home </a> </div> <a name="6"></a><div> <div style="font-size:22px;border-bottom:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;color:#AA5252;"> Aesthetics </div> <div style="height:484px;overflow:auto;"> <div style="-webkit-column-count:3;-webkit-column-gap:0;-moz-column-count:3;-moz-column-gap:0;column-count:3;column-gap:0;"> <!---YOUR IMAGES; ADD AS MANY AS YOU LIKE--> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> <img src="URL" style="width:100%!important;height:auto!important;"> </div> </div> <a href="#home" style="display:block;font-size:22px;border-top:1px solid rgba(0,0,0,0.1);padding:10px 20px;letter-spacing:1px;text-align:right;text-decoration:none;color:#000;"> Home </a> </div> </div> </div> <div style="background:#060606;padding:20px;display:flex;justify-content:space-between;align-items:center;text-align:center;color:#fff;letter-spacing:1px;font-size:12px;"> <div style="font-size:21px;color:#AA5252;">player</div> <div> <b>name.</b> name <b>age.</b> 00 <b>timezone.</b> 000 <b>pb.</b> pbname <b>code.</b> <a href="http://tessisamess.insanejournal.com/" style="color:#fff;text-decoration:none;">tessisamess</a> </div> </div> </div></lj-raw>

Installation Guide

Paste into an entry and fill in the following! Most of the information is pretty standard if you use my bio codes regularly, so I'll just put in the placeholder plug-ins for non-text information below:

BGIMAGE - Header background
ICONHERE - Header icon
NAMEHERE - Header title
BLURBHERE - Header subtitle

ICON1 through ICON4 - Appearance icons (Compact and Full only)
SONGURL and ALBUMIMG - Playlist blocks (Compact and Full only)

CONTACTURL - Contact link (Full 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

century gothic,arial,sans-serif; - Overall font

COLORS

#fff

Classic/Compact/Full: Header icon border, header blurb, OOC info
Compact/Full: Personality bar full text

#eee

Classic: (none)
Compact/Full: Personality bar empty background

#999

Classic: (none)
Compact/Full: Playlist text

#aa5252

Classic/Compact/Full: Headings
Compact/Full: Personality bar full background

#060606

Classic/Compact/Full: OOC info background

0,0,0

Classic: Content borders; content backgrounds, header background darkening overlay

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!