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

Share your Projects! Dashboards & Frontend
2366

Styling hui-element card:

This post is about using hui-element card to represent a row inside an Entities card:

  • section
  • sensor-entity
  • number-entity (slider or box)
  • toggle-entity
  • input-select-entity
  • input-text-entity
  • weather-entity
  • buttons
  • conditional row

Here they are (updated 04.03.22 for “chips” buttons and new HA2022.3 design):

изображение
изображение501×588 20.1 KB

Code for the card 
type: entities
entities:
  - type: custom:hui-element
    row_type: section
    label: section
  - type: custom:hui-element
    row_type: sensor-entity
    entity: input_number.test_number
    name: sensor-entity
  - type: custom:hui-element
    row_type: number-entity
    entity: input_number.test_number
    name: number-entity (slider)
  - type: custom:hui-element
    row_type: number-entity
    entity: input_number.test_number_2
    name: number-entity (box)
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: toggle-entity
  - type: custom:hui-element
    row_type: input-select-entity
    entity: input_select.test_value
    name: input-select-entity
  - type: custom:hui-element
    row_type: input-text-entity
    entity: input_text.test_text
    name: input-text-entity
  - type: custom:hui-element
    row_type: weather-entity
    entity: weather.home_met
    name: weather-entity
  - type: custom:hui-element
    row_type: buttons
    entities:
      - entity: sun.sun
        show_name: true
      - entity: sun.sun
        show_name: true
      - entity: sun.sun
        show_name: true
  - type: custom:hui-element
    row_type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    row:
      entity: sun.sun
      name: conditional
Why using "hui-element" for rows is very useful? Look at some examples if you do not know yet.
  1. Using a slider or a toggle row inside Picture elements card.
  2. Using section row inside stack-in-card to separate areas.
  3. Making a decluttering template for any row with predefined options & styling.

There are 4 methods of styling hui-element rows:

  1. Using :host - to style a particular row.
  2. Using long DOM navigation - to style a particular row.
  3. Using long DOM navigation from the parent Entities card or Picture elements card level - to style a particular row or all rows.
  4. Using long DOM navigation from the parent mod-card level - to style a row inside a decluttering template.

Using :host - to style a particular row:
Note: the hui-element card is a kind of transparent element - all styles go “directly to the row”.

type: entities
entities:
  - type: custom:hui-element
    row_type: sensor-entity
    entity: sun.sun
    name: Colored row
    card_mod:
      style: |
        :host {
          color: red;
        }
  - type: custom:hui-element
    row_type: section
    label: section
    card_mod:
      style: |
        :host {
          --divider-color: magenta;
        }
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: Colored toggle
    card_mod:
      style: |
        :host {
          --switch-unchecked-button-color: yellow;
          --switch-checked-button-color: red;
        }

image

Using long DOM navigation - to style a particular row:
Note: the hui-element card is a kind of transparent element - all styles go “directly to the row”.

type: entities
entities:
  - type: custom:hui-element
    row_type: sensor-entity
    entity: sun.sun
    name: Colored name
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info {
              color: red;
            }
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: Colored toggle
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch .mdc-switch__track {
                    background-color: yellow !important;
                    border-color: red !important;
                  }
  - type: custom:hui-element
    row_type: section
    label: section
    card_mod:
      style: |
        .divider {
          background-color: cyan !important;
        }
  - type: custom:hui-element
    row_type: number-entity
    entity: input_number.test_number
    name: Colored state
    card_mod:
      style: |
        hui-generic-entity-row .flex .state {
          color: magenta;
        }

изображение

Using long DOM navigation from the parent Entities card or Picture elements card level - to style a particular row or all rows:

Section:

type: entities
entities:
  - entity: sun.sun
  - type: custom:hui-element
    row_type: section
    label: section
  - entity: sun.sun
  - entity: sun.sun
  - type: custom:hui-element
    row_type: section
    label: section
  - entity: sun.sun
  - entity: sun.sun
card_mod:
  style:
    .card-content hui-element:
      $: |
        .divider {
          background-color: cyan !important;
        }

image

Sensor:

type: entities
entities:
  - type: custom:hui-element
    row_type: sensor-entity
    entity: sun.sun
    name: Colored name
  - type: custom:hui-element
    row_type: sensor-entity
    entity: sun.sun
    name: Colored name
  - type: custom:hui-element
    row_type: sensor-entity
    entity: sun.sun
    name: Colored name
card_mod:
  style:
    .card-content hui-element:
      $:
        hui-generic-entity-row:
          $: |
            .info {
              color: red;
            }

image

Toggle:

type: entities
entities:
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean
    name: Colored toggle
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean_2
    name: Colored toggle
  - type: custom:hui-element
    row_type: toggle-entity
    entity: input_boolean.test_boolean_3
    name: Colored toggle
card_mod:
  style:
    .card-content hui-element:
      $:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch .mdc-switch__track {
                    background-color: yellow !important;
                    border-color: red !important;
                  }

image

Using long DOM navigation from the parent mod-card level - to style a row inside a decluttering template:

Slider:
Template:

decl_entity_row__slider_xxx:
  card:
    type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: number-entity
      entity: '[[SENSOR]]'
      name: '[[VALUE_NAME]]'
    card_mod:
      style:
        hui-element:
          $: |
            hui-generic-entity-row {
              color: [[VALUE_COLOR_TEXT]];
              --paper-item-icon-color: [[VALUE_COLOR_ICON]];
            }

Using the template:

type: entities
entities:
  - type: custom:decluttering-card
    template: decl_entity_row__slider_xxx
    variables:
      - SENSOR: input_number.test_number
      - VALUE_NAME: "cyan name, magenta icon"
      - VALUE_COLOR_TEXT: cyan
      - VALUE_COLOR_ICON: magenta

изображение

Input-select:
Template:

  decl_entity_row__input_select_xxx:
    card:
      type: custom:mod-card
      card:
        type: custom:hui-element
        row_type: input-select-entity
        entity: '[[INPUT_SELECT]]'
        name: '[[VALUE_NAME]]'
      card_mod:
        style:
          hui-element:
            $:
              hui-generic-entity-row:
                $: |
                  state-badge {
                    color: '[[VALUE_COLOR]]';
                  }

Using the template:

type: entities
entities:
  - type: custom:decluttering-card
    template: decl_entity_row__input_select_xxx
    variables:
      - INPUT_SELECT: input_select.test_value
      - VALUE_NAME: xxxxxx
      - VALUE_COLOR: magenta

изображение

More examples are described here.

4 Likes
2367

Hello,

Anyone could tell me if it is possible to apply a conical gradient to a mdi:checkbox-blank-circle icon ?
Need to represent a “multicolor” button.

Thanks !

2368

Hello,
I have a some question, maybe there I can found a solution.
Firstly, sorry for my english. I home you can understand me.

Im using my own frontend theme, but with frontend update since 2021.11 I got some problem with view of elements.
Seems like more-info dialogs and select menu updated and uses same color source (–mdc-theme-surface).
On my screenshow I show where I have problems.
I just want to leave black transparent color on more-info and browser-mod-popup background (rgba(26,26,26,0.5)), but I want to change color of selection menu in actions/condition of automations and automation menu in automation list.
But if I change --mdc-theme-surface, color change applies for all this elements (including background color of more info, what i dont want to do).

Please, help me, is it possible use card-mod to change mdc-select background color, but leave black background color of dialogs?

issue
issue1920×845 111 KB

2369

--paper-item-icon-color seems to stopped working since HA 2021.11.

Other things still work on the same element (entity icon):

                :host {
                  --paper-item-icon-color: red; # NOT WORKING ANYMORE
                  --mdc-icon-size: 40px; # still working
                }
2370

image
image953×270 8.02 KB

2371

How to disable a toggle button:
asdfre

type: entities
title: Disabled checkbox
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
    name: disabled
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch .mdc-switch__thumb input {
                    pointer-events: none;
                  }
                .: |
                  ha-switch {
                    --switch-unchecked-button-color: var(--disabled-text-color);
                    --switch-checked-button-color: var(--disabled-text-color);
                  }
  - entity: input_boolean.test_boolean
    name: normal

