Mushroom Cards Card Mod Styling/Config Guide

I think that should be:

style: |

with a space between the colon and pipe character.

1 Like
  - type: custom:mushroom-update-card
                        entity: update.home_assistant_operating_system_update
                        show_buttons_control: true
                        icon: mdi:home-assistant
                        name: HA System
                        card_mod:
                          style: |
                            ha-state-icon {
                              color: {{ states("input_text.kleur_iconen")}};
                            }
                            mushroom-shape-icon$: |
                              .shape {
                                --shape-color: disable;
                              }

I want no background color and the color of the icon in a input tekst color… this gives me nothing :frowning:

This will work…

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: none;
      }
    .: |
      ha-state-icon {
      color: {{ states('input_text.kleur_iconen')}};
      }
1 Like

Thank you very much!

1 Like

Hi!

Does anyone know the answer to why some card mod changes don’t show up in the card code editor. The RAW file is visible.

What is your card code?

type: custom:mushroom-template-card
icon: mdi:fireplace
primary: ''
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
       --shape-color: none;
       }
      .shape:after {
       content: ' ';
       position: absolute;
       width: inherit;
       height: inherit;
       border-radius: 500px;
       border: 5px solid rgb(var(--rgb-blue));
       border-left-color: transparent;
       animation: spin 1s linear infinite;
       }

In this case, just a simple test.

I am seeing the code

Maybe, try clearing your browser cache

Here is another case.

      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Zuhanyzó
            secondary: >-
              {{states('sensor.zuhanyzo_a531_temperature') | float | round(1)}}
              °C

              {{states('sensor.zuhanyzo_a531_humidity') | float | round(1)}} %
            icon: mdi:shower-head
            tap_action:
              action: navigate
              navigation_path: /dashboard-kezelfelulet/zuhanyzo
            hold_action:
              action: none
            icon_color: |
              {% if is_state('light.led_driver_zuhanyzo','on') %}
                orange
              {% endif %}
            multiline_secondary: true
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                   {% if is_state('fan.paraelszivo_zuhanyzo_switch_0','on') %}
                   --shape-animation: ping 2s infinite; {% endif %}
                  }
                  @keyframes ping {
                     0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                     70% {box-shadow: 0 0 0 10px transparent;}
                     100% {box-shadow: 0 0 0 0 transparent;}
                   }

What is not showing?

chrome-capture-2024-6-7

The card works!!!
I can’t see the card-mod section in the card code editor. I can only see it in the RAW file.

The problem exists on different computers and in different browsers.

What browser are you using?

You have me way confused…

do you mean you don’t see the card mod changes in the editor?

I see the card mod code in your pic

Chrome Browser

      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            card_mod:
              style:
                mushroom-shape-icon$: |
                  .shape {
                   {% if is_state('fan.paraelszivo_zuhanyzo_switch_0','on') %}
                   --shape-animation: ping 2s infinite; {% endif %}
                  }
                  @keyframes ping {
                     0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
                     70% {box-shadow: 0 0 0 10px transparent;}
                     100% {box-shadow: 0 0 0 0 transparent;}
                   }
            primary: Zuhanyzó
            secondary: >-
              {{states('sensor.zuhanyzo_a531_temperature') | float | round(1)}}
              °C

              {{states('sensor.zuhanyzo_a531_humidity') | float | round(1)}} %
            icon: mdi:shower-head
            tap_action:
              action: navigate
              navigation_path: /dashboard-kezelfelulet/zuhanyzo
            hold_action:
              action: none
            icon_color: |
              {% if is_state('light.led_driver_zuhanyzo','on') %}
                orange
              {% endif %}
            multiline_secondary: true
          - type: custom:mushroom-template-card

You are looking at the wrong section!

I apologize, but you are not being clear with your issue. It may be a translation thing. Telling me I am looking at the wrong section does not clarify your issue…

has to be

color: rgb({{states('input_text.kleur_iconen')}});

No it doesn’t…


1 Like

but if you define the color as 13,13,13 you have to use color: rgb(13,13,13) and not color: 13,13,13

Agreed, but you didn’t clarify your input data. Your input can also include

1 Like