Thermos is a webpage template that's styled to resemble a thermos on a cozy plaid blanket. Like an insulated travel mug, Thermos is meant to be straightforward and practical. Pour as much or as little text into it as you like.
Thermos is free for personal use with credit. It is intended for hobbyists and beginners. Created by Coyote for the 32-Bit Cafe Spring 2025 Tea Party.
Features:
- explanatory comments written into the code in order to make it more approachable for beginners
- automatic dark mode via light-dark CSS
- automatic resizing for smaller screens via media query
- editable plaid pattern made with linear-gradient
- easy-to-customize color scheme coded with variables
- custom colors for focus outlines and selected text color
- coffee cup emoji bullet point lists
How to Use
To use this template, you can either 1) right click and select "View Page Source" to look at the code, or 2) download the page file directly. Here is a convenient download button:
The page downloads as a .html file that can be opened with text editors like Notepad or Notepad++.
To put it online, you will need a web host, such as Neocities or Nekoweb.
You can edit any of the text within the main text areas classed as thermos and lid. Remember to edit the page title (way up top in the head between the title tags), header links, header text, and footer text.
Update the links in the header to point to anything you want, such as external sites, other pages on the same site, or specific parts of the same page.
If you want to change a section link or add a new one, you will need to define an ID for that section (id="name") and then use that ID in the link (href="#name").
Be sure to add class="plaidhover" if you want it to have the plaid hover effect like the others.
How to Edit
To edit the color scheme, go to the part of the CSS that says :root. You can swap out predefined variables or easily add your own.
To generate custom color codes, you can use sites like HTML Color Codes, but make sure to check the contrast.
If you are crafty with Inspect Element, you can even test out editing the color scheme right now from this webpage. You will need to open the head (not to be confused with header), open the style, and click to make the text editable.
For example, try changing --plaidbg: var(--red); to --plaidbg: var(--green); and press enter.
Links in light mode (and the link hover background in both modes) will automatically change color based on the value of --plaidbg, but you can change this by altering the --accent variable and the CSS for the a element.
If you're editing one of the colors, don't forget to check both parts of the light-dark color scheme. To test how it looks, go to your browser settings and switch your preferences for light mode and dark mode. The page will automatically switch colors to the corresponding part of the light-dark CSS.
To edit the scale of the plaid pattern, change the background-size. The default for the page background is 150px 150px. A smaller number will make the lines look smaller. A bigger number will make the lines look bigger.
To change the bullet points to something other than a coffee cup emoji, go to ul in the CSS and change the list-style. You can also revert the them to default by removing that line of code entirely.
For more help see the guides on my Useful Links page.
How to Credit
If you use this template, please credit me and link back to this page. It's as simple as this:
Thermos template by Coyote
Or if you want to indicate that you only borrowed part of the code without the full template, you might express that something like this:
Plaid background from Thermos by Coyote
You can add this to your footer, your about page, your credits page, your colophon, or whatever else suits your particular website.