πŸ”Ή Card-mod - Add css styles to any lovelace card

Make two animations. The first one is showing. The second one is hiding. Use Jinja2 templating with an if-else statement. Once it finishes, it remains in that state.

I’m sure it is something trivial, but since I dont know CSS that well, I better ask. I have clock on my home screen and I have been using this code to make it bigger on bottom of the screen

- cards:
          - entities:
              - entity: sensor.time
            gridcol: 2 / 5
            gridrow: 3
            show_icon: false
            show_name: false
            show_state: true
            style: |
              ha-card {
                font-size: 60px;
                height: 100%; 
                background-color: rgba(0, 0, 0, 0.50)
              }
            type: glance 

It used to work just fine, but after I update (from some version from early 2020) to recent Home assistant, it doesnt work anymore. Now all font sizes above 28px get cut from top and bottom. So I think I need some additional code, but I have no idea what.

Are you using layout-card?

Yes I am. Does it make difference?

Can you post your config so I can copy+paste it into manual (de-indent it, remove layout-card)?

Hi guys,

Any idea why I can’t change the color of my mdi:washing-machine icon for my binary sensor? The color change of the label-badge-blue works fine…

        style: |
          :host {
            --label-badge-blue:
            {% if states('sensor.washing_machine_power')|float > 0 %}
              green
            {% else %}
              #039be5
            {% endif %}
            ;
          }
          ha-state-label-badge:
            $:
              ha-label-badge:
                $:
                  .value: |
                      ha-icon {
                        color: {% if states('sensor.washing_machine_power')|float > 0 %} red {% else %} green {% endif %} !important;
                      }          

BR.,

Lars

this works here:

      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge .label span{
                  {% if is_state(config.entity,'home') %} color: gold;
                  {% else %} color: black;
                  {% endif %}
                }

so maybe add the β€˜color:’ in the templates if/else ?

well, never mind, this works also:

      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge .label span{
                  color:
                  {% if is_state(config.entity,'home') %} gold;
                  {% else %} black;
                  {% endif %}
                }

No change :frowning:

sorry, crossposted in the edit of my post above. Seems this is flakey at least between browsers. Chrome and Safari don’t pickup the same stylings…

using:

      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge .label span{
                  color:
                  {% if is_state(config.entity,'home') %} gold;
                  {% else %} black;
                  {% endif %}
                }
          .: |
            :host {
               --label-badge-red:
              {% set zones = states.zone|map(attribute='name')|list %}
              {% if is_state(config.entity,'home') %} green;
              {% elif 'bij' in states(config.entity) %} gold;
              {% elif states(config.entity) in ['moving','driving'] or
                      states(config.entity) in zones %} mediumslateblue
              {% else %} dimgrey;
              {% endif %}
            }

myself, and Chrome wont set the .label color (the top template, which is for the label text), where Safari does that even quicker than setting the label badge.

The thing is that I try to change the color of the icon and not the text… I can change the ring around the badge but not the icon…

maybe ask @Ildar_Gabdullin and check his series of posts above ? shouldn’t it be ha-svg-icon

1 Like

Styling badges: (summarized post)
Tried to summarize everything that was discussed by Mariusthvdb and me starting from this post and below.

Quick styling using β€œ:host” for the following elements:

  • name - displayed under the badge;
  • state or icon - displayed inside the badge;
  • label - displayed in the bottom part of the badge (used for displaying a unit for β€œsensor” , a state for β€œdevice_tracker”);
  • background - color of the badge internal;
  • circle - color of the border.

Examples below are for:

  • binary_sensor
  • device_tracker
  • sensor
  • switch

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: binary_sensor.updater
        name: 'name, icon, circle & back (:host)'
        style: |
          :host {
            color: orange;
            --label-badge-text-color: red;
            --label-badge-blue: cyan;
            --label-badge-background-color: yellow;
          }
      - entity: device_tracker.iiyama_2_ping_device_tracker
        name: 'name, icon, label, circle & back (:host)'
        style: |
          :host {
            color: orange;
            --label-badge-text-color: red;
            --label-badge-red: cyan;
            --label-badge-background-color: yellow;
            --ha-label-badge-label-color: blue;
          }
      - entity: sensor.cleargrass_1_co2
        name: 'name, state, label, circle & back (:host)'
        style: |
          :host {
            color: orange;
            --label-badge-text-color: red;
            --label-badge-red: cyan;
            --label-badge-background-color: yellow;
            --ha-label-badge-label-color: blue;
          }
      - entity: switch.test_switch
        name: 'name, state, circle & back (:host)'
        style: |
          :host {
            color: orange;
            --label-badge-text-color: red;
            --label-badge-red: cyan;
            --label-badge-background-color: yellow;
          }

