Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2025.1.0 beta breaks several fundamental card_mods #420

Closed
4 tasks done
Mariusthvdb opened this issue Dec 26, 2024 · 84 comments
Closed
4 tasks done

2025.1.0 beta breaks several fundamental card_mods #420

Mariusthvdb opened this issue Dec 26, 2024 · 84 comments

Comments

@Mariusthvdb
Copy link

Mariusthvdb commented Dec 26, 2024

My Home Assistant version: 2025.1.0b2

My lovelace configuration method (GUI or yaml):
yaml
What I am doing:

modding an icon and its color

What I expected to happen:

the mod to be effective (as it has been for years...)

What happened instead:

nothing

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
          - entity: script.intercom_text_message
            name: Speel bericht
            card_mod:
              style: |
                :host {
                  --card-mod-icon-color:
                    {% set state = states(config.entity) %}
                    {{'var(--alert-color)' if state == 'on' else 'var(--success-color)'}};
                  --card-mod-icon:
                    mdi:{{'stop' if state == 'on' else 'play'}};
                }
# End of code

or even smaller:

          - entity: input_text.message
            name: Bericht
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    display: none;
                  }

there are many more mods that are not functional anymore, this is a very tight one to start investigating what has changed, I can upload more if required.
many of the others involve modding hui-generic-entity-row like this

Error messages from the browser console:

no errors at all

