thread tracker: clean and simple

[mistojen]

Clean and Simple Thread Tracker

This thread trackers is another in the Clean and Simple series, which goes with the Navigation Page, CR Chart, and Visualosities.

M'gann M'orzz

MONTH/YEAR

• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname

MONTH/YEAR

• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname

MONTH/YEAR

• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname
• THREAD NAME ✗ with crpartnerjournalname

'clean and simple' design by mistojen

without title overlay:

with title overlay (see above example):

<center><div class="main" style="width: 750px; height: 350px;margin-top: 20px;"> <div style="display: inline-block; float: left; width: 250px; height: 250px; overflow: hidden; background-image: url('MAINIMAGE'); border: 12px solid #630A73;"> </div> <div class="threads" style="display: inline-block; float: left; width: 450px; height: 270px; margin-left: 10px; border: 2px solid #630A73;overflow-y: auto; overflow-x: hidden;"> <!----SINGLE MONTH-----> <div style="display: block; float: left; padding: 5px 5px 5px 15px; text-align: left; width: 440px;font-family: 'arial narrow', sans-serif; font-size: 16px;"><span style="font-size: 25px; font-weight: bold; text-decoration: underline;">MONTH/YEAR</span> <ul> <!---SINGLE THREAD---> <li style="list-style-type: none;"><a href="URLGOESHERE" target="_blank" style="color: #630A73; text-decoration: none; font-style: italic; font-weight: bold;line-height: 1.1em;font-family: Palatino,'Palatino Linotype','Palatino LT STD','Book Antiqua',Georgia,serif; letter-spacing: 1px;">THREAD NAME</a> ✗ with <user name="CRPARTNERJOURNALNAME"></li> <!---END SINGLE THREAD---> <!---ADD ADDITIONAL THREADS---> <!---END ADDITIONAL THREADS---> </ul> </div> <!---END SINGLE MONTH---> </div> </div> <center><div class="credit" style="display: block;margin-bottom: 25px; width: 750px; text-align: center; font-family: 'century gothic'; font-size: 11px;margin-top: -70px;">'clean and simple' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div>

<center><div class="main" style="width: 750px; height: 350px;margin-top: 20px;"> <div style="display: inline-block; float: left; width: 250px; height: 250px; overflow: hidden; background-image: url('MAINIMAGE'); border: 12px solid #630A73;"> <a href="http://JOURNALNAME.dreamwidth.org/" style="text-decoration: none; color: #fff;"><div style="background-color: rgba(0,0,0,.4);color: #fff; line-height: 1.1em;padding: 10px; margin-top: 171px;"><br> <span style="font-family: georgia, 'times new roman', serif; font-size: 28px;font-weight: bold; font-style: italic;padding: 5px 0;">CHARACTER NAME</span> </div></a> </div> <div class="threads" style="display: inline-block; float: left; width: 450px; height: 270px; margin-left: 10px; border: 2px solid #630A73;overflow-y: auto; overflow-x: hidden;"> <!----SINGLE MONTH-----> <div style="display: block; float: left; padding: 5px 5px 5px 15px; text-align: left; width: 440px;font-family: 'arial narrow', sans-serif; font-size: 16px;"><span style="font-size: 25px; font-weight: bold; text-decoration: underline;">MONTH/YEAR</span> <ul> <!---SINGLE THREAD---> <li style="list-style-type: none;"><a href="URLGOESHERE" target="_blank" style="color: #630A73; text-decoration: none; font-style: italic; font-weight: bold;line-height: 1.1em;font-family: Palatino,'Palatino Linotype','Palatino LT STD','Book Antiqua',Georgia,serif; letter-spacing: 1px;">THREAD NAME</a> ✗ with <user name="CRPARTNERJOURNALNAME"></li> <!---END SINGLE THREAD---> <!---ADD ADDITIONAL THREADS---> <!---END ADDITIONAL THREADS---> </ul> </div> <!---END SINGLE MONTH---> </div> </div> <center><div class="credit" style="display: block;margin-bottom: 25px; width: 750px; text-align: center; font-family: 'century gothic'; font-size: 11px;margin-top: -70px;">'clean and simple' design by <a style="color: #000; text-decoration: none;" href="http://mistojen.dreamwidth.org/">mistojen</a></div>

color change:

#630A73

instructions:

