Tessisamess

Information

Hey guys, this one's for the PSLers out there! I thought to go hand in hand with the current roster code I'd make a display for available characters too, complete with room for mini bios, line ideas, or whatever else you need the information to be; this code could EASILY be converted to "wanted lines" or a tabbed RP info code. Enjoy! ♥

The Coding

<lj-raw><div style="margin:0 auto;width:600px;background:#000;display:flex;font-family:ms gothic;color:#bbb;font-size:12px;line-height:1.5;text-align:justify;"> <div style="width:28%;padding:20px;background:rgba(255,255,255,0.1);font-size:11px;letter-spacing:1px;text-transform:uppercase;text-align:left;"> Available Characters<br> <a href="#1" style="color:#fff;text-decoration:none;display:block;border-bottom:1px solid rgba(255,255,255,0.1);padding:7px 0;">NAME1</a> <a href="#2" style="color:#fff;text-decoration:none;display:block;border-bottom:1px solid rgba(255,255,255,0.1);padding:7px 0;">NAME2</a> <a href="#3" style="color:#fff;text-decoration:none;display:block;border-bottom:1px solid rgba(255,255,255,0.1);padding:7px 0;">NAME3</a> <a href="#4" style="color:#fff;text-decoration:none;display:block;border-bottom:1px solid rgba(255,255,255,0.1);padding:7px 0;">NAME4</a> <a href="#5" style="color:#fff;text-decoration:none;display:block;border-bottom:1px solid rgba(255,255,255,0.1);padding:7px 0;">NAME5</a> </div> <div style="width:72.2%;height:500px;overflow:hidden;"> <a name="1"></a> <div style="background:rgba(255,255,255,0.2) url(CHARPIC)center;background-size:cover;height:240px;display:flex;align-items:flex-end;justify-content:flex-end;text-align:center;text-transform:uppercase;"> <div style="font-size:11px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,0.7);padding:5px;margin-bottom:15px;width:40%;"> NAME1<br> <span style="opacity:0.6;">PB NAME</span> </div> </div> <div style="padding:30px;height:200px;overflow:auto;"> Info One Here </div> <a name="2"></a> <div style="background:rgba(255,255,255,0.2) url(CHARPIC)center;background-size:cover;height:240px;display:flex;align-items:flex-end;justify-content:flex-end;text-align:center;text-transform:uppercase;"> <div style="font-size:11px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,0.7);padding:5px;margin-bottom:15px;width:40%;"> NAME2<br> <span style="opacity:0.6;">PB NAME</span> </div> </div> <div style="padding:30px;height:200px;overflow:auto;"> Info Two Here </div> <a name="3"></a> <div style="background:rgba(255,255,255,0.2) url(CHARPIC)center;background-size:cover;height:240px;display:flex;align-items:flex-end;justify-content:flex-end;text-align:center;text-transform:uppercase;"> <div style="font-size:11px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,0.7);padding:5px;margin-bottom:15px;width:40%;"> NAME3<br> <span style="opacity:0.6;">PB NAME</span> </div> </div> <div style="padding:30px;height:200px;overflow:auto;"> Info Three Here </div> <a name="4"></a> <div style="background:rgba(255,255,255,0.2) url(CHARPIC)center;background-size:cover;height:240px;display:flex;align-items:flex-end;justify-content:flex-end;text-align:center;text-transform:uppercase;"> <div style="font-size:11px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,0.7);padding:5px;margin-bottom:15px;width:40%;"> NAME4<br> <span style="opacity:0.6;">PB NAME</span> </div> </div> <div style="padding:30px;height:200px;overflow:auto;"> Info Four Here </div> <a name="5"></a> <div style="background:rgba(255,255,255,0.2) url(CHARPIC)center;background-size:cover;height:240px;display:flex;align-items:flex-end;justify-content:flex-end;text-align:center;text-transform:uppercase;"> <div style="font-size:11px;letter-spacing:1px;color:#fff;background:rgba(0,0,0,0.7);padding:5px;margin-bottom:15px;width:40%;"> NAME5<br> <span style="opacity:0.6;">PB NAME</span> </div> </div> <div style="padding:30px;height:200px;overflow:auto;"> Info Five Here </div> </div> </div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:600px;margin:5px auto 0 auto;font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:7px;text-align:right;">&copy; TESSISAMESS</a></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

NAME1 through NAME5 (x2) - Sidebar link titles & corresponding section titles
CHARPIC (x5) - Each section image
PB NAME (x5) - Subtitle line for each section
Info One Here through Info Five Here - Each free text area

Editing Guide

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

FONTS

ms gothic - Overall font

COLORS

255,255,255

Sidebar background; sidebar link borders; image area background (semi-transparent rgba value)

#fff

Image title/subtitle text

#bbb

Overall font color

#000

Container background

0,0,0

Image titles background (semi-transparent rgba value)

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!