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.

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

Custom header and css

Development

Heliosurge (Dan DeMontmorency) March 21, 2023, 10:15pm 3

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

Topic		Replies	Views
Header icons color on mouse hovering issue Product Support	2	939	February 3, 2022
Making custom CSS changes on your site Site Management css , how-to	3	10821	December 30, 2025
Need plugin code for customised dicourse header Product Support	8	1743	May 10, 2019
Which path or file handles the custom template CSS? Product Support	1	141	December 2, 2025
CSS problem with discourse search window after latest update Product Support	4	904	November 8, 2018

Custom header and css

Related topics