1. Make sure you check the box that says Disable Auto-Formatting located below the subject line and above the content box for your entry itself.
2. Replace the following:
   • MAINIMAGE with the url for the image as your base on the left. This needs to be exactly 250x250 in size. You can change this, but if you do, then you also need to change all of the dimensions in the rest of the code to match whatever you change it to, which can get a bit tricky. To resize and crop gifs, I recommend EZGif.
   • MONTH/YEAR
   • URLGOESHERE with the url to the thread.
   • THREADTITLE with whatever you want the link text to say for the thread.
   • CRPARTNERJOURNALNAME with the journal name of the person you're threading with.
3. If you're using the code with the overlay for a title on the image on the left, also replace:
   • JOURNALNAME with your character's journal name.
   • TITLE with the name of the playlist. You may have to fiddle with the font-size attribute to make sure it fits.
4. This code comes with one thread on it. There's an overflow setting that will allow it to scroll when you add additional songs and detailed comments to show you where those threads will go for each month you add, so add as many months and threads as you like!
5. Please do not remove credit.
6. If you have any questions or run into hiccups, please feel free to comment below and I'll try to get back to you ASAP to help.
7. Enjoy!

Comments

[iisupergirlii]

Hey there! I'm trying to use this here but am having an issue with spacing in the right boxes. I've checked margins and padding and all that stuff, and I am thoroughly confused. So! Any help you can provide on why December is so far down into the box and why the sample thread is spaced so far down from that would be lovely.

Here is my code! I'm in Chrome, and here is what I'm seeing on my end!

[mistojen]

Ah okay, so I see what the problem is. So, what's happening is that all of the spacing I put between items, like just the blank space where I hit enter or whatever to give you all room to see where one piece ends and another starts, for whatever reason, that's registering as whitespace in the code itself. So...there's a couple of options. 1.) If you don't mind taking out the space so that your code looks more like this, that will take care of it. 2.) If you do mind because you need it for the sake of organization, try adding <*raw-code> at the end of the SINGLE MONTH html comment and then <*/raw-code> right in front of the END SINGLE MONTH html comment (take out the asterisks) and that should fix the spacing issue. :) Let me know if it doesn't and I'll take another look!

[iisupergirlii]

Bless you thank you! Using the code you pastebin'd without the spaces worked!!

[mistojen]

You're so welcome and yay! I'm glad!

[iisupergirlii]

It's me again, Margaret. So, in using this more (I got lazy about thread tracking oopsie poopsie but here I go again!), the links are cascading in a diagonal, and I'm not sure why. I'm the worst.

Here's where I'm using it. I'm using Chrome. Here is my code and here is an image of what it looks like, just in case.

EDITING bc I got it to stop cascading diagonally by adding <*/ul> at the end, BUT there's gigantic spaces between each line. ME AND THE SPACES. I'm sorry. Updated my code and pic and everything.

Thank you in advance!!

[mistojen]

I just saw this and was about to say that it's because of the ul tag, but rather than adding the /ul at the end of each one, remove all the ul tags EXCEPT the first one for the month. Then when you finish the month, close with the /ul. So it should look more like this. Let me know if that helps!

[iisupergirlii]

There is significantly less spacing now that I've done that! But it is still spaced a good bit between each one instead of being single spaced like in your example. Is there a way to fix that?

I used your pastebin code, so that's what's currently in there btw.

[mistojen]

That's really weird...I'm not sure what would make it do that (I'm also back at work, so I'm working on mobile right now, so bear with me), but at least as a temporary fix, in the ul tag, you could add a line-height, so wherever you see the <*ul> before the threads start, change it to <*ul style="line-height: .5em;"> and then just change the line-height to what you want it to look like. I wouldn't go over 1em or under .5em because under the latter will look a little squished and over that is going to end up with still more space. Conversely, you could try wrapping a <*raw-code> <*/raw-code> around the whole list, putting the raw-code tag before the ul and the /raw-code after the /ul.

I'll take another look at it when I'm on a computer again, if neither of those solves the issue, so definitely let me know!

[iisupergirlii]

raw-coding it up worked!!! Thank you SO much!!

[mistojen]

You're so welcome, I'm glad!

[verunandesu]

Just noting that I'm going to be using this, and I'm finding it amazing and nice and simple! If I run in to any issues, I'll ask, although rn my progress is "yay I logged one thread now i am done" so it might be in a few days haha

[mistojen]

I'm glad you like it!