Custom CSS
It's a Wiki! makes CSS a first-class editor control — no developer account needed.
Three layers of styling exist, from broadest to narrowest:
- Wiki default CSS — set by the wiki owner/admin in the wiki admin console, applies to every page.
- Per-page CSS — written on any page via Edit → "CSS panel" (or ?css=1), applies only to that page.
- Inline HTML — <span style="…">, <div style="…"> etc. in wikitext (attributes are sanitized).
Per-page CSS overrides wiki CSS because it is injected later in the cascade.
Both are served from text/css routes only — they can never execute as script.
Where to write CSS
- Wiki-wide: Admin console → "Wiki default CSS" textarea.
- Single page: Edit the page → "CSS panel" button (or append ?css=1 to the edit URL).
- Inline: use <span style="color:red"> in wikitext — allowed on a safe allowlist
of properties, values stripped of ; { } < >.
CSS variables (themes)
Every page exposes these CSS custom properties on :root / body. You can override
any of them in your wiki CSS to re-theme the whole wiki:
--iaw-bg: page background
--iaw-panel: cards, article, forms
--iaw-sidebar-bg: left navigation rail
--iaw-ink: default text color
--iaw-muted: secondary text
--iaw-line: borders & dividers
--iaw-accent: links, buttons, active nav
--iaw-accent-ink: text on accent background
--iaw-heading: heading color
--iaw-hero-bg: wiki hub hero gradient
--iaw-hover: hover highlight
--iaw-th-bg: table header background
--iaw-zebra: alternating table row
--iaw-code-bg: inline code background
--iaw-pre-bg: preformatted block background
--iaw-preview-bg: preview pane background
--iaw-redirect-bg: redirect banner background
--iaw-redirect-line: redirect banner border
--iaw-redirect-ink: redirect banner text
--iaw-blockquote-bg: blockquote background
--iaw-article-width: max content width
--iaw-card-shadow: default card shadow
--iaw-card-shadow-hover: card hover shadow
To re-theme the whole wiki, just override the variables:
:root {
--iaw-bg: #f5f2ee;
--iaw-panel: #ffffff;
--iaw-ink: #241f18;
--iaw-accent: #8a4b08;
--iaw-heading: #1a140e;
--iaw-line: #d8d2c8;
}
Built-in themes (dark, forest) are applied via body.theme-dark /
body.theme-forest — they only swap these variables, so overriding
variables beats theme selection.
Selectors you can style
Layout & chrome
body — the whole page (background, font)
body.theme-dark — dark theme wrapper
body.theme-forest — forest theme wrapper
.iaw-wikitop — sticky top bar (logo, search, user chip)
.iaw-wikitop-inner — top bar inner container
.iaw-wikilogo — wiki name in the top bar
.iaw-wikilogo-badge — the colored logo square
.iaw-wikilogo-name — the logo text
.iaw-wikisearch — top bar search form
.iaw-userchip — logged-in user chip
.iaw-wiki-shell — the two-column shell (sidebar + content)
.iaw-sidebar — left navigation rail
.iaw-sidebar-title — sidebar section headers ("Wiki", "Special pages")
.iaw-sidebar a — sidebar links
.iaw-sidebar a.iaw-active — current page link
.iaw-wiki-main — main content column
.iaw-wikifooter — page footer
Article page
.iaw-pageview — page view wrapper
.iaw-page-headbar — title + subtitle row
.iaw-article-title — the big page title
.iaw-subline — "Last edited by …" line
.iaw-tabs — action tab bar (Page, Edit, History…)
.iaw-tab — a single tab
.iaw-tab.iaw-active — the current tab
.iaw-tab.iaw-watching — watched-page star tab
.iaw-tab.iaw-tab-danger — the Delete tab
.iaw-article — the article card
.iaw-article-body — rendered wikitext content
.iaw-toc — table of contents box
.iaw-toc-title — "Contents" heading
.iaw-toc li[data-level="2|3"] — TOC indentation levels
Content elements
.iaw-article-body h1 … h6 — headings
.iaw-article-body p — paragraphs
.iaw-article-body a — links (also .iaw-link)
.iaw-link — internal wiki links
.iaw-link.iaw-missing — red links to non-existent pages
.iaw-extlink — external links (open in new tab)
.iaw-table — wikitext tables (both in-article and standalone)
.iaw-table th — header cells
.iaw-table td — data cells
.iaw-img — images
.iaw-figure — thumb/framed figure wrapper
.iaw-figure.align-left/.align-right/.align-center — alignment
.iaw-figure figcaption — figure caption
.iaw-imgwrap — plain image wrapper
.iaw-imgcap — plain image caption
.iaw-gallery — <gallery> grid
.iaw-gitem — gallery item
.iaw-gitem img — gallery thumbnail
.iaw-gitem figcaption — gallery caption
.iaw-article-body pre — preformatted blocks
.iaw-article-body code — inline code
.iaw-refs — references section
.iaw-refs-list — reference list
.iaw-ref — reference superscript link
.iaw-redirect — redirect banner
.iaw-categories — category chips row
.iaw-catlabel — "Categories:" label
.iaw-catlink — a single category chip
.iaw-missingpage — "page does not exist" block
Components on other pages
.iaw-btn — buttons
.iaw-btn-sm/.iaw-btn-xs — smaller buttons
.iaw-btn-primary — accent button
.iaw-btn-danger — red destructive button
.iaw-page — generic page wrapper
.iaw-narrow/.iaw-narrow2/.iaw-wide — page width variants
.iaw-page-head — page header row
.iaw-pagelist — grid of page cards
.iaw-pagecard — a page card in lists
.iaw-recent — recent changes list
.iaw-recentitem — one recent change
.iaw-recentmeta — timestamp in recent changes
.iaw-media-thumb — media grid thumbnail
.iaw-mediacard — media card
.iaw-fileicon — non-image file icon
.iaw-mediainfo — media card info
.iaw-fileview — file page view
.iaw-filedl — file metadata dl
.iaw-diffrow/.iaw-diffcol/.iaw-diffmeta — diff view
.iaw-letterbar — A–Z letter bar on All pages
.iaw-editpage — edit page wrapper
.iaw-preview — preview pane
.iaw-edittips — quick reference box under the editor
.iaw-form — forms
.iaw-card — generic card/panel
.iaw-inline-form — inline forms
.iaw-flash — toast notification
.iaw-error — error box
.iaw-warn — warning box
.iaw-muted — muted secondary text
.iaw-empty — "nothing here" placeholder
.iaw-hub-hero — wiki hub hero banner
.iaw-hub-hero-inner — hero inner container
.iaw-section — hub section
.iaw-section-head — hub section header
.iaw-template-usage — rendered template preview
Targeting a single page
Per-page CSS applies to that page only, so you can style the article without
affecting the rest of the wiki. Use the page-specific class hooks above.
There is no page-id class on the body (yet), but because per-page CSS is only
loaded on that page, plain selectors like .iaw-article-title already
only affect it.
Common recipes
Accent color + rounded everything:
:root { --iaw-accent: #e02030; --iaw-accent-ink: #fff; }
.iaw-article { border-radius: 16px; }
.iaw-btn { border-radius: 999px; }
Make links underlined:
.iaw-article-body a { text-decoration: underline; }
Wide page layout:
:root { --iaw-article-width: 1600px; }
Serif article body:
.iaw-article-body { font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
Custom blockquote styling:
.iaw-article-body blockquote {
border-left: 4px solid var(--iaw-accent);
background: var(--iaw-panel);
padding: 10px 18px;
font-style: italic;
}
Image frame tweaks:
.iaw-figure { border: 2px solid var(--iaw-line); border-radius: 10px; padding: 6px; background: var(--iaw-panel); }
.iaw-figure figcaption { text-align: center; font-weight: 600; }
Category chips as pills:
.iaw-catlink { border-radius: 999px; padding: 4px 14px; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
Table stripes with a header accent:
.iaw-table th { background: var(--iaw-accent); color: var(--iaw-accent-ink); }
.iaw-table tr:nth-child(even) td { background: var(--iaw-zebra); }
Inline styles
A safe allowlist of CSS properties is permitted in inline style="" attributes
on <span>, <div>, <td> etc: color, background, background-color,
border, border-color, text-align, text-decoration, font-size, font-weight,
font-style, margin, padding, width, height, float, clear, vertical-align,
max-width, display. Values may not contain ; { } < >.
Safety
All custom CSS is sanitized before saving:
- Sizes capped: page CSS 256 KB, wiki CSS 1 MB.
- < and > are stripped entirely — no </style> breakout is possible.
- @import and url(...) are removed — no remote fetch, no tracking, no data: images.
- expression(), javascript:, vbscript: are neutralized.
- Unknown at-rules (outside @media, @supports, @keyframes, @page, @font-face,
@font-feature-values) are dropped.
- Braces must balance or the whole file is rejected with a clear error.
- Comments are stripped before validation so they cannot smuggle braces.
- CSS is served only from text/css routes under the wiki's own origin.
Because of these rules, background images via url() are not possible — use
uploaded files with wikitext images instead. @font-face is allowed if the
font files are reachable, but url() is stripped, so self-hosted fonts are
not practical yet.