7th: you've got mail

[yanyan]

My friend wanted something like Devil Survivor 1's Laplace Mail system for an IC inbox thread tracker, and this was the result.

FROM: SUBJECT: Aladdin You need to get laid!! Izumo Kusanagi For the adorable Yozora Mikazuki... Minako Aino cOme tO tHe toWN SQuaRE Gareki In case you take your loneliness out on... There are 2 unfinished threads.

FROM: SUBJECT: DATE: Aladdin You need to get laid!! March 3, 2013 Izumo Kusanagi For the adorable Yozora Mikazuki... March 3, 2013 Minako Aino cOme tO tHe toWN SQuaRE September 3, 2013 Gareki In case you take your loneliness out on... February 3, 2013 There are 2 unfinished threads.

without dates <raw-code> <center> <table style="width: 480px; font-family: 'segoe ui', calibri, sans-serif;"> <tr><td> <div style="float: left; position: relative; width: 100%; font-size: 11px;"> <div style="float: left; width: 16px; color: #fff; background: #367cda; padding: 1px 4px;"> </div> <div style="float: left; width: 120px; color: #fff; background: #367cda; padding: 1px 4px;">FROM:</div> <div style="float: left; width: 320px; color: #fff; background: #367cda; padding: 1px 4px;">SUBJECT:</div> </div> <div style="float: left; position: relative; width: 480px; background: #367cda;"> <!--LIST OF THREADS BEGIN--> <div style="width: 100%; background: #eee; max-height: 92px; overflow: auto;"> <table style="width: 100%; background: #eee; color: #555; font-size: 12px;"> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="width: 13px; border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="width: 116px; border-right: 1px solid #ddd;">CHARACTER NAME</td> <td><a href="THREAD LINK HERE" style="text-decoration: none;"><span style="color: #555;">THREAD SUBJECT</span></a></td> </tr> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="width: 13px; border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="width: 116px; border-right: 1px solid #ddd;">CHARACTER NAME</td> <td><a href="THREAD LINK HERE" style="text-decoration: none;"><span style="color: #555;">THREAD SUBJECT</span></a></td> </tr> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="width: 13px; border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="width: 116px; border-right: 1px solid #ddd;">CHARACTER NAME</td> <td><a href="THREAD LINK HERE" style="text-decoration: none;"><span style="color: #555;">THREAD SUBJECT</span></a></td> </tr> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="width: 13px; border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="width: 116px; border-right: 1px solid #ddd;">CHARACTER NAME</td> <td><a href="THREAD LINK HERE" style="text-decoration: none;"><span style="color: #555;">THREAD SUBJECT</span></a></td> </tr> </table> </div> <!--LIST OF THREADS END--> <div style="text-align: center;"><span style="color: #fff;">There are # unfinished threads.</span></div> </div> </td></tr> </table> </center> </raw-code> <small>code by <user name=cawaii></small>

with dates <raw-code> <center> <table style="width: 600px; font-family: 'segoe ui', calibri, sans-serif;"> <tr><td> <div style="float: left; position: relative; width: 100%; font-size: 11px;"> <div style="float: left; width: 16px; color: #fff; background: #367cda; padding: 1px 4px;"> </div> <div style="float: left; width: 124px; color: #fff; background: #367cda; padding: 1px 4px;">FROM:</div> <div style="float: left; width: 296px; color: #fff; background: #367cda; padding: 1px 4px;">SUBJECT:</div> <div style="float: left; width: 132px; color: #fff; background: #367cda; padding: 1px 4px;">DATE:</div> </div> <div style="float: left; position: relative; width: 600px; background: #367cda;"> <div style="width: 100%; background: #eee; max-height: 92px; overflow: auto;"> <table style="width: 100%; background: #eee; color: #555; font-size: 12px;"> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="border-right: 1px solid #ddd;">CHARACTER NAME</td> <td style="border-right: 1px solid #ddd;"><a href="LINK HERE" style="text-decoration: none;"><span style="color: #555;">SUBJECT</span></a></td> <td>DATE</td> </tr> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="border-right: 1px solid #ddd;">CHARACTER NAME</td> <td style="border-right: 1px solid #ddd;"><a href="LINK HERE" style="text-decoration: none;"><span style="color: #555;">SUBJECT</span></a></td> <td>DATE</td> </tr> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="border-right: 1px solid #ddd;">CHARACTER NAME</td> <td style="border-right: 1px solid #ddd;"><a href="LINK HERE" style="text-decoration: none;"><span style="color: #555;">SUBJECT</span></a></td> <td>DATE</td> </tr> <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="border-right: 1px solid #ddd;">CHARACTER NAME</td> <td style="border-right: 1px solid #ddd;"><a href="LINK HERE" style="text-decoration: none;"><span style="color: #555;">SUBJECT</span></a></td> <td>DATE</td> </tr> </table> </div> <div style="text-align: center;"><span style="color: #fff;">There are # unfinished threads.</span></div> </div> </td></tr> </table> </center> </raw-code> <small>code by <user name=cawaii></small>

additional rows <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="width: 13px; border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="width: 116px; border-right: 1px solid #ddd;">CHARACTER NAME</td> <td><a href="THREAD LINK HERE" style="text-decoration: none;"><span style="color: #555;">THREAD SUBJECT</span></a></td> </tr>

additional rows <tr style="background: #fff;(IF FINISHED, remove) font-weight: bold;(IF FINISHED, remove) border-bottom: 1px solid #ddd;"> <td style="border-right: 1px solid #ddd;"><img src="http://i.imgur.com/mjQ2YrQ.png (IF FINISHED: http://i.imgur.com/tJN3hvB.png)" title="un/finished"></td> <td style="border-right: 1px solid #ddd;">CHARACTER NAME</td> <td style="border-right: 1px solid #ddd;"><a href="LINK HERE" style="text-decoration: none;"><span style="color: #555;">SUBJECT</span></a></td> <td>DATE</td> </tr>

NOTES
1. Must have four rows to look full. It doesn't look good if you put less than four, in my opinion.
2. You may change #367cda to whatever color you want.
3. You may change the envelope icons, but they must not go beyond 12px x 12px or it will look weird!

Comments

[papatiger]

Oh these thread trackers are amazing. I hope you don't mind if I use them and credit you, thank you!