Custom header and css

AI-generated summary

The discussion revolves around customizing a header in Discourse and dealing with CSS conflicts. per_coh seeks a way to prevent Discourse’s CSS from overwriting their custom header styles. Canapin explains that CSS specificity is the main issue, giving an example of how more precise selectors override less specific ones. Heliosurge mentions the use of !important as a potential solution, which Canapin cautions against, suggesting it should only be used as a last resort. per_coh acknowledges the advice and notes that while they understand CSS, they were hoping for a built-in setting in Discourse to isolate custom CSS from core styles, but concludes they’ll need to adapt as Discourse updates.

Hi folks, trying to add a custom header at the top. It’s mostly working but some of the CSS, I think, is being overwritten by Discourse.
Is there a trick to block Discourse’s CSS from affecting my header?

Hello :wave:

Can you share your CSS modifications?

Usually, Discourse will override our rules if our selectors aren’t precise enough.

For example, if Discourse has a rule like body .category { line-height: 1 } and we write in our own theme .category { line-height: 2 }, then it will be overriden by the first rule because it’s more precise with the additional body selector.

From what I have read there is also the “! Important” used in css?

Yes. I would not recommend using it unless you can’t override CSS by using selectors though. It’s a “last resort” rule. :slight_smile:

Cool thank you for the clarification. I have seen it often recommended for addon components to influence/change a Customization > Theme component

Thanks for replying everyone. I’m familiar enough with CSS to know the standard tricks and such. Sorry if that doesn’t sound too nice, I don’t mean it that way.
I was really just hoping Discourse had some setting somewhere to force its own css to ignore custom containers with specific ids or classes. It would really save a lot of time.
Anyway, think I got most of it; and I’ll just have to keep an eye on any major CSS changes Discourse add along the way and compensate.