killthecake | [53] Organized Thread Tracker

Code:

<div style="background: url('https://www.transparenttextures.com/patterns/flowers.png'), linear-gradient(180deg, #5f7092, #0f1118); height: 100%; padding: 6px 6px 0 6px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto; text-align: center;">

<a href="#a" style="color: #000; background: #ddd; display: block; width: 150px; padding: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin-bottom: 6px;">
      Month
    </a>

<a href="#b" style="color: #000; background: #ddd; display: block; width: 150px; padding: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin-bottom: 6px;">
      Month
    </a>

</div>

<div style="width: 72%; height: 600px; overflow: hidden;">

<a name="a"></a>
    <div style="width: 100%; height: 100%; font-size: 10px; overflow-y: auto;">

<div style="font-size: 24px; font-variant: small-caps; font-weight: bold; font-style: italic; border-bottom: 3px solid #000; padding: 2px 6px 0 6px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">
        Header
      </div>

<div style="display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">
        <div style="width: 50%; margin: 2px 0;">Key: value</div>
        <div style="width: 50%; margin: 2px 0;">Key: value</div>
        <div style="width: 50%; margin: 2px 0;">Key: value</div>
        <div style="width: 50%; margin: 2px 0;">Key: value</div>
      </div>

<div style="width: 100%; height: 3px; background: #000;"></div>

<div style="padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">
        <div style="display: block; font-weight: bold; font-size: 8px;">
          Date
        </div>
        <a href="url" style="display: block; font-size: 16px; font-weight: bold; color: #000; text-decoration: none;">
          Character/Thread Name
        </a>
        <div style="display: block;">
          <div style="display: inline-block; padding: 2px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 3px; background: #000; color: #fff; font-weight: bold; width: fit-content;">
            ITEM
          </div>
          <div style="display: inline-block; padding: 2px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 3px; background: #000; color: #fff; font-weight: bold; width: fit-content;">
            ITEM
          </div>
        </div>
        Lorem ipsum

</div>

<div style="width: 100%; height: 1px; background: #000;"></div>

</div>

</div>

<a name="b"></a>
    <div style="width: 100%; height: 100%; font-size: 10px; overflow-y: auto;">

<div style="width: 100%; height: 3px; background: #000;"></div>

</div>

<div style="width: 100%; height: 1px; background: #000;"></div>

</div>

</div>

</div>

</div>
<div style="width: 600px; margin: 5px auto; font-size: 10px; font-family: monospace; font-weight: bold; text-align: right;">
  <a href="https://killthecake.dreamwidth.org/" style="color: #111; text-decoration: none;">
    .code
  </a>
</div>

❖ This is a code released early on the Patreon to my subscribers! So feel free to check out things over there if you want early codes or some exclusive content.

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ Almost everything is labelled. You just have to copy/paste what you want into the appropriate sections.

❖ To make new months, you'll have to add new pages. At the top of the code, add more links to the sidebar with #anchor as the url. Then you just copy/paste the section of code labeled 'month' and create an anchor that looks like a name="anchor" at the top. There are examples in the code for two months, each labeled 'a' and 'b' respectively.

❖ The sidebar contains a color gradient. The texture used is from Transparent Textures.

Ctrl+F & Replace:
❖ Month - link text in the sidebar for the different pages
❖ Header - each page header
❖ Key: value - the bit at the top of the page, if you wanted to include your points or number of rewards or something
❖ Date - each page header
❖ Character/Thread name - the header of each thread and also the link to the thread
❖ ITEM - the small block where you put short info like "2 points" or "used on AC" or something
❖ Lorem ipsum - paragraph text, if you wanted to include summaries
❖ url - the url for each thread

#fff the main background and outline around the border, item text
#ddd sidebar link backgrounds
#111 credit text
#000 text color, border, item backgrounds, link text

#5f7092 top of the sidebar gradient
#0f1118 bottom of the sidebar gradient

Flat | Top-Level Comments Only

hi!! sorry to comment on such an older code of yours, but I was wondering if there was any way to add a collapsible year element to this one too like in your other thread trackers?

Hello! Sorry this took me a bit to get to. But yes, we can do that! Try pasting this into the Links section with the rest of the links.

<a href="#a" style="color: #000; background: #ddd; display: block; width: 130px; padding: 4px 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-decoration: none; margin: 0 auto 6px;">
        Month
      </a>

</details>

Let me know how that works for you!

looks perfect, thank you! ❤︎

[53] Organized Thread Tracker

no subject

no subject

no subject