AMODENA 1 — Theme Documentation

Section 01

01Introduction

AMODENA 1 is a premium, heavily-customized MyBB theme built on a single design-token system. Every surface, colour and shadow is derived from CSS variables, which lets the whole board switch between Dark, Light and Blue modes instantly — no separate stylesheets, no reload.

Theme name	# AMODENA 1
Version	1830 (internal build number carried across every stylesheet)
Platform	MyBB (template set ID 74)
Design language	“CS2 Community” — Counter-Strike 2 inspired: ember/orange accent, battlefield hero, angled corner cuts, stencil display type
Colour modes	Dark (default), Light, Blue — switched via `data-theme` on the root element
Fonts	Barlow Condensed (display), Inter (body), Oxanium (accent/data)
Bundled stylesheets	9 — global, cs2026, css3, onlinetoday, latestposts, mybbfancybox, hovercards, avatarep, mentionme
Author information	Distributed as a MyBB theme XML. Add your own author/attribution here before publishing.

How to read this doc: every component shown here is styled by the theme's real classes (.btn, .card, .qa, .hero, .badge). Toggle the theme with the header button to preview all three colour modes.

Section 02

02Features Overview

Detected directly from the theme's templates, stylesheets and inline JavaScript. Optional / plugin-dependent items are labelled as such.

Three colour modes

Dark, Light and Blue skins driven entirely by data-theme tokens — instant switch, no reload.

Live customizer

A slide-out panel with 6 segmented controls, 12 toggles and 3 range sliders. Choices persist in localStorage.

Animated hero

Layered smoke, an ember glow, a diagonal orange slash, a parallax grid and rising sparks build the battlefield banner.

Sticky glass header

Header and sub-nav stick on scroll and gain a blur + saturate backdrop. Both are toggleable.

Sub-navigation bar

A second sticky bar under the header with dropdowns, a quick-connect panel and an icons-only mode.

User panel & chip

Member welcome-block with avatar chip, dropdown menu, notification / message popovers and admin & moderator variants.

Mega & popover menus

Two-column mega menu, notification popover, PM popover and profile menu — all animated open/close.

Scroll animations

IntersectionObserver reveal-on-scroll (fade / zoom / slide), animated counters and a self-drawing sparkline.

Custom forum rows

Forum bits rebuilt as grid cards with a FontAwesome status icon, unread ring, accent hover edge and last-post block.

Collapsible categories

Grid-row height animation collapses categories; state is remembered and a “collapse all” switch is provided.

Statistics widgets

Board-stats grid, who's-online, birthdays, top-poster rankings, member panel and a server-status sparkline.

Search overlay

Full-screen blurred search with keyboard shortcut hint, suggestions and quick-filter chips.

Micro-interactions

Button ripples, cursor-follow card glow, tilt, animated brand mark and a shimmering page loader.

Seasonal effects

Optional falling snow, Christmas garland, brand Santa hat and card snow-caps — all off by default.

Layout controls

Fluid / boxed width, comfortable / compact density, and adjustable corner radius, font-size & max content width.

Accessible & motion-safe

Skip link, visible focus rings, prefers-reduced-motion support and a global motion-off switch.

Hover cards Optional

Avatar & profile hover cards via the bundled hovercards.css / avatarep.css — needs the matching plugin.

Mentions & FancyBox Optional

Styled @mention popup and lightbox image scaling — active when MentionMe / MyBB FancyBox are installed.

Optional / detected components: The last two cards ship as stylesheets in the theme but rely on their respective third-party MyBB plugins to function. The theme styles them if present; without the plugins the CSS simply sits unused.

Section 03

03Installation Guide

The theme ships as a single MyBB theme XML. Import it through the Admin CP — no manual file editing is required for a standard install.

Upload files (if any)

This build is self-contained: fonts and Font Awesome load from CDN, and all styling lives inside the XML. If you host assets locally, upload them under /images/ first and update the URLs in headerinclude.

Import the theme XML

In the Admin CP go to Templates & Style → Themes → Import a Theme. Upload __AMODENA_1-theme.xml, leave “Import stylesheets/templates” checked, and submit.

