Mushroom Cards Card Mod Styling/Config Guide

[tomg1970]

@Mushroom Cards Card Mod Styling/Config Guide

This was one of the methods I was going to suggest. It will require some adjusting to fit your needs, but if the status isn’t met the icon doesn’t appear. I used my entity to test so you’ll need to adjust. type: custom:mushroom-chips-card alignment: center chips: - type: template entity: binary_sensor.fenster_wz icon: |- {% if is_state(‘binary_sensor.fenster_wz’, ‘off’) %} mdi:window-closed-variant {% elif is_state(‘binary_sensor.fenster_wz’, 'unavailable…

Hi Dimitri, my idea was to retain the toggle on/off function.

[dimitri.landerloos]

Just add a toggle action to the template chip.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.office_screen_left
    icon: |-
      {% if states(config.entity) == 'on' %}
        mdi:power
      {% else %}
        mdi:power-off
      {% endif %}
    icon_color: |-
      {% if states(config.entity) == 'on' %}
        white
      {% else %}
        grey
      {% endif %}
    tap_action:
      action: toggle

[BernardS (Bernard)]

Unfortunatelly not. The color is not applied either.

I give up, thank you all for your invested time.

Will use as a final solution, Mushoroom card placed bellow each vertical slider. Looks reasonable as well.

[LiQuid_cOOled]

You ever figure it out, please let me know.

[petrij98]

Would that be a bug report that I bring to card-mod or mushroom-card? I’d love to see this get patched up soon.

[dimitri.landerloos]

i think it is just a limitation of CSS. CSS is rendered when the website is first displayed. the way that we are getting around it with card mod updating cards on state changes is probably a bit hacky in the first place.

you can certainly try and open a bug report on card-mod. but find it unlikely it will be considered to be honest.

[LiQuid_cOOled]

@petrij98 Did you see my comments about the the animation continuing after the light turns off. It did the same thing for me until I relocated the following below the @keyframes

{% else %}                    
{% endif %}

I was curious if that at least fixed the animation issue?

[petrij98]

Brother, I fail to understand how, but that absolutely fixed it. Thank you so much! So, do I need to make sure the keyframes are defined within the if statement from now on?

[LiQuid_cOOled]

I would suggest doing so, but if you have an example where it doesn’t seem necessary, just reach out.

[GSD (Gabriel Dragan)]

Any idea why this is no longer working after the latest core update? I mean the ha-icon specifically. It used to before that, now it seems that the whole structure has changed.

I also re-downloaded mushroom cards and card-mod, but it didn’t make any difference.

type: custom:mushroom-update-card
card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          .button {
            height: 42px !important;
            width: 42px !important;
            border-radius: 21px !important;
            background: rgba(10, 10, 10, 0.2) !important;
            margin-left: 5px !important;
          }
          ha-icon {
            --card-mod-icon: mdi:close-circle-outline !important;
            height: 21px;
            width: 21px;
          }
      mushroom-button:nth-child(2):
        $: |
          .button {
            height: 42px !important;
            width: 42px !important;
            border-radius: 21px !important;
            background: rgba(10, 10, 10, 0.2) !important;
          }
          ha-icon {
            --card-mod-icon: mdi:download !important;
            height: 21px;
            width: 21px;
          }

[LiQuid_cOOled]

Can you give a little more context? What is not working?

UPDATE…I see what you are saying

[GSD (Gabriel Dragan)]

Sorry for the misunderstanding. I should’ve been more specific…
I meant the ha-icon styling specifically. The button styling works just fine.

ha-icon {
  --card-mod-icon: mdi:close-circle-outline !important;
  height: 21px;
  width: 21px;
}

[LiQuid_cOOled]

@GSD

mushroom-update-buttons-control$:

I was able to change the icon size so it’s still adjsutable. Is there a specific setting you are looking to adjust? I’ll need a bit to check the other settings.

type: custom:mushroom-update-card
entity: update.home_assistant_supervisor_update
show_buttons_control: true
card_mod:
  style: |
   ha-card {
     --control-icon-size: 40px;
      }

[GSD (Gabriel Dragan)]

Yes, the icon itself.

Actually the icons of the buttons, not the main icon. Each one individually: mdi:close-circle-outline for nth-child(1) and mdi:download for nth-child(2).

The CSS was doing that just fine, as it was, before the core update.

[LiQuid_cOOled]

We may need @dimitri.landerloos expertise on this one, but I’ll keep working on it.

[GSD (Gabriel Dragan)]

Ok… Thanks. I’ll keep looking into it as well.

[LiQuid_cOOled]

I loaded Core 2024.1.6 and Mushroom 3.4.1 on my test system and it still didn’t work.

You may better off with a template card.

[dimitri.landerloos]

Template card doesnt have buttons, so defeats the purpose a little.

Ill take a look when i am back from work today

[LiQuid_cOOled]

I meant you’d have to create the card he wants…additional work I can’t get the icons or colors changed. Nothing reacts inside the shadow-root.

[Manen123]

@dimitri.landerloos since the last mushroom Update the card mod fails by the primary and secondary text color. The color didn‘t change anymore:

Herr is the code:

Amy idear what‘s wrong?
Best Regards!