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

SebastianMtl · March 31, 2021, 7:44pm

I have tested this :

type: entities
entities:
  - entity: switch.vocolinc_vp5_1096ca_humidifier
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if is_state('switch.vocolinc_vp5_1096ca_humidifier', 'on') %}
            green
            @keyframes spin {
            from {
            transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
          {% elif is_state('switch.vocolinc_vp5_1096ca_humidifier', 'off') %}
            orange
          {% endif %}
        }

I have some skills in CSS but I’m lost with css selector here

Ildar_Gabdullin · March 31, 2021, 8:14pm

Try using this:

type: entities
entities:
  - entity: sensor.cleargrass_1_co2
    icon: 'mdi:fan'
    name: Xiaomi breather CO2
style:
  hui-sensor-entity-row:
    $:
      hui-generic-entity-row:
        $:
          state-badge:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                    color: orange;
                    animation: rotation 0.5s linear infinite;
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }

The result similar to this:

If you will not achieve what you want - let me know.

Ildar_Gabdullin · March 31, 2021, 8:16pm

Hi Marius, I have seen your post and even tried to find a way.
So far with no success((.
I will keep looking.

phairplay · March 31, 2021, 9:31pm

Hi,
could someone please help me.

I’m trying to reduce the padding on the h1.card-header for the below but I don’t understand why it’s not working

here is the style code I’m using which I’ve used on other cards

style: |
  h1.card-header {
    padding-top: 2px;
    padding-right: 16px;
    padding-bottom: 1px;
    padding-left: 16px;
  }

where do i place it on the above lovelace card as I can’t seem to figure it out

type: horizontal-stack
title: Phair-Sever
cards:
  - type: 'custom:mini-graph-card'
    hours_to_show: 12
    points_per_hour: 2
    animate: true
    hour24: true
    height: 150
    entities:
      - sensor.phair_server_cpu_usage
    state_adaptive_color: true
    show_state: true
    name: CPU
    line_color: '#00ff26'
    line_width: 7
    color_thresholds:
      - value: 20
        color: '#00ff26'
      - value: 50
        color: '#ddff00'
      - value: 60
        color: '#ff8c00'
      - value: 80
        color: '#ff5900'
      - value: 90
        color: '#ff0000'
    show:
      extrema: true
      name_adaptive_color: true
      icon_adaptive_color: true
  - type: 'custom:mini-graph-card'
    hours_to_show: 12
    points_per_hour: 2
    animate: true
    hour24: true
    height: 150
    entities:
      - sensor.phair_server_system_temperature
    state_adaptive_color: true
    show_state: true
    name: TEMP
    line_color: '#00ff26'
    line_width: 7
    color_thresholds:
      - value: 20
        color: '#00ff26'
      - value: 50
        color: '#ddff00'
      - value: 60
        color: '#ff8c00'
      - value: 80
        color: '#ff5900'
      - value: 90
        color: '#ff0000'
    show:
      extrema: true
      name_adaptive_color: true
      icon_adaptive_color: true
  - type: 'custom:mini-graph-card'
    hours_to_show: 12
    points_per_hour: 2
    animate: true
    hour24: true
    height: 150
    entities:
      - sensor.phair_server_memory_usage
    state_adaptive_color: true
    show_state: true
    name: RAM
    line_color: '#00ff26'
    line_width: 7
    color_thresholds:
      - value: 20
        color: '#00ff26'
      - value: 50
        color: '#ddff00'
      - value: 60
        color: '#ff8c00'
      - value: 80
        color: '#ff5900'
      - value: 90
        color: '#ff0000'
    show:
      extrema: true
      name_adaptive_color: true
      icon_adaptive_color: true

KTibow · March 31, 2021, 10:17pm

Why is it in a stack-in card? Anyway, add it to the mini-graph-cards.

jmoneo · March 31, 2021, 11:40pm

Hi all,

I’m trying to reduce the line height and icon width of an input_select entity.
I want to use the code I found in this post:

However, I’m really new to css and can’t get it to work. I have tried inspecting those fields, but I’m still lost.

This is what I have right now:

  - type: entities
    entities: 
      - entity: input_select.test
        card_mod:
          style:
            ha-paper-dropdown-menu:
              $:
                paper-input:
                  $:
                    paper-input-container: |
                      div.floated-label-placeholder {
                         line-height: 0px;
                      }
            hui-entities-card$hui-input-select-entity-row$: |
              state-badge {
                width: 0px;
              }

If anyone could help me out that’d be great! Thank you!

SebastianMtl · April 1, 2021, 12:27am

I have this message:

So this is my code , if you can save me

KTibow · April 1, 2021, 1:59am

That is not an error. It’s just because the HA validator wasn’t made to account for custom properties. You should be using card_mod 3.0 syntax, though.

SebastianMtl · April 1, 2021, 2:11am

Can you tell me more about how using this syntax?
Because when I try like this, it not working anymore

KTibow · April 1, 2021, 2:12am

Like what?

SebastianMtl · April 1, 2021, 2:24am

You tell me to use this syntax, but when I read the documentation, is that I do.
Maybe I think it’s my Vs code who dont understand this.

KTibow · April 1, 2021, 2:25am

The translator isn’t working that well. Yes, it is VS Code that doesn’t understand card-mod’s syntax.

Mariusthvdb · April 1, 2021, 7:06am

ok cool, but don’t waste your time on it…
I’ve also asked RomRider if he would accept a FR on some of his cards, stack-in-card in this case to enable this feature. For now, it’ll have to be what it is…

never mind the edit, I used text-color because I was afraid using color would also color the icons, but it doesn’t

Using the lovely Somfy Orange…

      .header-footer.footer {
          --mdc-icon-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          font-size: 20px;
          color: orange;
          }

CDRX2 · April 1, 2021, 9:32am

Just tried the following and it worked:

type: 'custom:mod-card'
card:
  cards:
    ...
  type: vertical-stack
card_mod:
  style: |
    ha-card {
      background: var(--paper-card-background-color) !important;
    }

Ildar_Gabdullin · April 1, 2021, 9:47am

This is great )))
Will it work with custom:stack-in-card ?
Have not checked it by myself

CDRX2 · April 1, 2021, 10:00am

I think it should, but I don’t have a setup to test that right now (changing my current vertical-stack to stack-in-card automatically adds a background, without using mod-card…

Mariusthvdb · April 1, 2021, 10:01am

it does:

  - type: entities
#    header:
#      type: picture
#      image: /local/images/vijver.png
    entities:
#      - type: custom:hui-element
#        card_type: picture
#        image: /local/images/vijver.jpg
#        style: |
#          ha-card {
#            box-shadow: none;
#            margin: -16px -16px 0px -16px;
#          }
      - type: custom:hui-element
        card_type: custom:mod-card
        card_mod:
          style: |
            ha-card {
              background: url('/local/images/vijver.jpg');
              margin: -16px -16px 0px -16px;
              background-size: cover;
              }
        card:
          type: horizontal-stack
          cards:

            - type: custom:button-card
              template: button_switch
              entity: switch.vijverpomp_links
              triggers_update: sensor.vijverpomp_links_actueel
              name: Pomp left

            - type: custom:button-card
              template: button_switch
              entity: switch.vijverpomp_rechts
              triggers_update: sensor.vijverpomp_rechts_actueel
              name: Pomp right

            - type: custom:button-card
              color_type: blank-card

            - type: custom:button-card
              color_type: blank-card

      - entity: input_boolean.vijverpompen_alterneren
        secondary_info: last-changed
      - entity: binary_sensor.vijverpompen
        secondary_info: last-changed
      - entity: sensor.vijverpompen
        secondary_info: last-changed
      - entity: sensor.pond_buiten_sensor_calibrated_temperature
        name: Temperature Pond

need to fine-tune a bit still but hey, this is awesome!
my first ever mod-card

Ildar_Gabdullin · April 1, 2021, 10:18am

Styling an "input_select" row.

Update (21.06.22): the post is updated with styles for MDC controls; old styles (see at the bottom of the post) do not work since 2022.3.

Colored name:
Two methods are available:
– using a CSS property with a detailed DOM navigation;
– using a CSS variable.

is8

Notes:

The 1st method - allows to change a color permanently (whether the input field is selected or not).
The 2nd method - the name’s color changes if an input field is selected (from “--mdc-select-label-ink-color” to “--mdc-theme-primary”).

code

      - type: entities
        title: Colored name
        entities:
          - entity: input_select.test_value
            name: сustom (method 1)
            card_mod:
              style:
                ha-select $: |
                  span#label {
                    color: red;
                  }
          - entity: input_select.test_value
            name: сustom (method 2)
            card_mod:
              style:
                ha-select $: |
                  span#label {
                    --mdc-select-label-ink-color: magenta;
                    --mdc-theme-primary: orange;
                  }
          - entity: input_select.test_value
            name: default

