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

[Mariusthvdb (Marius)]

@arganto

But it is not reducing the load order flickering or perhaps transition here as well.

I see, yes, sorry to hear you have a bad UX on that. Not seeing real trouble in my dashboard, though I admit, the mod is not applied directly upon reload, it needs a very short time to kick in.

not on revisiting though, I believe it then is immediate No it is not… especially not after changing dashboards in the left side menu and returning to the view with the slider/buttons, I can see a very clear transition from the theme colors to the modded color.

wonder if a card-mod-theme setting like:

  card-mod-glance: |
    :host {
      transition: none !important;
    }

could help somehow, ofc adapted for these specific cards? Not sure I see any difference tbh, setting that to a card-mod-tile …

[Ildar_Gabdullin]

@arganto

Most probably less or esp. more visible depending on number of card-mods on the page, complexity of the page, browser speed, … but there is and currently I cannot unset the transition completely here, because card mod has to be loaded and applied and then the transition starts.

Strange, pasted my code on a test view with plenty of card-modded cards - still no transition.

@arganto

To set the variable of the framework somewhere in theme or code modification is not possible, is it?

Do not think this is possible due to that assignment to “disabled” color you mentioned.

[arganto]

@Ildar_Gabdullin

Strange, pasted my code on a test view with plenty of card-modded cards - still no transition.

As said, can be that it is only load-order-later-apply-flickering and no transition with your way.

But try to open it in a browser-mod pupup. There it is more obvious, because not cached and loaded on top of the dom every time again.

Or see it better with

                          hui-card-features $ hui-climate-hvac-modes-card-feature $: |
                            ha-control-select {
                             --control-select-background: none;
                             --state-climate-off-color: #414141;   
                             --state-climate-cool-color: #414141;                             
                            }    

So with off and cool color as well. Even later applied and with transition.

Or my other question: Do you have an idea to have these other colors working without transition as well, because the switching off of the transition is too late as well because of loading time and order …

[zavjah]

Hi there,

I have few cards with many chips on them. I’d like to change the icon within the chip based on a state of the respective entity. I found out I can change the icon like this:

