[29] A Better Muselist

[lina_trinch]

by killthecake

Active

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Inactive

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Korra

Legend of Korra
bridgebetween
★★★✰✰

Code:
<center> <!---CREDIT DONT REMOVE---> <div style="width: 625px;"> <div style="font-family:tahoma;font-variant:small-caps;font-weight:bold;text-align:right;font-size: 12px;"> <a href="https://killthecake.dreamwidth.org/" style="color: #555;text-decoration:none;">by killthecake </a></div></div> <!---END CREDIT---> <!----FIRST SECTION----> <details open style="width: 625px;font-family: tahoma;font-variant:small-caps;text-align:center;color: #555;margin: 20px 0;text-align:left;border: 5px solid #ebebeb;box-shadow: 3px 3px 5px;background: #fff"> <summary style="font-size:25px;background: #ebebeb;outline:none;cursor:pointer;text-shadow: 1px 1px 3px #fff;">Active</summary> <div style="margin:5px 0 0 5px;"> <!---To add more characters, c/p this code block before the last div and details tags in this section---> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <!---END NEW CHARACTER---> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> </div> </details> <!----NEXT SECTION----> <details style="width: 625px;font-family: tahoma;font-variant:small-caps;text-align:center;color: #555;margin: 20px 0;text-align:left;border: 5px solid #ebebeb;box-shadow: 3px 3px 5px;background: #fff"> <summary style="font-size:25px;background: #ebebeb;outline:none;cursor:pointer;text-shadow: 1px 1px 3px #fff;">Inactive</summary> <div style="margin:5px 0 0 5px;"> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> <div style="display:inline-block;width:150px;background: #ebebeb;text-align:center;padding-bottom: 5px;margin-bottom: 5px;"> <div style="background: url(IMG), #fff;background-position:center;background-size:cover;align:center;height: 75px;width: 75px;box-shadow: 3px 3px 5px;border-radius:50%;margin: 5px 0 10px 40px"></div> <span style="font-weight:bold;font-style:italic;"> Character </span> <div style="height: 2px; width: 90%;background: rgba(0,0,0,0.5);margin: 5px 7px;"></div> <span style="font-size: 14px;"> Canon <br /><a href="URL" style="color: #555;text-decoration:none;"> username </a><br /> ★★★✰✰ </span> </div> </div> </details>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ I put the credit link at the top so you can easily add another section right at the end. ❖ To add more characters to a section, c/p the code block before the last div and details tags of that section. Instructions are in the code. ❖ As usual, if you encounter any problems, let me know! Ctrl+F & Replace: ❖ IMG - image url ❖ URL - url to character's journal ❖ Active/Inactive - headers ❖ Character - character name ❖ Canon - canon name ❖ username - character journal username ❖ ★✰ - voice rating scale #555 text #ebebeb header background, card backgrounds, border #fff background, image background, header text shadow rgba(0,0,0,0.5) divider

Comments

[lina_trinch]

Thank you!

You should know (and I only just noticed this), it seems like DW's latest code push broke it a little. Anyone using the BETA Testing workaround or something similar to the old style should see it as intended, otherwise the main box is a little too small and makes a big white space where there should be another character card.

If this is a problem for you, you should be able to fix it by changing the width: 625px; values to something a little larger. If DW doesn't fix the issue with their divs in a couple of months, I'll probably change the base code, anyway.

But thanks, regardless! Sorry about that.

[refresher]

This was a helpful tip! I actually changed the width to something smaller since I had fewer muses to put in it. I also noticed that I had to add
tags to get the username and stars to line up under canon right, and line up characters with the same number of stars or the size of their boxes got wonky. Got it to look how I wanted it, though!