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

[D0doooh]

Hello together

I’ve been following and using Mushroom for a long time now, previously I used lovelace-ui-minimalist which inspired me to do this project. Which is why I spent the last few days creating a collection of your awesome mushroom cards.

Which you can find here: awesome-mushroom-cards

The idea is to give a quick good overview of the amazing user creations, especially classified by the card types.

Also I want to make it easier for everyone to import cards. I have changed the cards so that all entities are simplified like sensor.temp_01, sensor.hum_01, light.dummy_02 and so on. This makes it easier for you to simply Use CTR+F to search and replace all sensor.temp_01 with your correct entity.

With best knowledge I always put in the author and the corresponding link, of course many of them are from @rhysb If something is wrong, or you don’t want to have your card listed here, please contact me.

If you have any suggestions, want to publish your own cards or something different let me know or make a pull request on GitHub,

If you are not familiar with GitHub I have created a template which you can send me here or via a GitHub issue. So I will publish it in the documentation. > awesome-mushroom-cards-template.md

of course there will follow many more cards

[Intro_Verti]

That would aswesome. https://controlc.com didn’t do the job?
If not, I’ll send a private msg

[Tyfoon]

Wow, thanks. That was easy. Works perfect. I was already looking into layout card but missed this for some reason.

[KyleBrown0221]

Added this to the bottom of my code to have it stick to the bottom of the page/screen (";host" part) and then transparent (ha-card part). Hope this helps!

Card-Mod

card_mod:
  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      bottom: 0;
    }
    ha-card {
      background: none;
      --ha-card-box-shadow: 0px;
      padding-bottom: 25px;

    }

[KyleBrown0221]

Any way to add in the ability to quickly change source? Always been my one and only gripe with this mushroom media player card. That’s why I’ve been using the mini-media-player HACS integration card.

[rhysb (Rhys)]

@ArenaCloser was also asking about this, so I’ve added the ability display a generic idle art.

My original post has been updated here.

Mushroom Media Player Ultrablur Background with Idle Art:

Just place the idle_art.png image in your config/www directory. I used this one, by Marhull, here:

iTunes No Artwork Template by Marhull on DeviantArt

[rhysb (Rhys)]

Have a look here:

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

Mushroom Animations - Part 4 Even More Mushroom Card Icon Animations [Mushroom HA Animation]

HA Animation

type: custom:mushroom-template-card icon: mdi:home-assistant icon_color: blue primary: Home Assistant card_mod: style: mushroom-shape-icon$: | ha-icon { --icon-animation: boing 3s ease infinite; transform-origin: 50% 90%; } @keyframes boing { 0% { transform: scale3d(1, 1, 1); } 7% { transform: scale3d(1.25, 0.75, 1); } …

[Stenbumling]

Could any help me with templating?
would like to have “- Test” returned intead of :
" - {‘subject’: ‘Test’}"

   {% for task in state_attr('sensor.xxxxx', 'all_tasks')  -%}
                  - {{ task }}
                  {% endfor %}

[rhysb (Rhys)]

Animating Chips is a little more complicated. You can do the Christmas Tree like this.

Mushroom Chip Christmas Tree Animation:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:pine-tree
    icon_color: green
  - type: template
    icon: mdi:star
    icon_color: yellow
    tap_action:
      action: none
  - type: template
    icon: mdi:grain
    icon_color: red
    tap_action:
      action: none
  - type: template
    icon: mdi:gift
    icon_color: red
    tap_action:
      action: none
card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: |
      mushroom-chip {
        cursor: default !important;
      }
      ha-icon {
        position: absolute;
        left: -35px;
        animation: star 8s ease infinite alternate;
      }
      @keyframes star {
        0%, 100% { transform: translateY(-9px) rotate(0deg) scale(0.4); }
        50% { transform: translateY(-9px) rotate(360deg) scale(0.6); }
      }
    mushroom-template-chip:nth-child(3)$: |
      mushroom-chip {
        cursor: default !important;
      }
      ha-icon {
        position: absolute;
        left: -79px;
        animation: flash 2s steps(1) infinite, lights 2s infinite;
        clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
      }
      @keyframes flash {
        50% { transform: rotateY(180deg); }
      }
      @keyframes lights {
        0%, 100% {--color: rgb(var(--rgb-red)); }
        6.25% { --color: rgb(var(--rgb-deep-orange)); }
        12.5% { --color: rgb(var(--rgb-orange)); }
        18.75% { --color: rgb(var(--rgb-amber)); }
        25% { --color: rgb(var(--rgb-yellow)); }
        31.25% { --color: rgb(var(--rgb-lime)); }
        37.5% { --color: rgb(var(--rgb-light-green)); }
        43.75% { --color: rgb(var(--rgb-green)); }
        50% { --color: rgb(var(--rgb-teal)); }
        56.25% { --color: rgb(var(--rgb-cyan)); }
        62.5% { --color: rgb(var(--rgb-light-blue)); }
        68.75% { --color: rgb(var(--rgb-blue)); }
        75% { --color: rgb(var(--rgb-indigo)); }
        81.25% { --color: rgb(var(--rgb-deep-purple)); }
        87.5% { --color: rgb(var(--rgb-purple)); }
        93.75% { --color: rgb(var(--rgb-pink)); }
      }
    mushroom-template-chip:nth-child(4)$: |
      mushroom-chip {
        cursor: default !important;
      }
      ha-icon {
        position: absolute;
        left: -114px;
        bottom: 8px;
        animation: surprise 4s ease infinite;
        --chip-icon-size: 8px;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-2px) rotate(-27deg); }
        5% { transform: translateY(-2px) rotate(21deg); }
        7.5% { transform: translateY(-2px) rotate(-15deg); }
        10% { transform: translateY(-2px) rotate(9deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-1.2px) }
      }
    .: |
      mushroom-template-chip:not(:first-child) {
        --chip-background: none;
        --chip-box-shadow: none;
      }