Also, you can “grey” all row’s elements & disable tap_action:
image

  - entity: input_boolean.test_boolean
    name: totally disabled
    tap_action:
      action: none
    card_mod:
      style:
        hui-generic-entity-row:
          ha-entity-toggle:
            $:
              ha-switch:
                $: |
                  .mdc-switch .mdc-switch__thumb input {
                    pointer-events: none;
                  }
                .: |
                  ha-switch {
                    --switch-unchecked-button-color: var(--disabled-text-color);
                    --switch-checked-button-color: var(--disabled-text-color);
                  }
        .: |
          :host {
            color: var(--disabled-text-color);
            --paper-item-icon-color: var(--disabled-text-color);
          }
9 Likes
2372

Short: Found the error. Update changed behaviour, what worked before was broken now. Fixed it.

Long story:

Before:

      - type: conditional
        conditions:
          - entity: sensor.dwd_wetterwarnung_current_warning_level
            state_not: '0'
        card:
          type: entities
          entities:
            - type: custom:multiple-entity-row
              entity: sensor.dwd_wetterwarnung_current_warning_level
              name: WARNUNG
              toggle: false
              state_color: true
              show_state: true
              secondary_info: ''
              icon: mdi:exclamation-thick
              entities:
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_name
                  name: Warnung vor
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_start
                  format: time
                  name: Von
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_end
                  format: time
                  name: Bis
              state_header: Anzahl Warnungen
              column: true
          card_mod:
            style:
              .: |
                ha-card {
                  margin-left: -15px;
                  margin-right: -15px;
                  margin-top: -15px;
                  margin-bottom: -15px;
                  box-shadow: none;
                }
                :host {
                  --paper-item-icon-color: red;
                  --mdc-icon-size: 40px;
                }

After/Now - working again (icon is RED):

      - type: conditional
        conditions:
          - entity: sensor.dwd_wetterwarnung_current_warning_level
            state_not: '0'
        card:
          type: entities
          entities:
            - type: custom:multiple-entity-row
              entity: sensor.dwd_wetterwarnung_current_warning_level
              name: WARNUNG
              toggle: false
              state_color: true
              show_state: true
              secondary_info: ''
              icon: mdi:exclamation-thick
              entities:
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_name
                  name: Warnung vor
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_start
                  format: time
                  name: Von
                - entity: sensor.dwd_wetterwarnung_current_warning_level
                  attribute: warning_1_end
                  format: time
                  name: Bis
              state_header: Anzahl Warnungen
              column: true
              card_mod:
                style:
                  .: |
                    :host {
                      --paper-item-icon-color: red;
                      --mdc-icon-size: 40px;
                    }
          card_mod:
            style:
              .: |
                ha-card {
                  margin-left: -15px;
                  margin-right: -15px;
                  margin-top: -15px;
                  margin-bottom: -15px;
                  box-shadow: none;
                }

So while --mdc-icon-size was still applied to the icon when targeting on the entities card, --paper-item-icon-color now only is working when being applied directly to the custom:multiple-entity-row card.

grafik

I´m good now.

1 Like
2373

So I’ve been using card-mod and custom:mod-card in my lovelace for some time now without any issues. But since my HA update yesterday from 2021.11.4 to 2021.11.5 the custom:mod-card does not work anymore.
If I have a card that uses that, it doesn’t show the card anymore. When I remove it, the card shows again, but without the styles ofcourse…
Can’t find anything in the logs (the ones I know of that is). Anyone else having this issue? Or even better, have a solution?

Edit: Ok, I might have spoken too soon. I’m not sure if its an issue in card-mod. Because some cards still work that I use with card-mod. Others dont. It seems kinda random…

2374

@thomasloven Sorry für the @ but only because of your 3.1.0 update recommendation.

While card-mod can be installed as a lovelace resource, some functionality will benefit greatly from it being installed as a frontend module instead.

To do that, add the following to your configuration.yaml file and restart Home Assistant:

frontend:
  extra_module_url:
    - /local/card-mod.js
You'll need to adjust that path according to where you have installed card-mod.js. If you installed through HACS, this is probably /hacsfiles/lovelace-card-mod/card-mod.js.

