[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

[refresher]

This is exactly the style I was looking for! Thanks. :)

[refresher]

I have a formatting question, also - not sure how to insert the image url for the icons. Can you please provide an example?

[lina_trinch]

oh, i just replied to your original comment haha but SURE! Looking back at it, the code isn't very clear on how to edit it.

For the icon thing:

Throughout the code, you'll see a few of these blocks. Each of those blocks of code is another character card.

Near the top, in the second "paragraph," you'll see div style="background: url(IMG), #fff; You replace the IMG in the parenthesis with your picture's url.

So let's say you want to use the icon on the journal you're using. The code would look like background: url(https://v.dreamwidth.org/4977813/1752583), #fff;. The #fff is a placeholder for a white background if there isn't an image URL.

I hope that helps! Feel free to send along your formatting question. I probably preemptively answered that down below with DW's code push thing lol

[refresher]

That's perfect, thanks so much for your help! And for being so quick to reply. :)

[refresher]

And the image thing was the formatting question, lol I realize that was worded oddly. Words are hard, man.

[lina_trinch]

Ah, I see how it's worded now, lol. You're fine! I'm glad that helped!

[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!