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

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

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.

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

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

Unfortunately it doesn’t work. I ave feeling I checked all possible combinations :wink:
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?

try :

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

                              }    

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)

Try this:

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

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

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?

image

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

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

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

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

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

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

1 Like

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,

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

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

1 Like

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

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:
image

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

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

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:
image

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:
image

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

Math operations, replacing a value:
post

image


More examples are described here.

6 Likes