Customize Design puts your own CSS and JavaScript on every page of TvT. The editor is on the left; on the right is the real page, previewing as you type. Real pages change only when you save.
1. The editor and the preview
Two tabs: CSS for the look, JS for behavior. The header shows the line count and a badge when there are unsaved changes. The preview shows whichever page you pick from the pills above it: the home page, a category, the watch page, and the rest. The seams between the panes drag, and the preview can go full width.
2. Snippets and scope
Snippets are starting points, and they match the real classes of the page you are previewing, so nothing needs to be guessed. Pick who a CSS snippet applies to first: everyone, or one profile. Scoped to a profile, the CSS applies only while that profile is signed in, so a kid profile can have its own look while the rest of the house keeps the default.
Click a snippet and it lands at the end of the editor. Change a value and the preview follows as you type.
3. JavaScript
The JS tab works the same way with its own snippets. JavaScript runs on every page once saved, so Run in preview tries it in the preview pane first.
4. Save, Discard, Reset
Save and apply puts it on every page for real. Discard changes drops what you typed since the last save. Reset to default clears both tabs back to stock. Your custom design is part of every backup, so experiment freely and restore if a change goes wrong.
Good to know
- Class names are stable across pages: the snippets show the ones that matter, and the browser's inspector shows the rest.
- A broken style is one Reset away, and Backup and Restore keeps the version before it.