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

In my Mushroom Theme file, see here:

Any tips of which ones need changing to reduce gaps before and after the title card? Can’t quite figure it out thanks

Just play around with


    mush-title-padding: 24px 12px 16px
    mush-title-spacing: 12px

2 Likes

Has anyone achieved an ‘include’ card?
ie - I have set up a mobile view in KIOSK mode and every single one on my pages utilizes a shared or similar chips navigation header.
So if I have 20 linked pages of information, each has the same top menu. However currently they need to be individually edited.
Is there a way to ‘include’ one header file that can be shared over multiple pages and only edited it in one place?

1 Like

Would desperately love to see this too - for the exact same reason. Tried looking into it but it’s well beyond my CSS skills.

I’d recommend looking into decluttering card

1 Like

@swifty, @Valdorama:

1 Like

Thanks @pedolsky good to see the request is already there, hopefully it will get picked up and implemented as it would be a really handy feature.

Hi,
I think Petro’s code would be helpful in shortening your code related to days/time etc…

That code isn’t designed for the front end. It won’t update properly, you’ll need to add

{% set x = now() %}

At the beginning

Of course you know better (since you wrote it :wink:) but it is still the shortest and straight forward code I saw around here in this regard and I am still ‘studying’ it. so though to point to it for common benefit.

1 Like

Has anyone here been able to set the color for the icon and slider on the mushroom cover card? I have tried this, using the theme, but can’t seem to get it to work. It keeps displaying with the blue color instead of the mushroom brown color that I prefer to use.

This does not work so it seems. I added it to my mushroom config, but the icon and slider color stays blue.

Use


    mush-rgb-state-cover-open: var(--mush-rgb-brown)
    mush-rgb-state-cover-closed: var(--mush-rgb-pink) 

Output:

3 Likes

The Mushroom theme is ‘under’ the normal theme. It only changes the corners to be round or square etc.
If you want the Mushroom theme to be powerful, make your own theme and put all of the mushroom variables in it.
So start with this in your theme: as stated ‘Build you own’.

It is still depending on the basic theme, but you get the feeling…

1 Like

Thank you.

I must be doing something wrong I think. I copied the code, but its still the default color. I have set mushroom (not Mushroom square) as my theme. And I edited the themes/mushroom/mushroom.yaml file and added the lines. Am I missing something?

Try and go to developer and call the service to reload the theme.
Might work.

No luck. Restarted HA. Even rebooted the whole host. Something is incorrect. I tried a different browser and the incognito option as well. It’s still blue. :frowning:

Mushroom:
    # Home Assistant override
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px

    modes:
        light: {}
        dark: {}

    # Mushroom cover card
    mush-rgb-state-cover-open: var(--mush-rgb-brown)

Got it. :slight_smile: Seems like I reloaded the theme incorrectly and the color variables were missing in my theme. :slight_smile: It’s working now. Thanks to all helpers.

Is it possible to color the background of the chip based on conditions? I.e. if a door sensor is closed, color the chip background green.