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

Mariusthvdb · January 18, 2021, 10:46am

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 %}
                }

lawi75 · January 18, 2021, 10:50am

No change

Mariusthvdb · January 18, 2021, 11:15am

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.

lawi75 · January 18, 2021, 11:37am

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…

Mariusthvdb · January 18, 2021, 12:40pm

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

Ildar_Gabdullin · January 18, 2021, 1:18pm

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:

      - 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.

lawi75 · January 18, 2021, 1:45pm

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?

Mariusthvdb · January 18, 2021, 1:55pm

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

Ildar_Gabdullin · January 18, 2021, 1:57pm

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 %}"

Ildar_Gabdullin · January 18, 2021, 1:59pm

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)))

Mariusthvdb · January 18, 2021, 2:00pm

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 }}

Mariusthvdb · January 18, 2021, 2:10pm

using --label-badge-background-color ?

github.com

home-assistant/frontend/blob/d392695ab75ab48461cbfe42ba56ec1f0ccd5d8b/src/resources/styles.ts#L23


      
          "switch-checked-button-color":
            "var(--switch-checked-color, var(--primary-background-color))",
          "switch-checked-track-color": "var(--switch-checked-color, #000000)",
          "switch-unchecked-button-color":
            "var(--switch-unchecked-color, var(--primary-background-color))",
          "switch-unchecked-track-color": "var(--switch-unchecked-color, #000000)",
          "slider-color": "var(--primary-color)",
          "slider-secondary-color": "var(--light-primary-color)",
          "slider-bar-color": "var(--disabled-text-color)",
          "label-badge-grey": "var(--paper-grey-500)",
          "label-badge-background-color": "var(--card-background-color)",
          "label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)",
          "paper-card-background-color": "var(--card-background-color)",
          "paper-listbox-background-color": "var(--card-background-color)",
          "paper-item-icon-color": "var(--state-icon-color)",
          "paper-item-icon-active-color": "var(--state-icon-active-color)",
          "table-row-background-color": "var(--primary-background-color)",
          "table-row-alternative-background-color": "var(--secondary-background-color)",
          "paper-slider-knob-color": "var(--slider-color)",
          "paper-slider-knob-start-color": "var(--slider-color)",
          "paper-slider-pin-color": "var(--slider-color)",

haha sure, was merely trying to expand on this

Ildar_Gabdullin · January 18, 2021, 2:58pm

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;
          }

Mariusthvdb · January 18, 2021, 3:08pm

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 —> 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?

Ildar_Gabdullin · January 18, 2021, 3:25pm

I tried to combine :host & “Hierarchy”, no success ((
Lack of knowledge & experience…

In short non-expert way, “:host” & “ha-label-badge” are same.

KTibow · January 18, 2021, 3:27pm

What was the code that didn’t work?

Mariusthvdb · January 18, 2021, 3:50pm

since almost all options are covered in this combined style:

  - entity: sensor.calltheboss_battery_level
    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: white;
                  }
          .: |
            ha-label-badge {
              --label-badge-red: green;
              --label-badge-background-color: yellow;
            }

for me, the final question is how to style the circle (border) independently from the unit box
(now the --label-badge-red: green; for ha-label-badge)
also, given Ildars remark above, whether this is the optimal (read: shortest) yaml for the config or not

this seems to be identical in result:

  - entity: sensor.calltheboss_battery_level
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $:
              .badge-container: |
                .title {color: orange;}
                .value {color: red;}
                .label-badge .label span {color: white;}
          .: |
            ha-label-badge {
              --label-badge-red: green;
              --label-badge-background-color: yellow;
            }

Ildar_Gabdullin · January 18, 2021, 4:59pm

This is really interesting.

I changed “white” to “blue” for the UNIT- and it does not work.

This works:

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

or this:

                $:
                  .badge-container: |
                    .title {color: orange;}
                    .badge-container .label-badge .label span {color: blue;}
                    .value {color: red;}

or this:

                $:
                  .badge-container: |
                    .title {color: orange;}
                    .badge-container .label-badge .value {color: red;}
                    .badge-container .label-badge .label span {color: blue;}

Ildar_Gabdullin · January 18, 2021, 8:07pm

Here is a problem which I have not solved so far.
I can change a style for some cards.
But cannot do it for cards inside 'custom:config-template-card'.
Let’s make a simple Entities card with 2 rows:

a row inside 'custom:config-template-card';
a usual row.

type: entities
title: config-template problem
entities:
  - type: 'custom:config-template-card'
    entities:
      - sun.sun
    row:
      entity: sun.sun
      style:
        hui-text-entity-row:
          $:
            hui-generic-entity-row: |
              .text-content {
                color: red;
              }
  - entity: sun.sun
    style: |
      :host .text-content {
        color: red;
      }

Note that for the 'custom:config-template-card' there are no variables & templates, it is just a simple example.

So, I cannot change a style for the 1st row.
Any help will be appreciated.

KTibow · January 18, 2021, 8:22pm

That’s because card-mod doesn’t work for custom cards. You could shadow-root into the row instead.