Tessisamess

Information

Hey guys! Today we've got a sectioned cast list featuring a sticky navigation with anchor links to jump to specific sections of the cast. This code also comes with four different cast style options, two for larger images and two for icon images, so whatever your preference you should be able to find something you like to edit or use as-is! Three of the four display options come with plenty of room to easily add more information if needed. Enjoy! ♥

The Base Coding

Paste the cast list base into an entry or code tester and then start inputting your chosen cast list style in the designated area! (Please note that any section title header after the first one needs to have a top margin, so make sure you're copying the right one for more sections.)
<lj-cut><lj-raw><div style="margin:0 auto;max-width:1000px;text-align:center;font-family:century gothic,arial,sans-serif;font-size:12px;letter-spacing:1px;color:#333;line-height:1.3;display:flex;align-items:flex-start;"> <!--- SIDEBAR NAV ---> <div style="width:160px;position:sticky;top:70px;margin-right:50px;font-size:11px;text-transform:uppercase;letter-spacing:2px;"> <b style="font-size:18px;letter-spacing:4px;">NAVIGATION</b><br> <a href="#title1" style="display:block;border:1px solid #ddd;padding:2px;text-decoration:none;color:#111;margin:5px 0;">Title One</a> <a href="#title2" style="display:block;border:1px solid #ddd;padding:2px;text-decoration:none;color:#111;margin:5px 0;">Title Two</a> <a href="http://tessisamess.insanejournal.com/" style="text-decoration:none;color:#bbb;font-size:9px;letter-spacing:4px;">TESSISAMESS</a> </div> <!--- CAST CONTAINER ---> <div style="display:flex;flex-wrap:wrap;justify-content:center;"> <!--- SECTION1 TITLE ---> <a name="title1"></a><div style="font-size:25px;text-transform:uppercase;letter-spacing:4px;width:100%;">Title One</div> <!--- CASTMEMBERS ---> Cast blocks here! <!--- SECTION2 TITLE ---> <a name="title2"></a><div style="font-size:25px;text-transform:uppercase;letter-spacing:4px;width:100%;margin-top:50px;">Title Two</div> <!--- CASTMEMBERS ---> Cast blocks here! </div> </div></lj-raw></lj-cut>

Style #1

<div style="width:235px;border:1px solid #ddd;margin:10px;"> <div style="height:135px;background:url(IMGURL)center;background-size:cover;"></div> <div style="padding:20px;"> <b style="font-size:17px;">NAMEHERE</b> <a href="http://username.insanejournal.com/" style="display:block;border:1px solid #ddd;padding:2px;text-decoration:none;color:#111;margin:5px 0;">username</a> <i>pbname</i> </div> </div>

Style #2

<div style="width:130px;border:1px solid #ddd;padding:20px;margin:10px;"> <img src="IMGURL" style="width:100px;border:1px solid #ddd;padding:5px;margin:0 0 10px 0;"> <a href="http://username.insanejournal.com/" style="text-decoration:none;color:#111;margin:5px 0;"><b>NAMEHERE</b></a><br> <i>pbname</i> </div>

Style #3

<div style="width:235px;margin:10px;"> <a href="http://username.insanejournal.com/" style="text-decoration:none;"> <div style="height:135px;background:url(IMGURL)center;background-size:cover;margin-bottom:5px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:bold;text-shadow:1px 1px 0 rgba(0,0,0,0.5);"> NAMEHERE </div> </a> <div style="text-transform:uppercase;letter-spacing:3px;font-size:9px;"> <b>PB</b> pbname </div> </div>

Style #4

<div style="width:130px;border:1px solid #ddd;border-top:5px solid #000;padding:20px;margin:60px 10px 10px 10px;"> <img src="IMGURL" style="width:90px;border:5px solid #000;border-top:none;margin:-70px 0 10px 0;border-radius:100%;"> <b>NAMEHERE</b> <a href="http://username.insanejournal.com/" style="display:block;border:1px solid #ddd;padding:2px;text-decoration:none;color:#111;margin:5px 0;">username</a> <i>pbname</i> </div>

Replacement Guide

title1 and Title One // title2 and Title Two - Your section titles and the anchor linking for them; repeat these blocks as needed from the Title Two block!
IMGURL - Character image
NAMEHERE - Character Name
username - Journal link and title
pbname - PB Name

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

Text (style #3)

#ddd

All borders

#333

Overall text

#111

Navigation links; journal links (style #1, style #2, style #4)

#000

Image and top border (style #4)

0,0,0

Text shadow (style #3)

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!