pagans | code; simple cards (Reply)

sharing an old muselist code, all cleaned up(ish)

Character Name
username
canon title

Important notes:

— The code is set to 3 rows of 4 cells each by default. Instructions for adding new cells and rows are in the code.

— Here's the full muselist code:

<center><raw-code><br /><br /><div> <! ------ THIS STAYS AS THE FIRST ROW, DO NOT MOVE IT ------ !> <div style="display: table-row; width: 850px; font-family: Helvetica, sans-serif; font-size: 0.95em; letter-spacing: 1pt; line-height: 14pt; text-align: center; v-align: middle; display: flex; justify-content: center;"> <! ------ FIRST CELL OF THE ROW, DO NOT MOVE THIS ------ !> <div style="display: table-cell; border: 1px solid #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMGURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ END OF CELL ------ !> <div style="display: table-cell; border-width: 1px 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <div style="display: table-cell; border-width: 1px 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ LAST CELL OF THE FIRST ROW, COPY THIS CODE IF YOU'RE ADDING A NEW CELL FOR THE FIRST ROW ONLY ------ !> <div style="display: table-cell; border-width: 1px 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ END OF CELL ------ !> </div> <! ------ END OF FIRST ROW ------ !> <! ------ START OF SECOND ROW ------ !> <div style="display: table-row; width: 850px; font-family: Helvetica, sans-serif; font-size: 0.95em; letter-spacing: 1pt; line-height: 14pt; text-align: center; v-align: middle; padding: 10px; display: flex; justify-content: center; margin-top: -10px;"> <! ------ FIRST CELL OF THE ROW, DO NOT MOVE THIS ------ !> <div style="display: table-cell; border-width: 0 1px 1px 1px; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ END OF CELL ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ LAST CELL OF THE SECOND ROW, COPY THIS CODE IF YOU'RE ADDING A NEW CELL FOR THE SECOND ROW ONLY ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ END OF CELL ------ !> </div> <! ------ END OF SECOND ROW ------ !> <! ------ START OF THIRD ROW ------ !> <div style="display: table-row; width: 850px; font-family: Helvetica, sans-serif; font-size: 0.95em; letter-spacing: 1pt; line-height: 14pt; text-align: center; v-align: middle; padding: 10px; display: flex; justify-content: center; margin-top: -20px;"> <! ------ FIRST CELL OF THE ROW, DO NOT MOVE THIS ------ !> <div style="display: table-cell; border-width: 0 1px 1px 1px; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ END OF CELL ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username</a><br /> <i>canon title</i></div> <! ------ LAST CELL OF THE THIRD ROW, COPY THIS CODE IF YOU'RE ADDING A NEW CELL FOR THE THIRD ROW AND ONWARDS ------ !> <div style="display: table-cell; border-width: 0 1px 1px 0; border-style: solid; border-color: #cfcece; width: 180px; padding: 20px; background-color: #fff; color: #222;"><img src="IMAGEURL" style="border: 3px solid #cfcece; border-radius: 50%; width: 80px;"><br /><B>Character Name</B><br /><a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration: none;">username<br /> <i>canon title</i></div> <! ------ END OF CELL ------ !> </div> <! ------ END OF THIRD ROW, YOU CAN ADD A NEW ROW FROM THIS POINT ON ------ !> </div> <small><a href="https://pagans.dreamwidth.org/">code by pagans</a></small> </raw-code><br /><br /></center>

icon and table border color: #cfcece
other colors: #fff for background, #222 for font
font/s used: Helvetica, sans-serif;

Credit appreciated, feel free to edit as you like!

code; simple cards

Post a comment in response: