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

Nice design ! Thanks for the job.

I have many sensors for which the icon and the color are defined in the customize_glob.yaml file.
It would be nice if the icon and the color defined in this file are used in the chip card without having to use the template option (avoid duplication/replication).

Thanks in advance

Absolute amazing work!! Quick question.

Anyway to have use_entity_picture: true in the light card? I see it is an option with entity card and its super cool to have all my own pictures with the amount of control offering from your card.

Not sure if you ever got this working, but I ended up using a markdown card with card_mod to make font adjustments.
Hopefully, it’ll be an option with Mushroom down the road.

You can also use theme variables:


    # Title
    mush-title-padding: 24px 12px 16px
    mush-title-spacing: 12px
    mush-title-font-size: 24px
    mush-title-font-weight: normal
    mush-title-line-height: 1.2

3 Likes

Where do you adjust those theme variables? Do you just put you own ones in the mushroom.yaml and mushroom-square.yaml theme file?

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