Thread Tracker

[angermanaging]

( 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%;"> <!--MONTH START--> <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> <!--MONTH START--> <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> <!--PASTE NEW MONTHS ABOVE THIS LINE--> </div> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></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> <div style="width:100%;text-align:right;"><small>Code by <user name="bannertech">.</small></div>

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.

Comments

[rainfall]

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.

[vital]

Your codes inspired me so i sort of did a thing based on it. Gonna put it on my McCoy's journal, thanks a bunch. ♥

[dreamvour]

Gorgeous coding. ♥ Going to use this on this journal, thank you so much!

[biichan]

The code is rad, but I'm really here to compliment your fake thread titles :3

[majorcrotchgrab]

Because I'm html/css stupid, is there a way to switch the coding so the "ORDELIA Betan therapy" part is the link as opposed to the date?

[jaroffireflies]

This is great. I've used it over on a character journal here. Wonderful work!