A Discourse theme component that styles selected category navigation buttons and keeps the filter pills visible on mobile.
- Centered mobile nav pills with tool icons stacked beneath.
- Configurable list of buttons to highlight with custom colours.
- Active-state outline that plays nicely with Discourse’s underline.
- In the Discourse Admin console, go to Customize → Themes → Components and click Install.
- Choose From a Git repository and paste:
https://github.com/focallocal/nav-buttons-highlighter - Once installed, add the component to any themes you want the styling applied to.
Inside the component’s Settings tab:
-
nav_button_color_pairs – Table with a row per pill. Fill the selector column with the link’s CSS selector and the color column with the hex value you want applied. Defaults include highlights for
li[data-filter="docs"] > a,li[data-filter="tasks"] > a,#ember143, and.kanban-nav, which you can keep or replace with your own selectors and colours. To find the selector, open your forum in a browser, right-click the navigation pill you want to target, select Inspect, and copy the CSS path displayed for the link element. -
active_outline_color – Colour applied as a subtle outline when a highlighted pill is active.
Save your changes and refresh a category page to see the effect.
This repository contains:
common/common.scss– Layout adjustments (mobile centring, pill sizing). -assets\javascripts\discourse\api-initializers– Injects dynamic styles from the settings list.about.json– Component metadata for Discourse.settings.yml– Declares admin-facing settings.
To iterate locally, edit the files and then upload or point your Discourse instance at your fork.
MIT © Public Happiness Movement