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

KTibow · December 28, 2020, 3:08pm

--ha-card-background is already set, so just use background: #fff0 !important;

maxym · December 28, 2020, 3:21pm

Hello
Would you like to help me with traversing layout card?
I know already I had to use card-mod. I can apply style to its ha-card. But I failed to go deeper. I need to style those div.column elements. In fact I failed to even reach

BTW the motivation is to remove overflow settings from culumns, because something goes wrong on small displays causing right shadows to be clipped.

KTibow · December 28, 2020, 3:24pm

You’re doing pretty good so far! Change div div.column to div.column or div.column div.

Umbe · December 28, 2020, 3:31pm

sorry if i bother , 1 more thing
i have

if i adjust from the dev paddings it works , if i do via yaml , no , can you just tell me what is wrong ?

                      - card: 'media-control'
                        wider: true
                        widerSize: 2
                        noPadding: true
                        cardOptions:
                            entity: media_player.tv_living
                            name: Q90R
                            style: |
                              ha-card {
                                  padding: 2px !important;
                                  display: flex !important;
                                  flex-direction: column !important;
                                  background: transparent !important;
                                  box-shadow: none !important;
                                  border-radius:0 !important;
                              }       

                              .player {
                                  position: relative;
                                  padding: 5px;
                                  height: 100%;
                                  box-sizing: border-box;
                                  display: flex;
                                  flex-direction: column;
                                  justify-content: space-between;
                                  color: var(--text-primary-color);
                                  transition-property: color, padding;
                                  transition-duration: 0.4s;
                              }

maxym · December 28, 2020, 3:43pm

Unfortunately it doesn’t work. I ave feeling I checked all possible combinations
But what worrying me is I cannot reach layout-card element either.

this doesn’t work, but I think it should.

style:
  ha-card:
    layout-card: '{background-color: red !important}'

While testing various options I succeed with this syntax:

style: |
  ha-card layout-card {background-color: red !important}

So… what am I I doing wrong?

Umbe · December 28, 2020, 3:44pm

try :

                            style: |
                              ha-card {
                                  background: red  !important;

                              }

maxym · December 28, 2020, 3:57pm

This works (obviously)
What I’m trying is, to traverse to layout-card and deeper.
Because I’m failing to change layout-card in the way I showed above, I cannot go into shadow roots (see my posts above)

KTibow · December 28, 2020, 5:31pm

Try this:

style:
  ha-card$:
    layout-card {
      background-color: red !important;
    }

KTibow · December 28, 2020, 5:32pm

Try changing padding: 5px; to padding: 5px !important;

olum · December 28, 2020, 5:34pm

Hello,
I start using this card mode to fix an bug with the camera.
All I want is to change the Image in a iframe to 100%.
Default there is no width and height defined.
Can someone help me to find a solution?

KTibow · December 28, 2020, 5:41pm

For security reasons, you can’t go into an iframe. What’s the URL you’re embedding from?

Umbe · December 28, 2020, 6:15pm

well … thanks so much… i would love an explaination to how understand why , but anyway…it worked…

olum · December 28, 2020, 6:17pm

URL reference to the video of the doorbird cam.
But to add it as a camera is no option, it has too much delay.

KTibow · December 28, 2020, 6:21pm

What’s the URL that starts with http://192.168., that’s inside of the img tag?

olum · December 28, 2020, 6:22pm

That is the URL
src=“http://192.168.1.12/bha-api/video.cgi?http-user=###&http-password=###”>

KTibow · December 28, 2020, 6:24pm

Add a picture card, and set the source to that, instead of using the iframe card. Does it work at all?

alnavasa · December 28, 2020, 8:20pm

Lets see if anyone can help me;
I have a simple Graph card that I managed to edit and mod, to get the icon to change colors:

