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

Share your Projects!
,
3669

And another question: has anyone modified the secondary text style in a mushroom card? I love the style of Feltron reports (e.g. Feltron: 2011 Annual Report), and it would be awesome to have a mushroom card with giant numbers. In the meantime, I’ve been using standard “entity” cards for larger data.

Screen Shot 2022-10-26 at 5.26.34 PM

3670

Hi
How do I create a custom button that looks like the mushroom default button look and feel in its regular state, and when the states changes, I’d like to customize it, when it gets back to the default state, again show the mushroom default theme button.

Thanks

3671

very nicely done may i ask how you did the part of spotify that when something is playing the card shrinks and volume controls come up ?

3673

any chance you can animate mdi:calendar-clock?

3674

Custom buttons on light card:

Change title font size/style:

1 Like
3675

I like your code and ideas, any chance you could share your dashboard look?

1 Like
3676

And on we go… :partying_face:

3 Likes
3677

Sorry for the probably noob question, but how do I do a find and replace all?

3678

mush-chip-box-shadow is back, see the newest release notes.

New variables for themes :

  • --mush-chip-border-color
  • --mush-chip-border-width
  • --mush-chip-box-shadow
2 Likes
3679

But only for the 2022.11 release because there is breaking changes for card border with the latest Home Assistant Beta release.

3 Likes
3680

Latest mushroom themes update cleared the content of my mushroom theme file, make sure to make a backup before updating

3681

You’re right, :+1: I should have been clearer by saying wait the few days until the release of 2022.11 before changing everything back and forth.

3682

Is it possible to align icon as well to right? I mean from right - icon first then text. Like Horizontal flip.

3683

2022-10-28

Is it possible to turn standard history graph to look more like mushroom card?
Something like this weather card.
Or maybe is some custom card which will be better to use to do it.

3684

There is a custom card that has a lot of customizations

image

3 Likes
3685

My card error

bad indentation of a mapping entry (2:5)

1 | - type: custom:stack-in-card
2 | cards:
---------^
3 | - type: grid
4 | square: false

3686

where is that card coming from?

3687

Indentation is wrong.


type: custom:stack-in-card
cards:
- type: grid
  square: false
  cards:
  - …
1 Like
3688

It’s the new tabbed-card :slight_smile:

3689

You can do this in the “Raw configurator editor”. You can open it via three dots menu while editing dashboard.