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

[Mariusthvdb (Marius)]

yes, I must say I am still much surprised, and this is a unique situation. I mean, most of my entities have some sort of customization, and it never has stopped the card-mods from working. I first took out my full custom-ui, so I noticed this worked, then found it was the

  customize_domain:

    automation:
      templates:
        <<: &state_color
          icon_color: >
            if (state == 'on') return 'var(--primary-color)';
            return 'steelblue';

#    binary_sensor:
#      templates:
#        <<: *state_color

template for the binary_sensor domain hindering. Ive commented that now and see the icon coloring and spinning in Safari too… (still not resizing though)

this probably means the custom-ui is either stronger than card-mod (not are how to call it) or executed later, so sticks.

If you have other examples please let me know, so I can have a look. DM if must be.
I’ve asked Thomas if he can explain why this happens.

[Ildar_Gabdullin]

@AleXSR7001

Not working because of vertical-stack

Cards inside vertical stack are not obliged to stretch themselves vertically.
You need to try layout-card, grid card - cannot tell exactly, not used them so far (may be none of them can help, I do not know).

Also, you may try to specify heights of cards explicitly (do not like it myself since may give different results):

type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
  column_widths: 70% 30%
  width: 220
cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - input_number.test_number
      - type: history-graph
        entities:
          - sensor.cleargrass_1_co2
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: sun.sun
        name: 'Off'
        styles:
          card:
            - height: 91px
        show_name: true
        show_icon: false
        show_state: false
      - type: custom:button-card
        entity: sun.sun
        name: 'Off'
        styles:
          card:
            - height: 91px
        show_name: true
        show_icon: false
        show_state: false
      - type: custom:button-card
        entity: sun.sun
        name: 'Off'
        styles:
          card:
            - height: 91px
        show_name: true
        show_icon: false
        show_state: false

[Ildar_Gabdullin]

@Mariusthvdb

or executed later

Some time ago I experienced some problems, used these medicals. May be it will help you, I do not know)))

[Mariusthvdb (Marius)]

haha, no Ive tried that before for another reason (users reported slow loading of the custom-ui some time ago), but I couldn’t find any advantage tbh. So move away from that again, using the advised method for installing custom cards again.

The current issue must be in the way both customizers do their job, where custom-ui touches the backend more (hence the customized icons on more-info panels too), and card_mod is solely in the frontend. I think…

[Ildar_Gabdullin]

Everything is changed - HA, custom cards - every new version may hide new surprises.
Now I am a little stuck with hui-elements, lot of things depend on it in my setup.

[Mariusthvdb (Marius)]

yes, its a bit frustrating not knowing what/why… in my case, the coloring worked just fine before, and I havent changed custom-ui at all, and neither has card-mod as far as I know. So why??

just as odd as not being able to hide the 3 dots in the header menu any longer, or replace it with some replacement

for reference’s sake:

edit
ive went back up to 3.0.9 to see if changed in Card-mod could have caused this, but unfortunately that isnt the case… All I can conclude is that some HA change causes this, and which one has to be answered yet ;-(

btw, on the latest download of 3.0.13, the inspector says its .14

[AleXSR7001 (AleXSR700)]

@Ildar_Gabdullin

      - type: history-graph
        entities:
          - sensor.cleargrass_1_co2

Thank you @Ildar_Gabdullin , that fixed the column width problem.

But I have two (hopefully now small) issues remaining:

1. The column width is defined manually and it seems that this value is mandatory.

layout:
  column_widths: 70% 30%
  width: 220

But this results in the columns being pushed below each other depending on the amount of cards in the dashboard despite being shown correctly in editor mode.

→

2. Is there a way to use % instead of px e.g. for heights?

The latter may also solve the first issue. Essentially I do not want to define the total width of the horizontal-stack, just the ratios inside it.

Current code for reference and sharing :)

type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
  column_widths: 70% 30%
  width: 200
