# Hobbesgram CSS Styling Reference
All color theming is controlled through **Admin → CSS & Color Theme** (`/admin/css`).
Colors are stored as hex values in `data/settings/settings.json` under the `css` key.
The values are injected directly into a `<style>` block in `templates/header.php` at
page render time — there is no separate stylesheet file to edit.
---
## Color Palette Variables
Each variable maps to one or more CSS rules. The table shows the key name (as used
in the admin panel and in `config.php`), what it controls, and its default value in
the **OS/2 Classic** preset.
### Page Base
| Key | Controls | Default |
|-----|----------|---------|
| `bg_color` | `body` background — the outer page canvas | `#c0c0c0` |
| `text_color` | `body` foreground — default text everywhere | `#000000` |
| `link_color` | `a` — unvisited hyperlinks | `#000080` |
| `visited_color` | `a:visited` — already-followed links | `#800080` |
| `muted_color` | `.muted` helper class, form hints, category tree expand markers | `#444444` |
### Header
| Key | Controls | Default |
|-----|----------|---------|
| `header_bg` | `#site-header` background; also the `border-bottom` ridge colour | `#000080` |
| `header_text` | `#site-header` text and all links inside it (site name, user-bar links) | `#ffffff` |
### Navigation Bar
| Key | Controls | Default |
|-----|----------|---------|
| `nav_bg` | `#nav` strip background | `#003399` |
| `nav_text` | `#nav a` link colour | `#ffffff` |
| `nav_hover_bg` | `#nav a:hover` and `#nav a.active` highlight background | `#0055cc` |
### Sidebar
The sidebar (`#sidebar`) uses `panel_bg` and `border_color` (see Panels below).
### Tables
| Key | Controls | Default |
|-----|----------|---------|
| `th_bg` | `table.listing th` background; also `.panel-title` background | `#000080` |
| `th_text` | `table.listing th` text; also `.panel-title` text | `#ffffff` |
| `tr_alt_bg` | Every even row background (`tr:nth-child(even) td`) | `#e8e8ff` |
| `tr_hover_bg` | Row background on mouse-over (`tr:hover td`) | `#c8c8e8` |
| `border_color` | All `table.listing` cell borders; panel/sidebar/header borders; `hr` lines; pagination links border | `#808080` |
### Panels and Boxes
| Key | Controls | Default |
|-----|----------|---------|
| `panel_bg` | `.panel` background; `#sidebar` background; `.info-box` background; `.admin-card` background | `#ffffff` |
| `panel_border` | `.panel` border (2 px solid) | `#808080` |
Note: `.panel-title` uses `th_bg`/`th_text`, not `panel_border`.
### Buttons
| Key | Controls | Default |
|-----|----------|---------|
| `btn_bg` | `.btn` background; pagination link background | `#c0c0c0` |
| `btn_text` | `.btn` text colour | `#000000` |
| `btn_border` | `.btn` 2 px outset border (inverts to inset on hover) | `#808080` |
`.btn-primary` ignores `btn_bg`/`btn_text` and uses `th_bg`/`th_text` with `accent` as
border colour instead. `.btn-danger` is always hardcoded red (`#cc0000`) regardless of
the palette.
### Forms and Inputs
Applies to all `input`, `select`, and `textarea` elements globally, not just inside
`form.std`.
| Key | Controls | Default |
|-----|----------|---------|
| `input_bg` | Input/select/textarea background | `#000080` |
| `input_text` | Input/select/textarea text colour | `#ffff00` |
| `input_border` | Input border (1 px global; 2 px inset inside `form.std`) | `#808080` |
### Flash / Alert Messages
| Key | Controls | Default |
|-----|----------|---------|
| `error_bg` | `.flash-error` background (border is hardcoded `#cc0000`) | `#ffcccc` |
| `success_bg` | `.flash-success` background (border is hardcoded `#006600`) | `#ccffcc` |
| `info_bg` | `.flash-info` background (border is hardcoded `#000080`) | `#ccccff` |
### Footer
| Key | Controls | Default |
|-----|----------|---------|
| `footer_bg` | `#site-footer` background; also the `border-top` ridge colour | `#000080` |
| `footer_text` | `#site-footer` text and all links in it | `#ffffff` |
### Accent
| Key | Controls | Default |
|-----|----------|---------|
| `accent` | `.btn-primary` border; `.pagination a.current` background; markdown heading colour (`.md-content h1/h2/h3`); markdown blockquote left border | `#000080` |
### Derived / Shared Uses
Some keys are used in more than one context. Quick cross-reference:
- `th_bg` / `th_text` — table headers **and** panel title bars **and** `.btn-primary` **and** `.tag` inline badges
- `border_color` — table cell borders **and** panel/sidebar/header chrome **and** `hr` rules **and** pagination borders **and** `.info-box` border
- `panel_bg` — panels **and** sidebar **and** `.info-box` **and** `.admin-card`
- `btn_bg` — buttons **and** pagination link backgrounds
- `muted_color` — `.muted` text **and** form `.hint` text **and** category tree `[+]/[-]` markers
---
## Special Sections Not Controlled by the Palette
These areas use hardcoded colours and cannot be changed through the palette editor.
| Element | Hardcoded value | Notes |
|---------|----------------|-------|
| `.btn-danger` | `#cc0000` bg / `#fff` text | Delete/destructive action buttons |
| `.role-admin` badge | `#400` bg / `#faa` text | User role indicator |
| `.role-editor` badge | `#040` bg / `#afa` text | User role indicator |
| `.role-contributor` badge | `#004` bg / `#aaf` text | User role indicator |
| `.role-guest` badge | `#444` bg / `#ddd` text | User role indicator |
| `.md-content code` | `#eee` bg | Inline code in markdown |
| `.md-content pre` | `#111` bg / `#eee` text | Code blocks in markdown |
| `.md-content blockquote` text | `#555` | Blockquote body text (left border uses `accent`) |
| Flash message borders | `#cc0000` / `#006600` / `#000080` | Error / success / info |
| Font size steps | 13 px / 15 px / 17 px / 20 px | Controlled by A-/A+ nav buttons; stored in `localStorage` |
To restyle these you must edit `templates/header.php` directly.
---
## IBM Two Spot Mode
**Admin → CSS & Color Theme → IBM Two Spot** (`two_spot` key in settings).
When enabled, Two Spot overrides the entire palette with just two colours using
`!important` on every major element. Everything becomes background-colour +
foreground-colour; hover/active states invert them.
| Setting | Controls |
|---------|----------|
| Background (`two_spot.bg`) | All backgrounds sitewide | Default `#000080` |
| Text (`two_spot.text`) | All text and borders sitewide | Default `#ffff00` |
Two Spot overrides: `body`, `#site-header`, `#nav`, `#sidebar`, `.panel`,
`.panel-title`, `.panel-body`, `table.listing th/td`, even/alt rows, `.btn`,
`input`/`select`/`textarea`, all flash variants, `.info-box`, `.tag`,
`.pagination a`, `.cat-tree li a`, `.admin-card`.
When Two Spot is enabled the Custom Color Palette has no visible effect.
---
## Color Presets
Five built-in presets are available at **Admin → CSS & Color Theme → Color Presets**.
Applying a preset overwrites all 29 palette keys at once.
| Preset | Character |
|--------|-----------|
| OS/2 Classic (Blue/Gray) | Grey canvas, navy header/nav, white panels — default look |
| Dark Mode | Near-black background, muted blue nav, dark panels |
| Green Terminal | Deep green monochrome CRT aesthetic |
| Hobbes OG | Dark navy-blue overall, warm cream text, teal accents |
| Amber | Black background with amber/gold text, CRT amber monitor |
---
## Layout Constants (not themeable via admin)
These structural values are hardcoded in `templates/header.php` and require a
direct file edit to change.
| Property | Value | Element |
|----------|-------|---------|
| Max page width | `1000px` | `#wrap` |
| Sidebar width | `180px` | `#sidebar` |
| Base font | `'Courier New', Courier, monospace` | `body` |
| Base font size | `15px` (step 1 of 4) | `html` |
| Font size steps | 13 / 15 / 17 / 20 px | A-/A+ controls |
| Header border | `3px ridge` | `#site-header` bottom |
| Nav border | `2px solid` | `#nav` bottom |
| Footer border | `3px ridge` | `#site-footer` top |
| Panel border | `2px solid` | `.panel` |
| Button border | `2px outset` (hover: `inset`) | `.btn` |
| Content padding | `10px` | `#main` |
| Sidebar padding | `8px` | `#sidebar` |