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 ![]()
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. ![]()
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.