cards:
  - type: vertical-stack
    cards:
      - type: custom:slider-entity-row
        entity: climate.eq_3_living_room
        name: Living Room
        min: 4.5
        max: 23
        step: 0.5
        hide_state: false
        icon: mdi:fire
      - type: custom:apexcharts-card
        graph_span: 24h
        experimental:
          color_threshold: true
        update_interval: 10 s
        now:
          show: false
          color: red
          label: Now
        yaxis:
          - show: false
        apex_config:
          grid:
            show: false
          chart:
            height: 100px
        series:
          - entity: sensor.eq_3_temperature_lr
            stroke_width: 2
            group_by:
              func: last
            fill_raw: zero
            color_threshold:
              - value: 4.5
                color: blue
              - value: 16
                color: yellow
              - value: 18
                color: orange
              - value: 20
                color: red
  - type: vertical-stack
    cards:
      - type: custom:button-card
        entity: climate.eq_3_living_room
        name: 'Off'
        show_name: true
        show_icon: false
        show_state: false
        styles:
          card:
            - height: 50px
        state:
          - operator: template
            value: '[[[ return entity.attributes.temperature == 4.5; ]]]'
            color: rgb(255, 0, 0)
        tap_action:
          action: call-service
          service: climate.set_temperature
          service_data:
            temperature: 4.5
            entity_id: climate.eq_3_living_room
      - type: custom:button-card
        entity: climate.eq_3_living_room
        name: 18 °C
        show_name: true
        show_icon: false
        show_state: false
        styles:
          card:
            - height: 50px
        state:
          - operator: template
            value: '[[[ return entity.attributes.temperature == 18; ]]]'
            color: rgb(255, 0, 0)
        tap_action:
          action: call-service
          service: climate.set_temperature
          service_data:
            temperature: 18
            entity_id: climate.eq_3_living_room
      - type: custom:button-card
        entity: climate.eq_3_living_room
        name: 20 °C
        show_name: true
        show_icon: false
        show_state: false
        styles:
          card:
            - height: 50px
        state:
          - operator: template
            value: '[[[ return entity.attributes.temperature == 20; ]]]'
            color: rgb(255, 0, 0)
        tap_action:
          action: call-service
          service: climate.set_temperature
          service_data:
            temperature: 20
            entity_id: climate.eq_3_living_room

[Mariusthvdb (Marius)]

new challenge: add a bit of vertical spacing to entities in an embedded fold-entity-row card:

this doesnt happen on all embedded f-e-r cards oddly enough, maybe its because of the entity_pictures. and the lack of a secondary row.

  - type: entities
    title: Family tracked
    card_mod: *header_no_margin
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: Marijn
        padding: 0
        entities:
          - device_tracker.unifi_me
          - device_tracker.ping_iphone_me
          - device_tracker.life360_me
          - device_tracker.me_app
          - device_tracker.me
          - device_tracker.owntracks_me
          - device_tracker.calltheboss_me_bt

Still Id like to add spacing, like:

which btw is an auto-entities card expanding a group.

or, a regular entities with the exact same list:

can that be done?

---

wait, the secondary doesnt help:

now I definitely need a card_mod change…
btw, ofc I tried to do without the padding: 0 but thats doesnt help.

[thomasloven (Thomas Lovén)]

Sorry about all the confusion here.
Hui-element is supposed to be transparent to card-mod. I.e. styling hui-element should be as if styling the element inside it.

I think I’ve managed to fix that for 1.1.2, but there are lots of edge cases…

- type: entities
  entities:
    - type: section
      label: Default internal styling
      card_mod:
        style: .divider { background-color: red; }
    - type: custom:hui-element
      row_type: section
      label: Hui-element internal styling
      card_mod:
        style: .divider { background-color: green; }
- type: entities
  entities:
    - type: section
      label: Default styled from card
    - type: custom:hui-element
      row_type: section
      label: Hui-element styled from card
  card_mod:
    style:
      hui-section-row $: .divider { background-color: blue; }
      hui-element $: .divider { background-color: orange;}

[Ildar_Gabdullin]

@Mariusthvdb

for reference’s sake:

Seems that you applied a style to a wrong element - rotation is not centered, there is a shift.

@Mariusthvdb

just as odd as not being able to hide the 3 dots in the header menu any longer, or replace it with some replacement

Cannot react on this, know nothing about card-mod-themes…

@Mariusthvdb

btw, on the latest download of 3.0.13, the inspector says its .14

Same on my setup, strange.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

Seems that you applied a style to a wrong element - rotation is not centered, there is a shift.

yes, ofc I noticed that, thought it might be the icon not being perfectly centered. Its the same in Chrome. And the code is the exact code you use…

[Ildar_Gabdullin]

@AleXSR7001

The column width is defined manually and it seems that this value is mandatory

Yesterday was the 2nd time I experimented with layout-card - it is better to discuss these issues in a corresponding thread.

@AleXSR7001

Is there a way to use % instead of px e.g. for heights?

That is why I wrote that this is not the best solution…
I do not know how to align controls automatically.

[Mariusthvdb (Marius)]

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:

in Safari, and

in Chrome.

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

[AleXSR7001 (AleXSR700)]

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]

@Mariusthvdb

add a bit of vertical spacing to entities in an embedded fold-entity-row card:

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]

@Mariusthvdb

on the coloring of the template-entity-row entity’s icon:

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

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

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

Icon is coloring (but I have Not customized sun.sun, so not trouble with custom-ui expected )

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

[Ildar_Gabdullin]

@Mariusthvdb

Icon is coloring

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 (Marius)]

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]

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