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

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

Unfortunately, not even after fixing syntax error you made :wink:
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}

Because card-mod was designed with a different syntax.

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

Try searching here.


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

Many many thanx…worked perfectly!!

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

Great post again, what about 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
1 Like

I really need to learn this things! THANKS AGAIN!

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.

Sure. Do you have themes set up?

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.

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

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