I have to admit: I am lazy
That’s why I am posting this in order to share it with other lazy users here.
If you want to change all elements on your page with regards to background color, font size, highlighted/ active color etc. you need to either change all your widgets or need to jump into all configuration dialogs (if you have defined those styles via props)
I moved on to define all those styles on page level and all elements are referring to that definition so that I only need to adjust it at one position for all elements.
On your page the first line should look like this:
config: label: myPage style: --my-font-size: 1.5vw --my-font-color: "#EEEEEE" --my-font-color-active: "#00CCFF" --my-bg-color: "#223344" --my-bg-color-active: "#22334499" --my-border-radius: 5px background: "#111111" blocks: - component: oh-block ...
In your custom widgets use the following code for setting font-size:
In configuration dialog simply enter this in the field font-size (if available)
- You have to start the page from sidebar to see the changes (
Run Modedoes not work)
- This does not work across pages. so you have to copy the block to all your pages
Maybe in the future we will have a central css file.