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

[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!!

[olum]

Thank you for that hint. Sometimes it is too easy.

[alnavasa (A)]

Great post again, what about changing the padding/margin above and below an icon on this glances card?

[Ildar_Gabdullin]

@alnavasa

changing the padding/margin above and below an icon on this glances card

This is a margin.

Removing margin:

type: horizontal-stack
cards:
  - type: glance
    title: Margin
    entities:
      - entity: sun.sun
      - entity: sun.sun
  - type: glance
    title: No margin
    style:
      .entities .entity:
        $: |
          state-badge {
            margin-top: 0px;
            margin-bottom: 0px;
          }
    entities:
      - entity: sun.sun
      - entity: sun.sun

[alnavasa (A)]

I really need to learn this things! THANKS AGAIN!

[fra (francesco)]

Hi at all!
Could i use only Card-mod to hide the three vertical dot on the upper right corner on my HA dashboard??
(i wanna hide the vertical menu with customize and help links on the right)

thanks a lot.

[KTibow (Kendell R)]

Sure. Do you have themes set up?

[fra (francesco)]

Yes, i’ve a dark theme installed.

frontend:
  themes: !include_dir_merge_named themes/

Please, could you point me to the right direction to solve??

Thanks a lot.

[KTibow (Kendell R)]

Post your dark theme’s YAML file, I’ll edit it, paste it back in, restart HA, and it should be gone.

[fra (francesco)]

This is my theme.
Thanks a lot.

noctis:  

  # Fonts
  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # Text
  text-color: '#ffffff' 
  primary-text-color: 'var(--text-color)'
  text-primary-color: 'var(--text-color)'
  secondary-text-color: "#BAC0C6"
  text-medium-light-color: '#A0A2A8'
  text-medium-color: '#80828A'
  disabled-text-color: '#626569'
  primary-color: 'var(--accent-color)'
  
  # Main Colors
  app-header-background-color: '#242e42'
  accent-color: '#1A89F5'
  accent-medium-color: 'var(--accent-color)'

  # Background
  background-color: '#242e42'
  primary-background-color: 'var(--background-color)'
  background-color-2: '#20293c' 
  secondary-background-color: 'none'
  markdown-code-background-color: 'var(--background-color)'
  
  # Card
  card-background-color: 'var(--ha-card-background)'
  ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
  ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
  ha-card-border-radius: "5px"
  border-color: 'none'

  # Icons
  paper-item-icon-color: '#EBEBEB'
  paper-item-icon-active-color: 'var(--accent-color)'
  
  # Sidebar
  sidebar-background-color: 'var(--background-color)'
  sidebar-icon-color: '#98a7b9'
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--text-color)'
  paper-listbox-background-color: 'var(--sidebar-background-color)'
  divider-color: 'var(--background-color)'
  light-primary-color: 'var(--ha-card-background)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--background-color-2)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'var(--background-color-2)'

  # Toggle:
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  mdc-theme-primary: 'var(--accent-color)'

  # Switch
  switch-unchecked-color: '#70889e'
  switch-checked-button-color: 'var(--accent-color)'
  switch-unchecked-track-color: 'var(--background-color-2)'
  switch-checked-track-color: 'var(--background-color-2)'

  # Radio Button
  paper-radio-button-checked-color: 'var(--accent-color)'

  # Popups
  more-info-header-background: 'var(--secondary-background-color)'
  paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'

  # Tables
  table-row-background-color: 'var(--background-color)'
  table-row-alternative-background-color: 'var(--ha-card-background)'

  # Badges
  label-badge-background-color: 'var(--background-color)'
  label-badge-text-color: 'var(--text-primary-color)'
  label-badge-red: 'rgba(73,85,108,1)'
  label-badge-blue: 'rgba(26,137,245,1)'
  label-badge-green: 'rgba(0,202,139,1)'
  label-badge-yellow: 'rgba(222,176,107,1)'

  paper-input-container-focus-color: 'var(--accent-color)'
  
  # Custom Header
  ch-background: 'var(--background-color)'
  ch-active-tab-color: 'var(--accent-color)'
  ch-notification-dot-color: 'var(--accent-color)'
  ch-all-tabs-color: 'var(--sidebar-icon-color)'
  ch-tab-indicator-color: 'var(--accent-color)'

  # Mini Mediaplayer
  mini-media-player-base-color: 'var(--text-color)'
  mini-media-player-accent-color: 'var(--accent-color)'