OH3: How to override margin/padding CSS for grid on layout pages?

Setup, Configuration and Use Beginners
1

I would like to change the padding/margin css of some components (i.e. oh-gauge-card) in my overview page.

When inspecting the page with the browser dev tools I found what I would need to overwrite (the css variable declarations in app.css) but how do I actually do this?

Can I add a custom css file with my overrides somehow/somewhere?
Can I add something regarding css in the yaml of the overview page definition?

thanks
Jens

2

There is a stylesheet parameter that can be set in the config for pages and components that will inject css into the page at the appropriate level. Search the forum for ‘stylesheet’ and you should find plenty of examples.

3

thanks!

just need to figure out what’s with that .scoped-7ff58ec17e that gets added to the generated css declaration in the page

4

Each one of those represents the place in the page where one particular stylesheet is injected. That’s just the mechanism of the stylesheet functionality.

5

right, I think I’m getting the hang of it now, cool

thank you

6

hi @JustinG while you are there …

what is the difference between using > or | in the stylesheet parameter? I found examples for both but no explanation when to use which one

stylesheet: >

stylesheet: |
7

That’s part of yaml syntax indicating that a multi-line value is to follow. One of them preserves the new lines in the value itself, the other does not. To be honest, because it doesn’t matter with respect to the OH widget yaml, I don’t even remember which is which anymore.

8

Stumbled in this thread and I was wondering if anyone found a way to add a CSS to all pages by default rather then editing every single page settings, I think this is a common scenario if someone wants to reduce for example rounding on cards globally, any tip?

9

To my knowledge this is still not possible.