bannertech | Thread Tracker

( 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.

Flat | Top-Level Comments Only

FYI, CSS margins don't (for some weird reason) work inside comments; if someone wanted to use this in a comment timeline, it's an easy fix, though -- just change margin:15px to padding:15px. Since it's just a containing div with no background color itself, there's no reason not to do this in the main code too, really.

(otherwise this is lovely)

Oh, I never use codes like this in comments, so that wouldn't even occur to me! I'm sure someone else attempting to use this will appreciate the heads up, haha.

One other note: the first month in the sample code is at 325px, whereas the following months are all 300px... so when you line up a "February" next to a February, it gets smooshed.

Now I will go away and leave you in peace!

Thread Tracker

no subject

no subject

no subject

no subject