There has been some response in the current Beta channel onDiscord, and Bram said they changed some attributes, but that is about it for now, hope they will get back soon. (it's Christmas so sure hope everyone is well)

As far as merged PR's in Frontend, I havent been able to find any relevant change yet that could have caused this wide spread breaking changes in card_mod
Sincerely hope others can chime in and help out.

By putting an X in the boxes ([]) below, I indicate that I:

  • Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

  • Have made sure I am using the latest version of the plugin.

  • Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

  • Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

@Mariusthvdb Mariusthvdb changed the title 2025.1.0 beta breaks several card_mods 2025.1.0 beta breaks several fundamental card_mods Dec 26, 2024
@bluecrystaldex
Copy link

Having the same issue. None of my entity rows with --card-mod-icon-color: or hui-generic-entity-row parameters configured are working in the HA 2025.1.0 beta. No issues with any of the 2024.12.x versions or prior.

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Dec 27, 2024

@ildar170975
Copy link
Contributor

If you mean this PR:
home-assistant/frontend#23394
I found it very suspicious and luckily it was closed.

@ildar170975
Copy link
Contributor

Marius, can you see issues with other parts? Is it only entity-row?

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Dec 28, 2024

well it is a bit complicated. I am not sure.
I've also posted the :host version above, and also this custom card suffers the issue where the display is not hidden.ofc that also uses the hui-generic-entity-row.... :

type: entities
card_mod:
  style: |
    ha-card {
      box-shadow: none;
      margin: -4px 0px 0px 0px;
    }
    .card-content {
      padding: 0px 8px 8px 0px;
    }
entities:
  - entity: sun.sun
    type: custom:multiple-entity-row
    card_mod:
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
        .: |
          .entities-row {
           width: 100%;
           justify-content: space-evenly !important;
          }
    state_color: true
    show_state: false
    entities:

however, when I do this:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Details
      card_mod: !include /config/dashboard/card_mods/label.yaml
    entities:
      - entity: sensor.bruto_stroom_verbruik
        card_mod:
          style: |
            :host {
              --card-mod-icon-color:
                {% set state = states(config.entity)|int(-5) %}
                {% if state <= 200 %} powderblue
                {% elif state <= 400 %} cadetbue
                {% elif state <= 750 %} green
                {% elif state <= 1000 %} darkgreen
                {% elif state <= 2500 %} orange
                {% elif state <= 4000 %} brown
                {% elif state <= 5000 %} maroon
                {% elif state <= 6000 %} purple
                {% else %} black
                {% endif %};
            }
      - entity: sensor.huidig_verbruik_opgeteld
        card_mod:
          style: |
            :host {
              --card-mod-icon-color: maroon;
            }

the colors are applied correctly!

maybe the fold-entity-row changes the aspects of the siblings there

____ UPDATE____

testing that assumption by adding the single listed entity under the entities here, also under the next fold confirms:

Scherm­afbeelding 2024-12-28 om 15 34 00
type: entities
title: Stroom gebruik overzicht
state_color: true
entities:

# this does not apply the mods
  - type: custom:template-entity-row
    entity: sensor.netto_verbruik
    card_mod: !include /config/dashboard/card_mods/netto_verbruik.yaml
    name: >
      Netto: {{'Levering' if states(config.entity)|int(0) < 0 else 'Verbruik'}}
    state: >
      {{states(config.entity,with_unit=True)}}
  - type: custom:fold-entity-row
    head:
      type: section
      label: Details
      card_mod: !include /config/dashboard/card_mods/label.yaml
    entities:

#while the exact same mod here is applied
      - type: custom:template-entity-row
        entity: sensor.netto_verbruik
        card_mod: !include /config/dashboard/card_mods/netto_verbruik.yaml
        name: >
          Netto: {{'Levering' if states(config.entity)|int(0) < 0 else 'Verbruik'}}
        state: >
          {{states(config.entity,with_unit=True)}}

same thing for a direct entity:
when used in the entities card, it does not get the card_mod, the. used under the fold, it does get the card_mod. Note the template on the state and the name Are applied under the entities directly:

Scherm­afbeelding 2024-12-28 om 15 44 38
entities:
  - entity: sensor.netto_verbruik
    card_mod: !include /config/dashboard/card_mods/power_color.yaml
  - type: custom:template-entity-row
    entity: sensor.netto_verbruik
    card_mod: !include /config/dashboard/card_mods/netto_verbruik.yaml
    name: >
      Netto: {{'Levering' if states(config.entity)|int(0) < 0 else 'Verbruik'}}
    state: >
      {{states(config.entity,with_unit=True)}}
  - type: custom:fold-entity-row
    head:
      type: section
      label: Details
      card_mod: !include /config/dashboard/card_mods/label.yaml
    entities:
      - entity: sensor.netto_verbruik
        card_mod: !include /config/dashboard/card_mods/power_color.yaml
      - type: custom:template-entity-row
        entity: sensor.netto_verbruik
        card_mod: !include /config/dashboard/card_mods/netto_verbruik.yaml
        name: >
          Netto: {{'Levering' if states(config.entity)|int(0) < 0 else 'Verbruik'}}
        state: >
          {{states(config.entity,with_unit=True)}}

heck, even the multiple-entity-row works correctly when put in the fold, and hides the .info:

Scherm­afbeelding 2024-12-28 om 21 39 37

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Dec 28, 2024

separate post about combining this fold-entity-row with auto-entities.....

nothing works anymore, the scroll-fold

# fold-entity-row scroll_fold
style:
  ha-icon:
    $: |
      ha-svg-icon {
        color: var(--primary-color);
        width: 24px;
      }
  .: |
    #measure {
      max-height: {{states('input_number.max_scroll_hoogte')}}px;
      overflow-x: hidden;
      overflow-y: scroll;
    }

or the colors on the icons.
could be because the auto-entities uses type: entities ??

@Mariusthvdb
Copy link
Author

If you mean this PR: home-assistant/frontend#23394 I found it very suspicious and luckily it was closed.

this is what's happened on the generic entity row
https://github.com/home-assistant/frontend/commits/dev/src/panels/lovelace/components/hui-generic-entity-row.ts

but all the last PR changes is this:
home-assistant/frontend@85bd643

@ResteNarquois
Copy link

Can confirm that I am seeing this for any mods applied at the entity-row level.

Also seeing the odd quirk noticed by Marius that row mods do seem to be applied to other custom entity rows e.g. template-entity-row as long as they are contained inside a fold-entity-row. But this is not the case for core entity-row types inside the same fold-entity-row.

card-mod-row-yaml theme classes also seem to be broken.

