From faecd66fe38b836e484c877a2c4ddadb38a6e9ed Mon Sep 17 00:00:00 2001 From: Administrator Date: Tue, 24 Feb 2026 14:03:13 +0000 Subject: [PATCH] docs: create Netgrimoire/Netgrimoire_Theme --- Netgrimoire/Netgrimoire_Theme.md | 174 +++++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 Netgrimoire/Netgrimoire_Theme.md diff --git a/Netgrimoire/Netgrimoire_Theme.md b/Netgrimoire/Netgrimoire_Theme.md new file mode 100644 index 0000000..fa97fc0 --- /dev/null +++ b/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 +``` + +Replace `DOCUMENT LIBRARY` with whatever you want (e.g., `THE GRIMOIRE`, `KNOWLEDGE VAULT`). + +To change the subtitle: + +```html +>Netgrimoire Knowledge Vault +``` + +--- + +## 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.