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

Share your Projects!
,
808

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

809

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.

810

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.

811

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
812

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

813

In my Mushroom Theme file, see here:

814

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

815

Just play around with


    mush-title-padding: 24px 12px 16px
    mush-title-spacing: 12px
2 Likes
816

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?

image
image454×588 25.3 KB

1 Like
817

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

818

I’d recommend looking into decluttering card

1 Like
819

@swifty, @Valdorama:

1 Like
820

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.

821

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

822

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

823

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
824

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.

825

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

826

Use


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

Output:

Bild
Bild1668×485 53.6 KB

3 Likes
827

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