> For the complete documentation index, see [llms.txt](https://docs.planetstyles.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.planetstyles.net/feature-guides/group-post-highlight/custom-and-per-theme-css.md).
# Custom & Per-theme CSS
Every highlighted post is wrapped in:
```html
```
The wrapper itself carries no styling; every visual property comes from CSS this extension builds from a style's saved fields and injects into every page. The badge (if enabled) renders as `` inside the post.
### Global custom CSS
Each style's edit page has a **Global CSS** box (below the visual editor, see Creating & managing highlight styles). Anything you write there is appended straight after that style's generated rule and applies on every installed frontend style, board-wide. It doesn't replace the visual editor's settings; it just wins the normal CSS cascade for whatever properties it overrides at equal specificity.
Scope your rules with:
```css
/* This highlight style only (use its numeric ID, shown in the style list) */
.posthighlight-wrap[data-posthighlight-style-id="4"] > .post { }
/* Every highlighted post, regardless of style */
.posthighlight-wrap > .post { }
/* The badge on this style only */
.posthighlight-wrap[data-posthighlight-style-id="4"] .posthighlight-badge { }
```
### Per-theme overrides
To style a highlight differently on one specific installed frontend style (a dark theme that needs different colours, for example) without touching the Global CSS box:
{% stepper %}
{% step %}
#### Find the style's folder name
Under phpBB's `/styles/` directory, e.g. `prosilver`, or the folder name of a custom style you installed.
{% endstep %}
{% step %}
#### Create the override file
`ext/planetstyles/posthighlight/styles//theme/posthighlight.css`
{% endstep %}
{% step %}
#### Write your rules
Same selectors as Global CSS above: `.posthighlight-wrap[data-posthighlight-style-id="…"] > .post { }` for one highlight style, or `.posthighlight-wrap > .post { }` for all of them.
{% endstep %}
{% step %}
#### Save it
No config anywhere else needed; it's picked up automatically for viewers on that specific frontend style the moment the file exists at that path.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
This file loads in `` *before* the extension's generated CSS (visual editor settings + Global CSS). At equal selector specificity, the later, generated rule wins, so a per-theme override may need a more specific selector, or `!important`, for a property the visual editor or Global CSS also sets.
{% endhint %}