Tessisamess

Information

Hey guys! A patron needed a way to display a long list of multi-category information on abilities and stats, so here we are! This would be great for thread tracking, player directories--anything you need data display for, really!

This code comes with three column options and sticky headers. You can combine multiple headings + lists within the container, or duplicate the whole container as many times as you like if you need them separated. Enjoy! 💖

Coding: 5 Column

<lj-raw><div style="max-width:1100px;margin:0 auto 5px auto;padding:20px;background:#fff;border:1px solid #ddd;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:trebuchet ms,sans-serif;font-size:12px;line-height:2;color:#222;"> <!--HEADINGS--> <div style="width:100%;margin:0 0 10px 0;display:flex;justify-content:space-between;background:#fff;text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:10px;position:sticky;top:0;"> <b style="width:calc(24% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(12% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(12% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(12% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(40% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">More_Info</b> </div> <!--ABILITY--> <b style="width:calc(24% - 5px);">Title</b> <span style="width:calc(12% - 5px);">Title</span> <span style="width:calc(12% - 5px);">Title</span> <span style="width:calc(12% - 5px);">Title</span> <div style="width:calc(40% - 5px);">More_Info</div> <!--DIVIDER--> <hr style="width:100%;border:none;background:#ddd;height:1px;"> <!--ABILITY--> <b style="width:calc(24% - 5px);">Title</b> <span style="width:calc(12% - 5px);">Title</span> <span style="width:calc(12% - 5px);">Title</span> <span style="width:calc(12% - 5px);">Title</span> <div style="width:calc(40% - 5px);">More_Info</div> </div><div style="max-width:1150px;text-align:right;font-size:8px;letter-spacing:3px;"><a href="http://tessisamess.insanejournal.com/124960.html" style="text-decoration:none;color:#aaa;">CODING</a></div></lj-raw>

Coding: 4 Column

<lj-raw><div style="max-width:900px;margin:0 auto 5px auto;padding:20px;background:#fff;border:1px solid #ddd;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:trebuchet ms,sans-serif;font-size:12px;line-height:2;color:#222;"> <!--HEADINGS--> <div style="width:100%;margin:0 0 10px 0;display:flex;justify-content:space-between;background:#fff;text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:10px;position:sticky;top:0;"> <b style="width:calc(24% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(18% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(18% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(40% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">More_Info</b> </div> <!--ABILITY--> <b style="width:calc(24% - 5px);">Title</b> <span style="width:calc(18% - 5px);">Title</span> <span style="width:calc(18% - 5px);">Title</span> <div style="width:calc(40% - 5px);">More_Info</div> <!--DIVIDER--> <hr style="width:100%;border:none;background:#ddd;height:1px;"> <!--ABILITY--> <b style="width:calc(24% - 5px);">Title</b> <span style="width:calc(18% - 5px);">Title</span> <span style="width:calc(18% - 5px);">Title</span> <div style="width:calc(40% - 5px);">More_Info</div> </div><div style="max-width:1050px;text-align:right;font-size:8px;letter-spacing:3px;"><a href="http://tessisamess.insanejournal.com/124960.html" style="text-decoration:none;color:#aaa;">CODING</a></div></lj-raw>

Coding: 3 Column

<lj-raw><div style="max-width:800px;margin:0 auto 5px auto;padding:20px;background:#fff;border:1px solid #ddd;display:flex;justify-content:space-between;flex-wrap:wrap;font-family:trebuchet ms,sans-serif;font-size:12px;line-height:2;color:#222;"> <!--HEADINGS--> <div style="width:100%;margin:0 0 10px 0;display:flex;justify-content:space-between;background:#fff;text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:10px;position:sticky;top:0;"> <b style="width:calc(33% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(22% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">Title</b> <b style="width:calc(45% - 5px);padding:0 10px;background:#eee;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-sizing:border-box;">More_Info</b> </div> <!--ABILITY--> <b style="width:calc(33% - 5px);">Title</b> <span style="width:calc(22% - 5px);">Title</span> <div style="width:calc(45% - 5px);">More_Info</div> <!--DIVIDER--> <hr style="width:100%;border:none;background:#ddd;height:1px;"> <!--ABILITY--> <b style="width:calc(33% - 5px);">Title</b> <span style="width:calc(22% - 5px);">Title</span> <div style="width:calc(45% - 5px);">More_Info</div> </div><div style="max-width:1000px;text-align:right;font-size:8px;letter-spacing:3px;"><a href="http://tessisamess.insanejournal.com/" style="text-decoration:none;color:#aaa;">CODING</a></div></lj-raw>

Editing Guide

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

FONTS

trebuchet ms,sans-serif - All text

COLORS

#fff

Container

#eee

Headings backgrounds

#ddd

Borders

#222

Text

rgba(0,0,0,0.1)

Headings border

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!