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

lucafasolis · June 25, 2022, 6:36am

I really wanted to take the time to thank the developer of this wonderful project, it made my dashboard looks like I intended

And to add my little contribution I have just one small suggestion/request, I think the cover card might be enhanced adding the possibility to choose in the UI setup between a roller cover (going up or down) and a traditional curtain (opening from the middle to left and right). Otherwise a viable option might be to let the user pick the icons for the open and close buttons. Because at the moment, if you use it with a traditional curtain, it might be a bit confusing which is the opening and closing button.

Hope this helps

image969 · June 25, 2022, 8:16am

Thanks for the reply. Is there a way to change the word unavailable to just say off??? My goal is to make it look entirely normal as if the regular wall switch is turned on

rhysb · June 25, 2022, 8:19am

You would need to use a Mushroom Template Card.

image969 · June 25, 2022, 8:22am

I tried using that but then I can’t get the color temp slider to show up . I’m trying to make it look identical to a mushroom light card card. Can that be done via the template card?

swifty · June 25, 2022, 8:30am

Anyone know if it’s possible to put an actual number in the new badge option, rather than use something like mdi:numeric-1 for the icon ?
I’m finding that the numeric icons aren’t centred and they are really hard to read as they are tiny.

rhysb · June 25, 2022, 9:01am

No, just icons. You can tweak the icon size so that it centers better.

type: custom:mushroom-template-card
primary: Winner
secondary: ''
icon: mdi:trophy
badge_icon: mdi:numeric-1-circle
icon_color: amber
badge_color: blue
card_mod:
  style: |
    ha-card {
      --badge-icon-size: 0.8em;
    }

obrien.craig · June 25, 2022, 11:23am

I am trying to implement the badge icon, but it appears to be slightly off the side. I want to make the badge icon a bit larger

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Bathroom
    secondary: |-
      Temp: {{ states('sensor.bathroom_temperature') }}ºC,               
      Hum: {{ states('sensor.bathroom_humidity') }}%    
    icon: mdi:shower
    tap_action:
      action: navigate
      navigation_path: bathroom
    hold_action:
      action: toggle
    icon_color: green
    badge_icon: |-
      {% set bathhum = states('sensor.bathroom_humidity') | int %}
      {% if bathhum > 65 %} 
      mdi:shower-head
      {% endif %}
    badge_color: |-
      {% set bathhum = states('sensor.bathroom_humidity') | int %}
      {% if bathhum > 80 %} 
       red
      {% elif bathhum > 65 %} 
       orange
      {% endif %}
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
         --badge-icon-size: 1.0em;
           
        }
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 76px;
          margin-left: -18px !important;
          
        }

mihailescu2m · June 25, 2022, 1:45pm

No only mdi:numeric, so that’s 1 to 10.

swifty · June 25, 2022, 4:16pm

Great thanks for the tip with the size - I’ll give that a go and see if they can be made a little more readable

Gotcha1980 · June 25, 2022, 7:36pm

I have another question. I would like to use an entity picture on a template card … is this possible?

Boostin4HP · June 25, 2022, 8:13pm

EDIT: Nevermind I figured it out. Here’s the code if anyone else runs into the same issue.

        card_mod:
          style:
            div:
              mushroom-template-chip$:
                mushroom-chip: |
                  ha-icon {
                    animation: rotation 1s linear infinite;
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
            .: |
              :host {
                --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
              }

Anyone know how to combine these two sets of code into one style tag? No matter what I try it’s one or the other that works.

        card_mod:
          style: |
            :host {
              --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
            }



        style:
          div:
            mushroom-template-chip$:
              mushroom-chip: |
                ha-icon {
                  animation: rotation 1s linear infinite;
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }

piitaya · June 25, 2022, 8:53pm

And… Mushroom 2.0.0 is released !

This release lets you choose primary and secondary info from all cards. You can also use entity picture in all cards (even in template card !).
There are also some improvements to increase slider/controls space when the primary, secondary info and/or icon are hidden.

More info in the release note : Release v2.0.0 · piitaya/lovelace-mushroom · GitHub.

xAPPO · June 26, 2022, 12:46am

I have been eagerly awaiting this to jump onboard as I have a lot of thermostats… Is it still being worked on or should we fall back on one of the other existing ones ?

milandzuris · June 26, 2022, 1:46am

Hi, Please make Room Card

milandzuris · June 26, 2022, 1:48am

Hi everony, how i make bigger card?, thx.

KTibow · June 26, 2022, 2:15am

Enable the “Fill container” option.

Boostin4HP · June 26, 2022, 5:50am

This is how I was able to able to do it.

        card_mod:
          style:
            div:
              mushroom-conditional-chip:nth-child(3) mushroom-template-chip:
                $: |
                  mushroom-chip ha-icon {
                      animation: rotation 1s linear infinite;
                    }
                    @keyframes rotation {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(360deg);
                      }
                    }
            .: |
              :host {
                --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
              }
              ha-card {
                --chip-spacing: 2px;
              }

itapower · June 26, 2022, 7:51am

Hey,
how I can change the default color blue to yellow on the mushroom cover card, when the cover is open?

Kingy444 · June 26, 2022, 11:59am

Any one have any idea why the styles arent applying for me ? (dont have external sensor atm)

But the padding is all out and i cant see any mention of needing any other cards with mushroom

Stuartie · June 26, 2022, 12:51pm

Exactly what I was looking for. Only one minor question, is there a way I can make the the tap_action work for the whole card? Seems to be only working when I tap on the title, in this example when I tap the word bathroom.

From what I’ve gathered it seems to be because using “top” creates like a hidden container of some sort to the left over the top of the rest of the card.