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.
This commit is contained in:
Protocolbot
2026-07-07 21:51:55 -06:00
parent ee9a465cb9
commit fec0fa63b0
+58
View File
@@ -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/import` | POST | Import YAML | admin |
| `/api/seed` | POST | Load seed protocols | 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 ## Protocol YAML Format
```yaml ```yaml