nodebb-theme-flawless-rp

A custom dark theme for NodeBB, built for the Flawless Roleplay SA-MP community. It extends the official nodebb-theme-persona base theme with a bespoke "Underground Criminal Empire" design language.

Design System

The theme uses a carefully chosen palette and typography stack that evokes a dark, gritty roleplay atmosphere while maintaining excellent readability.

| Token | Value | Purpose | |---|---|---| | --frp-surface | #111114 | Card / panel backgrounds | | --frp-border | #1e1e24 | Subtle dividers | | --frp-primary | #F59E0B | Gold accent (power, money) | | --frp-danger | #EF4444 | Destructive actions | | --frp-success | #22C55E | Positive feedback | | --frp-info | #3B82F6 | Law-enforcement blue |

The typography stack pairs Barlow Condensed (headings), Barlow (body), and JetBrains Mono (stats, code) loaded from Google Fonts.

Compatibility

This theme targets NodeBB v3.x and inherits from nodebb-theme-persona. It is not compatible with Harmony-based installations.

Template Overrides

The following templates are overridden from the Persona base:

| Template | What Changed | |---|---| | header.tpl | Google Fonts <link>, flawless-rp-theme body class | | footer.tpl | Custom branded footer with copyright | | partials/menu.tpl | FLAWLESS RP brand text, gold accent styling | | partials/breadcrumbs.tpl | Copied from Persona (no changes, ensures availability) | | categories.tpl | Fully rewritten with frp-* CSS classes (no inline styles) | | category.tpl | Copied from Persona (CSS handles theming) | | topic.tpl | Copied from Persona (CSS handles theming) | | login.tpl | Branded header, frp-login-block wrapper | | register.tpl | Branded header, frp-login-block wrapper |

Server-Side Hooks

The theme registers three hooks via library.js:

| Hook | Method | Purpose | |---|---|---| | filter:config.get | onConfigGet | Sets theme defaults | | filter:header.build | addCustomCSS | Injects Google Fonts preconnect and stylesheet links | | filter:widgets.getWidgets | getWidgets | Registers "Server Status" and "Forum Stats" sidebar widgets |

Installation

Via npm link (development)

cd /path/to/nodebb
npm link /path/to/nodebb-theme-flawless-rp
./nodebb build
./nodebb restart

Via node_modules copy (production / Docker)

cp -r nodebb-theme-flawless-rp /path/to/nodebb/node_modules/
cd /path/to/nodebb && ./nodebb build && ./nodebb restart

Then activate the theme in Admin > Appearance > Themes and select "Flawless Roleplay".

File Structure

nodebb-theme-flawless-rp/
├── package.json
├── plugin.json
├── library.js
├── README.md
├── static/
│   ├── styles/
│   │   └── flawless.css          # 1200+ lines of themed CSS
│   └── scripts/
│       └── flawless.js           # Client-side JS (server status, etc.)
└── templates/
    ├── header.tpl
    ├── footer.tpl
    ├── categories.tpl
    ├── category.tpl
    ├── topic.tpl
    ├── login.tpl
    ├── register.tpl
    └── partials/
        ├── menu.tpl
        └── breadcrumbs.tpl

CSS Architecture

All custom classes use the frp- prefix to avoid collisions with Persona or Bootstrap. The CSS is organized into sections:

1. CSS Custom Properties (:root variables)
2. Global Overrides (body, links, headings, scrollbar)
3. Header / Navbar (Persona [component="navbar"])
4. Category List ([component="categories/category"])
5. Topic List ([component="category/topic"])
6. Topic View / Posts ([component="post"])
7. User Profile / Avatar (donator glow effects)
8. Sidebar & Widgets
9. Buttons, Forms, Cards, Modals, Pagination, Breadcrumbs, Alerts, Badges
10. Custom Template Classes (frp-category-item, frp-login-block, etc.)
11. Persona-Specific Selectors (slideout, timeline, composer, taskbar, etc.)

License

ISC