I started working around this by applying entity row mods via drilling down from the level of the entities card, with some initial success, but the seemingly infinite variety of DOM paths for different entity types made me doubt the time it would take to fix this everywhere, and I soon hit some edge cases anyway where nothing would work.

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Dec 29, 2024

Believe it would be wise to add your findings in the community post replying to me there too.
To raise awareness.

Fixing all locally is without end probably, especially if they change stuff without announcing any of it again.

@Mariusthvdb
Copy link
Author

found another issue:

# fold-entity-row fold_items
style: |
  div#items {
    margin: 16px -16px -16px -16px;
  }

no longer works, resulting in the listed camera images to not expand to the full width in the fold

this was the most reliable way to do this:

  - type: custom:fold-entity-row
    card_mod: !include /config/dashboard/card_mods/fold_items.yaml
    head:
      type: section
      label: Knmi
      card_mod: !include /config/dashboard/card_mods/label.yaml
#     padding: 0
    entities:
      - type: custom:hui-element
        card_type: picture-entity
#         card_mod: !include /config/dashboard/card_mods/box_shadow_none.yaml
        entity: camera.weerkaart_nl
        show_name: false
        show_state: false
Scherm­afbeelding 2025-01-01 om 16 49 57

@mdisabato
Copy link

I've just backed out 2025.1 for this reason and the breakage of auto-backup and Generac. Changing icon colors is something long overdue for inclusion in HA as a core feature.

@taHC81
Copy link

taHC81 commented Jan 4, 2025

I can confirm my styling is not applied after the update as well. Color styling is quite useful for me, especially for Photovoltaics, where the orange/red quickly have your attention.

Example code:


