Custom header and css

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?

1 Like

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.

2 Likes

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:

1 Like

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.

1 Like