Note that there is a difference between "binary_sensor" & other sensors for styling the β€œcircle”:

  • --label-badge-blue (for "binary_sensor")
  • --label-badge-red (for others)

Now styling the same elements but using β€œlong” navigation:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: name, state, label, circle & back (long)
        style:
          ha-state-label-badge:
            $: |
              ha-label-badge {
                color: orange;
                --label-badge-text-color: red;
                --label-badge-red: cyan;
                --label-badge-background-color: yellow;
                --ha-label-badge-label-color: blue;
              }

In the examples above the "--label-XXXXX" variables were used for styling.
But you can use CSS properties like "color", "background-color" etc for each element including all the elements mentioned above AND these new elements:

  • label background;
  • label border.

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: name (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .title {
                    color: orange;
                  }
      - entity: sun.sun
        name: icon (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    color: red;
                  }
      - entity: sensor.cleargrass_1_co2
        name: state (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    color: red;
                  }        
      - entity: sensor.cleargrass_1_co2
        name: label (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .label span {
                    color: blue;
                  }        
      - entity: sensor.cleargrass_1_co2
        name: circle (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-color: cyan;
                  }
      - entity: sensor.cleargrass_1_co2
        name: background (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    background-color: yellow;
                  }
      - entity: sensor.cleargrass_1_co2
        name: label background (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .label span {
                    background-color: magenta;
                  }
      - entity: sensor.cleargrass_1_co2
        name: label border (long)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .label span {
                    border-style: solid;
                    border-color: green;
                  }

Now everything combined:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: combined
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-color: cyan;
                    background-color: yellow;
                   }
                  .badge-container .label-badge .value {
                    color: red;
                   }
                  .badge-container .label-badge .label span {
                    border-style: solid;
                    border-color: green;
                    color: blue;
                    background-color: magenta;
                   }
                  .badge-container .title {
                    color: orange;
                  }

Also border’s style can be changed:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: combined (dashed border)
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge {
                    border-style: dashed;
                    border-color: cyan;
                    background-color: yellow;
                   }
                  .badge-container .label-badge .value {
                    color: red;
                   }
                  .badge-container .label-badge .label span {
                    border-style: dashed;
                    border-color: green;
                    color: blue;
                    background-color: magenta;
                   }
                  .badge-container .title {
                    color: orange;
                  }

It is possible to combine two methods - using together "--label-XXXXX" variables and CSS properties like "color", "background-color":

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: two methods
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .label span {
                    border-style: solid;
                    border-color: green;
                    color: blue;
                    background-color: magenta;
                   }
                  .badge-container .title {
                    color: orange;
                  }
              .: |
                ha-label-badge {
                  --label-badge-background-color: yellow;
                  --label-badge-text-color: red;
                  --label-badge-red: cyan;
                }

It is possible to combine ":host" & β€œlong” navigation to get a short version:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: short
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .label span {
                    border-style: solid;
                    border-color: green;
                    color: blue;
                    background-color: magenta;
                   }
          .: |
            :host {
              color: orange;
              --label-badge-background-color: yellow;
              --label-badge-text-color: red;
              --label-badge-red: cyan;
            }

Changing a badge size:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: huge badge
        style: |
          :host {
            --ha-label-badge-size: 65px;
          }
      - entity: sensor.cleargrass_1_co2
        name: normal badge

Changing a name’s width:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: normal badge
      - entity: sensor.cleargrass_1_co2
        name: name width for a very very long name
        style: |
          :host {
            --ha-label-badge-title-width: 200px;
          }
      - entity: sensor.cleargrass_1_co2
        name: normal badge

Changing a font size:

For the name:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
Note: changing a name’s width and margin-top are also required.

      - entity: sensor.cleargrass_1_co2
        name: name font for a very long name
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .title {
                    margin-top: 11px !important;
                  }
          .: |
            :host {
              --ha-label-badge-title-font-size: 7px;
              --ha-label-badge-title-width: 48px;
            }

For the state:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: state font
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    color: red;
                    font-size: 8px;
                  }        

For the label:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.rpi_1_netdata_net_in
        name: label font
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .label span {
                    color: blue;
                    font-size: 6px !important;
                  }        

Changing an icon size:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: device_tracker.iiyama_2_ping_device_tracker
        name: resized icon
        card_mod:
          style:
            ha-state-label-badge:
              $: |
                ha-label-badge ha-state-icon {
                  --mdc-icon-size: 15px;
                  color: red;
                }

Scaling a badge:
May be done by changing a "--ha-label-badge-font-size" variable’s value:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: scaling 1
        style: |
          :host {
            --ha-label-badge-font-size: 8px;
          }        
      - entity: sensor.cleargrass_1_co2
        name: scaling 2
        style: |
          :host {
            --ha-label-badge-font-size: 28px;
          }        

Note that the scaling does not change a name’s width.


Changing a padding around a badge:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sensor.cleargrass_1_co2
        name: normal padding
      - entity: sensor.cleargrass_1_co2
        name: changed padding
        style: |
          :host {
            --ha-label-badge-padding: 20px;
          }        
      - entity: sensor.cleargrass_1_co2
        name: normal padding

Transparent badge:
Can be used to create a gap between other badges:
image

      - entity: sun.sun
        name: transparent
        style: |
          :host {
            color: transparent;
            --label-badge-text-color: transparent;
            --label-badge-red: transparent;
            --label-badge-background-color: transparent;
            --ha-label-badge-label-color: transparent;
            --ha-label-badge-font-size: 0px;
            --ha-label-badge-title-width: 20px;
          }

The last variable may be used to change the gap’s width.


More examples are described here.

13 Likes

Can the problem be the sensor?

binary_sensor:
  sensors:
    washer:
      friendly_name: "Washer"
      delay_off: 
        minutes: 5      
      icon_template: >-
          {% if states('sensor.washing_machine_power')|float > 0 %}
            mdi:washing-machine
          {% else %}
            mdi:washing-machine-off
          {% endif %}            
      value_template: >
          {% if states('sensor.washing_machine_power')|float > 0 %}
            1 {% else %} 0 {% endif %}

Does my badge both have an icon and a state hidden under the icon? I mean maybe I change the color of the state but don’t see that as the state value is under the icon?

2 Likes

thanks!
in the old days before Lovelace we were able to also color the white background of the badge, would you know how to do that with card-mod style?

could you show us how to combine these into 1 badge style. I am a bit confused which hierarchy each has compared to the other. Say a Green unit, Yellow Text, Red icon and Blue circle :wink:

Try this:

binary_sensor:
  sensors:
    washer:
      friendly_name: "Washer"
      delay_off: 
        minutes: 5      
      icon_template: "{% if states('sensor.washing_machine_power')|float > 0 -%}
                      {{mdi:washing-machine}}
                      {%- else -%}
                      {{mdi:washing-machine-off}}
                      {%- endif %}"           
      value_template: "{% if states('sensor.washing_machine_power')|float > 0 -%}
                       {{1}}
                       {%- else -%}
                       {{0}}
                       {%- endif %}"

I just tried to change a background with no success.
I am still learning too, will try to change it later…
As for combining - wait a little)))

why not have the binary behave as it is designed, be β€˜on’ when above 0 else off:

      value_template: >
        {{ states('sensor.washing_machine_power')|float > 0 }}
2 Likes

using --label-badge-background-color ?

haha sure, was merely trying to expand on this

1 Like

Combining styles for badge:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
(code updated 01/03/21 because of this post)

      - entity: sensor.cleargrass_1_co2
        name: combined
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $:
                  .badge-container: |
                    .title {
                      color: orange;
                    }
                  .badge-container .label-badge: |
                    .value {
                      color: red
                    } 
                  .: |
                    .badge-container .label-badge .label span {
                      color: blue;
                    }
              .: |
                ha-label-badge {
                  --label-badge-red: cyan;
                  --label-badge-background-color: yellow;
                }

Hierarchy is always enigmatic for me))

Icon:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
(code updated 01/03/21 because of this post)

      - entity: sun.sun
        name: combined
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $:
                  .badge-container: |
                    .title {
                      color: orange;
                    }
                  .badge-container .label-badge: |
                    .value {
                      color: red
                    } 
              .: |
                ha-label-badge {
                  --label-badge-red: cyan;
                  --label-badge-background-color: yellow;
                }

Background only:
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

      - entity: sun.sun
        name: colored back
        style: |
          :host {
            --label-badge-background-color: yellow;
          }        

great!

so this shows how to style

  • the state, name and unit of a badge entity
  • background, and combined circle-border and -label of the badge itself (though label and circle border were also independent before, might take some extra effort finding a way to do that)

seems to be rather complete :wink: β€”> into the style book

what I dont get just yet, is why the --label-badge-background-color should be under :host in the bottom style, and under

.: |
   ha-label-badge

in the upper style?

1 Like