Where to store user CSS

Hi Peter,

Good question — this is actually intentional and related to how CommentBox handles styling.

The CSS you see inside

administrator/components/com_commentbox/src/Helper/CommentBoxHelper.php

is core CSS, mainly used for essential elements like the editor/input field. This CSS should not be modified, which is why it lives close to the rendering logic rather than in a template stylesheet.

CommentBox uses Shadow DOM on purpose to avoid CSS conflicts with templates and third-party extensions. Because of this, global frontend CSS files usually cannot fully affect CommentBox styles.

Recommended ways to customize styling

1. Component Options (preferred). Most visual styling (colors, spacing, etc.) can be adjusted directly from the CommentBox component options. This is the safest and update-proof approach.
2. Regular site CSS (limited impact). You can add CSS to your template’s stylesheet, but only styles that are inherited by the Shadow DOM (e.g. fonts, some colors) will apply.
3. Shadow DOM override (advanced / full control). If you need full control, the correct approach is to create a layout override for: components/com_commentbox/layouts/commentbox/application.php . Inside that file, you’ll find a <style> tag. You can safely add your own custom CSS after the core styles there. This keeps everything frontend-related, update-safe, and clearly separated from the backend code.

If you’d like, I can point out exactly where to add custom rules in the override or help you target a specific element.

Regards,
Lefteris