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

[Umbe (Umberto)]

try :

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

                              }    

[maxym]

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 (Kendell R)]

@maxym

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

Try this:

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

[KTibow (Kendell R)]

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

[olum]

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 (Kendell R)]

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

[Umbe (Umberto)]

@KTibow

padding: 5px !important;

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

[olum]

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 (Kendell R)]

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

[olum]

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

[KTibow (Kendell R)]

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

[alnavasa (A)]

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]

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

[alnavasa (A)]

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

[Ildar_Gabdullin]

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.

[maxym]

Unfortunately, not even after fixing syntax error you made
But at the end I’ve made it after lot of trial&errors

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

Still however don’t understand why it doesn’t work this way:

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

IMO it should. since layout-card is child of ha-card (and ha-card alone is accessible), see the DOM tree:

Anyway, this little success led me to final solution:

style:
  layout-card:
    $: |
      div#columns {margin: 15px !important}
      div.column {overflow-x: visible !important}

[KTibow (Kendell R)]

@maxym

Still however don’t understand why it doesn’t work this way:

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

Because card-mod was designed with a different syntax.

[Macke]

How can I change the font size of the “secondary info”? Tried for hours now without any luck.

  - cards:
      - card:
          type: entities
          style: |
            ha-card {
                 border-radius: 0px;
                 border: solid 0px rgba(255, 255, 255, 0.15);
                 font-size: 20px;
                 font-weight: bold;
                 background-color: rgba(207, 212, 199, 0.1);           
               } 
        filter:
          include:
            - entity_id: '*rorelselarm*'
              options:
                secondary_info: last-changed
            - entity_id: '*motion*'
              options:
                secondary_info: last-changed
        sort:
          count: 10
          method: last_changed
        type: 'custom:auto-entities'
    type: horizontal-stack

[Ildar_Gabdullin]

Try searching here.

Card-mod - Add css styles to any lovelace card

How to change a font-size for Entities card: [image] type: entities title: Size for title card_mod: style: | ha-card .card-header { font-size: 35px; color: red; } entities: - entity: sun.sun name: Standard size secondary_info: last-changed - entity: sun.sun name: Size for whole row secondary_info: last-changed card_mod: style: | :host { font-size: 25px; color: red; } - entity: sun.sun name: Size for …

To change a style for all secondary_info’s - use this:

Card-mod - Add css styles to any lovelace card

Styling Entities card. (including some special row elements - button, section, divider) NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). Colored background & rounded corners - can be easily achieved by using "--ha-card-background" & "--ha-card-border-radius" variables: [image] type: entities title: Title entities: - entity: sun.sun style: | ha-card { --ha-card-background: orange; --ha-card-border-radius: 14px; } Using background image: T…

[Macke]

Many many thanx…worked perfectly!!