type: horizontal-stack
cards:
  - type: 'custom:mini-graph-card'
    style:
      .icon ha-icon:
        $: |
          ha-svg-icon {
          {% if states('sensor.zzzzzzz_remaining_range_total')|float >= 120%}
            color: white !important;
          {% elif states('sensor.zzzzzz_remaining_range_total')|float >= 50%}
            color: orange !important;
          {% else %}
            color: red !important;
          {% endif %}
          }
    entities:
      - entity: sensor.zzzzzzz_remaining_range_total
    show:
      legend: false
    color_thresholds:
      - value: 250
        color: '#3498DB'
      - value: 150
        color: orange
      - value: 100
        color: red
    name: zzzzz
    line_width: 6
    font_size: 75
    animate: true
    lower_bound: 0
    upper_bound: 750
    hours_to_show: 360
    points_per_hour: 0.1
    icon: 'mdi:gas-station'
  - type: 'custom:mini-graph-card'
    style:
      .icon ha-icon:
        $: >
          ha-svg-icon {

          {% if states('sensor.yyyyyy_remaining_range_total')|float >=
          120%}
            color: white !important;
          {% elif states('sensor.yyyyy_remaining_range_total')|float >=
          50%}
            color: orange !important;
          {% else %}
            color: red !important;
          {% endif %}

          }
    entities:
      - entity: sensor.yyyyy_remaining_range_total
    show:
      legend: false
    color_thresholds:
      - value: 250
        color: '#3498DB'
      - value: 150
        color: orange
      - value: 100
        color: red
    name: yyyyy
    line_width: 6
    font_size: 75
    animate: true
    lower_bound: 0
    upper_bound: 750
    hours_to_show: 360
    points_per_hour: 0.1
    icon: 'mdi:gas-station'
  - type: 'custom:mini-graph-card'
    style:
      .icon ha-icon:
        $: |
          ha-svg-icon {
          {% if states('sensor.xxxx_remaining_range_total')|float >= 120%}
            color: white !important;
          {% elif states('sensor.xxxx_remaining_range_total')|float >= 50%}
            color: orange !important;
          {% else %}
            color: red !important;
          {% endif %}
          }
    entities:
      - entity: sensor.xxxx_remaining_range_total
    show:
      legend: false
    color_thresholds:
      - value: 250
        color: '#3498DB'
      - value: 150
        color: orange
      - value: 100
        color: red
    name: xxxxx
    line_width: 6
    font_size: 75
    animate: true
    lower_bound: 0
    upper_bound: 750
    hours_to_show: 360
    points_per_hour: 0.1
    icon: 'mdi:gas-station'

Up to here, all good.

I am designing a more detailed card for each car, and I would like to have the same behavior on the Fuel Icon, (and also the lock icon coloring),
Could this be easier to be done via templating?
via card styling I have the following with ZERO success.

type: 'custom:stack-in-card'
mode: vertical
keep:
  box_shadow: false
  background: false
cards:
  - type: entities
    entities:
      - type: 'custom:multiple-entity-row'
        style:
          .icon ha-icon:
            $: |
              ha-svg-icon {
              {% if states('sensor.xxxxx_remaining_range_total')|float >= 120%}
                color: white !important;
              {% elif states('sensor.xxxxx_remaining_range_total')|float >= 50%}
                color: orange !important;
              {% else %}
                color: red !important;
              {% endif %}
              }
        entities:
          - entity: sensor.xxxxx_remaining_fuel
            name: Gasolina
          - entity: sensor.xxxxx_remaining_range_total
            name: Autonomía
        entity: sensor.xxxxx_remaining_range_total
        icon: 'mdi:gas-station'
        name: Serie 5
        secondary_info: last-updated
        show_state: false
        state_color: true
        state_header: true
      - type: divider

CSS targeting the ICON itself,

Ildar_Gabdullin · December 28, 2020, 9:47pm

Have you tried to find a solution here for “multiple-entity-row” ?
It was described here a few days ago.

alnavasa · December 28, 2020, 10:12pm

BEST POST EVER! should be in the GitHub sample area. THANKS

Ildar_Gabdullin · December 29, 2020, 12:52am

One more post for beginners - styling Glance card.

Colored text:

code

