![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Feb. 16th, 2023
Name here
♂
Name here
♀
Name here
⚧
Name here
♂
Name here
♀
Information
Hey guys! Just a cute, compact cast list that lets you stick to the classic icon-sized image setup. Each character block contains their username, name, and gender, and you can separate the lists out by fandom or other sections. Enjoy! 💖The Coding
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 font
DIMENSIONS
* 5 - Number of characters per row; change the number only, not the asterisk
120px - Character width; this is the icon width + the padding on each side + the border on each side (100px + 10px + 10px + 1px + 1px)
10px - Margin & padding
5px - Character link & name padding; border radius for each character
I've never actually discussed CSS calculations before even though I use them constantly, so here's a breakdown of how this code decides the width of the container:
width:calc((120px + ((10px + 1px) * 2)) * 5);
120px- The width of each character container
10px- The margin of each character
1px- The border width of each character
2- Multiply the margin and border times 2 so we can account for each side
5- Multiply all of it by 5 to determine amount of characters per row, ie the width of the container
If anyone's interested in CSS calculations and how you can get CSS to do math for you so you don't have to do it yourself (great for people like me who can barely count lmfao), let me know and I'll do my best to explain how to use it. For math-inclined people, you probably already understand exactly how it works just by seeing the formula. The short version: You're just nesting math equations in the order you need them so that it can figure out the total for you.
For instance, the above formula comes out to 710px, because we're adding 10 + 1, then multiplying that by 2, then adding it to 120px before multiplying the entire thing by 5, thereby accounting for the entire amount of width each of each character container and multiplying it by the max amount we want per row.
COLORS
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!