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

Share your Projects! Dashboards & Frontend
21

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 :slight_smile: .

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'

image

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.

22

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;
    }
23

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.

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

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

24

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:

image
image1200×183 11.5 KB

25

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.

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

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.

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

26

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

27

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

28

Hi,
I was trying to use the Global Mod to change the font-family for the new badges.
The example with yellow sidebar is working for me.

Could you please help me with path and selector for the .info class of the badges?

image

image

29

Actually I was able to do it finally, however it is working only to the first badge, and not the rest.
Anything can be done to make it work for all?

  badges-path: '/'
  badges-selector: 'home-assistant-main$ha-panel-lovelace$hui-root$hui-sections-view$hui-view-badges$hui-entity-badge$ha-badge$div span'
  badges-style: |
    .info { 
      font-family: inherit !important; 
    }

The below approach actually works, but have to provide selector for each badge separately, not something global. Which is not that convenient.

  badges1-path: '/'
  badges1-selector: 'home-assistant-main$ha-panel-lovelace$hui-root$hui-sections-view$hui-view-badges$ ha-sortable hui-badge:nth-child(1) hui-entity-badge$ha-badge$div span'
  badges1-style: |
    .info { 
      font-family: inherit !important; 
    }

  badges2-path: '/'
  badges2-selector: 'home-assistant-main$ha-panel-lovelace$hui-root$hui-sections-view$hui-view-badges$ ha-sortable hui-badge:nth-child(2) hui-entity-badge$ha-badge$div span'
  badges2-style: |
    .info { 
      font-family: inherit !important; 
    }
30

Nice catch. Global Mod only accounts for the first found element and doesn’t consider more elements with the same selector. I’ll look into this :slightly_smiling_face: .

1 Like
31

I gave it a second shoot.

default:
  modes:
    dark: {}
    light: {}
 
  # not working
  ha-heading-card-title-font-size: "18px"

  # working
  root-selector: ""
  root-style: |
    :host {
      --ha-heading-card-title-font-size: 18px;
    }

I don’t know why but trying to override the default theme with HA global theme variable “ha-heading-card-title-font-size” directly did not work (i.e. line ‘ha-heading-card-title-font-size: “18px”’), but using global-mod with above code did work.

BTW, if I did not specify the “modes” then only light mode would now work whatever I would set my preference to dark or auto in HA.

32

I thought I had added this to the README but apparently not. I just did anyway :slightly_smiling_face: . This is due to a limitation in Home Assistant default theme, not because of Global Mod. The default theme just works differently and normally it is impossible to override any variables. Using the root-selector is the proper way to do this.

Yeah. That happens because without the modes, Home Assistant thinks you are trying to set theme variables that don’t have light/dark modes. Having those two empty keys will let you switch. Again, a limitation from Home Assistant.

33

With the 0.3.0 release last week, I’ve made some major performance improvements. First up, this is currently my theme / mod:

5IQxKB3H9VxsVibsklk9MuhA
5IQxKB3H9VxsVibsklk9MuhA1891×933 110 KB

image

image
image782×350 17.4 KB

I’ve completely styled the sidebar, header, background and many small elements. I’ve based my design on Material Design and is injected into the default theme. Which means I have a functioning primary and accent color selector:

f8txjTbuQJ9vuAUjOtBbfGlf

image
image860×339 15.9 KB

I also utilize transparency and CSS effects. And of course I use the same mods on mobile:

image
image486×1080 46 KB

image
image486×1080 68.7 KB

But like I mentioned, performance has improved massively:

Without browser caching
fVAfv5b197lSXTAtbzNDL6rt

With browser caching
3orxTlfCvhcd7KWtwLBVcVgu

The only main gripe I currently have is what @dmatik mentioned earlier. That selecting multiple elements is currently impossible. So I guess that’s on the roadmap for 0.4.0.

1 Like
34

Could you share all yaml/theme files which make thuis possible?
I’ve tried to setup globalmod multiple times, but I can not succeed to get things globally modified unfortunately. Also not by following the tutorial on the GitHub-page,

35

Most of this is already in the GitHub read me. The only major thing that is missing is the sidebar. You should be able to get going using the example(s) that are in the read me.

36

Wel… I’ll try again in the upcoming days and get back here when I do not succeed, or have questions.

Thanks!

37

Okay… So I have this installed and working.

I made up the default-global-mod.js file and put the example code in there, and it magically works.
Great!

However, to let this work I need to goto to the user settings page and select “default-global-mod” as my main theme. But… What I want is to add these global-mod yaml thingies into my custom Bronx-theme.

Selecting the Bronx-theme, will reverse the changes made within the deafult-global-mod. How Could I let the default-global-theme be part of my custom main theme: Bronx.yaml?

Renaming the file default-global-mod.js to bronx-global-mod.js doesn’t seem to work. Even when I change the lines:
default-global-mod: into bronx-global-mod: on top of the renamed file default-global-mod.js (into ‘bronx-global-mod.js’.

38

I think you should re-read the updated readme.

39

Thanks! I did and got it working…
It’s pretty hard to grasp, but when it works it’s amazing and really useful!

Could you help me target the “config/devices/dashboard” table to set another font style and size?
I don’t think I’m doing it the right way, as it aint working so far:

  configDevicesFont-path: "/config/devices/dashboard"
  configDevicesFont-selector: ""
  configDevicesFont-style: |
    .mdc-data-table__cell {
      font-family: "Hind" !important;
      font-size: 11px !important;
      font-weight: 300 !important;
      color: red !important;
    }
40

I think I already explained this to you back in august: