docs: create Netgrimoire/Netgrimoire_Theme

Netgrimoire/Netgrimoire_Theme.md

@@ -0,0 +1,174 @@
+---
+title: Documentation Style Guide
+description: Applying a theme
+published: true
+date: 2026-02-24T14:03:00.791Z
+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.