[12] This Was Supposed to Be a CR Chart

[lina_trinch]

Active

Character Name

Canon Name

UserName

Navigation

★★★★✰

Character Name

Canon Name

UserName

Navigation

★★★★✰

Character Name

Canon Name

UserName

Navigation

★★★★✰

Character Name

Canon Name

UserName

★★★★✰

Character Name

Canon Name

UserName

★★★★✰

Inactive

Character Name

Canon Name

UserName

Navigation

★★★★✰

Character Name

Canon Name

UserName

Navigation

★★★★✰

Character Name

Canon Name

UserName

Navigation

★★★★✰

Character Name

Canon Name

UserName

Navigation

★★★★✰

Character Name

Canon Name

UserName

Navigation

★★★★✰

by killthecake

Code:
<center> <!------ACTIVE------> <details open> <summary style="font-family: arial sans serif;font-style: italic;font-size: 30px;font-variant: small-caps; outline: none;cursor: pointer;">Active</summary> <!---FULL CARD---> <div style="display: inline-block;width: 150px;height: 235px;background: rgba(0,0,0,0.3);border-radius: 5px;text-align:center; margin: 10px;"> <img src="ICON_URL" style="margin-top: 8px; width: 75px; border-radius: 50px;border: 6px double rgba(0,0,0,0.3)"> <font style="color: rgba(250,250,250,0.8); font-family: monospace;font-style: italic;font-size: 17px;font-variant: small-caps"> <div style="margin: 0 8px;background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));"> Character Name </div> <font style="font-size: 14px;font-style: normal;"> Canon Name <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> UserName </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> Link </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> ★★★★✰ </font></font></div> <!---END FULL CARD---> <!---SHORT CARD---> <div style="display: inline-block;width: 150px;height: 210px;background: rgba(0,0,0,0.3);border-radius: 5px;text-align:center; margin: 10px;"> <img src="ICON_URL" style="margin-top: 8px; width: 75px; border-radius: 50px;border: 6px double rgba(0,0,0,0.3)"> <font style="color: rgba(250,250,250,0.8); font-family: monospace;font-style: italic;font-size: 17px;font-variant: small-caps"> <div style="margin: 0 8px;background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));"> Character Name </div> <font style="font-size: 14px;font-style: normal;"> Canon Name <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> UserName </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> ★★★★✰ </font></font></div> <!---END SHORT CARD---> </details> <!------END ACTIVE------> <br /> <!------INACTIVE------> <details> <summary style="font-family: arial sans serif;font-style: italic;font-size: 30px;font-variant: small-caps; outline: none;cursor: pointer;">Inactive</summary> <!---RED CARD---> <div style="display: inline-block;width: 150px;height: 235px;background: rgba(252, 3, 11,0.3);border-radius: 5px;text-align:center; margin: 10px;"> <img src="ICON_URL" style="margin-top: 8px; width: 75px; border-radius: 50px;border: 6px double rgba(0,0,0,0.3)"> <font style="color: rgba(250,250,250,0.8); font-family: monospace;font-style: italic;font-size: 17px;font-variant: small-caps"> <div style="margin: 0 8px;background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));"> Character Name </div> <font style="font-size: 14px;font-style: normal;"> Canon Name <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> UserName </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> Link </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> ★★★★✰ </font></font></div> <!---END RED CARD---> <!---BLUE CARD---> <div style="display: inline-block;width: 150px;height: 235px;background: rgba(3, 3, 252,0.3);border-radius: 5px;text-align:center; margin: 10px;"> <img src="ICON_URL" style="margin-top: 8px; width: 75px; border-radius: 50px;border: 6px double rgba(0,0,0,0.3)"> <font style="color: rgba(250,250,250,0.8); font-family: monospace;font-style: italic;font-size: 17px;font-variant: small-caps"> <div style="margin: 0 8px;background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));"> Character Name </div> <font style="font-size: 14px;font-style: normal;"> Canon Name <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> UserName </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> Link </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> ★★★★✰ </font></font></div> <!---END BLUE CARD---> <!---TAN CARD---> <div style="display: inline-block;width: 150px;height: 235px;background: rgba(133, 102, 0,0.3);border-radius: 5px;text-align:center; margin: 10px;"> <img src="ICON_URL" style="margin-top: 8px; width: 75px; border-radius: 50px;border: 6px double rgba(0,0,0,0.3)"> <font style="color: rgba(250,250,250,0.8); font-family: monospace;font-style: italic;font-size: 17px;font-variant: small-caps"> <div style="margin: 0 8px;background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));"> Character Name </div> <font style="font-size: 14px;font-style: normal;"> Canon Name <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> UserName </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> Link </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> ★★★★✰ </font></font></div> <!---END TAN CARD---> <!---GREEN CARD---> <div style="display: inline-block;width: 150px;height: 235px;background: rgba(3, 135, 1,0.3);border-radius: 5px;text-align:center; margin: 10px;"> <img src="ICON_URL" style="margin-top: 8px; width: 75px; border-radius: 50px;border: 6px double rgba(0,0,0,0.3)"> <font style="color: rgba(250,250,250,0.8); font-family: monospace;font-style: italic;font-size: 17px;font-variant: small-caps"> <div style="margin: 0 8px;background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));"> Character Name </div> <font style="font-size: 14px;font-style: normal;"> Canon Name <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> UserName </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> Link </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> ★★★★✰ </font></font></div> <!---END GREEN CARD---> <!---PURPLE CARD---> <div style="display: inline-block;width: 150px;height: 235px;background: rgba(252, 3, 235,0.3);border-radius: 5px;text-align:center; margin: 10px;"> <img src="ICON_URL" style="margin-top: 8px; width: 75px; border-radius: 50px;border: 6px double rgba(0,0,0,0.3)"> <font style="color: rgba(250,250,250,0.8); font-family: monospace;font-style: italic;font-size: 17px;font-variant: small-caps"> <div style="margin: 0 8px;background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));"> Character Name </div> <font style="font-size: 14px;font-style: normal;"> Canon Name <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> UserName </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> <a href="URL" style="color: rgba(250,250,250,0.8);text-decoration: none;"> Link </a> <div style="background: linear-gradient(90deg, rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0));width: 130px;height: 2px;margin: 0 0 0 10px;"></div> ★★★★✰ </font></font></div> <!---END PURPLE CARD CARD---> </details> <!------END INACTIVE------> <!---ADD NEW SECTIONS ABOVE THIS---> <br /> <a href="https://killthecake.dreamwidth.org" style="font-size: 10px;text-decoration:none;">by killthecake</a>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ The codes for the full card, short card without the extra nav link, and all of the displayed colors are in the code and individually marked. Whatever you want to use, just copy and paste that one. ❖ You can add as many cards and as many dropdown sections as you want. ❖ The code is defaulted to only have the Active menu open with Inactive closed. If you want to customize that, change <details> to <details open> and vice versa. Ctrl+F & Replace: ❖ Active/Inactive - Headers of the dropdown menus. ❖ Character Name - Your character's name. ❖ Canon Name - Your character's canon. ❖ UserName - The username of that character's journal. ❖ Link - Name of the optional link. ❖ ICON_URL - Image url. ❖ URL - Url of the character journal for "UserName" and the optional link. rgba(0,0,0,0.3) Background, icon border, and center of the gradient on Character Name and dividers. If you want to change the color of the card like the ones previewed, only change the background, aka the first time this color appears in the code. rgba(0,0,0,0) Outer edges of gradient on Character Name and dividers. rgba(250,250,250,0.8) Text and link color.