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

[terminus]

Hi Guys, i have two Questions in formatting Icons on a Lovelace Card.

First one: How can I simply change the colors of the icons. I loked for the name of the element in Webpageinspector, it’s “ha-svg-icon”?:

The YAMl of the card ist this:

type: glance
entities:
  - entity: sensor.ics_10
  - entity: sensor.ics_11
  - entity: sensor.ics_12

and at the moment it looks like this:

The Plan is, that the icons has a specifig color (i.e. green) and if the number in Brackets is 1, the backround should blink orange. The color in Brackets is a status attribute (remaining):

Do you have hints for me?

[KTibow (Kendell R)]

Blinking is more complicated. First try this:

entities:
  - entity: sensor.ics_10
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }
  - entity: sensor.ics_11
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }
  - entity: sensor.ics_12
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }

[terminus]

Thank you very much, now my YAML of the Card looks like this:

type: glance
entities:
  - entity: sensor.ics_10
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        grey
        {% endif %};
      }
  - entity: sensor.ics_11
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        green
        {% endif %};
      }
  - entity: sensor.ics_12
    style: |
      state-badge::before {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        orange
        {% else %}
        brown
        {% endif %};
      }

Buuuut the icons are still standard blue. Do I Need the !important attribute? Read it somewhere?

Regards

[KTibow (Kendell R)]

Remove the ::before part, that was an accident

[terminus]

Thank you! So kind from you, teaching me such things!

[ZenTachi]

Hi everyone,
I have read as many posts as I can and tried a few things myself but cannot make this to work.
If someone could help me on how to access the “.value-text” in the image below would be much appreciated

          - type: gauge
            entity: sensor.kitchen_sensor_temperature_offset
            style:
              .: |
                ha-card {
                  padding: 4px;
                }
                ha-gauge {
                  width: 118% !important;
                  max-width: 500% !important;
                }
                ha-gauge:  
                  $:
                    text.value-text { 
                      font-size: 70px;
                    }

[KTibow (Kendell R)]

De-indent the ha-gauge shadow root part.

[terminus]

Thank you again. If the blinking would be complicated, can i additionaly mark the icon on count “one” by coloring the background yellow for example?

[KTibow (Kendell R)]

Can you elaborate?

[terminus]

i tried

background: {% if is_state_attr(config.entity, "remaining", "1") %} yellow {% endif %};

but that didn’t worked out. Is it the right way nevertheless?

  - entity: sensor.ics_12
    style: |
      state-badge {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        "#FF4500"
        {% else %}
        brown
        {% endif %};
        background: {% if is_state_attr(config.entity, "remaining", "1") %} yellow {% endif %};
      }

[KTibow (Kendell R)]

Try !important

[SiMPA]

Hi,

i spend hours to make bigger alarm keypad, but i still can not figured how to do this. I want change #keypad > max-width: parameter. Thanks for the help.

[ZenTachi]

De-ident didn’t work. I removed everything and I only added

            style: 
              ha-gauge$: |
                .text { 
                  left: 70% !important;
                }

Which works. Now time to start adding back the rest of the style.

Thanks for your help

• One last question. I read somewhere at the beginning that vertical/horizontal card is not supported. Do you know if this is still the case.
  Is there a way to access the following :
  hui-horizontal-stack-card #root > * { margin: 0px; }

[KTibow (Kendell R)]

You can use mod-card for that, and go into the shadow root of hui-horizontal-card.

[terminus]

@KTibow

!important

Tried this but no success :-/

type: glance
entities:
  - entity: sensor.ics_10
    style: |
      state-badge {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        OrangeRed
        {% else %}
        grey
        {% endif %};
      }
  - entity: sensor.ics_11
    style: |
      state-badge {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        OrangeRed
        {% else %}
        green
        {% endif %};
      }
  - entity: sensor.ics_12
    style: |
      state-badge {
        color:
        {% if is_state_attr(config.entity, "remaining", "1") %}
        "#FF4500"
        {% else %}
        brown
        {% endif %};
        background: {% if is_state_attr(config.entity, "remaining", "1") %} yellow {% endif %} !important;
      }

[KTibow (Kendell R)]

You don’t need quotes around your hex code.

[terminus]

No change anyways

tested it like this because the attribute today is “12” but the icon stays red, and the background white

  - entity: sensor.ics_12
    style: |
      state-badge {
        color:
        {% if is_state_attr("config.entity", "remaining", "12") %}
        #FFFF00 !important
        {% else %}
        red
        {% endif %};
        background: {% if is_state_attr(config.entity, "remaining", "12") %} yellow !important {% endif %};
      }

[gibman]

Could use some help here with transparency vs “dark / light” default themes.

Right, now I have this working fine.

- type: entities
        title: Adrian
        show_header_toggle: off
        style: |                    
          ha-card {
            background: center / cover no-repeat url("/local/adrian.jpg");            
            #box-shadow: none;
          }
          .card-content {            
            background-color: rgba(100, 100, 100, 0.7);
            box-shadow: none;
          }        
          .card-header {            
            background-color: rgba(100, 100, 100, 0.7);
            box-shadow: none;
          }        

This looks good in dark theme mode, but not in light theme mode.

I want to be able to set different rgba values depending on the current theme applied.
What is the best way to approach this ?

I have no custom themes. No theme file at all in fact.

Using a debugger I able to tell that the meta tag has the info regarding what theme is active.
eg.

...

[KTibow (Kendell R)]

I don’t believe you can do that. You can try using a different user profile for light/dark so you can use {{ user }}, or automating it so you know when the automation will trigger.

[terminus]

It looks like my YAML doesn’ adress the state attribute, because its always the %else% state that is displayed. I tried for the if value “01” and “1” but both didn’t work. The !important tag did’t changed a thing

type: glance
entities:
  - entity: sensor.ics_10
    style: |
      state-badge {
        color:
          {% if is_state_attr("config.entity", "remaining", "1") %}
          #FFFF00 !important
          {% else %}
          grey
          {% endif %};
        background: 
          {% if is_state_attr(config.entity, "remaining", "1") %} 
          yellow !important
          {% endif %};
      }

The background style works too, but here is also only the %else% state active. An example:

: glance
entities:
  - entity: sensor.ics_10
    style: |
      state-badge {
        color:
          {% if is_state_attr("config.entity", "remaining", "1") %}
          #FFFF00 !important
          {% else %}
          grey
          {% endif %};
        background: 
          {% if is_state_attr(config.entity, "remaining", "1") %} 
          yellow !important
          {% else %}
          blue
          {% endif %};
      }

Its blue :-(, but its supposed to be yellow :-/