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.