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

[cowboysdude (John Wade)]

@rhysb

?v=1

Thank you again… that fixed the original url I was using…

[rhysb (Rhys)]

My pleasure

[cowboysdude (John Wade)]

Just started playing with Mushroom cards yesterday LOL I must admit they are fun and interesting!! PLUS I can use templates directly in them and it makes sense to me!!!

[Boostin4HP]

Where’d you get the pics? Those look good.

[rhysb (Rhys)]

I found some here. They just need to be resized.

Moon Phases by bthoven

[rhysb (Rhys)]

While you wait for the new feature, you can achieve what you want with a little CSS.

Vertical:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-1
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
   style: |
     mushroom-card {
       background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
       background-size: 42px 42px;
       {% if is_state(config.entity, 'on') %}
       {% else %}
         filter: grayscale(100%);
       {% endif %} 
     }

Horizontal:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-2
fill_container: false
multiline_secondary: false
card_mod:
   style: |
     mushroom-card {
       background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat 0px center;
       background-size: 42px 42px;
       {% if is_state(config.entity, 'on') %}
       {% else %}
         filter: grayscale(100%);
       {% endif %} 
     }

Rounded:

type: custom:mushroom-template-card
icon: mdi
primary: LS50
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
entity: switch.ls50-3
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
   style: |
     mushroom-card {
       background: var(--card-background-color) url( '/local/LS50.png' ) no-repeat center 0px;
       background-size: 42px 42px;
       {% if is_state(config.entity, 'on') %}
       {% else %}
         filter: grayscale(100%);
       {% endif %} 
     }
     ha-card {
       width: 66px;
       border-radius: 30px;
       margin-left: auto;
       margin-right: auto;
     }

Edit: Update to stop icon floating in

[cowboysdude (John Wade)]

Yes those are the ones I have

[cowboysdude (John Wade)]

Those are excellent!! Thank you so much!

[Byarnell05]

So I’m using a cover card to control my two garage doors and would like to be able to make the open and close buttons a little less vulnerable to accidental activation. Is there any way to change them from a tap action to a hold action?

[rhysb (Rhys)]

I love seeing the album art in my media players, but wanted to keep the Mushroom aesthetic. What do I do?

This one took a bit of figuring out. The problem was having the background overlay adapting to dark & light themes. I like the result, I hope you do too.

Media Player Dark:

Media Player Light:

type: custom:mushroom-media-player-card
entity: media_player.lounge
use_media_artwork: false
use_media_info: true
media_controls:
  - play_pause_stop
  - previous
  - next
collapsible_controls: true
volume_controls:
  - volume_set
show_volume_level: false
fill_container: false
tap_action:
  action: toggle
card_mod:
   style: |
     ha-card {
       {% if not is_state(config.entity, 'off') %}
         background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
         background-position: center;
         background-repeat: no-repeat;
         background-size: cover;
         position: relative;
         background-blend-mode: overlay;
         background-color: rgba(var(--rgb-card-background-color),0.5);
       {% endif %}  
     }

[ebolly (Eric)]

Hi Rhys,

Look nice, just tried your code but… seems background is still overlay.

Any idea ?

[niekniek89 (Niek)]

made you beautiful.
I added this one too, but it looks slightly different.
what could that be?
I have created an input boolean switch.

you drop down looks different from mine

[Kabala (Cata)]

Share my media card here.
Thanks for the great mushrooms…

[rhysb (Rhys)]

I have minimalist-desktop theme enabled. It seems that --rgb-primary-background-color is present in the Minimalist theme but not Mushroom theme. I’ll see if I can find another one to use.

[rhysb (Rhys)]

Do you have card-mod installed?

[niekniek89 (Niek)]

Nope, not installed yet.
Only Mushroom & Mushroom themes.

[rhysb (Rhys)]

Ok, try installing card-mod. That does the fun CSS stuff.

[niekniek89 (Niek)]

@rhysb

Ok, try installing card-mod. That does the fun CSS stuff

thanks, that looks much better already!

[rhysb (Rhys)]

Change --rgb-primary-background-color to --rgb-card-background-color. Should fix it for Mushroom theme.

[cowboysdude (John Wade)]

I love this card… seems my imagination is the only thing holding me back here

I am going to ‘steal’ your card for the 1st page … I’m using the Sonos Card for my music but would love a media card on the front page!!!