Netgrimoire/False Grimoire/Netgrimoire/Netgrimoire_Theme.md

title	description	published	date	tags	editor	dateCreated
Documentation Style Guide	Applying a theme	true	2026-02-25T21:32:16.786Z		markdown	2026-02-24T14:03:00.791Z

Netgrimoire Theme — Wiki.js Implementation Guide

What You're Getting

Two files to transform your Wiki.js library into the Netgrimoire aesthetic:

File	Purpose
netgrimoire-theme.css	Global site theme — dark background, teal glow, Cinzel headers, animated sidebar
netgrimoire-hero-block.html	Animated constellation hero banner for your library landing page

---

Part 1 — Apply the Global Theme CSS

This is the main transformation. It reskins the entire Wiki.js UI.

Step 1: Open the Wiki.js Admin Panel

Navigate to your Wiki.js instance and go to:

Administration (gear icon) → Theme

Step 2: Locate "Custom CSS"

On the Theme page, scroll down until you see the "Custom CSS" text area. It may be labelled "CSS Override" depending on your Wiki.js version.

Step 3: Paste the CSS

Open netgrimoire-theme.css, select all (Ctrl+A), copy, and paste the entire contents into the Custom CSS field.

Step 4: Apply

Click "Apply" or "Save" at the top or bottom of the Theme page. Wiki.js applies the CSS live — you do not need to restart the container.

Step 5: Verify

Open your wiki in a new browser tab. You should see:

• Dark #0a0d12 background
• Teal/cyan navigation links and headers
• Cinzel serif font on headings
• Glowing active sidebar item
• Teal-bordered code blocks and tables

If styles are not applying, do a hard refresh (Ctrl+Shift+R) to clear cached CSS.

---

Part 2 — Add the Animated Hero Banner to Your Library Page

This places a live constellation animation at the top of your document library index page.

Step 1: Open the Library Page for Editing

Navigate to your document library landing page and click Edit (pencil icon, top right).

Step 2: Switch to Source / HTML Mode

In the Wiki.js editor toolbar, look for one of the following depending on your editor:

• Markdown editor: Click the <> or "Insert HTML Block" button
• Visual editor (WYSIWYG): Look for < > Source button, or Insert → HTML Block

Step 3: Paste the Hero HTML

Open netgrimoire-hero-block.html, copy the full contents, and paste into the HTML block at the very top of your page, before any other content.

Step 4: Save the Page

Click Save. The constellation animation will render automatically when the page loads.

Step 5: Customize (Optional)

To change the banner title text, find this line in the HTML:

>DOCUMENT LIBRARY</div>

Replace DOCUMENT LIBRARY with whatever you want (e.g., THE GRIMOIRE, KNOWLEDGE VAULT).

To change the subtitle:

>Netgrimoire Knowledge Vault</div>

---

Part 3 — Google Fonts (Internet Access Required)

The theme imports three fonts automatically via Google Fonts:

Font	Used For
Cinzel	Headers, nav section labels, card titles
Share Tech Mono	Code blocks, inline code, footer
Raleway	Body text, nav items, descriptions

These load via a @import at the top of the CSS and require your browser to have internet access when loading the page. Since Netgrimoire is a local server, this means:

• If your browser machine has internet: Fonts load automatically — no action needed.
• If fully air-gapped: The fonts will fall back to system serif/monospace. To self-host, download the font files and serve them from your Forgejo or a local nginx path, then replace the @import line with @font-face blocks pointing to your local URLs.

---

Part 4 — Fine-Tuning

Adjusting the Teal Color

All colors are defined as CSS variables at the top of the CSS file. To shift the color tone, change --ng-teal:

:root {
  --ng-teal: #00e5cc;   /* default — cyan-teal */
  /* try:  #00cfff  for more blue */
  /* try:  #39ff14  for neon green */
  /* try:  #bf5fff  for purple arcane */
}

Making the Background Darker

Adjust --ng-bg-base and --ng-bg-deep:

:root {
  --ng-bg-base: #070a0e;  /* even darker */
  --ng-bg-deep: #030507;
}

Constellation Node Count

In netgrimoire-hero-block.html, find:

var NODE_COUNT = 55;

Increase for a denser network, decrease for a sparser, more minimal look.

---

Troubleshooting

Symptom	Fix
CSS not applying	Hard refresh (Ctrl+Shift+R); check for syntax errors in the CSS field
Fonts showing as Times New Roman	Browser lacks internet access; see Part 3 above
Hero animation not rendering	Check browser console for JS errors; ensure the page saved the HTML block
Sidebar colors still white	Some Wiki.js versions use different class names; inspect with browser DevTools and let Claude know which element needs targeting
Dark mode toggle fighting the theme	Wiki.js's built-in dark mode toggle may conflict — set it to Dark in Administration → Theme before applying custom CSS

---

Notes

• Wiki.js stores custom CSS in the database, so it survives container restarts.
• After updating Wiki.js, re-check the Theme page — major version upgrades occasionally reset the CSS field.
• The hero block is per-page; you can add it to any page you want the constellation effect on.