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`

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`

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`

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`

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`