Exchange letter template

Hello reader! This is a HTML/CSS/JS template I cobbled together for exchange letters and art trades. I wanted something clear, neat, and fast to load. So I mashed this together. The coolest feature on this page is the table of contents that not only automatically draws from your HTML headers, but also highlights the text in color as you click or scroll down.

Use this template as you wish on your own site. Alter the code, use it for things that aren't exchange letters, and make it your own! No credit to me needed. You should keep the credits at the bottom of this page for the other people whose javascript I used though :P

To install this theme:

  1. Right-click any empty space on this page, then click "view source" on the context menu.
  2. Copy and paste the HTML into your own page. I've written comments into the code to try to help you see what pieces do what.
  3. ⚠ Remember to save the css file and the javascript files for the table of contents and optionally the color scheme switcher to your own site as well.

One visual bug: The headers don't highlight on the sidebar properly if there are brackets (like these parentheses) in the title. That was part of the .js code I used for the sidebar. Maybe you can find a way to fix that LOL. If you do fix it, let me know and I'll update the code on this page.

Links

These don't actually have valid links, so you have to add your own in the code:

Mediums

Medium Likes

This section may be optional, because exchanges often have checkboxes for whether you want art or writing.

Medium Do Not Wants (DNW)

Sometimes exchanges are more open-ended in what you can create for others. Some people might not want art, writing, edits, gifs, or whatever.

Likes

General Likes

In fandom terms, "gen" often specifies art of a non-sexual, non-romantic, and otherwise non-shippy nature. You can find some common terms for tropes on the Fanlore wiki.

Relationships Likes

I use the term "ship" to mean relationships that range from platonic, familial, romantic, overlapping and otherwise. You might have a different definition.

🔞 Adult likes

An optional section for anything violent or sexual. I've hidden the list inside a details and summary tag, so the reader has to click this text in order to view the contents.

Opt-ins

Optional section. Opt-in sections are not that common in exchange letters I've seen. But some things are often DNWed/disliked to the point that people assume no one wants to receive that subject. You, however, might be fine with receiving those subjects.

Do Not Wants

DNW = Do Not Want. Stuff you don't want to receive. Be kind and succinct in this section, you don't need to explain your reasoning for anything.

General DNW

🔞 Adult DNW

Unwanted violent or sexual subjects. Click to expand.

Credits

Written and tested by me (SCUMSUCK) in VSCodium and Firefox. I can't promise to provide support for this page cuz I'm not an advanced leet hackerman. But I can try to help you with simple stuff like styling changes if you ask me.

Sections inspired by spillingdown's exchange letter, and Samifer's exchange letter.

Lots of code edited from:

Update Log