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

[swifty]

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 (Kate)]

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

[Boostin4HP]

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 (Paul)]

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 (Kevin Hawkins)]

@mihailescu2m

there is not thermostat card yet

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 (Milan Dzuriš)]

Hi, Please make Room Card

[milandzuris (Milan Dzuriš)]

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

[KTibow (Kendell R)]

Enable the “Fill container” option.

[Boostin4HP]

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]

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

[Kingy444]

@seanmccabe

  - type: custom:mushroom-title-card
    title: Climate
    subtitle: ''

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 (Stuart)]

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.

[jimmyeao (Jimmy White)]

How does one add a person picture to a template card?
I have this that greets me:

{% set time = now().hour %}
{% if (time >= 18) %}
  Good Evening, {{user}}!
{% elif (time >= 12) %}
  Good Afternoon, {{user}}!
{% elif (time >= 5) %}
  Good Morning, {{user}}!
{% else %}
  Hello, {{user}}!
{% endif %}

[image969 (James Scialdone)]

I don’t understand what I’m missing. I opened up a Brand New template card and I copied in your code exactly the way it is and everything works but it gives an error when it comes to the badge icon. Is there something else I need installs for badges to work?

[KTibow (Kendell R)]

What error is it? Could you send a screenshot?

[nonmaterialistically]

I haven’t used theme variables for anything yet, so I’m a bit lost. How can I use the variables in the template cards?
Here’s an example of a template card I have:

icon_color: |-
  {% if is_state('input_boolean.example_mode', 'on') %}
    red
  {% else %}
    #bdbdbd
  {% endif %}

I would like to use the theme variables like mush-rgb-red and mush-rgb-disabled. More generally, I am trying to solve the issue explained in Github Issue #196. Basically, I’m trying to match the “disabled” color of a template card to the one of a entity card, on both light and dark mushroom themes. Does anyone actually have a working config?

[mihailescu2m (Marian)]

Is there a way to set a variable template wide and use it in multiple fields afterwards, eg both primary and secondary fields?

[rhysb (Rhys)]

There is a specific ‘disabled’ color for this purpose. Light theme it is #bdbdbd, while dark theme it is #6f6f6f.

[berkans (Berkan Sezer)]

Can we do that with battery card you shared ?

[rhysb (Rhys)]

What are you wanting to do?