soft boxes | muselist code

[roximonoxide]

Another flex-box based muselist code. Light and pale and spacious. Options for active and inactive muses.

<div style="display: flex; flex-flow: row wrap; font-size: .8em; font-family: Arial, Helvetica, Sans Serif; letter-spacing: 1px; text-transform: uppercase; color: #999; justify-content: center; align-content: flex-start;"> <!-- SINGLE ACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #d4e9ec; background-color: #e8f7f9; text-align: center; border-radius: .25em; margin-bottom: 5px;">ACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em;"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <!-- SINGLE ACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #d4e9ec; background-color: #e8f7f9; text-align: center; border-radius: .25em; margin-bottom: 5px;">ACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em;"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <!-- SINGLE ACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #d4e9ec; background-color: #e8f7f9; text-align: center; border-radius: .25em; margin-bottom: 5px;">ACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em;"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <!-- SINGLE ACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #d4e9ec; background-color: #e8f7f9; text-align: center; border-radius: .25em; margin-bottom: 5px;">ACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em;"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <!-- INACTIVE BLOCKS BEGIN --> <!-- SINGLE INACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px; text-decoration: none!important;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #C0C0C0; background-color: #e0e0e0; text-align: center; border-radius: .25em; margin-bottom: 5px;">INACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em; filter: grayscale(100%);"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <!-- SINGLE INACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px; text-decoration: none!important;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #C0C0C0; background-color: #e0e0e0; text-align: center; border-radius: .25em; margin-bottom: 5px;">INACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em; filter: grayscale(100%);"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <!-- SINGLE INACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px; text-decoration: none!important;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #C0C0C0; background-color: #e0e0e0; text-align: center; border-radius: .25em; margin-bottom: 5px;">INACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em; filter: grayscale(100%);"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <!-- SINGLE INACTIVE CHAR BLOCK --> <div style="background: #fafafa; border: 1px solid rgba(0,0,0,0.08); border-radius: .5em; padding: 3px; margin: 20px;"> <div style="display: block; margin-left: 5px; letter-spacing: 5px; text-align: center; padding-top: 5px; text-decoration: none!important;"><user name="username"></div> <div style="display: flex; flex-direction: row; padding: 3px; margin: 5px;"> <div style="display: inline-flex; flex-direction: column; padding: 2px; margin: 2px;"> <div style="border: 1px solid #C0C0C0; background-color: #e0e0e0; text-align: center; border-radius: .25em; margin-bottom: 5px;">INACTIVE</div> <div style=""><img src="ICON URL" style="border-radius: .5em; filter: grayscale(100%);"></div> </div> <div style="display: flex; flex-direction: column; padding: 2px; margin: 2px; padding-top: 20px; font-size: .8em; text-align: left;"> <div style="">FIRSTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px; font-weight: 600;">LASTNAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">CANON</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">GAME</div> <div style="border-bottom: 1px solid #CCC; margin-bottom: 3px;">OTHER</div> </div> </div> </div> <div style="width: 100%; font-size: .5em!important; text-align: right; font-size: smaller; margin-right: 5px;">muselist by <user name="roximonoxide"></div> </div></center>

soft boxes | muselist code

You can add more characters listings by copy-pasting everything between the <!-- SINGLE ACTIVE CHAR BLOCK --> comments or the <!-- SINGLE INACTIVE CHAR BLOCK -->

If you'd like to replace the color of active / inactive characters flags search and replace the following color codes with your own:

Active |

border color: #d4e9ec background-color: #e8f7f9

Inactive |

border color: #C0C0C0 background-color: #e0e0e0