[rhysb (Rhys)]

It needs to be applied to the Chips like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:cloud-download-outline
    icon_color: green
    content: |-
      {{ states(entity) }} Mbit/s 
      Down
    entity: sensor.speedtest_download
    tap_action:
      action: more-info
card_mod:
  style: 
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        animation: boing 3s ease infinite;
        transform-origin: 50% 90%;
      }
      @keyframes boing {
        0% { transform: scale3d(1, 1, 1); }
        7% { transform: scale3d(1.25, 0.75, 1); }
        10% { transform: scale3d(0.75, 1.25, 1); }
        12% { transform: scale3d(1.15, 0.85, 1); }
        16% { transform: scale3d(0.95, 1.05, 1); }
        19% { transform: scale3d(1.05, 0.95, 1); }
        25% { transform: scale3d(1, 1, 1); }
      } 

[rhysb (Rhys)]

No, unfortunately that can’t be done with pure CSS. It would need to be done in real code

[Mosher]

This is awesome!
Can this icon be use to toggle the Christmas light and stay grey when the light is off?

[dicko (Martyn)]

Yeah, I’d like to know this. @rhysb has been awesome with what he has produced

[sheddc75 (Shedd)]

Does anyone have any examples of their YAML using a mushroom template to display an analog value (showing both the value and a bar chart)? Similar to the standard gauge card that is in HA, but i want the mushroom look. Can we use the light card but change the “dimmer” bar at the bottom to represent the value over a custom min / max range?

Thanks.

[casadomotica (Giuseppe)]

Hi guys, I need your help.
Since the last update the icons (see image) are all the same Processing: immagine.bmp…

color how can I fix it? Thanks in advance

mushroom theme

[casadomotica (Giuseppe)]

my code

# DO NOT EDIT THIS FILE.
# This file will be reset with updates.
# If you want to customize it, copy the content in another folder and file and change the name.
# https://www.home-assistant.io/integrations/frontend/#defining-themes
PC Mushroom:
    # Home Assistant override
    ha-card-background: rgba(10,10,10,10,0)
    ha-card-box-shadow: "0px 0px 1px #000000"
    ha-card-border-width: 0
    # Home Assistant override
    ha-card-border-radius: 6px
    # Layout
    mush-spacing: 8px
    # Elements
    mush-icon-border-radius: 6px
    mush-control-border-radius: 6px
    # Chips
    mush-chip-border-radius: 6px
    modes:
        light: {}
        dark: {}

[Mats789]

Hi Giuseppe, just a tip:

[swifty]

Ah thanks, that might be why I can’t get it working then

I’ll have to try and think of a plan B, maybe there is some state I could use from HA as the trigger for scenes instead

[casadomotica (Giuseppe)]

I’m sorry I made a mistake but I don’t know how to enter the code

[MRobi (Mike)]

Highlight the code you’re posting and then click that button.