Rebuild caches

After import, run Tools & Maintenance → Cache Manager → Rebuild (or rebuild the theme's stylesheets) so MyBB writes the CSS to disk.

Set it as the default theme

Under Configuration → Settings → Board Wide Default Theme select # AMODENA 1, or assign it per user group.

Apply / merge templates

The XML carries a full template set (ID 74). If you already customized templates, review the imported header, headerinclude, index, footer, postbit and forumbit_* templates and merge your changes.

Permissions (if needed)

No special file permissions are required for the theme itself. If you enable the optional plugins (HoverCards, MentionMe, FancyBox, AvatarEP), follow each plugin's own install and permission steps.

Admin CP path

// Import
Templates & Style → Themes → Import a Theme → __AMODENA_1-theme.xml

// Rebuild
Tools & Maintenance → Cache Manager → Rebuild

// Activate
Configuration → Settings → Board Wide Default Theme = # AMODENA 1

Section 04

04Theme Structure

Everything is packaged inside the theme XML. When MyBB imports it, the content is split into stylesheets and templates as shown below.

__AMODENA_1-theme.xml // the whole theme in one file ├─ stylesheets/ │ ├─ global.css // MyBB defaults refactored onto the tokens │ ├─ cs2026.css // main theme — header, hero, index, footer, customizer │ ├─ css3.css // row / gradient CSS3 touches │ ├─ onlinetoday.css // “online today” avatar strip │ ├─ latestposts.css // latest-posts widget │ ├─ mybbfancybox.css // lightbox image scaling (optional plugin) │ ├─ hovercards.css // profile hover cards (optional plugin) │ ├─ avatarep.css // avatar enlarge-on-hover (optional plugin) │ └─ mentionme.css // @mention popup (optional plugin) ├─ templates/ │ ├─ headerinclude // fonts, Font Awesome, all inline JavaScript │ ├─ header // brand, nav, tools, search overlay, customizer │ ├─ header_welcomeblock_* // guest / member / admin / moderator │ ├─ index + index_* // hero, quick actions, boardstats, whosonline, birthdays │ ├─ forumbit_depth1_cat … depth3 // category & forum cards + status icon │ ├─ postbit / postbit_classic // two post layouts │ ├─ member_profile // profile page │ └─ footer // stat bar, footer columns, customizer markup └─ assets (CDN)/ ├─ Google Fonts // Barlow Condensed · Inter · Oxanium └─ Font Awesome 6.4.0

Section 05

05Customization Guide

Two ways to customize: end-users tune the live front-end customizer (saved to their browser); admins change the defaults in the theme's stylesheets and templates.

Colours & accent

All colours are CSS variables at the top of cs2026.css. Edit --accent, --ember and --accent-rgb to re-brand the orange, or adjust the html[data-theme="light"] / [data-theme="blue"] blocks to change the alternate modes. The customizer's Accent segment lets users swap accent live.

cs2026.css — tokens

:root{
  /* re-brand the whole theme from here */
  --accent:#ff7b1c;      /* CS2 orange */
  --accent-hover:#ff9440;
  --accent-rgb:255,123,28;
  --ember:#e0490f;
  --radius:10px; --gap:18px;
}

Logo & header background

The brand mark is the .brand-mark block in the header template (a gradient tile with a letter). Replace it with an <img> for a logo. The animated hero background is a stack of .hero-layer elements — swap the gradients in .hero-smoke / .hero-slash, or toggle the whole banner off via the customizer.

Sidebar widgets & footer links

Right-column widgets (member panel, rankings, server status, news) live in the index template. Footer columns and links are in the footer template's .footer-col lists — edit the anchors there. The sidebar itself can be hidden with the customizer's Sidebar control (data-sidebar="off").

Fonts, animations & icons

Fonts are loaded in headerinclude; change the Google Fonts link and the --font-display / --font-body tokens together. Animations are all CSS keyframes and can be disabled globally with the Animations toggle. Forum icons use Font Awesome via the .frow-ico class (font-family:'FontAwesome') and the forumbit_depth3_statusicon template.

Tip: because every component reads from the same tokens, changing one variable cascades everywhere. Re-brand by editing tokens first, and only touch component CSS for structural tweaks.

Section 06

06Responsive Features

The layout reflows at four breakpoints defined in cs2026.css (1600 · 1280 · 900 · 640px), so the board stays usable from ultrawide down to small phones.

Desktop

Two-column forum + sticky right sidebar, full primary nav, wide search trigger and the animated hero at full height.

> 1280px

Tablet

Sidebar drops below the main column, the primary nav collapses into the burger menu, and the stat bar / footer switch to two columns.

≤ 1280px

Mobile

Forum rows restack into an icon + title + stats + last-post grid, search hides, quick-actions go 2-up and the header shrinks to 66px.

≤ 640px

Section 07

07Included Components

A live showcase of the actual building blocks — rendered with the theme's own classes.

Buttons

Badges

Default Accent Premium Online

Forum row card

General Discussion

Talk about anything and everything with the community.

2,481Threads

Screenshots

Add real captures here before publishing. Placeholders are shown until you do.

Home / Index

Forum IndexDrop a screenshot of the index page here

Customizer

Live CustomizerDrop a screenshot of the slide-out panel here

Light mode

Light ThemeDrop a light-mode screenshot here

Blue mode

Blue ThemeDrop a blue-mode screenshot here

Section 08

08Credits

External libraries and resources the theme depends on. All are loaded from public CDNs in headerinclude.

Font Awesome 6.4.0Icon set (all.min.css via cdnjs)

Google FontsBarlow Condensed · Inter · Oxanium

Vanilla JavaScriptNo framework — all inline in headerinclude

MyBBThe forum software this theme is built for

HoverCards / AvatarEP optOptional profile / avatar hover plugins

MentionMe / FancyBox optOptional @mentions & lightbox plugins

Section 09

09FAQ

Common questions about installing and running AMODENA 1.

Do I need to upload any files?

For a standard install, no. Fonts and Font Awesome load from CDN and all CSS lives in the XML. You only upload files if you choose to self-host assets or enable the optional plugins.

How do users switch between dark, light and blue?

Open the customizer (the spinning gear button, bottom-right) and pick a mode under Theme. The choice is stored in the browser via localStorage and reapplied on the next visit — it does not change other users' view.

The customizer changes don't save for guests — is that a bug?

No. Preferences are saved to each visitor's own browser storage, so they persist per-device rather than per-account. Clearing browser data resets them to the theme defaults.

Which parts are optional?

The HoverCards, AvatarEP, MentionMe and MyBB FancyBox stylesheets are bundled but only take effect when their matching MyBB plugins are installed. Everything else — header, hero, index, forum rows, customizer, footer — works out of the box.

How do I turn off the animations or seasonal snow?

Every effect has a switch in the customizer's Behaviour group: Animations, Shadows, Header blur, Sticky header, Hero sparks, Smooth scrolling, Snow effect and X-Mas decorations. The theme also honours the OS prefers-reduced-motion setting automatically.

Can I change the orange accent?

Yes. Edit --accent, --accent-rgb and --ember in cs2026.css, then rebuild the theme cache. Because everything references those tokens, the new colour cascades across the whole board.

Section 10

10Changelog

Version history. The current package reports build 1830 across all stylesheets.

v1830 Current Latest build

Final packaged build of the # AMODENA 1 theme (template set 74).
Three colour modes (Dark / Light / Blue) unified under one token system.
Full live customizer: theme, accent, density, width, sidebar, subnav, radius, font-size, max-width and 12 behaviour toggles.
Animated battlefield hero, sticky glass header & sub-nav, custom forum-row cards and stat widgets.
Bundled optional plugin styles: HoverCards, AvatarEP, MentionMe, MyBB FancyBox, OnlineToday, LatestPosts.

Earlier builds

Iterative refinements to responsive breakpoints and forum-row grid layout.
Customizer persistence via localStorage and reduced-motion handling added.
Add your own dated release notes here as you publish updates.