[53] Organized Thread Tracker

[lina_trinch]

Code:
<div style="width: 600px; height: 600px; margin: auto; border: 2px solid #000; outline: 2px solid #fff;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 2px; background: #fff; display: flex; flex-direction: row; justify-content: space-between; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000;"> <!--links--> <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> <!--ADD MORE LINKS ABOVE THIS LINE--> </div> <!--box--> <div style="width: 72%; height: 600px; overflow: hidden;"> <!--month--> <a name="a"></a> <div style="width: 100%; height: 100%; font-size: 10px; overflow-y: auto;"> <!--title--> <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> <!--stats--> <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> <!--big divider--> <div style="width: 100%; height: 3px; background: #000;"></div> <!--thread--> <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> <!--end thread--> <!--thread--> <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> <!--end thread--> <!--little divider--> <div style="width: 100%; height: 1px; background: #000;"></div> <!--thread--> <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> <!--end thread--> <!--add more above this line--> </div> <!--end month--> <!--month--> <a name="b"></a> <div style="width: 100%; height: 100%; font-size: 10px; overflow-y: auto;"> <!--title--> <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> <!--stats--> <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> <!--big divider--> <div style="width: 100%; height: 3px; background: #000;"></div> <!--thread--> <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> <!--end thread--> <!--thread--> <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> <!--end thread--> <!--little divider--> <div style="width: 100%; height: 1px; background: #000;"></div> <!--thread--> <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> <!--end thread--> <!--add more threads above this line--> </div> <!--end month--> <!--add more months above this line--> </div> <!--ADD MORE ABOVE THIS LINE--> </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