bannertech | Thread Tracker (Reply)

( static preview )

( live preview )

JANUARY;

1/2/14 -- MILES short description.
1/13/14 -- CORDELIA Betan therapy
1/14/14 -- TAURA persuaded out of pink boa
1/23/14 -- IVAN being an idiot as always
1/2/14 -- MILES short description.
1/13/14 -- CORDELIA Betan therapy
1/14/14 -- TAURA persuaded out of pink boa
1/23/14 -- IVAN being an idiot as always

JANUARY;

1/2/14 -- MILES short description.
1/13/14 -- CORDELIA Betan therapy
1/14/14 -- TAURA persuaded out of pink boa
1/23/14 -- IVAN being an idiot as always

JANUARY;

1/2/14 -- MILES short description. maybe one brief sentence or you'll get a line break.
1/13/14 -- CORDELIA Betan therapy
1/14/14 -- TAURA persuaded out of pink boa
1/23/14 -- IVAN being an idiot as always
1/13/14 -- CORDELIA Betan therapy
1/14/14 -- TAURA persuaded out of pink boa
1/23/14 -- IVAN being an idiot as always

JANUARY;

1/2/14 -- MILES short description
1/13/14 -- CORDELIA Betan therapy
1/14/14 -- TAURA persuaded out of pink boa
1/23/14 -- IVAN being an idiot as always

( instructions )

Narrow:

<div style="width:100%;">

<div style="width:325px;margin:15px;display:inline-block;vertical-align:top;">
<div style="background: rgba(0,0,0,0.7);width:325px;color:#fff;text-transform: uppercase;box-shadow: 7px 7px 0px #08832C;padding:5px;font-size:22px;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;">JANUARY;</div>
<div style="padding-left:10px;width:325px;line-height:20px;text-align:left;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;"><a href="http://" style="color:#08832C;text-decoration:none;max-height:250px;overflow:auto;">1/2/14</A> -- MILES <small>short description.</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/13/14</A> -- CORDELIA <small>Betan therapy</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/14/14</A> -- TAURA <small>persuaded out of pink boa</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/23/14</A> -- IVAN <small>being an idiot as always</small>
<a href="http://" style="color:#08832C;text-decoration:none;max-height:250px;overflow:auto;">1/2/14</A> -- MILES <small>short description.</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/13/14</A> -- CORDELIA <small>Betan therapy</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/14/14</A> -- TAURA <small>persuaded out of pink boa</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/23/14</A> -- IVAN <small>being an idiot as always</small>
</div><raw-code></div>

<div style="width:325px;margin:15px;display:inline-block;vertical-align:top;"></raw-code>
<div style="background: rgba(0,0,0,0.7);width:325px;color:#fff;text-transform: uppercase;box-shadow: 7px 7px 0px #08832C;padding:5px;font-size:22px;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;">JANUARY;</div>
<div style="padding-left:10px;width:325px;line-height:20px;text-align:left;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;"><a href="http://" style="color:#08832C;text-decoration:none;max-height:250px;overflow:auto;">1/2/14</A> -- MILES <small>short description.</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/13/14</A> -- CORDELIA <small>Betan therapy</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/14/14</A> -- TAURA <small>persuaded out of pink boa</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/23/14</A> -- IVAN <small>being an idiot as always</small>
<a href="http://" style="color:#08832C;text-decoration:none;max-height:250px;overflow:auto;">1/2/14</A> -- MILES <small>short description.</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/13/14</A> -- CORDELIA <small>Betan therapy</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/14/14</A> -- TAURA <small>persuaded out of pink boa</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/23/14</A> -- IVAN <small>being an idiot as always</small>
</div></div>

</div>

Wide:

<table width="900px"><tr><td width="300px"><div style="background: rgba(0,0,0,0.7);width:300px;color:#fff;text-transform: uppercase;box-shadow: 7px 7px 0px #08832C;padding:5px;margin:10px;font-size:22px;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;">JANUARY;</div></td>
<td><div style="line-height:20px;text-align:left;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;"><a href="http://" style="color:#08832C;text-decoration:none;">1/2/14</A> -- MILES <small>short description. maybe one brief sentence or you'll get a line break.</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/13/14</A> -- CORDELIA <small>Betan therapy</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/14/14</A> -- TAURA <small>persuaded out of pink boa</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/23/14</A> -- IVAN <small>being an idiot as always</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/13/14</A> -- CORDELIA <small>Betan therapy</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/14/14</A> -- TAURA <small>persuaded out of pink boa</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/23/14</A> -- IVAN <small>being an idiot as always</small></div></td></tr></table>

<table width="825px"><tr><td width="300px"><div style="background: rgba(0,0,0,0.7);width:300px;color:#fff;text-transform: uppercase;box-shadow: 7px 7px 0px #08832C;padding:5px;margin:10px;font-size:22px;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;">JANUARY;</div></td>
<td><div style="line-height:20px;text-align:left;font-family: Lucida Console, Lucida Sans Typewriter, Monaco, Bitstream Vera Sans Mono, monospace;"><a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/2/14</A> -- MILES <small>short description</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/13/14</A> -- CORDELIA <small>Betan therapy</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/14/14</A> -- TAURA <small>persuaded out of pink boa</small>
<a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">1/23/14</A> -- IVAN <small>being an idiot as always</small></div></td></tr></table>

Nothing too fancy, just a simple thread tracker. The narrow version will form rows automatically regardless of what order you put the months in, and you can have different heights within each row, so don't worry about that.

Accent color is #08832C.

Thread Tracker

Post a comment in response: