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.

[rainfall]

(otherwise this is lovely)

[angermanaging]

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.

[rainfall]

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!

[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. ♥

[naismith]

OH MAN this is gorgeous!! I'm thrilled to have inspired something so awesome! This is fantastic :D

[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

[naismith]

LOL thanks, I imagine not too many people get the joke!

[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?

[dormition]

Excuse the journal switch...

Sure, just do this instead for each line: 1/13/14 -- <a href="http://www.dreamwidth.org/" style="color:#08832C;text-decoration:none;">CORDELIA <small>Betan therapy </small></A>

[majorcrotchgrab]

It's fine! And I'm sorry for asking another question but what about keeping the date green with the link black?

[dormition]

No worries, that's not difficult at all. Just do <font color="#08832C">1/13/14 --</font> and then the same link text, but instead of #08832C, use #000000.

LOL sorry, double edit. Correct now. Using HTML instead of CSS confuses my brain. :)

[majorcrotchgrab]

Awesome. Thanks you!

[jaroffireflies]

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