How to style several rows:
is7

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        title: Colored name for all entities
        card_mod:
          style:
            .card-content:
              div:
                hui-input-select-entity-row $ hui-generic-entity-row ha-select $: |
                  span#label {
                    --mdc-select-label-ink-color: magenta;
                    --mdc-theme-primary: orange;
                  }
        entities:
          - entity: input_select.test_value
            name: Cannot be overwritten
            card_mod:
              style: |
                :host {
                  --mdc-select-label-ink-color: cyan;
                  --mdc-theme-primary: green;
                }
          - entity: input_select.test_value
            name: Overwritten style
            card_mod:
              style:
                ha-select $: |
                  span#label {
                    color: red;
                  }
          - entity: input_select.test_value
            name: Colored name (common)
          - entity: input_select.test_value
            name: Colored name (common)

Colored icon:
Two methods are available:
– using a CSS variable;
– using a CSS property with a detailed DOM navigation.

code

      - type: entities
        title: Colored icon for some entity
        entities:
          - entity: input_select.test_value
            name: 'Colored icon (method #1)'
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - entity: input_select.test_value
            name: 'Colored icon (method #2)'
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    color: red;
                  }      
          - entity: input_select.test_value
            name: default

How to style several rows:

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        title: Colored icon for all entities
        card_mod:
          style: |
            ha-card {
              --paper-item-icon-color: cyan;
            }
        entities:
          - entity: input_select.test_value
            name: Overwritten color
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - entity: input_select.test_value
            name: Colored icon (common)
          - entity: input_select.test_value
            name: Colored icon (common)

Some other styles for an icon - resized icon, hidden icon:

code

      - type: entities
        title: Other styles for icon
        entities:
          - entity: input_select.test_value
            name: resized icon
            card_mod:
              style: |
                :host {
                  --mdc-icon-size: 40px;
                }
          - entity: input_select.test_value
            name: hidden icon
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    display: none;
                  }

Colored value:
Two methods are available:
– using a CSS property with a detailed DOM navigation;
– using a CSS variable.

code

      - type: entities
        title: Colored value
        entities:
          - entity: input_select.test_value
            name: colored value (method 1)
            card_mod:
              style:
                ha-select $: |
                  span.mdc-select__selected-text {
                    color: red !important;
                  }
          - entity: input_select.test_value
            name: colored value (method 2)
            card_mod:
              style: |
                :host {
                  --mdc-select-ink-color: orange;
                }
          - entity: input_select.test_value
            name: default

Colored field’s background:

code

      - type: entities
        title: Colored background
        entities:
          - entity: input_select.test_value
            name: colored background
            card_mod:
              style: |
                :host {
                  --mdc-select-fill-color: lightgreen;
                }
          - entity: input_select.test_value
            name: default

Colored underline:
The underline had 3 possible states:
– a default (static) state;
– the input field is hovered by a mouse;
– the input field is selected by a mouse.

There are CSS variables for each state.
In the example below:
– the 1st row is modded by using these CSS variables;
– the 2nd row is modded by changing CSS properties with a detailed DOM navigation;
– the 3rd row has transparent underlines.