state_color: true
type: entities
entities:
  - type: custom:text-divider-row
    text: MUST PH1800 5500W
    card_mod:
      style: |
        .text-divider span { color: #2980b9 !important; }
  - entity: sensor.must_state
    card_mod:
      style: |
        :host {
          color:
            {% if states("sensor.inv_inverter_work_state") | int == 2 %} 
              #2ecc71
            {% elif states("sensor.inv_inverter_work_state") | int == 3 %}
              #2471a3
            {% endif %}
            ;
        }
  - entity: sensor.charger_status
  - entity: sensor.mppt_charger_status
    icon: mdi:solar-power
  - entity: sensor.menic_absorb_float
  - entity: sensor.menic_teploty_ac_dc_trafo
    card_mod:
      style: |
        :host {
          color:
            {% if states("sensor.inv_transformer_temp") | float > 100 %} 
              #e74c3c
            {% elif states("sensor.inv_transformer_temp") | float > 85 %}
              #e67e22
            {% elif states("sensor.inv_transformer_temp") | float > 77 %} 
              #f39c12
            {% elif states("sensor.inv_transformer_temp") | float > 63 %}
              #f1c40f
            {% elif states("sensor.inv_transformer_temp") | float < 64 %}
              #2ecc71
            {% endif %}
            ;
        }
  - entity: sensor.inv_inverter_power
    card_mod:
      style: |
        :host {
          color:
            {% if states("sensor.inv_inverter_power") | int == 0 %}
              #777777
            {% elif states("sensor.inv_inverter_power") | int > 5000 %} 
              #e74c3c
            {% elif states("sensor.inv_inverter_power") | int > 4000 %} 
              #e67e22
            {% elif states("sensor.inv_inverter_power") | int > 3000 %} 
              #f39c12
            {% elif states("sensor.inv_inverter_power") | int > 2000 %}
              #f1c40f
            {% elif states("sensor.inv_inverter_power") | int > 1000 %}
              #2ecc71
            {% elif states("sensor.inv_inverter_power") | int <= 1000 %}
              #138d75
            {% endif %}
            ;
        }
  - entity: sensor.inv_load_power
  - type: custom:text-divider-row
    text: MUST PH1800 5000W
    card_mod:
      style: |
        .text-divider span { color: #2980b9 !important; }
  - entity: switch.must2_enable
  - entity: sensor.inverter_status
    card_mod:
      style: |
        :host {
          color:
            {% if states("sensor.inverter_work_state") | int == 2 %} 
              #2ecc71
            {% elif states("sensor.inverter_work_state") | int == 3 %}
              #2471a3
            {% elif states("sensor.inverter_work_state") | int == 1 %}
              #666666
            {% endif %}
            ;
        }

@petebanham
Copy link

--card-mod-icon-color: has also stopped working for me since upgrading to the stable release of 2025.1.0

@Mariusthvdb
Copy link
Author

--card-mod-icon-color: has also stopped working for me since upgrading to the stable release of 2025.1.0

please provide the full card_mod yaml you use for that, because the --card-mod-icon-color itself is still working, it's the element you set it to that is important, and has to do with the row.

a single row suffices, or if identical to posted above, just confirm and +1.

I expect a lot of me too's here, so trying to keep things as tidy as possible ;-)

@petebanham
Copy link

--card-mod-icon-color: has also stopped working for me since upgrading to the stable release of 2025.1.0

please provide the full card_mod yaml you use for that, because the --card-mod-icon-color itself is still working, it's the element you set it to that is important, and has to do with the row.

a single row suffices, or if identical to posted above, just confirm and +1.

I expect a lot of me too's here, so trying to keep things as tidy as possible ;-)

No worries. Here are a couple of examples, both row items in a standard entities card:

entity: sensor.ecodan_ashp_system_operation_mode
name: Ecodan Operation Mode
card_mod:
  style: |
    :host {
      --card-mod-icon-color:
      {% if states(config.entity) == 'Hot Water' %} 
        red; 
      {% elif states(config.entity) == 'Heating' %}
        red;
      {% elif states(config.entity) == 'Frost Protect' %}
        blue;
      {% endif %}
      ;
    } 
entity: sensor.ecodan_ashp_dhw_temperature
name: Hot Water Temp
card_mod:
  style: |
    :host {
      --card-mod-icon-color:
      {% if states('sensor.ecodan_ashp_system_operation_mode') == 'Hot Water' %}
        red;
      {% else %}
        steelblue;  
      {% endif %}
      ;
    }

@dolzhanskiyoa
Copy link

dolzhanskiyoa commented Jan 4, 2025

Font size, color stopped working in 2025.1.0 stable in Entities card

type: entities
entities:
  - entity: switch.delta_pro_ac_enabled
    name: Invertor
    card_mod:
      style: |
        :host {
        font-size: 20px;
        color: red
        }
title: Delta Pro

@superbreadi
Copy link

Hi same problem, color and icon stopped working in Core 2025.1.0 - Frontend 20250103.0

  - entity: sensor.outdoor
    format: precision1
    type: custom:multiple-entity-row
    entities:
      - entity: sensor.outdoor_2
        format: precision0
        name: false
    card_mod:
      style: |
        :host {
          --card-mod-icon:
            {% if is_state("binary_sensor.temp_falling_outdoor" , 'on') %}
              mdi:thermometer-chevron-down
            {% elif is_state("binary_sensor.temp_rising_outdoor" , 'on') %}
              mdi:thermometer-chevron-up
            {% elif (is_state("binary_sensor.temp_falling_outdoor" , 'on') and (states(config.entity) | int(0) <= 0)) %}
              mdi:snowflake-alert
            {% elif (is_state("binary_sensor.temp_rising_outdoor" , 'on') and (states(config.entity) | int(0) <= 0)) %}
              mdi:snowflake-melt
            {% elif states(config.entity) | int(0) <= 0 %}
              mdi:snowflake
            {% else %}
              mdi:thermometer
            {% endif %}
            ;
          --card-mod-icon-color:
            {% if states(config.entity) | int(0) <= 0 %} 
              white
            {% elif states(config.entity) | int(0) <= 10 %} 
              lightblue
            {% elif states(config.entity) | int(0) <= 17 %}
              CornflowerBlue
            {% elif states(config.entity) | int(0) <= 22 %}
              yellowgreen
            {% elif states(config.entity) | int(0) <= 25 %}
              #fdd835
            {% elif states(config.entity) | int(0) <= 30 %}
              orange
            {% elif states(config.entity) | int(0) > 30 %}
              red
            {% endif %}
            ;
        }

@pchaves1
Copy link

pchaves1 commented Jan 4, 2025

Hello,
same problem here. Color stopped working in Core 2025.1.0, Frontend 20250103.0

  • entity: binary_sensor.shelly_sensor_portao_window
    name: Portão
    icon: mdi:gate
    card_mod:
    style: |
    :host {
    {% if states('binary_sensor.shelly_sensor_portao_window') == 'off' %}
    --paper-item-icon-color: green;
    color: green;
    {% elif states('binary_sensor.shelly_sensor_portao_window') == 'on' %}
    --paper-item-icon-color: red;
    color: red;
    {% endif %}
    }

@pickonedev
Copy link

pickonedev commented Jan 4, 2025

Any card mod added to individual entities of an entity filter card, won't work anymore with 2025.1.0 update... Only works for the general filter card... so...

This is still working

type: entity-filter
entities:
  - entity: sensor.sonoff_computer_1_pow_power
    name: Room TV
  - entity: sensor.sonoff_computer_balcony_tv_pow_power
    name: Balcony TV
state_filter:
  - operator: ">="
    value: 1
show_empty: false
card:
  type: entities
  card_mod:
    style:
      "#states div":
        hui-sensor-entity-row$:
          hui-generic-entity-row$: |
            state-badge {
              display: none;
            }
            .info {
              margin-left:0 !important;
            }
            .info, .value{font-size:10px}

But this is not working anymore

type: entity-filter
entities:
  - entity: sensor.sonoff_computer_1_pow_power
    name: Room TV
    card_mod:
      style:
        "#states div":
          hui-sensor-entity-row$:
            hui-generic-entity-row$: |
              state-badge {
                display: none;
              }
              .info {
                margin-left:0 !important;
              }
              .info, .value{font-size:10px}
  - entity: sensor.sonoff_computer_balcony_tv_pow_power
    name: Balcony TV
    card_mod:
      style:
        "#states div":
          hui-sensor-entity-row$:
            hui-generic-entity-row$: |
              state-badge {
                display: none;
              }
              .info {
                margin-left:0 !important;
              }
              .info, .value{font-size:10px}
state_filter:
  - operator: ">="
    value: 1
show_empty: false
card:
  type: entities

Another thing is that in 2025.1.0, they made different elements for entity and attribute, so these are not using the same anymore:

This:

type: entity-filter
entities:
  - type: attribute
    entity: sensor.variable_entrance_ambient_temperature
    attribute: string_state
    name: Entrance

Does not work anymore with this, like the entity type is:

hui-sensor-entity-row$:
hui-generic-entity-row$: |

Now it is working with:

hui-attribute-row$:
hui-generic-entity-row$: |

@dedelastuce
Copy link

dedelastuce commented Jan 4, 2025

Hi the same for me :

      style: |
        {% if state_attr(config.entity, '24h_change') | float > 0 %}
           :host {
             --paper-item-icon-color: green;
             color: green
           }
        {% elif state_attr(config.entity, '24h_change') | float < 0 %}
           :host {
             --paper-item-icon-color: red;
             color: red
           }
        {% else %}
           :host {
             --paper-item-icon-color: black;
             color: black
           }
        {% endif %}

doesn't work anymore

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Jan 4, 2025

Hi the same for me : style: | {% if state_attr(config.entity, '24h_change') | float > 0 %} :host { --paper-item-icon-color: green; color: green } doesn't work anymore

on which element please? post the card and entity for which this mod is set

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Jan 4, 2025

check, template entity-row was already noted ;-)

throw them in a fold-entity-row, and you'll see the mod is working

thanks for confirming

@dedelastuce
Copy link

sorry for the duplicate, I m new on HA ;-)

