search

thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.17k stars 168 forks source link

HA Update 2024.7.2 card_mod no longer seems to work properly #383

Open pille89 opened 4 months ago

pille89 commented 4 months ago

My Home Assistant version: 2024.7.2

My lovelace configuration method (GUI or yaml): both

What I am doing: See yaml code and image

What I expected to happen: see picture 1

What happened instead: see picture 2

# The least amount of code possible to reproduce my error

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Wohnzimmer
        secondary: >-
          🌡️ {{ states('sensor.thermometer_wohnzimmer_temperature') }}ºC    💧
          {{ states('sensor.thermometer_wohnzimmer_humidity') }}%
        icon: mdi:sofa-outline
        entity: sensor.thermometer_wohnzimmer_temperature
        multiline_secondary: true
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: blue
        fill_container: true
        layout: horizontal
        card_mod:
          style: |
            :host([dark-mode]) {
              background: rgba(var(--rgb-primary-background-color), 0.2);
            } 
            :host {
              background: rgba(var(--rgb-primary-text-color), 0.025);
              --mush-icon-size: 76px;
              height: 60px;
              margin-left: -20px !important;
            }
            ha-card {
              border-width: 0px;
              box-shadow: 0px 0px;
            }        
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.thermometer_wohnzimmer_battery
            icon: |2-
               {% set level = states(entity) | int(0)%}
               {% if level >= 90 %}
               mdi:battery-90
              {% else %}
               {% set level = states(entity) | int(0)%}
               {% if level >= 80 %}
                mdi:battery-80
               {% elif level >= 70 %}
                mdi:battery-70
               {% elif level >= 60 %}
                mdi:battery-60
               {% elif level >= 50 %}
                mdi:battery-50
               {% elif level >= 40 %}
                mdi:battery-40
               {% elif level >= 30 %}
                mdi:battery-30
               {% elif level >= 20 %}
                mdi:battery-20
               {% elif level >= 10 %}
                mdi:battery-10
               {% else %}
                mdi:battery-sync-outline
               {% endif %}
              {% endif %}
            icon_color: |-
              {% set level = states(entity) | int(0) %}
              {% if level >= 16 %}
                green
              {% elif level >= 15 %}
                yellow
              {% else %}
                red
              {% endif %}
          - type: template
            entity: light.wohnzimmer
            icon: |-
              {% if is_state(entity, 'on') %}
              mdi:lightbulb-on-outline
              {% else %}
              mdi:lightbulb-off-outline
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            double_tap_action:
              action: none
          - type: template
            entity: input_boolean.schalter_wz_lichtautomatik
            icon: >-
              {% if is_state(entity, 'on')%}  mdi:lightbulb-auto  {% else %} 
              mdi:lightbulb-auto-outline  {%endif %}
            icon_color: >-
              {% if is_state(entity, 'on')%}  green  {% else %}  red  {% endif
              %}
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: template
            entity: cover.rollos_wohnzimmer
            icon: |-
              {% if is_state(entity, 'open') %}
              mdi:window-shutter-open
              {% else %}
              mdi:window-shutter
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: call-service
              service: browser_mod.popup
              target:
                device_id:
                  - 2b05e0fe48bf4
                  - a31f93115626a
              data:
                dismissable: true
                autoclose: false
                content:
                  type: vertical-stack
                  cards:
                    - features:
                        - type: cover-open-close
                      type: tile
                      entity: cover.rollo_wohnzimmerfenster
                      name: Wohnzimmerfenster
                      show_entity_picture: false
                      hide_state: false
                      vertical: true
                    - features:
                        - type: cover-open-close
                      type: tile
                      entity: cover.rollo_wohnzimmer_tur_links
                      name: WohnzimmertĂĽr links
                      show_entity_picture: false
                      hide_state: false
                      vertical: true
                    - features:
                        - type: cover-open-close
                      type: tile
                      entity: cover.rollo_wohnzimmer_tur_rechts
                      name: WohnzimmertĂĽr rechts
                      show_entity_picture: false
                      hide_state: false
                      vertical: true
                timeout: 60000
                title: Rollos Wohnzimmer
            hold_action:
              action: more-info
            double_tap_action:
              action: none
          - type: template
            entity: remote.wohnzimmer
            icon: |-
              {% if is_state(entity, 'on') %}
              mdi:television-classic
              {% else %}
              mdi:television-classic-off
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            double_tap_action:
              action: none
          - type: template
            entity: sensor.ps5_679_activity
            icon: |-
              {% if is_state(entity, 'on') %}
              fab:playstation
              {% else %}
              fab:playstation
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'on') %}
              yellow
              {% else %}
              green
              {% endif %}
            tap_action:
              action: toggle
            hold_action:
              action: more-info
            double_tap_action:
              action: none
        alignment: left
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0px;
              --chip-box-shadow: none;
              --chip-background: none;
              padding: 0px 10px 0px 0px;
            } 
    card_mod:
      style: |
        ha-card {
          height: 102px;
          border-width: 0px;
          box-shadow: 0px 0px;
        }
