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.