type: glance
title: Colored text
style: |
  ha-card {
    color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored title:

code

type: glance
title: Colored title
card_mod:
  style:
    $: |
      .card-header {
        color: red  !important;
      }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

stopped working in the end of 2022

Before this change:

type: glance
title: Colored title
style: |
  ha-card .card-header {
    color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored name & value (all entities):

code

type: glance
title: Colored name & value
style: |
  ha-card .entities {
    color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored name & value (1st entity):

code

type: glance
title: Colored name & value (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

Colored name (all entities):

code

type: glance
title: Colored name
style:
  .entities .entity:
    $: |
      .name {
        color: red;
      }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored name (1st entity):

code

type: glance
title: Colored name (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host .name {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

Colored state (all entities):

code

type: glance
title: Colored states
style:
  .entities .entity:
    $: |
      div:not(.name) {
        color: red;
      }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored state (1st entity):

code

type: glance
title: Colored state (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      div:not(.name) {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

Colored icons:
By default for entities like "sensor" (same for "device_tracker", "person", "zone", …) an icon’s color does not depend on the entity’s state.
There are two methods for changing a color:

using a "--paper-item-icon-color" variable;
using a "color" CSS property.

Method #1 (using a "--paper-item-icon-color" variable):
For all entities:

code

type: glance
title: Colored icons
style: |
  ha-card {
    --paper-item-icon-color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

For some entity:

code

type: glance
title: Colored icon (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host {
        --paper-item-icon-color: red;
      }
  - entity: sensor.cleargrass_1_co2

Method #2 (using a "color" CSS property):

code: For all entities

type: glance
card_mod:
  style:
    .entity:
      $: |
        state-badge {
          color: red;
        }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

code: For some entity

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        state-badge {
          color: red;
        }
  - entity: sensor.cleargrass_1_co2

By default for entities like "binary_sensor", "sun.sun", "switch", "input_boolean" - an icon’s color DOES depend on the entity’s state - if the property "state_color: true" is set for the card. If it is set to "false", then the color DOES NOT depend on the state - use same Methods #1, #2 as for the "sensor" (described above).
There are two methods for changing a color:

using "--paper-item-icon-color" and "--paper-item-icon-active-color" variables;
using a "color" CSS property.

Method #1 (using "--paper-item-icon-color" and "--paper-item-icon-active-color" variables):

code

type: glance
state_color: true
style: |
  ha-card {
    --paper-item-icon-color: red;
    --paper-item-icon-active-color: cyan;
  }
entities:
  - entity: binary_sensor.service_on_value
  - entity: binary_sensor.iiyama_2_ping_availability_status

Method #2 (using a "color" CSS property) - identical to the Method #2 described for the "sensor" entity above.

How to implement conditional color dependently on state for "binary_sensor" using Method #2 (may be used for "sun.sun" & others too with some corrections):

code

type: glance
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity,'on') %}
            color: red;
          {% else %}
            color: blue;
          {% endif %}
        }

Wrapped text (all entities):

code

type: glance
title: Wrapped text
style:
  .entities .entity:
    $: |
      .name {
        text-overflow: unset !important;
        white-space: unset !important;
      }
entities:
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped

Wrapped text (1st entity):

code

type: glance
title: Wrapped text (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped
    style: |
      .name {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: sensor.cleargrass_1_co2
    name: Not wrapped Not wrapped Not wrapped Not wrapped

+some alignment:

code

type: glance
title: Wrapped text (1st entity) + aligned
card_mod:
  style: |
    .entities {
      align-items: end !important;
    }
entities:
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped
    style: |
      .name {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: sensor.cleargrass_1_co2
    name: Not wrapped Not wrapped Not wrapped Not wrapped

Wrapped values (all entities):

code

type: glance
title: Wrapped values
style:
  .entities .entity:
    $: |
      div:not(.name) {
        text-overflow: unset !important;
        white-space: unset !important;
      }
entities:
  - entity: input_text.test_text
    name: Wrapped
  - entity: input_text.test_text
    name: Wrapped

Wrapped value (1st entity):

code

type: glance
title: Wrapped value (1st entity)
entities:
  - entity: input_text.test_text
    name: Wrapped
    style: |
      div:not(.name) {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: input_text.test_text
    name: Not wrapped

+some alignment:

code

type: glance
title: Wrapped value (1st entity) + aligned
card_mod:
  style: |
    .entities {
      align-items: start !important;
    }
entities:
  - entity: input_text.test_text
    name: Wrapped
    style: |
      div:not(.name) {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: input_text.test_text
    name: Not wrapped

Resizing icons:
For the whole card:

code

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2
style: |
  ha-card {
    --mdc-icon-size: 60px;
  }

For some row:

code

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host {
        --mdc-icon-size: 60px;
      }
  - entity: sensor.cleargrass_1_co2

Changing font-size:

code

type: vertical-stack
title: font-size
cards:
  - type: glance
    style:
      .entities .entity:
        $: |
          .name {
            font-size: 20px;
          }
    entities:
      - entity: sensor.cleargrass_1_co2
        name: Changed font
      - entity: sensor.cleargrass_1_co2
        name: Changed font
  - type: glance
    entities:
      - entity: sensor.cleargrass_1_co2
      - entity: sensor.cleargrass_1_co2
        name: Changed font
        style: |
          :host .name {
            font-size: 20px;
          }
  - type: glance
    style:
      .entities .entity:
        $: |
          div:not(.name) {
            font-size: 20px;
          }
    entities:
      - entity: sensor.cleargrass_1_co2
        name: Changed font
      - entity: sensor.cleargrass_1_co2
        name: Changed font
  - type: glance
    entities:
      - entity: sensor.cleargrass_1_co2
        name: Changed font
        style: |
          div:not(.name) {
            font-size: 20px;
          }
      - entity: sensor.cleargrass_1_co2

Make a square entity_picture:

code

type: glance
entities:
  - entity: person.ildar
    card_mod:
      style: |
        state-badge {
          border-radius: 10%;
        }

Math operations, replacing a value:
post

More examples are described here.