is2

code

      - type: entities
        title: Colored underline
        entities:
          - entity: input_select.test_value
            name: colored underline (method 1)
            card_mod:
              style: |
                :host {
                  --mdc-select-idle-line-color: orange;
                  --mdc-select-hover-line-color: cyan;
                  --mdc-theme-primary: magenta;
                }
          - entity: input_select.test_value
            name: colored underline (method 2)
            card_mod:
              style:
                ha-select $: |
                  .mdc-line-ripple::before {
                    border-bottom-color: orange !important;
                  }
                  .mdc-line-ripple::after {
                    border-bottom-color: magenta !important;
                  }
          - entity: input_select.test_value
            name: no underline
            card_mod:
              style:
                ha-select $: |
                  .mdc-line-ripple::before,
                  .mdc-line-ripple::after {
                    border-bottom-style: none !important;
                  }
          - entity: input_select.test_value
            name: default

Colored button:
is1

code

      - type: entities
        title: Colored button
        entities:
          - entity: input_select.test_value
            name: colored button
            card_mod:
              style:
                ha-select $: |
                  .mdc-select__dropdown-icon {
                    --mdc-select-dropdown-icon-color: red;
                    --mdc-theme-primary: cyan;
                  }
          - entity: input_select.test_value
            name: default

Managing list’s & items’ height:
is3

code

  - type: entities
    title: Styling a list
    entities:
      - entity: input_select.test_value
        name: item's height
        card_mod:
          style: |
            :host {
              --mdc-menu-item-height: 16px;
            }
      - entity: input_select.test_value
        name: list's height
        card_mod:
          style:
            ha-select $ mwc-menu $: |
              mwc-list {
                max-height: 96px;
              }
      - entity: input_select.test_value
        name: default

Managing list’s & items’ color:
is4

code

  - type: entities
    title: Colored list's items
    entities:
      - entity: input_select.test_value
        name: colored all items (selected item - differenly) + background
        card_mod:
          style:
            ha-select $: |
              mwc-menu {
                --mdc-theme-text-primary-on-background: red;
                --mdc-theme-primary: green;
                --mdc-theme-surface: yellow;
              }
      - entity: input_select.test_value
        name: colored all items (same color)
        card_mod:
          style: |
            mwc-list-item {
              color: red;
            }
      - entity: input_select.test_value
        name: colored all items (selected item - differenly)
        card_mod:
          style: |
            mwc-list-item {
              --mdc-theme-text-primary-on-background: red;
              --mdc-theme-primary: green;
            }
      - entity: input_select.test_value
        name: colored 2nd item
        card_mod:
          style: |
            mwc-list-item:nth-of-type(2) {
              color: red;
            }
      - entity: input_select.test_value
        name: default

Making the name hidden or more compact:
Since the row has a bigger height than other entity rows, we may want to make a row more compact.
First, we need to customize the row’s height.
Next, there are 2 options for a name & a value:
– remove the name;
– place the name and the value closer to each other.

code

  - type: entities
    title: Hidden/compact name
    entities:
      - entity: input_select.test_value
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: center;
              }
              span#label {
                display: none;
              }
            .: |
              ha-select {
                height: 40px;
              }
      - entity: input_select.test_value
        name: custom
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
            .: |
              ha-select {
                height: 40px;
              }
      - entity: input_select.test_value
        name: default

How to disable an input_select row:
Two methods are available:
– the row is displayed as disabled;
– the row only has a read-only input field.

code

  - type: entities
    title: Locked input_select
    entities:
      - entity: input_boolean.test_boolean
        name: Lock input_select
      - entity: input_select.test_value
        name: disabled
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                --mdc-select-ink-color: var(--disabled-text-color);
                --mdc-select-label-ink-color: var(--disabled-text-color);
                --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                --mdc-select-idle-line-color: var(--disabled-text-color);
                --paper-item-icon-color: var(--disabled-text-color);
                pointer-events: none;
              {% endif %}
            }
      - entity: input_select.test_value
        name: read-only
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                pointer-events: none;
              {% endif %}
            }

