Mushroom Cards Card Mod Styling/Config Guide

Community Guides
, ,
740

I think that should be:

style: |

with a space between the colon and pipe character.

1 Like
741 
  - 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:

742

This will work…

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

Thank you very much!

1 Like
744

image
image1059×315 11.8 KB

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.

745

What is your card code?

746 
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.

747

I am seeing the code

image
image1362×812 54.6 KB

Maybe, try clearing your browser cache

748

image
image957×932 44.7 KB

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;}
                   }
749

What is not showing?

chrome-capture-2024-6-7

750

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.

751

The problem exists on different computers and in different browsers.

What browser are you using?

752

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

image
image850×542 134 KB

753

Chrome Browser

754

image
image618×543 18.2 KB

      - 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!

755

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…

756

has to be

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

No it doesn’t…

image
image1954×676 58.9 KB

image
image1118×356 7.87 KB

1 Like
758

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

759

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

image
image1106×330 9.55 KB

1 Like