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

[KaherdinTristan (Andrew)]

Sorry to say, but that didn’t work at all…

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: {{ states('sensor.electricity_price_road3') | float | round(1) }}

[sagined]

Hi there do you know if i can change the background color and transparency of the cover-card?
I have a cover card in an picture-elements and want to change the style:

- type: custom:mushroom-cover-card
    entity: cover.000000
    name: Garage L
    show_position_control: false
    show_buttons_control: true
    style:
      top: 15%
      left: 90%

[pedolsky]

You have to use a template card.

[KaherdinTristan (Andrew)]

ok. I would very much appreciate an example on how to do that

[rhysb (Rhys)]

Something like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: sensor.electricity_price_road3
    content: '{{ states(entity) | float | round(1) }}'

[RASBR (Rami)]

Hi @rhysb
Should we be expecting ‘Part 5’ any time soon?

I have a trial card for trials inspired by your code

Still WIP moving from older dashboards to new Mushroom based but need your mind-blowing creativity to replace the following ‘png’ icons:

1. Pool Water Filter pump
   

   

2. Underfloor Heating UFH as in my trial card, but don’t know how to play with colors. I guess needs more inspiration
   

3. Pool Solar Water Heating pump

4. Garage sliding gate(s) - Slide left / Slide right

5. Pool waterfall (tried this in my post but not very convincing)

6. Weather card in Mushroom card

7. Garden wall lights
   

   
   
   
   
   
   
   
   
   
   

8. Tree & plants lighting
   

   
   
   
   

I hope this is not too much to ask, but I am sure a lot of people will make use of them too.
Thanks in advance

[RASBR (Rami)]

How can the ‘calendar-clock’ be viewed as in Mushroom VERTICAL layout and/or the Mushroom Chip?

[theandouz]

Here’s some of my dashboard, on my homepage I like using the slider card to add quick actions. For rooms with media players, I show what’s currently playing and that allows for play/pause. Quick access to lights, locks and garage doors is also really handy.

Here’s one of my room cards, again using the slider card to condense the page. I used a state switch card to rearrange my slider card based on media playing; if no media is playing the temp/humidity card becomes the first card. For RGBW lights, I added a button to set the white instead of the colour temp slider as they only have one white setting. For group lights, I added the dropdown so the option of group and individual control is still available.

The RGB lights in this room can also be controlled by an AppDaemon app that sets the colour based on the artwork.

[2wenty2wo (Shaun)]

Hi, I tried to implement the code you’ve shared.

But I’m getting borders/outlines in my “stack-in-card”, does anyone know how to remove these outlines?
Thank you.

[RASBR (Rami)]

Taking the animation into the chip it self results in some irregularity in the top-right corner! What am I missing?

type: conditional
conditions:
  - entity: input_boolean.testing
    state: 'on'
chip:
  type: template
  entity: input_boolean.testing
  icon: mdi:solar-power-variant
  icon_color: amber
  content: ''
  tap_action:
    action: navigate
    navigation_path: energy
  card_mod:
    style: |
      .content {
        {{ 'animation: rays 2s infinite;' if is_state(config.entity, 'on') }}

      }
      @keyframes rays {
        0%, 100% { clip-path: inset(0 0 0 0); }
        80% { clip-path: polygon(100% 100%, 0% 100%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
      }

[patrickse (Patrick Sernetz)]

Your rooms cards are really looking nice. Could you please share the code for one of the cards?

[ChrisKolan (Chris)]

Is it possible to add animation to the badge icon?
Something like: “animation: blink 1s linear infinite”.

[Fabian_V]

to remove the border lines:

Add the following to your mushroom*.yaml

  # fix added border-lines in 2022.11
  ha-card-border-width: "0px"

[FreakLikeMe]

perfect your the best!

[ArenaCloser]

The swipe card idea is actually really nice, I’ve been wondering how to convert my tablet layout to mobile without having to scroll endlessly on one page. Thanks for the ideas, I’ll continue building!

[Thekholm]

Hi,
Is it possible to have all the mushroom icons in the same color as nativ?

1. Media icons - Indigo when on and Grey when off, red if something else.
2. Light icons - Orange when on and Grey when off. red if something else.
3. Entity icons - Green when on and Grey when off. red if something else.

/Thekholm

[eriknie]

I tried almost all options to get mushroom installed.
My setup: Synology NAS with docker. Manual install of mushroom
I tried the GUI method, the Yaml and googled for solutions…

The custom cards do not show up.
I created config/www

hope that someone can help me to get this working. Thanks!!!

[Mosher]

Very impressive. Could you please share your room cards?

[FireDragon (Nguyen Dac Manh)]

Great idea

type: custom:mushroom-template-card
primary: Top Left
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: teal
secondary: Mushroom
card_mod:
  style: |
    mushroom-badge-icon {
      animation: blink 1s linear infinite;
    }
    @keyframes blink {
      50% {opacity: 0;}
    }

[PaNiCo]

Very nice work! I really like the flexible room card, would share with us how you did it?