card_mod:
  style: |
    ha-card { 
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    }

# End of code

picture 1: 1

picture 2: 2

Image 1 is before the update to HA 2024.7.2 and image 2 is after the update

pitiriguisvi commented 3 months ago

same here

hesspoint commented 3 months ago

same issue.

I use stack-in-card to show a mushroom template card and then below a mushroom chip card row, same as the submitter.

They used to look like this IMG_0034

Since either the latest HA update to 2024.7.x They now look like this

image

Somehow the alignment is messed up and also the bar with the chips card is no longer showing

ParalaX002 commented 3 months ago

Hi, I can confirm the issue with the same kind of code and mushroom cards.

mx-vatte commented 3 months ago

I can also confirm that the position is off towards the bottom and there is no reaction regarding any alignment inputs since update to 2024.7.2.

hesspoint commented 3 months ago

This issue is open since 2 weeks. It would be nice if this could be fixed sometime as everyones dashboard is messed up due to this bug :(

Maxcodesthings commented 3 months ago

Piling on here. Even simple card-mod settings just dont work:

 - type: custom:bar-card
        icon: mdi:white-balance-sunny
        min: 0
        max: 8
        positions:
          name: 'off'
          icon: inside
        severity:
          - color: '#F9E400'
            from: 0
            to: 10
        card-mod:
          style: |
            ha-card {
              border: 1px solid red;
            }
        entities:
          - entity: sensor.my_home_solar_power

And no red border: image

Kai-Wulf commented 3 months ago

Seeing the same non-working behaviour in 2024.7.3

Tried just a simple button card, with a simple style change. No difference

Card-Mod installed via HACS

Tested with and without frontend settings in config yaml: extra_module_url:

card-mod-not-working-button-card

Mariusthvdb commented 3 months ago

please close this issue, card-mod is not broken at all.

All of the above is either user error on the used method (why use card-mod when button-card has its own css options) or caused by other custom-cards configurations combinations.

Card-mod might not be completely doing in Sections what some hope it would, but that has more to do with the experimental state the Sections view is still in.

otoh, many things are possible, if users would make a true effort to walk the Dom, and find the correct property to mod.

Also, when asked for a minimal config, how would fit https://github.com/thomasloven/lovelace-card-mod/issues/383#issue-2402937066 into that category, and how could poster expect the repo owner to even start having a look....

anyways, 2024.8 is out, and card-mod is doing all it should do, as it hasn't stopped doing......

ildar170975 commented 3 months ago

I am afraid most of recently raised issues should be closed due to: -- more than a possible influence of custom cards -- users' errors

ParalaX002 commented 3 months ago

Ok, so for me:

After more investigation, it seems that using the :host has some stuff that changed, but it's still necessary at some point. So what I did is play a bit with all the CSS modification, to get it working. Hence, card mod doesn't seems at fault, but the code we use which produce the kind of stuff pille89 is using (that I use too) seems to have changed.

hesspoint commented 3 months ago

@ParalaX002

Ok got it. I also use that card mod CSS. Since it seems you got it working again, could you share your modifications so that we can also try it out?

Thanks a lot!

Mariusthvdb commented 3 months ago
  • Then all the CSS broke with just updating to 2024.7

this is just plain nonsense, why do you say that. Could be that 1 or 2 mods you use on a tile card now need adaptation.

stating all CSS broke has no foundation at all. again, this non-Issue needs to be closed, and support questions should go to the community.

As long as you dont do that, you wont get help, because this is not the place for that

ParalaX002 commented 3 months ago

Don’t take it so on yourself. With the context, it was clear that in my configuration, all the transformation made didn’t work anymore. I’m not a css expert, so when everything is suddenly out of place, this is how it feels. I then explained why, and that it seems to be with the modification we make, which seems to come from the same kind of template with chips on the top and bottom of the card. I also ruled out the card mod here.

ill post here my new code but I’m away of the computer at the moment.

ParalaX002 commented 3 months ago

Hi,

So here is the code of my cards:


type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: spacer
      - type: template
        content_info: none
        tap_action:
          action: navigate
          navigation_path: cave-batteries
        icon: >
          {% if [states('sensor.cave_battery') | float] | select('lt', 10) |
          list | count > 0 %} mdi:battery-20 {% elif
          [states('sensor.cave_battery') | float] | select('lt', 20) | list |
          count > 0 %} mdi:battery-50   {% else %} mdi:battery {% endif %}
        icon_color: >
          {% if [states('sensor.cave_battery') | float] | select('lt', 10) |
          list | count > 0 %} red  {% elif [states('sensor.cave_battery') |
          float] | select('lt', 20) | list | count > 0 %} orange {% else %} grey
          {% endif %}
    alignment: end
    card_mod:
      style:
        .: |
          ha-card {
            --chip-spacing: 0;
            --chip-border-width: 0;
            --chip-background: none;
            margin-right: 6px;
            height: 25px;
          }
  - type: custom:mushroom-template-card
    primary: Cave
    tap_action:
      action: navigate
      navigation_path: cave
    secondary: >
      {{ states("sensor.cave_temperature") | round(1, default=0) }}°C | {{
      states("sensor.cave_humidity") | round(1) }}% | {{
      (states("sensor.prise_boiler_power") | float | round(1) ) | round(1) }}Wh
    icon: mdi:home-floor-negative-1
    icon_color: blue
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          --chip-spacing: 0;
          --chip-border-width: 0;
          --chip-background: none;
          --ha-card-border-width: 0;
          margin-left: -25px;
          margin-top: -55px;
        }
        :host
        {
          --mush-icon-size: 72px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.prise_boiler
        content_info: none
        tap_action:
          action: more-info
        icon: mdi:water-boiler
        icon_color: |
          {% if is_state('switch.prise_boiler', 'on') %}
            blue
          {% else %}
            grey
          {% endif %}
      - type: spacer
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-spacing: 0;
          --chip-border-width: 0;
          --chip-background: none;
          margin-right: 6px;
          margin-top: -25px;
        }
card_mod:
  style: |
    ha-card {
      background: rgba(25, 25, 25, 0.1);
    }

Which gives this:

image

This is a simple ones, but it follows the card the author showed at first. I removed a lot of unused CSS that I had, and the margins are a lot of different. There was also some fideling with the ":host" and "ha-card". Not sure what it relates to, but it had an impact. I hope this can help.

Mariusthvdb commented 3 months ago

I also ruled out the card mod here.

And yet you keep breaking all Github/Home Assistant conventions, and again post in the card-mod repo....

hesspoint commented 3 months ago

I also ruled out the card mod here.

And yet you keep breaking all Github/Home Assistant conventions, and again post in the card-mod repo....

Can we please focus on solving the problem instead of being pedantic about whatever rules? Sorry but either please contribute to a solution or let others do this. These comments are not helping anyone.

ildar170975 commented 3 months ago

This is not about shutting you down - this is about

Mariusthvdb commented 2 months ago

These comments Are helping a lot of people.

It is a fundamental principle to the entire community in GitHub and Homeassistant to post in the correct place, to help other users find it and contribute.

being as stubborn as above in fact doesn’t help anyone, and it is only because there is no moderation here this issue is not closed down yet.

You would have already found your answer in the community

hesspoint commented 2 months ago

FYI I have played around with the cards that did not show as they used to.

In fact I asked chatGTP for advice and voila it suggested to add one line

display: flex;

here is the modified code

card_mod: style: | :host([dark-mode]) { background: rgba(var(--rgb-primary-background-color), 0.2); } :host { background: rgba(var(--rgb-primary-text-color), 0.025); --mush-icon-size: 76px; height: 63px; margin-left: -21px !important; display: flex; }

That line of code restored to how it was. Anyone who also had that issue try adding this.