🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
795

hi, I’m trying to use card-mod to change the height of a weather-card-chart

chartTarget
chartTarget1298×530 30.3 KB

I should edit the chartTarget height

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-panel-view > weather-card-chart").shadowRoot.querySelector("ha-card > div.card > ha-chart-base").shadowRoot.querySelector("#chartTarget")

can someone please help me? I tried many style: configurations without success

edit
nvm, I found the solution:

style:
    ha-chart-base:
      $: |
        #chartTarget {
          height: 380px !important;
        }
796

I don,t know if this the right place to ask, but i look all arround and didn,t see what i want:

Who can i make a entities card with an image in the background almost transparent? If i try to put opacity: 0.3 it afects all the elements in the card, and i just want to make that in the image.

797

https://google.com/search?q=png+opacity+changer

798

Oh, that,s the only way? The image has to be already with that filter ?

Ok, thank very much !

799

Well you can do it with :before, but it’s easier to just change the opacity of the image.

800

Ok. So if i have tis code:

type: entities
style: |
  ha-card {

    color: red;
    background: url('/local/s80.jpg');
    ;
  }
entities:
  - light.luz_cozinha
  - light.sala_tv
  - light.sala_sofa

Where should i use the :before ?

801

Something like this:

  ha-card:before  {
    content: " ";
    background: url('/local/s80.jpg');
    opacity: 0.2;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
2 Likes
802

That,s exactly what i was struglling to find. That is not easy to find, i found some generic anwsers about that from css in generic use, but i didn,t know how to translate that to Home assistant.

Thank you very much for your help and time.

803

Hi!
I want to change color and word attribute based on state in a glance card.
If sensor.something = true, then color red and the word yes instead of true.
Can i make that happen?

804

Can’t make this work:

 entity: sensor.sonnen_batterycharging
            icon: 'mdi:battery-charging'
            style: |
              :host {
                --paper-item-icon-color:
                  {% if states(config.entity)| 'true' %}
                    green
                  {% else %}
                    null
                  {% endif %}
                  ;
              }
805

It should be a binary_sensor in that case.
Maybe this will work (It won’t change the text or color when off):

            entity: sensor.sonnen_batterycharging
            icon: 'mdi:battery-charging'
            style: |
              :host {
                --paper-item-icon-color: {% if is_state(config.entity, 'on') %}
                    green;
                  {% endif %}
              }
806

nope, did’t work

807

The Icon is just white now, instead of blue. In both states

808

Well is it a binary_sensor? It should be. If it isn’t, create a template binary_sensor:

binary_sensor:
  - platform: template
    sensors:
      sonnen_battery_charging:
        friendly_name: Sonnen battery charging
        icon_template: mdi:battery-charging
        value_template: |
          {{ is_state('sensor.sonnen_batterycharging', 'true') }}

And then update the entity in the card to the binary one

809

still no luck…the binary sensor is always off for some reason…

810

Even when sensor.sonnen_batterycharging (check for typos) is true?

811

Yes, even when it’s true, the binary sensor is off

812

What does the template show in the template tab of Developer Tools?

813

it say’s off

814

What about

{{ states('sensor.sonnen_batterycharging') }}

Mind sending a screenshot?