bannertech | Thread tracker

( static preview )

( live preview )

D
E
C
E
M
B
E
R

11/2 | Wanda & Jim
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.

T
U
S
H
A
N
S
H
U

NOVEMBER

• Wanda & Jim
• Thread 2
• Another thread
• Maybe a short description

DECEMBER

• Wanda & Jim
• Thread 2
• Another thread
• Maybe a short description

( instructions )

By month:

<center><table width="90%"><tr><td width="40px" bgcolor="#08832C"><div style="padding:5px;text-align:center;"><span style="font: 30px verdana, sans-serif; color: #fff; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 1px #000;font-family:Georgia;">D
E
C
E
M
B
E
R</span></div></td>
<td>
<div style="margin-top:-40px;padding:0px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div>
<div style="padding:2px 0px 3px 0px;border-bottom:1px dotted #08832C;"><B>11/2 | <a href="http://" style="color:#08832C;text-decoration:none;text-transform:uppercase;">Wanda & Jim</A></B>
Nullam vel condimentum est, non pretium nibh. Cras in nunc vitae mauris porta porta eget in lacus.</div></td></tr></table></center>

By game:

<center><table width="90%" cell-spacing="0"><tr><td width="40px" bgcolor="#F55F61"><div style="padding:5px;text-align:center;"><span style="font: 30px verdana, sans-serif; color: #fff; text-transform: uppercase; letter-spacing: 3px; text-shadow: 1px 1px 1px #000;font-family:Georgia;">T
U
S
H
A
N
S
H
U</span></div></td>
<td>
<div style="margin-top:-40px;border-bottom:1px dotted #F55F61;"><B>NOVEMBER</B></div>
<div style="margin: -15px 0px 15px 10px;">• <a href="http://" style="color:#000;text-decoration:none;">Wanda & Jim</A>
• <a href="http://" style="color:#000;text-decoration:none;">Thread 2</A>
• <a href="http://" style="color:#000;text-decoration:none;">Another thread</A>
• <a href="http://" style="color:#000;text-decoration:none;">Maybe a short description</A></div>
<div style="border-bottom:1px dotted #F55F61;"><B>DECEMBER</B></div>
<div style="margin: -15px 0px 15px 10px;">• <a href="http://" style="color:#000;text-decoration:none;">Wanda & Jim</A>
• <a href="http://" style="color:#000;text-decoration:none;">Thread 2</A>
• <a href="http://" style="color:#000;text-decoration:none;">Another thread</A>
• <a href="http://" style="color:#000;text-decoration:none;">Maybe a short description</A></div></td></tr></table></center>

I strongly encourage messing around with this to get all the informational fields you want. :) There's a lot of customization possible here, like doing border-top instead of border-bottom for the entries.

You could use the second version to organize it by character instead of by month, too. Then if you include skiplinks with <a name="character"> for the subheader, you can link to their section from a CR chart with <a href="http://...#character">.

Hex codes for the accent colors: #08832C and #F55F61.

As a final note, the very first div in each version has different spacing attributes, so don't copy and paste over it or it won't line up quite right.

Thread tracker

no subject