Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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

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 :smiley:

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

You would need to use a Mushroom Template Card.

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?

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.

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;
    }
5 Likes

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

image

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;
          
        }
1 Like

No only mdi:numeric, so thatā€™s 1 to 10.

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 :grin:

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

1 Like

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);
                  }
                }
1 Like

Andā€¦ Mushroom 2.0.0 is released ! :mushroom:

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 !). :rocket:
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.

19 Likes

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 ?

Hi, Please make Room Card

image

16 Likes

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

image

Enable the ā€œFill containerā€ option.

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;
              }
1 Like

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

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

1 Like

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.