12th: iori

[yanyan]

A muselist code based on NTREEV's website.

active
	iori minase iDOLM@STER	nadeko Monogatari	miki hoshii iDOLM@STER	alibaba saluja Magi	hakuryuu ren Magi
inactive
	choi daldal Girls of the Wild's	houtarou oreki Hyouka

live preview for all 4 colors here

#f4c619 ORANGE <center><table bgcolor="#ffffff"> <!--START IMAGE ROW--> <tr> <td style="vertical-align: top; height: 52px; width: 100px; border-top: 1px solid #f4c619;"><span style="font-family: verdana, sans-serif; font-size: 11px; color: #f4c619; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">active</span></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #f4c619; border-left: 2px solid #f4c619; border-right: 2px solid #f4c619; border-bottom: 2px solid #f4c619;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #f4c619; border-left: 2px solid #f4c619; border-right: 2px solid #f4c619; border-bottom: 2px solid #f4c619;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #f4c619; border-left: 2px solid #f4c619; border-right: 2px solid #f4c619; border-bottom: 2px solid #f4c619;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #f4c619; border-left: 2px solid #f4c619; border-right: 2px solid #f4c619; border-bottom: 2px solid #f4c619;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #f4c619; border-left: 2px solid #f4c619; border-right: 2px solid #f4c619; border-bottom: 2px solid #f4c619;"></td> </tr> <!--END IMAGE ROW, START TEXT ROW--> <tr> <td style="vertical-align: top; width: 100px;"></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #f4c619; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #f4c619; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #f4c619; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #f4c619; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #f4c619; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> </tr> <!--END TEXT ROW--> </table> <small>code by <user name="cawaii"></small></center>

#4fb400 GREEN <center><table bgcolor="#ffffff"> <!--START IMAGE ROW--> <tr> <td style="vertical-align: top; height: 52px; width: 100px; border-top: 1px solid #4fb400;"><span style="font-family: verdana, sans-serif; font-size: 11px; color: #4fb400; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">active</span></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #4fb400; border-left: 2px solid #4fb400; border-right: 2px solid #4fb400; border-bottom: 2px solid #4fb400;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #4fb400; border-left: 2px solid #4fb400; border-right: 2px solid #4fb400; border-bottom: 2px solid #4fb400;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #4fb400; border-left: 2px solid #4fb400; border-right: 2px solid #4fb400; border-bottom: 2px solid #4fb400;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #4fb400; border-left: 2px solid #4fb400; border-right: 2px solid #4fb400; border-bottom: 2px solid #4fb400;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #4fb400; border-left: 2px solid #4fb400; border-right: 2px solid #4fb400; border-bottom: 2px solid #4fb400;"></td> </tr> <!--END IMAGE ROW, START TEXT ROW--> <tr> <td style="vertical-align: top; width: 100px;"></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #4fb400; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #4fb400; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #4fb400; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #4fb400; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #4fb400; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> </tr> <!--END TEXT ROW--> </table> <small>code by <user name="cawaii"></small></center>

#00aeda CYAN <center><table bgcolor="#ffffff"> <!--START IMAGE ROW--> <tr> <td style="vertical-align: top; height: 52px; width: 100px; border-top: 1px solid #00aeda;"><span style="font-family: verdana, sans-serif; font-size: 11px; color: #00aeda; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">active</span></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #00aeda; border-left: 2px solid #00aeda; border-right: 2px solid #00aeda; border-bottom: 2px solid #00aeda;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #00aeda; border-left: 2px solid #00aeda; border-right: 2px solid #00aeda; border-bottom: 2px solid #00aeda;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #00aeda; border-left: 2px solid #00aeda; border-right: 2px solid #00aeda; border-bottom: 2px solid #00aeda;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #00aeda; border-left: 2px solid #00aeda; border-right: 2px solid #00aeda; border-bottom: 2px solid #00aeda;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #00aeda; border-left: 2px solid #00aeda; border-right: 2px solid #00aeda; border-bottom: 2px solid #00aeda;"></td> </tr> <!--END IMAGE ROW, START TEXT ROW--> <tr> <td style="vertical-align: top; width: 100px;"></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #00aeda; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #00aeda; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #00aeda; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #00aeda; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #00aeda; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> </tr> <!--END TEXT ROW--> </table> <small>code by <user name="cawaii"></small></center>

#ff4585 HOT PINK <center><table bgcolor="#ffffff"> <!--START IMAGE ROW--> <tr> <td style="vertical-align: top; height: 52px; width: 100px; border-top: 1px solid #ff4585;"><span style="font-family: verdana, sans-serif; font-size: 11px; color: #ff4585; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">active</span></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #ff4585; border-left: 2px solid #ff4585; border-right: 2px solid #ff4585; border-bottom: 2px solid #ff4585;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #ff4585; border-left: 2px solid #ff4585; border-right: 2px solid #ff4585; border-bottom: 2px solid #ff4585;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #ff4585; border-left: 2px solid #ff4585; border-right: 2px solid #ff4585; border-bottom: 2px solid #ff4585;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #ff4585; border-left: 2px solid #ff4585; border-right: 2px solid #ff4585; border-bottom: 2px solid #ff4585;"></td> <td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #ff4585; border-left: 2px solid #ff4585; border-right: 2px solid #ff4585; border-bottom: 2px solid #ff4585;"></td> </tr> <!--END IMAGE ROW, START TEXT ROW--> <tr> <td style="vertical-align: top; width: 100px;"></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #ff4585; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #ff4585; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #ff4585; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #ff4585; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> <td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #ff4585; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td> </tr> <!--END TEXT ROW--> </table> <small>code by <user name="cawaii"></small></center>

NOTE
1. The code provides five cells for one row. Feel free to add more rows and cells. There are comments in the code to help you out.
2. To make rows shorter, change the last cells of the text row from this:
<td style="width: 88px; text-align: left;"><span style="font-family: verdana, sans-serif; font-size: 10px; color: #888880;"><a href="LINK" style="text-decoration: none;"><span style="font-size: 8px; color: #HEXCODE OF YOUR CHOICE; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">lorem ipsum</span></a> Lorem ipsum</span></td>

To this:
<td style="width: 88px;"></td>

And the last cells of the image row from this:
<td style="background:url(IMAGE URL HERE - NO NEED TO RESIZE); height: 52px; width: 88px; border-top: 1px solid #HEXCODE OF YOUR CHOICE; border-left: 2px solid #HEXCODE OF YOUR CHOICE; border-right: 2px solid #HEXCODE OF YOUR CHOICE; border-bottom: 2px solid #HEXCODE OF YOUR CHOICE;"></td>

To this:
<td style="height: 52px; width: 88px;"></td>

Comments

[asuna]

cute!

[atliere]

love it. ♥
using it now.

[lascivio]

So blanked... Can't seem to figure out how to make more rows without having another header in it. Is that possible? Sorry to bother!

[yanyan]

Try changing this part of the code:
<td style="vertical-align: top; height: 52px; width: 100px; border-top: 1px solid #f4c619;"><span style="font-family: verdana, sans-serif; font-size: 11px; color: #f4c619; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em;">active</span></td>

To this:
<td style="vertical-align: top; height: 52px; width: 100px;"> </td>

Hope this helps! Let me know if you run into any trouble.

[thoughtbubble]

Your codes are so nice! Thank you!