roster: most active

[mistojen]

UPDATED 1/5/2020: I've updated this code to be in flexbox so that you will get less breaks in the code when you want to add more than three "most active" characters or if your character/canon names in the "available by request" section are especially long. It wraps a little better and you don't have to resize your images to make it work, anymore; the code will do the grunt work for you.

I've also added two more options for your "most active" character section, if you'd like to use some icons to link out to HMD, Open Post, Kinks/Permissions, Meme tracker, and Game pages. Of course, all of these images can be replaced with text only, if you prefer, by just overwriting the image code with the link text you want. You can also remove any of these divs if you don't want to use them and the code will adjust itself so that the remaining linked icons are still centered.

KEY:

HMD

Open Post

Kinks &
Permissions

Memes

Game

most active muses

character name
( canon name )

character name
( canon name )

character name
( canon name )

character name
( canon name )

character name
( canon name )

character name
( canon name )

character name
( canon name )

character name
( canon name )

character name
( canon name )

also available upon request

CHARACTER NAME
canon name

CHARACTER NAME
canon name is one of those obnoxiously long ones: legit tho

CHARACTER NAME IS SUPER LONG HOLY SHIT
canon name

CHARACTER NAME
canon name

CHARACTER NAME
canon name

CHARACTER NAME
canon name

CHARACTER NAME
canon name

CHARACTER NAME
canon name

'most active' design by mistojen

instructions!

1. Copy code from the text box below.
2. Edit the following
   • CHARACTER NAME
   • CANON NAME
   • JOURNALNAME
   • IMGURL (image looks best at 200x300 dimensions; it will resize and stretch to fit the space, positioned from the center, so anything will work, but be mindful of the aspect ratio and size of the original image so it doesn't look warped.)
   • SQUAREIMG (image must be square; it will resize itself as needed, but to avoid warping, make sure it's square).
   • URLGOESHERE with the URL for the appropriate post, if you're using one of the Most Active sections with the icons
3. Make sure you check the box that says Disable Auto-Formatting located below the subject line and above the content box for your entry itself.
4. To resize/crop gifs to keep them from taking too long to load or warping to fit the divs, try ezgif.)
5. Please do not remove credit.
6. Profit.

Most Active Muses (plain) section:
<!----MOST ACTIVE MUSES START-----> <center> <div style="width: 100%; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 32pt; font-weight: 900; letter-spacing: -2; font-style: italic;">most active muses</div> <div style="display: flex; flex-wrap: wrap; width: 660px;"> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="width: 200px; height: 50px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</a></div></div></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="width: 200px; height: 50px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</a></div></div></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="width: 200px; height: 50px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</a></div></div></div> <!---CHARACTER END---> </div> <!-----END MOST ACTIVE MUSES-----> <!-----CREDIT: DO NOT REMOVE-----> <br><br> <div style="width:100%; display:block; font-family: 'century gothic'; font-size: 9px; letter-spacing: 3px; color: #b5b5b5; text-align: center;">'most active' design by <a href="https://mistojen.dreamwidth.org/2688.html" style="color: #858585; text-decoration: none;">mistojen</a></div> </center> <!-----END CREDIT------->

Most Active Muses (black and white icons) section:
<!----MOST ACTIVE MUSES START-----> <center> <div style="width: 100%; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 32pt; font-weight: 900; letter-spacing: -2; font-style: italic;">most active muses</div> <div style="display: flex; flex-wrap: wrap; width: 660px;"> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="margin-top: -1em; width: 200px; height: 77px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</span><br><div style="width: 100%; height: 34px; display: flex; justify-content: center; align-items: center;"> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16669.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/17081.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15532.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15098.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16147.png"></a></div> </div> </div></div></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="margin-top: -1em; width: 200px; height: 77px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</span><br><div style="width: 100%; height: 34px; display: flex; justify-content: center; align-items: center;"> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16669.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/17081.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15532.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15098.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16147.png"></a></div> </div> </div></div></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="margin-top: -1em; width: 200px; height: 77px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</span><br><div style="width: 100%; height: 34px; display: flex; justify-content: center; align-items: center;"> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16669.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/17081.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15532.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15098.png"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16147.png"></a></div> </div> </div></div></div> <!---CHARACTER END---> </div> <!-----END MOST ACTIVE MUSES-----> <!-----CREDIT: DO NOT REMOVE-----> <br><br> <div style="width:100%; display:block; font-family: 'century gothic'; font-size: 9px; letter-spacing: 3px; color: #b5b5b5; text-align: center;">'most active' design by <a href="https://mistojen.dreamwidth.org/2688.html" style="color: #858585; text-decoration: none;">mistojen</a></div> </center> <!-----END CREDIT------->

Most Active Muses (colorful icons) section:
<!----MOST ACTIVE MUSES START-----> <center> <div style="width: 100%; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 32pt; font-weight: 900; letter-spacing: -2; font-style: italic;">most active muses</div> <div style="display: flex; flex-wrap: wrap; width: 660px;"> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="margin-top: -1em; width: 200px; height: 77px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</span><br><div style="width: 100%; height: 34px; display: flex; justify-content: center; align-items: center;"> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16565.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/17389.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15830.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15346.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16095.png" width="24px"></a></div> </div> </div></div></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="margin-top: -1em; width: 200px; height: 77px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</span><br><div style="width: 100%; height: 34px; display: flex; justify-content: center; align-items: center;"> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16565.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/17389.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15830.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15346.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16095.png" width="24px"></a></div> </div> </div></div></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="padding:10px;"><div style="width: 200px; height:300px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; background:url('IMGURL') center no-repeat; background-size: cover;"> <div style="width: 200px; height:225px;"></div> <div style="margin-top: -1em; width: 200px; height: 77px; background-color: rgba(255,255,255,.75); color: #000;"><a style="text-decoration: none; color: #000;" href="http://journalname.dreamwidth.org"><span style="font-family: 'Arial Black', Gadget, sans-serif; font-size: 13pt; font-weight: 900;">character name</span></a><br><span style="font-family: verdana, arial, helvetica, sans-serif; font-size: 9pt;">( canon name )</span><br><div style="width: 100%; height: 34px; display: flex; justify-content: center; align-items: center;"> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16565.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/17389.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15830.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/15346.png" width="24px"></a></div> <div style="margin: 5px;"><a href="URLGOESHERE"><img src="https://mistojen.dreamwidth.org/file/16095.png" width="24px"></a></div> </div> </div></div></div> <!---CHARACTER END---> </div> <!-----END MOST ACTIVE MUSES-----> <!-----CREDIT: DO NOT REMOVE-----> <br><br> <div style="width:100%; display:block; font-family: 'century gothic'; font-size: 9px; letter-spacing: 3px; color: #b5b5b5; text-align: center;">'most active' design by <a href="https://mistojen.dreamwidth.org/2688.html" style="color: #858585; text-decoration: none;">mistojen</a></div> </center> <!-----END CREDIT------->

Also Available section (paste between most active and credit sections):
<!----ALSO AVAILABLE SECTION START-----> <div class="spacer" style="height: 3em;"></div> <div style="width:100%; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 22pt; font-weight: 900; letter-spacing: -2; font-style: italic;">also available upon request</div> <div style="display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width:850px; margin: 0 auto;"> <!---CHARACTER START---> <div style="width: 150px; padding: 10px;"><a style="color: #000; text-decoration: none;" href="http://journalname.dreamwidth.org/"><div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 7pt;"><img src="SQUAREIMG" width="100px" height="100px" style="border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;"><br>CHARACTER NAME<br>canon name</div></a></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="width: 150px; padding: 10px;"><a style="color: #000; text-decoration: none;" href="http://journalname.dreamwidth.org/"><div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 7pt;"><img src="SQUAREIMG" width="100px" height="100px" style="border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;"><br>CHARACTER NAME<br>canon name</div></a></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="width: 150px; padding: 10px;"><a style="color: #000; text-decoration: none;" href="http://journalname.dreamwidth.org/"><div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 7pt;"><img src="SQUAREIMG" width="100px" height="100px" style="border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;"><br>CHARACTER NAME<br>canon name</div></a></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="width: 150px; padding: 10px;"><a style="color: #000; text-decoration: none;" href="http://journalname.dreamwidth.org/"><div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 7pt;"><img src="SQUAREIMG" width="100px" height="100px" style="border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;"><br>CHARACTER NAME<br>canon name</div></a></div> <!---CHARACTER END---> <!---CHARACTER START---> <div style="width: 150px; padding: 10px;"><a style="color: #000; text-decoration: none;" href="http://journalname.dreamwidth.org/"><div style="font-family: verdana, helvetica, arial, sans-serif; font-size: 7pt;"><img src="SQUAREIMG" width="100px" height="100px" style="border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;"><br>CHARACTER NAME<br>canon name</div></a></div> <!---CHARACTER END---> </div> <!-------ALSO AVAILABLE SECTION END--------->

Icon Key section (this is optional and you can kind of paste it anywhere you want):
<!----ICON KEY START-----> <div style="100%; margin: 1em 0; text-align: left;"> <div style="text-align: left; width: 660px; font-weight: 900;">KEY:</div> <div style="font-size: .85em; width: 660px; display: flex; justify-content: flex-start; align-items: flex-start;"> <div style="padding: 10px;"><img src="https://mistojen.dreamwidth.org/file/16669.png"> <img src="https://mistojen.dreamwidth.org/file/16565.png" width="24px"> <br> HMD</div> <div style="padding: 10px;"><img src="https://mistojen.dreamwidth.org/file/17081.png"> <img src="https://mistojen.dreamwidth.org/file/17389.png" width="24px"> <br> Open Post</div> <div style="padding: 10px;"><img src="https://mistojen.dreamwidth.org/file/15532.png"> <img src="https://mistojen.dreamwidth.org/file/15830.png" width="24px"> <br> Kinks &<br>Permissions</div> <div style="padding: 10px;"><img src="https://mistojen.dreamwidth.org/file/15098.png"> <img src="https://mistojen.dreamwidth.org/file/15346.png" width="24px"> <br> Memes</div> <div style="padding: 10px;"><img src="https://mistojen.dreamwidth.org/file/16147.png"> <img src="https://mistojen.dreamwidth.org/file/16095.png" width="24px"> <br> Game</div> </div> </div> <!---ICON KEY END--->

To change colors:
rgba(255,255,255,.75) #8c8c8c #000

Comments

[nards]

ohhh i really like this. meming for later!

[michrure]

Hi there! I'm trying to get this to work, but my images don't show up. All three images are 200x300 but it just shows up blank. They are not gifs. Do you know what I might be doing wrong?

[ravynstoneabbey]

I think I messed up somewhere, probably when I added a fourth active character. http://ravynsmusebox.dreamwidth.org/61245.html is what I have and I have no clue what went sideways.

[sparklepwny]

Hi! So I've got things mostly working, but my muselist looks fine on Chrome, but displays like this on Firefox. Here's the code in a pastebin.

Thanks!

(Ignore the list of journals in the pastebin and sorry for all the edits.)

[narwhaling]

Thank you for sharing this! It's gorgeous and easy to use!

[wickedlittletown]

Thank you for sharing. I have searched like forever to find a simple muselist that is easy to edit.

[advancing]

Hi there! I was wondering if you could help me out with something. The most active muses section for me is fine, but I was having issues with the also available ones. Here's the things that I have.

question

[plentyofwords]

why would the code be appearing like this when I hit link and am viewing the page with the site skin?