@akomelj
Copy link

akomelj commented Jan 4, 2025

Disclaimer - this is what I assume after some quick debugging.

It appears that some of the methods that card_mod hijacks (e.g. patches) have been renamed in HA 2025.1 front-end.

I examined hui-entities-card specifically and mods started working when I changed the name of the patched method from renderEntity to _renderEntity in card-mod's version of the card (src/patch/hui-entities-card.ts). 🤷

I guess, as a start, someone has to check all the methods in patched versions of UI elements from card-mod (src/patch/*.ts) against the corresponding UI elements from HA front-end.

This commit (linter fixes): home-assistant/frontend@7a12fd2

It appears linter wants private method names to start with the underscore because there is a whole lot of changes like this in that commit.

Unfortunately, though, just changing the names of patched methods is not enough - it will stop working for older versions of HA. 🤦

@ildar170975
Copy link
Contributor

ildar170975 commented Jan 4, 2025

@akomelj
Nice found!
image
image

Interesting that home-assistant/frontend@7a12fd2 does not contain that "renderEntity".
Found this change in hui-entities-card.
What I am trying to do since yesterday - walk through that commit (link above) and filter out chages which MAY affect card-mod & custom cards.
Just checked again - turns out we are checking same commit, I mysteriously did not find that "renderEntity" with Ctrl-F.

@akomelj
Copy link

akomelj commented Jan 4, 2025

@ildar170975 , hm, you sure? I see it in this commit

image

Doesn't matter - the change has been made. Now - for fixing it.

One of the possible very-hacky-hacky options is changing the behaviour of patch_object to first check whether the method exists. If not, try patching the method with prepended underscore. If that one does not exist as well - just add the method to the patched class and hope for the best.

Now, this is a very quick and dirty fix - obviously - so I guess not all problems can be solved by this.

Something in the lines of

export const patch_object = (obj, patch) => {
  if (!obj) return;
  const orig = Object.getOwnPropertyDescriptors(obj);
  console.debug("CardMod orig methods", {orig, patch});
  for (const method in Object.getOwnPropertyDescriptors(patch.prototype)) {
    if (orig[method]) patch_method(obj, method, patch.prototype[method]);
    else if (orig[`_${method}`]) patch_method(obj, `_${method}`, patch.prototype[method]);
    else {
      console.debug(`CardMod method ${method} of ${obj.constructor.name} not found. Injecting patched version.`);
      patch_method(obj, method, patch.prototype[method]);
    }
  }
};

@ildar170975
Copy link
Contributor

ildar170975 commented Jan 4, 2025

hm, you sure? I see it in this commit

I wrote earlier, missed it somehow when tried to find by Ctrl-F.
We are looking at same commit, I am merely at a half of it now))))

One of the possible very-hacky-hacky

Meanwhile users may merely open "card-mod.js" file and replace "renderEntity" with "_renderEntity", then purge a browser's cache.

Of course a normal patch is needed for card-mod...
As you said, the "renderEntity" may be just ONE example out of many.

@taHC81
Copy link

taHC81 commented Jan 4, 2025

Meanwhile users may merely open "card-mod.js" file and replace "renderEntity" with "_renderEntity", then purge a browser's cache.

Doesn't work for me, sorry.

@ildar170975
Copy link
Contributor

Have you deleted .gz file?

@emufan
Copy link

emufan commented Jan 5, 2025

I load it via the Frontend module.

You. But this helps other user having not your setup in which way?

And of course you can do whatever you want, but you see in this thread that this way is not that error proven and needs to edit several files.

I only wanted to give the advice, that the other way could be perhaps more stable. Esp. because of the many "didn't work" feedback here.

I didn't double-check, what is happening, if both links are there, in config and in lovelace resource. And this is most probably the standard, because HACS set it in lovelace and the user perhaps only additionally in config. Or didn't do that at all ... And then you have two links or a not existing link and with your way you are changing only one.

Anyway, You can do what you want, but I wanted to make the advice more stable for all, because your setup could not be seen as the same at other users.

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Jan 5, 2025

Fine.
Just have it said that everyone should ideally follow the authors advice and load card-mod via the Frontend config like I posted and like you yourself linked the documentation

People posting ‘it doesn’t work for me’ is a well known phenomenon here and elsewhere. Mostly because not following advice, documentation or simply wrong configs.
And cache. Cache is a well known offender. Especially when using the HACS method…..

taking temporary files outside of HACS is a more reliable method of testing than any other.

But sure, I am glad people get it to work how each and everyone manages in their own setting.

@sdotter
Copy link

sdotter commented Jan 5, 2025

I had it working in few seconds by just adding a _ 👍👌

@ildar170975
Copy link
Contributor

I merely opened an original js file in editor and made a change as @akomelj suggested. Then purged a browser’s cache.
The gz file was deleted long time ago since I did earlier some hacks.
I do not care about backuping an original js. I can download it any time unless local orcs close here Internet completely.
So, changing the only js file allows me to have both a “resource” file and an “external js” updated.
(btw I am experimenting with own js files a lot and declaring them as “external js” instead of “resource” gives more benefits)

@VasMan
Copy link

VasMan commented Jan 6, 2025

I copied the modified card-mod.js file to /config, set the new config in my configuration.yml, reloaded HA, purged cache but still no luck on my entities color formating. For the glances it works fine, even before making this change to add _. Not sure what to try next.

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /config/card-mod.js

The below config worked fine in the past. Cant remember last time I checked though. Now there is no colour formating.

type: entities
show_header_toggle: true
entities:
  - entity: sensor.bc_1_cell_transmit_status
    name: BC 1 (OC+)
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              color:
                {% if is_state('sensor.bc_1_cell_transmit_status','Transmitting') %} 
                  green
                {% else %}
                  red
                {% endif %}
                ;
             }  
  - entity: sensor.bc_2_cell_transmit_status
    name: BC 2 (OC)
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              color:
                {% if is_state('sensor.bc_2_cell_transmit_status','Transmitting') %} 
                  green
                {% else %}
                  red
                {% endif %}
                ;
             }  
  - entity: sensor.cbrs_q710_cell_transmit_status
    name: CBRS (Q710)
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              color:
                {% if is_state('sensor.cbrs_q710_cell_transmit_status','Transmitting') %} 
                  green
                {% else %}
                  red
                {% endif %}
                ;
             }
title: 4G Cells Service State
state_color: true
Screenshot 2025-01-06 at 00 16 29

Here are all the files when I search for renderEntity

Screenshot 2025-01-06 at 00 27 00

@shawnhaywood
Copy link

I tried editing the card-mod.js file, restarting and clearing cache as well. No luck with my text colors. Waiting for an update to the HACS.

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Jan 6, 2025

I copied the modified card-mod.js file to /config, set the new config in my configuration.yml, reloaded HA, purged cache

not sure, but do I see 2 card_mod installs in that screen dump of the code? there is also a card-mod in the minimalist config?

I suppose that would never be wise

same for the mini-media-player btw....

@IgorSimic
Copy link

Guys, apparently .gz file should be deleted. This make it working for me. Thanks to arganto from ha forum for tip.

@petebanham
Copy link

petebanham commented Jan 6, 2025

I copied the modified card-mod.js file to /config, set the new config in my configuration.yml, reloaded HA, purged cache but still no luck on my entities color formating. For the glances it works fine, even before making this change to add _. Not sure what to try next.

The copy method did not work for me but editing original .js AND renaming the .gz file did

@petebanham
Copy link

I tried editing the card-mod.js file, restarting and clearing cache as well. No luck with my text colors. Waiting for an update to the HACS.

Did you also rename the .gz fie as I needed to that as well?

@IgorSimic
Copy link

No, I just deleted .gz file (moved to backup location), edited .js file and restarted HA. Then, cleared cache on each browser and mobile app.

thomasloven referenced this issue in home-assistant/frontend Jan 6, 2025
* Fix many lint warnings

* Fix ALL lint warnings

* small fix

* type fixes
@vlad36N
Copy link

vlad36N commented Jan 6, 2025

Changed it to work as a frontend module, deleted .gz file (moved to backup location), edited "card-mod.js" file and restarted HA. Then, cleared cache. Working +++

@thomasloven
Copy link
Owner

Feel free to ping me on discord for big things like this if discovered during the beta.
I've suffered from burnout this fall, so I really haven't had the energy to keep up, but this didn't take me two minutes to find once I knew there was a problem...

Thanks to all the people debugging here, too. You were spot on!

@Mariusthvdb
Copy link
Author

thanks Thomas, all the best, and stay healthy first!

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Jan 6, 2025

I just installed this, but it causes true upheaval in my config.....

all of my nested cards are no longer using their box-shadow: none, and stack-cards really look very silly now. Probably need to find the new syntax, but I hadn't expected to be needing to adjust all of the card_mods because of this.

Also, the badges that were modded fine (albeit with mod-card) now also require new mods, because somehow this doesnt look good ;-)

Scherm­afbeelding 2025-01-06 om 10 53 27

squared background shining through there....

my theme classes are borked. and my scrolling folds no longer fold. so, all in all a rough ride this update

the badges was a simple edit (posted in the community) but all others require so much work, I reverted to my previous edited resource for now until time permits.....

@pergolafabio
Copy link

im seeing the same thing/issue with shadows , any solution for it?

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Jan 6, 2025

suppose we need to open dedicated new issues per detail. Otherwise we wont be able to oversee things.

Of course, that is assuming it is an issue, and not a matter of adapting syntax. For that we should probably hop over to the community.

( I just added something to a new issue regarding classes, which does feel like an issue. Could be wrong...)

@karwosts
Copy link

karwosts commented Jan 6, 2025

home-assistant/frontend#23603 will restore the removed attributes to ha-entity-marker (if approved 🤞 )

I'm assuming this is what you need:
image

@Mariusthvdb
Copy link
Author

home-assistant/frontend#23603 will restore the removed attributes to ha-entity-marker (if approved 🤞 )

I'm assuming this is what you need:

Yes, that would be great indeed, thanks! so much appreciated!

@VasMan
Copy link

VasMan commented Jan 6, 2025

I upgraded today to latest version, and even though it fixed my entities card formating and I can see the format as expected this upgrade broke the formating of my mushroom cards buttons below. See screenshot before and after card-mod update

Before Upgrade
Before

After Upgrade
After

Before Upgrade
renderEntity before card-mod update

After Upgrade
renderEntity after card-mod update

Below is the code I am using for the formating of the mushroom chips card

          btn1:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  double_tap_action:
                    action: more-info
                  tap_action:
                    action: toggle
                  icon: mdi:coach-lamp
                  entity: light.external_front
                  card_mod:
                    style: |
                      ha-card {
                        --chip-background: {{ 'green' if is_state('light.external_front', 'on') else 'red' }};
                        padding: 5px;
                        border-radius: 100px;
                                      }

@Mariusthvdb
Copy link
Author

Mariusthvdb commented Jan 6, 2025

you have 2 version of card_mod....

@VasMan
Copy link

VasMan commented Jan 6, 2025

you have 2 version of card_mod....

Thanks for the quick response, I removed the UI lovelace minimalist HACS add-on, restarted everything, so only one card_mod shows but still on the mushroom chips card the formatting issue remains

Remove

@Mariusthvdb
Copy link
Author

I believe you should open a separate issue for the card_mod config on the mushroom card in this repo. It will get buried here.

just be sure to only post a minimal failing yaml bit, and not complete cards ;-)

@VasMan
Copy link

VasMan commented Jan 6, 2025

I believe you should open a separate issue for the card_mod config on the mushroom card in this repo. It will get buried here.

just be sure to only post a minimal failing yaml bit, and not complete cards ;-)

Sure, makes total sense, will do as suggested. Thanks again!

@emufan
Copy link

emufan commented Jan 6, 2025

Ah, approved. Was not expecting it.

@Mariusthvdb
Copy link
Author

I believe Bram just approved the PR?

thomasloven added a commit that referenced this issue Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests