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:
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.