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

Is there a way to use the default icon of an entity in the template card?
I tried

{{ state_attr(entity, ‘icon’) }}

but for most entities which use their default icon then they don’t have the icon attribute.

It will work if you assign an icon via more-info dialogue-> coq top right

But be careful with the chars in your code, it has to be quotes like that:


{{ state_attr(entity, 'icon') }}

2 Likes

Thank you. This did exactly what I wanted. Long way round but we have it working :slight_smile:

1 Like

What have people done for cards to show a version is out of date ?

I know there is the update card but I like to see the version numbers etc ?

Has anyone done anything like this for Core, OS and addons ?

This is what I have on my old Dashboard, just loads of entity cards

Thanks

Martyn

Skärmavbild 2022-05-03 kl. 19.27.24

Current (bold) and latest. If a new version is available the icon turns yellow.
Mushroom template card.

type: custom:mushroom-template-card
primary: '{{ (states(''sensor.current_version'')) }}'
secondary: '{{ (states(''sensor.home_assistant_versions'')) }}'
icon: mdi:package-down
layout: vertical
icon_color: >-
  {% if (states('sensor.current_version')) ==
  (states('sensor.home_assistant_versions')) %}green{% else %}yellow{% endif
  %}
5 Likes

2 of the icons do not show up in the community:
image

HI you all,
the template card did the trick! Now it‘s working depending on the state!
Thanks very much indes!

how did you get all the info into 1 tile?

Yea I’m trying to avoid that as i have a lot of entitles.
Thanks anyway.

Has anybody able to change the CSS of .chip-container?
I tried this and also .chip-container.align-center

          .chip-container {
            --chip-spacing: var(--mush-chip-spacing, 0px);
          }

But it didn’t work and I just can’t control or change anything in the chip-container with the card-mod (with chrome debug it works fine).

I’m trying to remove the margin-right of all the non-last childs of the chips,
image
image

And it seems to be caused by this CSS:
image

Were you able to control the chip-container via card-mod?

You can set --chip-spacing: 0. Does it work?

1 Like

Hi

That was my old card but can be replicated.

It was just a grid card with 1 column and entity cards.

Mushroom cards are alot better though

I like what you’ve done with the chip icon animations. I copied the code for my ‘room’ card and it works great for a room that has only one fan, so the content/title of the chip is empty.

However I’m also trying to use it for another room that has two fans, and I’ve configured the chip content to just list the number of fans that are on i.e. ‘1’, ‘2’. The problem is that both the fan icon AND the text both rotate together.

Is there a way of only having the icon itself rotate, and NOT the text? Thanks.

Would you mind sharing the code for your other pop ups? I’ve never used browser mod before so it would be a big help.

It didn’t work for me.

I’m not sure where exactly to put the card-mod as i think chip-container isn’t part of every chip entity but only part of the chips-card itself (correct me if i’m wrong),
So I tried putting it under type: entity in chips and also under type: custom:mushroom-chips-card,
But it didn’t had any affect in both cases.

What a great work, thanks for this ! :smiley:

It’s all great, the only thing that I’m not happy with is the light slider when we have the 2 buttons control (color and temp), the slider is very compressed with this setting.

On mobile it’s ok, but on a wall tablet with more columns it can be problematic. See the picture :



It’s kinda ruin the simplicity of this card and force me to make a more info popup to setup any extra settings like color because I have to sacrifice one of the button to keep slider big enough. See the bottom with one button the slider is big enough to play with it on the wall tablet picture.

Maybe a solution can be to make instead of two separated button one button which alternate between the 3 settings (color, temperature, luminosity).

Thanks again for your work, it’s so nice and ease to use !

2 Likes

hey @piitaya thanks for this amazing theme and card system, this definatly freshens up my lovelace. Do you know if it’s possible to have a regular lightbutton (w/slider) working with secondary information like temp/lux/motion etc? Basically the ‘light.kitchen’ button with a slider.

show us your yaml, you have to declare animation for each entity.