Fixing a left padding:
Check the difference between the 2nd row (default) & the 3rd row (styled):

code

  - type: entities
    title: left padding
    entities:
      - entity: sun.sun
      - entity: input_select.test_value
      - entity: input_select.test_value
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                padding-inline: 16px 0px !important;
              }
              .mdc-select__anchor span#label {
                inset-inline-start: 16px;
              }

Short list of CSS variables available for “select” control:

Old styles - not valid since HA 2022.3

Styling a button:

type: entities
title: colored button
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input: |
                iron-icon {
                  color: red;
                }

Colored value:

type: entities
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input:
                $:
                  paper-input-container: |
                    iron-input {
                      color: red;
                    }

Colored items in the list:
Same colors for all items:

type: entities
title: All items
entities:
  - entity: input_select.test_sensors_for_graph
    style: |
      :host {
        --paper-listbox-background-color: yellow;
        --paper-listbox-color: green;
      }

Specific colors for some items:

type: entities
title: Different colors
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        paper-listbox: |
          paper-item:nth-child(2) {
            background-color: cyan;
            color: red;
          }
          paper-item:nth-child(4) {
            background-color: blue;
            color: white;
          }
      .: |
        :host {
          --paper-listbox-background-color: yellow;
          --paper-listbox-color: green;
        }

Colored label & underline:
These elements change their colors when focused.
Label & underline:

type: entities
title: label & underline
entities:
  - entity: input_select.test_sensors_for_graph
    style: |
      :host {
        --paper-input-container-focus-color: red;
        --paper-input-container-color: orange;
      }

Only label:

type: entities
title: label
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input:
                $:
                  paper-input-container: |
                    label {
                      --paper-input-container-focus-color: red;
                      --paper-input-container-color: orange;
                    }

Only underline:

type: entities
title: underline
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input:
                $:
                  paper-input-container:
                    $: |
                      .underline {
                        --paper-input-container-focus-color: red;
                        --paper-input-container-color: orange;
                      }

Hidden label:

type: entities
entities:
  - entity: input_select.test_sensors_for_graph
    style:
      ha-paper-dropdown-menu:
        $:
          paper-menu-button:
            .dropdown-trigger:
              paper-input:
                $:
                  paper-input-container:
                    $: |
                      .floated-label-placeholder {
                        height: 0px;
                      }
                    .: |
                      label {
                        display: none;
                      }

Reduced item’s height:

type: entities
title: Item's height
entities:
  - entity: input_select.test_sensors_for_graph
    card_mod:
      style: |
        :host {
          --paper-font-subhead_-_line-height: 30px;
          --paper-item-min-height: 20px;
        }

How to add a scrollbar to the list:
post

How to disable a control:

type: entities
title: Locked input_select
entities:
  - entity: input_boolean.test_boolean
    name: Lock input_select
  - entity: input_select.test_value
    tap_action:
      action: none
    card_mod:
      style:
        ha-paper-dropdown-menu:
          $:
            paper-menu-button:
              .dropdown-trigger:
                paper-input:
                  $:
                    paper-input-container: |
                      iron-input {
                        {% if is_state('input_boolean.test_boolean','on') %}
                          color: var(--disabled-text-color);
                        {% endif %}
                      }
        .: |
          :host {
            {% if is_state('input_boolean.test_boolean','on') %}
              --paper-item-icon-color: var(--disabled-text-color);
              --paper-input-container-color: var(--disabled-text-color);
              pointer-events: none;
            {% endif %}
          }

Also, you may remove color options to make the row clearly visible but “read-only”.

More examples are described here.

Ildar_Gabdullin · April 1, 2021, 10:51am

Check this post, may be you will find something useful.

ASNNetworks · April 1, 2021, 10:55am

Yes, mod-card should work with all cards that have no ha-card. I use it for stack-in-card myself as well. The usage is explained here: https://github.com/thomasloven/lovelace-card-mod#styling-cards-without-an-ha-card-element