---
title: Documentation Style Guide
description: Applying a theme
published: true
date: 2026-02-25T21:32:16.786Z
tags: 
editor: markdown
dateCreated: 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:

```html
>DOCUMENT LIBRARY</div>
```

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

To change the subtitle:

```html
>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`:

```css
: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`:

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

### Constellation Node Count

In `netgrimoire-hero-block.html`, find:

```javascript
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.