docs: add whitelabeling instructions to README

Covers: site name/tagline (config.yaml), About page editing, Terms of Service editing, footer customization, CSS theme variables, and navigation links.
2026-07-07 21:51:55 -06:00
parent ee9a465cb9
commit fec0fa63b0
1 changed files with 58 additions and 0 deletions
@@ -167,6 +167,64 @@ curl -b cookies.txt -X DELETE http://localhost:8000/api/protocols/round-robin-ch
 | `/api/import` | POST | Import YAML | admin |
 | `/api/seed` | POST | Load seed protocols | admin |

+## Whitelabeling
+
+Protocol Droid is designed to be fully whitelabel-able. Here's how to customize it for your deployment:
+
+### Site name and tagline
+
+Edit `config.yaml` in the project root:
+
+```yaml
+site_name: "Your Site Name"
+site_tagline: "Your tagline here"
+registration_enabled: true
+require_approval: false
+```
+
+The site name appears in the browser title bar and the header breadcrumb. The tagline appears on the library page.
+
+### About page
+
+The About page is plain HTML in `frontend/index.html`, inside the `<!-- ABOUT VIEW -->` section (look for `<section id="view-about">`). To customize it:
+
+1. Edit `frontend/index.html`
+2. Find the `<!-- ABOUT VIEW -->` comment
+3. Modify the text, links, and sections as needed
+4. Upload the file to your server (or `git pull` if editing in the repo)
+
+No build step is needed — the HTML is served directly. The "Seed protocols" section at the bottom (`id="seedSection"`) is automatically shown only to admin users, so you can leave it or remove it.
+
+### Terms of Service
+
+The Terms of Service page is also plain HTML in `frontend/index.html`, inside the `<!-- TERMS OF SERVICE VIEW -->` section. Edit it to match your policies.
+
+### Footer
+
+The footer is at the bottom of `frontend/index.html`, just before the closing `<script>` tag. It contains the CC-BY license link and Terms of Service link. Edit it to change the license or add your own links.
+
+### Colors and theme
+
+Edit `frontend/style.css`. The CSS uses variables at the top of the file for the color scheme:
+
+```css
+:root {
+  --ink: #0a1929;          /* header background */
+  --ink-dim: #8896a8;      /* dim text */
+  --accent: #4a9eff;       /* primary blue */
+  --accent-bright: #6db5ff; /* bright blue */
+  --green-bright: #00ff88; /* $ prompt, accents */
+  --surface: #f8f9fa;      /* card backgrounds */
+  --border: #e0e4e8;       /* borders */
+}
+```
+
+Change these values to match your brand. The rest of the stylesheet inherits from them.
+
+### Navigation
+
+The nav links (PROTOCOLS, COLLECTIONS, ABOUT) are in `frontend/index.html` in the `<nav id="navBar">` section. You can rename, reorder, or remove links there.
+
 ## Protocol YAML Format

 ```yaml