card_mod:
  style:
    hui-buttons-base $: |
      ha-assist-chip {
        state-badge {
          --card-mod-icon: mdi:lightbulb-outline;
        }

I do now know how to insert a general condition that’ll apply for all chips by referencing the respective entity. I am talking about something like this:

{{ if is_state(‘config.entity’, ‘on’),‘mdi:lightbulb’,‘mdi:lightbulb-outline’);

If someone could give me a short hint in the proper direction that would be awesome. thx

Best regards

[Ildar_Gabdullin]

To customize an icon of a particular chip:

type: entities
entities:
  - type: buttons
    entities:
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip:nth-child(3) {
            --card-mod-icon: mdi:car;
          }

But in general customizing an icon for an entity should be done on a “server side”, not in UI.
Assume this is a binary sensor - then it’s icon depends on it’s device_class.
Another example - a template sensor/binary_sensor: icon may be defined in the template.
For a “static customization” - “customize” can be used.
Ofc in many cases an icon cannot be customized dynamically on the “server side”; then yes, use card-mod or similar frontend-based ways…

[alexsaas]

Hi there. Maybe someone can tell me how card_mod can completely hide the action button that I named with „on“. There should be nothing there and no action should be performed when I click there.

type: custom:auto-entities
card:
  type: entities
  show_header_toggle: false
filter:
  include:
    - entity_id: scene.*
      state: 'on'
      options:
        action_name: 'on'
        secondary_info: last-changed
sort:
  method: friendly_name
  reverse: false
show_empty: false

[zavjah]

Hello @Ildar_Gabdullin,

I know that in general customisation of icons should be done as you describe and this is also how I do it.

I want to change the icon based on state though, which I know how to do for a particular chip. I was wandering if there is an easier way than defining an if-then for each entity. Is there?

[Ildar_Gabdullin]

Assume you have 100500 cards with chip buttons.
Do you mean that some if these card have a chip button for sensor.xyz - and you need to specify a style for this chip button in ONE place - and then see it applied everywhere?

[zavjah]

Hello @Ildar_Gabdullin,

Yes, that was the idea. There are around 40 chips, each for one switch and I’d like to define in one place that if a particular switch is on the icon of the corresponding chip is changed. Is this possit?

Thx,
Zavjah

[Ildar_Gabdullin]

A switch entity’s icon has some default colors for on & off.
Do you wish to change them?
Only for chip buttons, not for other places?
For all cards? Or for some particular card?
Read this also.

[zavjah]

Hello @Ildar_Gabdullin, I’d like to change all icons of all chips within one card if they are ON

[Ildar_Gabdullin]

Then take a variable for switches from the link I gave you and apply it only for a particular card.

[zavjah]

I’ve seen this but it just about the colour. I want to change the icons, eg when state is ON mdi:lightbulb and when state is OFF mdi:lightbulb-outline.

[Ildar_Gabdullin]

Ohhh, sorry, forgot this part.
If you need to change icons for all chips:

type: entities
entities:
  - type: buttons
    entities:
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            --card-mod-icon: mdi:car;
          }

If for some particular chip/chips - see code I gave you above.

[zavjah]

Hello @Ildar_Gabdullin, unfortunately you are still not getting my point: I know how to set the same icon for all chips, wrote that in my question.

What I’d like to know is there a way to adapt exactly that code to something like

if ON than mdi:car ELSE mdi:dog

[Ildar_Gabdullin]

1. Please do not tag people by @. Not appreciated.
2. If you need a dynamic style - use templates:

          ha-assist-chip:nth-child(3) {
            {% if is_state('switch.aaa','on') -%}
              --card-mod-icon: mdi:xxx;
            {%- else -%}
              --card-mod-icon: mdi:yyy;
            {%- endif %}
          }
          ha-assist-chip:nth-child(4) {
            {% if is_state('switch.bbb','on') -%}
              --card-mod-icon: mdi:xxx;
            {%- else -%}
              --card-mod-icon: mdi:yyy;
            {%- endif %}
          }

This style must be added for EVERY chip (which you need to customize) and for every chip you must use a particular entity_id.
This can be a little shortened by using a macro like

          {% from "xxxxx.jinja" import set_icons %}
          ha-assist-chip:nth-child(3) {
            {{set_icons('switch.aaa')}}
          }
          ha-assist-chip:nth-child(4) {
            {{set_icons('switch.bbb')}}
          }

where the macro is

{% macro set_icons(input_SWITCH) -%}
  {%- if is_state(input_SWITCH,'on') -%}
    --card-mod-icon: mdi:xxx;
  {%- else -%}
    --card-mod-icon: mdi:yyy;
  {%- endif -%}
{%- endmacro %}

[captaincanada]

Unfortunately my question has been completely lost… Can anyone help me?

[zavjah]

Well, I’ll have to do it one by one, then. I hoped there is a way around it. But the idea with the macro is cool, I’ll test that. Thx

[zavjah]

Thx for the help, here. THis is what I’ve done now (peace of the code):

title: Lichter
type: entities
entities:
  - type: buttons
    entities:
      - entity: switch.single_switch_2_17
        name: Sarah links
      - entity: switch.single_switch_2_16
        name: Sarah rechts
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            --ha-assist-chip-filled-container-color: white;
            border: 0px solid steelblue;
            --state-switch-off-color: steelblue;
          }
          ha-assist-chip:nth-child(1) {
            --card-mod-icon: {{ iif(is_state('switch.single_switch_2_17', 'off'), 'mdi:lightbulb-outline', 'mdi:lightbulb-on-10') }};
          }
          ha-assist-chip:nth-child(2) {
            --card-mod-icon: {{ iif(is_state('switch.single_switch_2_16', 'off'), 'mdi:lightbulb-outline', 'mdi:lightbulb-on-10') }};
          }
show_header_toggle: false
state_color: true

I tried also to change the size of the icon. With the code inspector I found out that it is a ha-svg-icon within ha-assist-chip/state-badge/ha-state-icon/ha-icon but I have no clue how to apply this knowledge here What must i put into ha-assist-chip section to change the icon size to 24px (or 24x24)?

edit, 21.05.2024: tried this as well, but it didn’t work:

    card_mod:
      style:
        hui-buttons-base $: |
          state-badge $: |
            ha-state-icon $: |
              ha-icon $: |
                ha-svg-icon {
                  --mdc-icon-size: 24px;
                }

[captaincanada]

can you help me with my code?

this was my latest try without success
without any condition, just to test if something changes…

name: Gästemodus
type: custom:secondaryinfo-entity-row
secondary_info: '[[ binary_sensor.bewegungsmelder_bad.state ]]'
card_mod:
  style:
    hui-generic-entity-row:
      $:
        state-badge:
          $:
            ha-state-icon:
              $: |
                info pointer {
                  color: red;
                } 

and

         ...ha-state-icon:
              $: |
                element.style {
                  color: red;
                }