Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 2)

[Faecon (Jo)]

          - type: horizontal-stack 
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: climate.ruimte1_airco
                    icon: mdi:fire
                    icon_color: >
                      {% if is_state("climate.ruimte1_airco", 'heat') %}
                        [176,17,17]
                      {% else %}
                        [84, 84, 84]
                      {% endif %}
                    tap_action:
                      action: " "
                    card_mod:
                      style: |
                        ha-state-icon {
                            {% if is_state("climate.ruimte1_airco", 'heat') %}
                            --icon-animation: fire 1.5s infinite;
                            transform-origin: 50% 85%;

                        }
                        @keyframes fire {
                            0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                        }
                alignment: center

              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: climate.ruimte1_airco
                    icon: mdi:snowflake
                    icon_color: >
                      {% if is_state("climate.ruimte1_airco", 'cool') %}
                        [3, 244, 252]
                      {% else %}
                        [84, 84, 84]
                      {% endif %}
                    tap_action:
                      action: " "                      
                    card_mod:
                      style: |
                        mushroom-shape-icon {
                          {% if is_state("climate.ruimte1_airco", 'cool') %}
                            --card-mod-icon: mdi:snowflake;
                            animation: cool 6s ease-in-out infinite;
                          {% endif %}
                        display: flex;
                        }
                        @keyframes cool {
                          0%, 100% { transform: rotate(25deg); }
                          25% { transform: rotate(-25deg); }
                          50% { transform: rotate(50deg); }
                          75% { transform: rotate(-50deg); }
                        }                        
                    alignment: center

so my both card mods are not working…

[dimitri.landerloos]

With how long and how many questions you have asked in this forum i do feel that you should know by now that this is not how you apply animations to chip icons.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: climate.ruimte1_airco
    icon: mdi:snowflake
    icon_color: |
      {% if is_state("climate.ruimte1_airco", 'cool') %}
        [3, 244, 252]
      {% else %}
        [84, 84, 84]
      {% endif %}
    tap_action:
      action: ' '
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state("climate.bedroom_heating", 'cool') %}
          --card-mod-icon: mdi:snowflake;
          animation: cool 6s ease-in-out infinite;
        {% endif %}
        display: flex;
      }
      @keyframes cool {
        0%, 100% { transform: rotate(25deg); }
        25% { transform: rotate(-25deg); }
        50% { transform: rotate(50deg); }
        75% { transform: rotate(-50deg); }
      }  

[Faecon (Jo)]

ok, i will search a little further

[dimitri.landerloos]

No, i gave you the answer too. i wouldnt just tell you that you should know.

[Faecon (Jo)]

Ok. Thanks !

[Faecon (Jo)]

do you have a link where i can find the difference between | and .: | and when to use ?

I want to add this to your code, but I don’t know how

                    ha-card {
                      --chip-background: transparent;
                      border: none !important;
                      box-shadow: none !important;
                    }

[Faecon (Jo)]

what If I have 2 templates, where do I place the card-mod ?

type: custom:mushroom-chips-card
chips:
  - type: template
card_mod:
 - type: template

this does not look good. Do I have to make 2 chips cards in a horizontal stack ?

        type: custom:mushroom-chips-card
        chips:
          - type: template
        card_mod:
        type: custom:mushroom-chips-card
        chips:
          - type: template
        card_mod:

[dimitri.landerloos]

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.5.4 and Card Mod Version 3.4.3 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.9). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

This section:

@dimitri.landerloos

What the $ and .: | symbols do

[dimitri.landerloos]

Like this:

type: custom:mushroom-chips-card
chips:
  - type: template
  - type: template
card_mod:
  style:
    mushroom-template-chip:nth-child(1): |
      ha-state-icon {
      }
    mushroom-template-chip:nth-child(2): |
      ha-state-icon {
      }

Here is the chip card section:

Mushroom Cards Card Mod Styling/Config Guide

Chips Card Sections are split:

Main Icon Styling

You can style the main icon of each chip type like this: Change the icon type/mdi. [image] The weather chip icon cannot be modified as it is not a normal HA icon. Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper. card_mod: style: mushroom-conditional-chip:nth-child(1): mushroom-template-chip$: | ha-state-icon { --card-…

[Faecon (Jo)]

quote

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: blue !important;
      }
    .: |
      ha-card {
        background: red;
      }

note where the .: starts is the exact same place as where you initial mushroom-shape-icon$: | starts. basically treat writing .: | as writting a whole new style: | again.

so i was thinking like this

                card_mod:
                  style:
                    mushroom-template-chip:nth-child(1)$: |
                      ha-state-icon {
                        {% if is_state("climate.ruimte1_airco", 'cool') %}
                          --card-mod-icon: mdi:fan;
                          animation: spin 1s linear infinite ;
                        {% endif %}
                        display: flex;
                      }
                      @keyframes spin {
                      100% { transform: rotate(360deg); }
                      }
                    .: |    
                      ha-card {
                        border: none !important;
                        box-shadow: none !important;
                        }

                    mushroom-template-chip:nth-child(2)$: |
                      ha-state-icon {
                        {% if is_state('media_player.woonkamer', 'playing') %}
                        --icon-animation: music 2s ease-in-out infinite alternate;
                        transform-origin: 50% 100}
                      }
                      .shape {
                        perspective: 7px;
                      }
                      @keyframes music {
                        0%, 100% { transform: translateY(0px) scaleX(1); }
                        20% { transform: translateY(2px) scaleX(0.9); }
                        40% { transform: rotateY(10deg) rotateZ(-10deg); }
                        60% { transform: translateY(-4px) scaleX(1.1); }
                        80% { transform: rotateY(-10deg) rotateZ(10deg); }
                      }
                    .: |    
                      ha-card {
                        border: none !important;
                        box-shadow: none !important;
                        }

but that gives me a duplicate key on the ha-card

[dimitri.landerloos]

So:

1. Chips are quite different from normal cards in terms of the pathing, so just keep that in mind.

2. Chips dont have a .shape i would check the element paths of the card you are trying to style. The background of a chip is just considered a card background, because each chip is considered its own card.

3. The way you get to the icon of a chip and the background of a chip is not the same. So you would do this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:ab-testing
    card_mod:
      style: |
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }                    
  - type: template
    icon: mdi:test-tube
    card_mod:
      style: |
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }                      
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state("climate.ruimte1_airco", 'cool') %}
          --card-mod-icon: mdi:fan;
          animation: spin 1s linear infinite ;
        {% endif %}
        display: flex;
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        {% if is_state('media_player.woonkamer', 'playing') %}
          animation: music 2s ease-in-out infinite alternate;
        {% endif %}
        transform-origin: 50% 100;
      }
      @keyframes music {
        0%, 100% { transform: translateY(0px) scaleX(1); }
        20% { transform: translateY(2px) scaleX(0.9); }
        40% { transform: rotateY(10deg) rotateZ(-10deg); }
        60% { transform: translateY(-4px) scaleX(1.1); }
        80% { transform: rotateY(-10deg) rotateZ(10deg); }
      }

[Dmitry3650 (Dmitry)]

Dear friend, I apologize for not answering right away. Your method number two helped me a lot, thank you!!! There is one more small problem… How can you stretch the temperature control so that it is the same length as the sliders? In picture number two, I did it in Photoshop as I would like, but I can’t… I studied your materials but found only editing the slider… But I don’t have a slider and I can’t change the size…

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: climate.otoplenie_zal
    secondary: |
      {% if states(config.entity) == 'heat' %}
        On -
       {{state_attr(config.entity, 'current_temperature')}}%
      {% else %}
        Off
      {% endif %}
    tap_action:
      action: more-info
    icon: mdi:fire
    layout: horizontal
    icon_color: |
      {{ '#ff6f22' if is_state(config.entity, 'heat') else 'grey' }}
    primary: Hall
    fill_container: false
    multiline_secondary: false
    card_mod:
      style: |
        ha-state-icon {
          {% if state_attr(config.entity, 'hvac_action') == 'heating'  %}
            animation: fire 3.5s infinite;
            transform-origin: 50% 85%;
          {% endif %} 
        }
        ha-card {
          border: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          }
        @keyframes fire {
          0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        }
  - type: custom:mushroom-climate-card
    entity: climate.otoplenie_zal
    collapsible_controls: false
    show_temperature_control: true
    layout: horizontal
    card_mod:
      style: |

        ha-card {
          border: none;
          }
        mushroom-state-item {
          display: none;
        }
        mushroom-state-info$: |
         .container {
          flex-direction: row !important;
          align-items: baseline;
          gap: 10px;
        }

[dimitri.landerloos]

This should do the trick. And hopefully should also “grow” correctly with different screen sizes being used.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: climate.lounge_heating
    secondary: |
      {% if states(config.entity) == 'heat' %}
        On -
       {{state_attr(config.entity, 'temperature')}}%
      {% else %}
        Off
      {% endif %}
    tap_action:
      action: more-info
    icon: mdi:fire
    layout: horizontal
    icon_color: |
      {{ '#ff6f22' if is_state(config.entity, 'heat') else 'grey' }}
    primary: Hall
    fill_container: false
    multiline_secondary: false
    card_mod:
      style: |
        ha-state-icon {
          {% if state_attr(config.entity, 'hvac_action') == 'heating'  %}
            animation: fire 3.5s infinite;
            transform-origin: 50% 85%;
          {% endif %} 
        }
        ha-card {
          box-shadow: none;
          margin-left: 0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
        }
        @keyframes fire {
          0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        }
  - type: custom:mushroom-climate-card
    entity: climate.lounge_heating
    collapsible_controls: false
    show_temperature_control: true
    layout: horizontal
    card_mod:
      style:
        mushroom-climate-temperature-control$: |
          mushroom-input-number {
            flex-basis: 100% !important;
          }
        .: |
          mushroom-state-item {
            display: none;
          }
          ha-card {
            margin-left: -8px !important;
          }

The key bit is this:

        mushroom-climate-temperature-control$: |
          mushroom-input-number {
            flex-basis: 100% !important;
          }

We are accessing the element that is the whole container for the number selection and telling it. Hey you are a flex element of multiple elements that could be there. Please take up 100% of the available width to you.

[Dmitry3650 (Dmitry)]

This helped me!!! Thank you very much!!!

[Faecon (Jo)]

@dimitri.landerloos

    card_mod:
      style: |
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }  

top ! thanks for being so patient with me !

[Dmitry3650 (Dmitry)]

Friend, please help me with one more small problem… In the photo of Fan1 and Fan 2, the icon continues to light up when turned off. I found information that it can be made gray by adding this line of code “{{ ‘#00bcd4’ if is_state(config.entity, ‘on’) else ‘grey’ }}” but I spent several hours of time and could not integrate it into existing code… It looks like I’m making some syntax errors… Please help me, how to put this code correctly?

type: custom:mushroom-fan-card
entity: fan.ventilation_pwm_fan4
fill_container: false
icon_animation: true
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
layout_options:
  grid_columns: 4
  grid_rows: 1
layout: horizontal
name: Fan1
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: #163c40 !important;
       }
    .: |
      ha-state-icon {
       color: #00bcd4;
      }
    mushroom-fan-percentage-control$: |
      mushroom-slider {
          --main-color: #00bcd4 !important;
          --bg-color: #163c40 !important;
        }

[dimitri.landerloos]

I also moved your sections around a bit. But thats just my preference in order.

type: custom:mushroom-fan-card
entity: fan.downstairs_bathroom_relay_l1
fill_container: false
icon_animation: true
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
layout_options:
  grid_columns: 4
  grid_rows: 1
layout: horizontal
name: Fan1
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: #163c40 !important;
      }
    mushroom-fan-percentage-control$: |
      mushroom-slider {
        --main-color: #00bcd4 !important;
        --bg-color: #163c40 !important;
      }
    .: |
      ha-state-icon {
        color: {{'#00bcd4' if is_state(config.entity, 'on') else 'grey'}};
      }

You can also do this instead, IMO a bit easier to read:

type: custom:mushroom-fan-card
entity: fan.downstairs_bathroom_relay_l1
fill_container: false
icon_animation: true
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: false
secondary_info: state
layout_options:
  grid_columns: 4
  grid_rows: 1
layout: horizontal
name: Fan1
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: #163c40 !important;
      }
    mushroom-fan-percentage-control$: |
      mushroom-slider {
        --main-color: #00bcd4 !important;
        --bg-color: #163c40 !important;
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          color: #00bcd4;
        {% else %}
          color: grey;
        {% endif %}
      }

[Dmitry3650 (Dmitry)]

Thank you very much!!! You helped me a lot!!!

[MARTWIN (Martinho)]

Hello my friends, currently handling a nightmare.
I haven’t been “up to date” with Mushroom, or even last updates.

I have my entire dashboard designed in Mushroom and Lovelace, but now it seems to be all broken. I have hundres of animated icons that now don’t even show (it’s like a secondary row under the ones on the screenshot).

They’re in the code, just doesn’t show. I attach a old screenshot so you can see what I mean. Can you help me fix it or explain what’s going on here? It’s only happening since I updated both HA and my HACS modules.

Thank you so much.
Code here: type: vertical-stackcards: - type: vertical-stack cards: - type - Pastebin.com

[BlackThorne (Eyal Rotem)]

this happened since 2024.7.
see some older posts with workarounds.
it has been discussed a lot.