Global Mod - Add custom styles to any frontend Home Assistant element

[alex3305 (Alex van den Hoogen)]

This is exactly what I was looking for, except maybe in an easier form.

If you have any suggestions how this component could be easier to setup or work with, I’m fully open to suggestions .

I’m trying to make bigger the titles of the new dashboard sections. But it’s not working.

You were almost there. The thing was that spaces are used to jump between CSS classes, while $ is used to traverse shadowRoot. You can’t really combine them. With this rule your code shows up in the inspector:

  biggerTitles-selector: 'home-assistant-main$partial-panel-resolver ha-panel-lovelace$hui-root$div hui-view-container hui-view hui-sections-view$ha-sortable div'

However than you’ll need to traverse yet another shadowRoot, which is impossible from regular CSS.

Still according to this post by piitaya you can override these with regular theme variables. You could also set them in global mod, but I think setting them globally is a lot easier for you.

Thanks for the valuable feedback though.

[ThomDietrich]

I’m also struggling to get started. Could someone please help me to sort this out? Thanks!

I’m trying to apply a mod to the device page.
(I want to increase the width of the column showing entities on the device overview page. I could do this by moving the third column under the first (the logbook) or by increasing the relative column width.)

I expected this simple example to work, sadly it does not. What am I doing wrong?

  devicepage1-path: "/config/devices/device"
  devicepage1-selector: "home-assistant-main$partial-panel-resolver ha-panel-config ha-config-devices ha-config-device-page$hass-subpage"
  devicepage1-style: |
    .column {
      background-color: blue;
    }

[jpbaril (Jean-Philippe Baril)]

@alex3305

If you have any suggestions how this component could be easier to setup or work with, I’m fully open to suggestions .

I don’t know if it’s possible but all I could think of is some sort of side-app/site or browser extension that could “translate” actual html/css structure of picked-up item into selector+style rule lines.

@alex3305

The thing was that spaces are used to jump between CSS classes, while $ is used to traverse shadowRoot. You can’t really combine them.

Ah, I did not think it had an importance. I inserted spaces simply for readability.

@alex3305

However than you’ll need to traverse yet another shadowRoot, which is impossible from regular CSS.

Still according to this post by piitaya you can override these with regular theme variables. You could also set them in global mod, but I think setting them globally is a lot easier for you.

Ok, so I understand that by just changing my line with yours it won’t work, that I should instead use the variable “ha-heading-card-title-font-size” to achive my goal, and that in the end I should set that variable globally instead of through GlobalMod.

I really don’t know anything about themes so is this below what you meant by “setting them globally” ?

# configuration.yaml
frontend:
  themes:
    default:
      ha-heading-card-title-font-size: "1.3em"

Thanks again

[alex3305 (Alex van den Hoogen)]

I’ve added your code to my themes/default-global-mod.yaml file which now contains:

default-global-mod:
  devicepage1-path: "/config/devices/device"
  devicepage1-selector: "home-assistant-main$partial-panel-resolver ha-panel-config ha-config-devices ha-config-device-page$hass-subpage"
  devicepage1-style: |
    .column {
      background-color: blue;
    }

which I refer to in my configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes

and after reloading themes this works perfectly with the default theme:

[alex3305 (Alex van den Hoogen)]

@jpbaril

I don’t know if it’s possible but all I could think of is some sort of side-app/site or browser extension that could “translate” actual html/css structure of picked-up item into selector+style rule lines.

That would be awesome. But maybe a little complex within the scope of this project. But I’m going to save this as a feature request.

@jpbaril

Ah, I did not think it had an importance. I inserted spaces simply for readability.

No worries. I should clean and clear up the readme of the project. @ThomDietrich also suggested this on GitHub.

@jpbaril

Ok, so I understand that by just changing my line with yours it won’t work, that I should instead use the variable “ha-heading-card-title-font-size” to achive my goal, and that in the end I should set that variable globally instead of through GlobalMod.

It may or may not work but is a rather convoluted option where you rely on GlobalMod. Which I don’t mind but there is a bigger chance of something breaking than solely relying on Home Assistant theme variables.

@jpbaril

I really don’t know anything about themes so is this below what you meant by “setting them globally” ?

# configuration.yaml
frontend:
  themes:
    default:
      ha-heading-card-title-font-size: "1.3em"

That would probably do it. You can also split up configuration which I coincidentally illustrated in my previous post .

[ThomDietrich]

Now it’s working for me as well Not sure what changed. Thanks!

[jpbaril (Jean-Philippe Baril)]

Unfortunately neither work.
I abandoned, too much hassle for just a little improvement.
Thanks again for your help.