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

Mariusthvdb · November 19, 2021, 2:12pm

on the coloring of the template-entity-row entity’s icon:
for the sake of experiment (and see if the code itself is corrrect) I changed to:

              @keyframes coloring {
                0% {
                  background: red;
                }
                17% {
                  background: orange;
                }
                34% {
                  background: yellow;
                }
                51% {
                  background: green;
                }
                68% {
                  background: lightblue;
                }
                85% {
                  background: blue;
                }
                100% {
                  background: violet;
                }

which looks like:
Nov-19-2021 15-10-31
in Safari, and

Nov-19-2021 15-13-21
in Chrome.

which could proof to be useful as a way around the issue…

AleXSR7001 · November 19, 2021, 2:23pm

Thank you, I will
As a first feedback, I can say that the solution for the width issue was using layout_type: custom:grid-layout. This also does not require me to define the width.

Ildar_Gabdullin · November 19, 2021, 3:04pm

This is an old issue.
Now I am using this style in my setup for each row:

                hui-generic-entity-row {
                  margin-top: 0px;
                  margin-bottom: 8px;
                }

See the difference here:

type: horizontal-stack
cards:
  - type: entities
    entities:
      - type: section
        label: persons
      - entity: person.ildar
      - entity: person.mama
      - entity: person.papa
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: persons
        padding: 0
        open: true
        entities:
          - entity: person.ildar
          - entity: person.mama
          - entity: person.papa
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: persons
        padding: 0
        open: true
        entities:
          - entity: person.ildar
          - entity: person.mama
          - entity: person.papa
    card_mod:
      style:
        fold-entity-row:
          $:
            div#items hui-text-entity-row:
              $: |
                hui-generic-entity-row {
                  margin-top: 0px;
                  margin-bottom: 8px;
                }

Earlier this style worked too but stopped working (the issue):

  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: persons
        padding: 0
        open: true
        entities:
          - entity: person.ildar
          - entity: person.mama
          - entity: person.papa
        card_mod:
          style:
            div#items hui-text-entity-row:
              $: |
                hui-generic-entity-row {
                  margin-top: 0px;
                  margin-bottom: 8px;
                }

Update (20.11.21):
The “tight vertical spacing” problem is solved in fold-entity-row ver. 2.0.12

Ildar_Gabdullin · November 19, 2021, 3:24pm

Test exactly this code and tell me about the difference please:

type: entities
entities:
  - type: custom:template-entity-row
    entity: sun.sun
    name: name
    secondary: some value
    state: state
    icon: mdi:fan
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }
            25% {
              --mdc-icon-size: 15px;
            }
            50% {
              --mdc-icon-size: 20px;
            }
            75% {
              --mdc-icon-size: 26px;
            }
            100% {
              --mdc-icon-size: 32px;
            }
          }
          @keyframes coloring {
            0% {
              color: red;
            }
            17% {
              color: orange;
            }
            34% {
              color: yellow;
            }
            51% {
              color: green;
            }
            68% {
              color: lightblue;
            }
            85% {
              color: blue;
            }
            100% {
              color: violet;
            }
          }

qwsder

Mariusthvdb · November 19, 2021, 3:30pm

Icon is coloring (but I have Not customized sun.sun, so not trouble with custom-ui expected )
Nov-19-2021 16-28-59

the exact card-mod on a boolean (which I have customized) remains without result

Ildar_Gabdullin · November 19, 2021, 3:38pm

But again is not centered (((((((((
There is smth strange with your setup, my friend…
My proposal is - create a CLEAN test setup and check how it works…

Mariusthvdb · November 19, 2021, 3:45pm

will do, and just fired up Firefox as a 3d browser.

On the Folds and vertical spacing:
to give you an idea though, I have 262 fold-entity-rows, and only this card gives me a headache…
I have them populated with auto-entities cards, or listed entities, what have you. given the fact there is now error in the inspector at all on this config, debugging is very difficult.

arganto · November 19, 2021, 4:42pm

arganto:

Is there any way to style such dialogs as well? E.g. the more-info-parts like

Or to ingest css which has priority over every other stuff?

e.g. the new show more links. I would like to have them in secondery color instead of primary. Currently it is style this way
.header > a, a:visited {
    color: var(--primary-color);
}
But I’m not able to find a point, where and how to change styles in such pop-ups.

Figured it out in themes

  card-mod-theme: noctis-grey
  
  card-mod-more-info-yaml: |
    ha-more-info-history:
      $: |
        .header > a, a:visited {
          color: var(--secondary-text-color) !important;
          font-size: 12px;
        }
    ha-more-info-logbook:
      $: |
        .header > a, a:visited {
          color: var(--secondary-text-color) !important;
          font-size: 12px;
        }

Not that agressive anymore

But it is only working here, but not within the tabs like

Any hint?

Ildar_Gabdullin · November 19, 2021, 8:21pm

Hello @thomasloven! Thank you very much for the feedback.
Yes, navigation for hui-element became a bit confusing - but I managed to rebuild all my code, it looks fine again!

thomasloven · November 19, 2021, 8:27pm

Please let me know if you find something that doesn’t work. It’s a bit rickety with timing issues right now.

Ildar_Gabdullin · November 19, 2021, 8:35pm

Thomas, now I got only these issues about card-mod:

Styling stage-badge inside picture-elements causes freezes
Styling of rows with custom types stopped working - more important since it is about styling fold-entity-row, restriction-card as a row, config-template-card as a row.

Thank you again for your valuable work!

P.S. I am creating a post explaining using card-mod for hui-element for different row types as well as using them inside decluttering template with mod-card. This post will be added into the consolidation post.

Ildar_Gabdullin · November 20, 2021, 12:44am

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)}:

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.

Using a slider or a toggle row inside Picture elements card.
Using section row inside stack-in-card to separate areas.
Making a decluttering template for any row with predefined options & styling.

There are 4 methods of styling hui-element rows:

Using :host - to style a particular row.
Using long DOM navigation - to style a particular row.
Using long DOM navigation from the parent Entities card or Picture elements card level - to style a particular row or all rows.
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;
        }

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;
        }

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;
            }

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;
                  }

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.

jmbinette · November 20, 2021, 4:02am

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 !

chertvl · November 20, 2021, 9:47am

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?

e-raser · November 20, 2021, 9:38pm

--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
                }

Ildar_Gabdullin · November 20, 2021, 9:41pm

Ildar_Gabdullin · November 20, 2021, 10:39pm

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:

  - 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);
          }

e-raser · November 21, 2021, 1:35am

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.

duncan86 · November 22, 2021, 7:21am

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…

arganto · November 22, 2021, 7:58am

@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?