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

By using tap action.

Hi. How can I change the font and size of chips but also of other cards? Unfortunately (especially the chips) are a little small.
Thanks

If you’re using Mushroom Themes, look at the section „Chips“:


    # Chips
    mush-chip-spacing: 8px
    mush-chip-padding: 0 12px
    mush-chip-height: 36px
    mush-chip-border-radius: 18px

1 Like

thanks a lot! it works!!!

I always love looking at other peoples dashboards for inspiration and ideas. I thought i would post some of the new things i added to my home dashboard thanks to mushroom and minimalist.

I recently added chips to my dashboard but I never liked the popups that were generated when you clicked on them, so I created some for myself.

This is my home page:


This is the popup for the wifi chip:

This is The popup for any mode chip:

This is the popup for the Entity Person chip: (i would love to see a chip for person entity like the person card)

This is the popup for the alarm chip:

The motion and door icon on bottom turn red if there is a fault and you can click them to see more info. (thinking about making a custom popup)

Would love to hear feedback and future ides!

42 Likes

Very nice! Could you add which other custom cards you use?

Would you mind share ?
I really like it.

Do you have any issue with alarm card? On mine I have issue with disarm.

these are the cards i use for the popups:

  • WiFi: Picture element
  • Modes: Mushroom title, horizontal stack + mushroom entity, mushroom title (only subtitle), grid + mushroom entity
  • Person Info: history card, glace card, map card
  • Alarm: Alarmo Card (using the alarmo integration), horizontal stack + mushroom chip cards

I like to make a vertical stack card on a sample dashboard of what i want to pop up and then just copy the yaml yo the popup config to get it working. Make the whole process pretty simple.

7 Likes

Not at all what info would you like?

As far as the alarm goes i havent had issues but i am using the alarmo integration. (IMO one of the best integrations that HA should really just implement.)

1 Like

Looks nice. Also tried similar with the side-bar but sometimes it does not draw or some elements are missing until proper front end reload. Don’t you have the same problem?

That’s the reason why I kicked it out. Would be interested, too.

it usually works fine. i have the tablets set to reload dashboard every 30 min just in case.

you can always use home assistants sidebar mode, its not as good but can prob be made to look very nice

How did you make the popup cards? browser_mod?

Yes. I can post the code later if you want.

3 Likes

Please do! Would be interested to see how you made yours. I’ve done a few custom pop ups but am running into style issues around the edges with needing to add a border or padding or something and I’m no CSS expert. Would love to check out what you’ve done at least for your pop ups.

it would be awsome

hello
I don’t know what I’m doing wrong but I can’t find any mushroom cards.
I installed the mushroom plugin via hacs and rebooted my server.

Have you emptied your browser’s cache? If yes, un- and re-install. Sometimes HACS installation is bitchy.

Basically I like it the all picture.

I started the building mine but I just trying to copying yours :smiley: