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

dimitri.landerloos · July 19, 2024, 12:42pm

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

Faecon · July 19, 2024, 12:44pm

Ok. Thanks !

Faecon · July 20, 2024, 7:30am

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 · July 20, 2024, 7:43am

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 · July 20, 2024, 3:07pm

This section:

dimitri.landerloos · July 20, 2024, 3:09pm

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:

Faecon · July 20, 2024, 7:06pm

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 · July 20, 2024, 8:39pm

So:

Chips are quite different from normal cards in terms of the pathing, so just keep that in mind.
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.
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 · July 20, 2024, 8:59pm

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 · July 20, 2024, 9:36pm

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 · July 20, 2024, 9:56pm

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

Faecon · July 21, 2024, 3:53am

top ! thanks for being so patient with me !

Dmitry3650 · July 21, 2024, 3:09pm

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 · July 21, 2024, 4:09pm

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 · July 21, 2024, 4:33pm

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

MARTWIN · July 22, 2024, 1:30pm

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 · July 23, 2024, 8:29am

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

iona · July 23, 2024, 1:24pm

Are Chip Template cards able to support badge icons, or is it not possible by design?
Wanted to know, before issuing a feature request. Cheers

Valen · July 23, 2024, 5:37pm

Hello friends, I’m wondering if it’s possible to change the appearance of the slider on a custom card so that it looks like the standard one from HA? or the slider design cannot be changed?

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: humidifier.uvlazhnitel_2_zal
    secondary: |
      {% if states(config.entity) == 'on' %}
      humidification
       {{state_attr(config.entity, 'humidity')}}%
      {% else %}
        Выключено
      {% endif %}
    tap_action:
      action: toggle
    icon: mdi:air-humidifier
    layout: horizontal
    icon_color: |
      {{ 'blue' if is_state(config.entity, 'on') else 'grey' }}
    primary: Humidifier
    fill_container: false
    multiline_secondary: false
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
           }
        .: |

          ha-state-icon {
          {% if state_attr(config.entity, 'action') ==
          'humidifying'  %}

            animation: air 1.5s infinite;
          {% endif %} }

          ha-card {
              border: none;
              box-shadow: none;
              margin-left: -0px !important;
              margin-right: 0px !important;
              margin-bottom: 0px !important;

            }
          @keyframes air {
          50% { clip-path: polygon(100% 0, 64% 56%, 100% 100%, 0 100%, 0 0);
          }
  - type: custom:mushroom-humidifier-card
    entity: humidifier.uvlazhnitel_2_zal
    collapsible_controls: false
    show_target_humidity_control: true
    layout: horizontal
    card_mod:
      style:
        mushroom-humidifier-humidity-control$: |
          mushroom-slider {
            --main-color: #2196f3 !important;
            --bg-color: #195382 !important;
            }
        .: |
          mushroom-state-item {
            display: none;
          }
          ha-card {
            margin-left: -8px !important;
            border: none;
          }

clw · July 23, 2024, 7:32pm

I really like this one! Is there a way to combine it with this:
card_mod: style: | :host { –mush-icon-size: 65px; –mush-icon-symbol-size: 0.8em; }

Would be great if I could animate the bigger icon, but cant get it to work