PHPackages ernestdefoe/mosaic - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. ernestdefoe/mosaic ActiveFlarum-extension[Templating & Views](/categories/templating) ernestdefoe/mosaic ================== Mosaic — a polished, configurable Flarum 2 theme with a tiled hero, category grid, sidebar widgets, and optional integrations for support tickets (linkrobins/support) and a marketplace storefront (ramon/marketplace). 3.4.1(1w ago)143↑179.1%MITHTMLCI passing Since May 16Pushed 1w agoCompare [ Source](https://github.com/ernestdefoe/mosaic)[ Packagist](https://packagist.org/packages/ernestdefoe/mosaic)[ RSS](/packages/ernestdefoe-mosaic/feed)WikiDiscussions main Synced 1w ago READMEChangelog (10)Dependencies (1)Versions (71)Used By (0) Mosaic ====== [](#mosaic) [![Floxum](https://camo.githubusercontent.com/bc4bc67d5a2dc65945f9f6c3df1ba754c2dc383d5b1b4ea71468d233acad1d7c/68747470733a2f2f666c6f78756d2e636f6d2f657874656e73696f6e2f65726e6573746465666f652f6d6f736169632f62616467652f6e616d65)](https://floxum.com/extension/ernestdefoe/mosaic)[![Version](https://camo.githubusercontent.com/8dffa080b146fe598a4cf60bc5506e1996b78ca1fc43b8d9c1c6655357ad4287/68747470733a2f2f666c6f78756d2e636f6d2f657874656e73696f6e2f65726e6573746465666f652f6d6f736169632f62616467652f686967686573742d76657273696f6e)](https://floxum.com/extension/ernestdefoe/mosaic)[![Downloads](https://camo.githubusercontent.com/f1a9802c4a326e64a07d0e4837b7878ebe9e8a2f2ea3837dfbad33452e9fe633/68747470733a2f2f666c6f78756d2e636f6d2f657874656e73696f6e2f65726e6573746465666f652f6d6f736169632f62616467652f646f776e6c6f616473)](https://floxum.com/extension/ernestdefoe/mosaic)[![Review](https://camo.githubusercontent.com/20402a25ed8e2db3e9f5161c10e87a78efb12b4e8f95cf612c64f77fcbfb2177/68747470733a2f2f666c6f78756d2e636f6d2f657874656e73696f6e2f65726e6573746465666f652f6d6f736169632f62616467652f726576696577)](https://floxum.com/extension/ernestdefoe/mosaic)[![License](https://camo.githubusercontent.com/8df190d50da69c6386e07fc8ffba30c4e917e51009970b55894130c1f141151f/68747470733a2f2f666c6f78756d2e636f6d2f657874656e73696f6e2f65726e6573746465666f652f6d6f736169632f62616467652f6c6963656e7365)](https://floxum.com/extension/ernestdefoe/mosaic) A polished, configurable Flarum 2 theme. Works as a standalone visual upgrade on any forum, with opt-in integrations for `fof/best-answer`, `fof/reactions`, `ram0ng1/colored`, and (when installed) `linkrobins/support` and `ramon/marketplace`. > **Status:** active development. LESS theme is complete, JS components are in place, design preview ships in [`preview/`](preview/). --- What you get ------------ [](#what-you-get) - **Tiled hero panel** with title, search, and a configurable stats strip (Members / Discussions / Posts / Online Now — and Tickets Resolved when `linkrobins/support` is detected) - **Category tiles** below the hero — auto-populated from `flarum/tags` when installed - **Configurable sidebar** — Marketplace promo, **Quick Actions** (admin-editable rows: icon, label, URL), Top Contributors, Trending. Each panel can be hidden from the admin UI - **Optional support-ticket styling** — when `linkrobins/support` is enabled, the 5-state workflow (Open → In Progress → Awaiting You → Resolved → Closed), staff control bar, internal notes, and SLA pills all light up - **Optional marketplace styling** — when `ramon/marketplace` is enabled, the storefront, product cards, and cart get themed (verified against the real `.MpShop-*` DOM) - **Best-answer highlight** for `fof/best-answer` — full-width banner on the chosen reply - **Reactions popup** styled after `ram0ng1/avocado`'s cascade pattern - **Tag-coloured borders** for `ram0ng1/colored` on the discussion list and posts - **Full dark mode** via Flarum 2's native `[data-theme^=dark]` selector - **DM Sans typography**, organic 14px radii, calm primary palette Install ------- [](#install) ``` composer require ernestdefoe/mosaic php flarum cache:clear ``` Then enable in **Admin → Extensions → Mosaic**. ### Configure [](#configure) All theme settings live in **Admin → Extensions → Mosaic**: - **Hide sidebar widgets** — toggle Marketplace promo / Quick Actions / Top Contributors / Trending individually - **Quick Actions editor** — dynamic row editor for the sidebar's Quick Actions card. Each row is an icon class, a label, and a URL. Defaults to `Start a Discussion / Browse Tags / Recent Activity` for any Flarum install, and surfaces `Open a Support Ticket` / `Visit the Marketplace` extras when those extensions are detected - **Section URL overrides** — point the auto-detected support / marketplace links elsewhere if you've mounted them on non-default paths Develop ------- [](#develop) ``` cd js npm install npm run dev # watch mode npm run build # production ``` The frontend uses `flarum-webpack-config` v3 — `js/forum.js` and `js/admin.js` are auto-discovered, with webpack running from `js/` and emitting to `js/dist/`. Compiled bundles in `js/dist/` are committed because Flarum extensions installed via Composer ship prebuilt assets. Structure --------- [](#structure) ``` mosaic/ ├── composer.json # Flarum 2 extension manifest ├── extend.php # PHP extender — registers forum/admin frontends + settings bridge ├── src/Api/ │ ├── AddForumSettings.php # SettingsRepositoryInterface helpers │ └── AddForumStatistics.php # Member/online/resolved counts ├── js/ │ ├── package.json │ ├── webpack.config.js │ ├── forum.js / admin.js # entries (discovered by webpack) │ ├── dist/ # compiled bundles, committed │ └── src/ │ ├── forum/ │ │ ├── index.js # initializer + IndexPage hooks │ │ └── components/ │ │ ├── HeroPanel.js # branded hero + stats strip │ │ ├── CategoryTiles.js # category grid │ │ ├── SidebarPanels.js # Marketplace promo / QA / contributors / trending │ │ ├── MarketplacePromoCard.js # sidebar CTA │ │ ├── HeaderNav.js # primary nav items │ │ └── SectionHeader.js │ └── admin/ │ ├── index.js │ └── extend.js # Admin settings (visibility, URLs, QA editor) ├── less/ │ ├── forum.less / admin.less # entries │ ├── tokens.less # CSS custom properties │ ├── base.less, header.less, hero.less, categories.less, discussions.less, │ │ post.less, sidebar.less, composer.less, support.less, marketplace.less, │ │ reactions.less, colored.less, layout.less, dark.less ├── locale/en.yml └── preview/ # static HTML mockup (design source of truth) ``` Pairing with optional extensions -------------------------------- [](#pairing-with-optional-extensions) SurfaceSourceWhere styledDiscussion list / detailFlarum core`discussions.less`, `post.less`Tags (coloured borders)`ram0ng1/colored``colored.less`Reactions popup`fof/reactions``reactions.less`Best-answer highlight`fof/best-answer``post.less` `.Post--bestAnswer`Tickets (5-state workflow, internal notes)`linkrobins/support` *(optional)*`support.less`Marketplace storefront / cards / cart`ramon/marketplace` *(optional, paid)*`marketplace.less`Each integration's LESS is a no-op when the source extension isn't installed — Mosaic stays clean on a vanilla Flarum. Design preview -------------- [](#design-preview) The [`preview/`](preview/) directory ships a static HTML mockup of every surface — open `preview/index.html` directly or run `npx serve preview/` to inspect the design without a Flarum install. Treat that mockup as the visual source of truth. Credits ------- [](#credits) - **DM Sans** by Colophon Foundry, via Google Fonts - **Font Awesome 7** for iconography - Visual cues borrowed from [Avocado](https://discuss.flarum.org/d/27126) by ramon Support ------- [](#support) Questions, bug reports, and feature requests: - **Support forum:** - **Issues:** License ------- [](#license) MIT — see [LICENSE](LICENSE). ### Health Score 44 — FairBetter than 90% of packages Maintenance98 Actively maintained with recent releases Popularity13 Limited adoption so far Community6 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 70 Last Release 9d ago Major Versions 2.1.24 → 3.0.02026-05-26 ### Community Maintainers ![](https://www.gravatar.com/avatar/c9978664264055711c21fbcf73c937f758df771d9cb40f6a25370b10123e7abc?d=identicon)[ernestdefoe](/maintainers/ernestdefoe) --- Top Contributors [![ernestdefoe](https://avatars.githubusercontent.com/u/24905286?v=4)](https://github.com/ernestdefoe "ernestdefoe (101 commits)") --- Tags themeflarumflarum-extensionmosaic ### Embed Badge ![Health badge](/badges/ernestdefoe-mosaic/health.svg) ``` [![Health](https://phpackages.com/badges/ernestdefoe-mosaic/health.svg)](https://phpackages.com/packages/ernestdefoe-mosaic) ``` ### Alternatives [flarum-lang/russian Russian language pack for Flarum. 12127.5k](/packages/flarum-lang-russian)[extum/flarum-ext-material Extum Material brings Flarum to the next-level with Material Design! 141.3k](/packages/extum-flarum-ext-material)[flarum-lang/french French language pack to localize the Flarum forum software plus its official and third-party extensions. 1936.5k](/packages/flarum-lang-french) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)