Custom & Per-theme CSS

Every highlighted post is wrapped in:

<div class="posthighlight-wrap" data-posthighlight-style-id="{ID}">
  <!-- the post -->
</div>

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 <span class="posthighlight-badge"> 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:

/* 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:

Find the style's folder name

Under phpBB's /styles/ directory, e.g. prosilver, or the folder name of a custom style you installed.

Create the override file

ext/planetstyles/posthighlight/styles/<folder-name>/theme/posthighlight.css

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.

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.

This file loads in <head> 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.