Is it recommended additionally or really instead?

Update: Question because HACS is throwing warings without and readds/enables it back if you e.g. update card-mod. I can live with the waring (if it is better withour) and delete it again after every update, but only want to know the best way.

So remove from lovelace resources in parallel or leave this on top?

And regarding performance, as this is the reason for this, can you have some hints regarding my performance questions above as well?

2375

Wanting to apply the performance fix, but in doubt of the exact path to add.

My card_mod lives in:

/www//community/lovelace-card-mod/card-mod.js

I assume the path to add would be /community/lovelace-card-mod/card-mod.js?

2376

Just copy the path from settings-lovelace-ressources.

1 Like
2377

Hi, running card mod version:
But i’m having background issues? Seems style isnt applied?

  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js

the code above fixes the card background issues for Chrome and webbrowsers, but the background is still visible on the companion app? is this a bug in card mod or companion app?

2378

Did you get this answered? I removed mine from the resources as the directions say instead. Just trying to verify that I read them correctly.

2379

Not (yet?). I removed it as well. But I’m not sure if there are disadvantages or gaps. I read the instead as well, but saw the warnings and the re-adding after updating. Because of that my (currently unanswered) double check question to Thomas.

2380

I loaded it in both places as well. Error message if not loaded in resources.

1 Like
2381

I’m having a couple of issues with my badges:
image

The first two aren’t supposed to show until they get activated but for some reason they’ve started showing when I load the page. If I edit the config and save they disappear again until I refresh again.

      - entity: binary_sensor.bath_water_leak
        icon: mdi:alert
        style: |
          @keyframes blinker { 50% { opacity: 0; } }
          :host {
            --label-badge-background-color: red;
            animation: blinker 1s linear infinite;
            display: 
              {% if is_state('binary_sensor.bath_water_leak', 'off')  %}
                none;
              {% endif %}
          }
      - entity: binary_sensor.alarm_landing_smoke_detector_smoke
        icon: mdi:alert
        style: |
          @keyframes blinker { 50% { opacity: 0; } }
          :host {
            --label-badge-background-color: red;
            animation: blinker 1s linear infinite;
            display: 
              {% if is_state('binary_sensor.alarm_landing_smoke_detector_smoke', 'off')  %}
                none;
              {% endif %}
          }

The second issue is one I’m just trying to figure out. In the third badge, for some reason when I add an icon to an input_boolean badge it tries to show the state as well. This probably isn’t card-mod related but I was wondering if there was some magic to get rid of the text? This one has been bugging me for a while!

2382

Add card_mod keyword.

2383

I’m trying a slightly different spin on this, to show if the fan is running in our relevant zones or not. the state of the icon changes, but I’m not getting a rotating icon. Not sure where I’m going wrong, I’ve read through the doco…

My cards looks like this…

image

title: Sewing Room
mode: vertical
cards:
  - type: custom:simple-thermostat
    entity: climate.sewing_room_air_conditioner
    step_layout: row
    show_header: false
    name: study
    control: false
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: glance
        entities:
          - entity: switch.sewing_room_zone
            icon: mdi:fan
            tap_action:
              action: toggle
        show_name: false
        show_state: false
        card_mod:
          style:
            div#wrapper: |
              state-badge {
                animation: rotation 0.5s linear infinite
              }
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sewing_room
            name: Temperature
            smoothing: true
            show_fill: true
          - entity: sensor.sewing_target_temp
            name: Target
            smoothing: true
          - entity: switch.sewing_room_zone
            y_axis: secondary
            color: orange
            show_line: false
            show_points: false
            show_legend: false
            aggregate:func: max
            smoothing: false
        hours_to_show: 24
        points_per_hour: 4
        line_width: 2
        font_size: 90
        animate: true
        show:
          name: false
          icon: false
          state: false
2384

Where did you take this example?
Probably from template-entity-row.
You cannot apply styles from one card (history-graph card, for instance) to absolutely different card (glance).
Examples for glance are provided in the corr. post (see the 1st post).
If no animations are provided in the post - do it by yourself like styling an icon.

2385

I got the example from the one you were helping Marius with… I’ll go back and have a look again - thanks