thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.05k stars 169 forks source link

Am I able to change an icon hover label? Been trying for days. Trying to change the label of a dehumidifier Lovelace card. Mdc-icon-button #287

Closed SpartanTech closed 6 months ago

SpartanTech commented 1 year ago

i am trying to use card-mod to modify css in a lovelace card (midea dehumidifier card) in home assistant to change the text of a aria-label that is currently named 'Ion'. I wish to change that text to 'Pump'. It controls my dehumidifier pump

In Chrome after right clicking the text and inspecting, this is the JS path of that item:

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-masonry-view").shadowRoot.querySelector("#columns > div:nth-child(3) > hui-card-options:nth-child(4) > midea-humidifier-card").shadowRoot.querySelector("#modes > ha-icon-button.ion-icon").shadowRoot.querySelector("mwc-icon-button").shadowRoot.querySelector("button")

And this is the outerHTML:

<button class="mdc-icon-button mdc-icon-button--display-flex" aria-label="Ion"><!--?lit$536929$--> <mwc-ripple unbounded=""> </mwc-ripple> <!--?lit$536929$--> <span><slot></slot></span> </button>.

Screenshot_20230630_023718_Home Assistant

I can do easy things like change the ha - card background color, but for that specific element is it possible? I've been trying root elements like button, ha-icon - button, mdc-icon-button, but nothing ever changes the title of that label.

Any expert with card mod able to help? I've spent over 8 hours on this small thing lol

SpartanTech commented 1 year ago

Here is inspecting the element in Chrome:

image My attempt:

card_mod:
  style:
    ha-icon-button: |
      mwc-icon-button {
        color: purple;
        aria-label: ok1;
        label: ok2;
        title: test;
      }
    .: |
      ha-card {
        #background: teal;
      }
      mwc-icon-button {
        color: purple;
        aria-label: ok1;
        label: ok2;
        title: test;
      }
      ha-icon-button {
        color: purple;
        aria-label: ok1;
        label: ok2;
        title: test;
      }
thomasloven commented 6 months ago

Card-mod can only change css. Aria-label is not a css property.