A different take on designing a Lovelace UI

Share your Projects!
202

I use chrome devtools. So, right click on an element and inspect. When you find your tag you can copy the selector. This time it was easy because the element has an id brightnessValue. If it didn’t have the id or class it would be something like div > div > h4.

Then use card-mod to inject the css.

style: |
  #brightnessValue {
    font-family: SF Display;
    color: red;
  }

1

The hard part is when you drill down too far you might encounter #shadow-root. So here the first selector is #root > hui-element > hui-markdown-card then $ to enter shadow root and then continue with next selector.

# remove padding from markdown-card inside picture elements
"#root > hui-element > hui-markdown-card":
  $: |
    ha-card > ha-markdown {padding: 0 !important;}
11 Likes