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


Hello, thank you for your work, I am using this card everywhere, I have a question, can you tell me if it is possible to invert this colors in the position slider of a cover card, I am trying with Card-Mod but it nothing, I want the darker color in the place of the light one and vice versa. thanks so much

Thanks for your input. I haven’t had a single failure yet on 1.2.6 regarding the sliders - In addition to no longer experiencing the ‘dead’ controls issue, I find them easier to work now - like it seems you don’t have to be exactly on the edge of the control for them to work - much better!

Thanks for your input on the colors - I actually think that I’m warming to the way you handled it out of the box now. It also helps that instead of 50/50 Mushroom/HA controls my dashboard is more like 90/10 now :slight_smile:

How can I Change the icon color based on attribute state?

entity: media_player.home_theater
attr: source
data: Blu-ray

Thank you, :slight_smile:

1 Like

Attribute is source and what is data in this context? Is it a nested attribute?

I think I got what you mean. Must be sth like


{{ 'green' if state_attr('media_player.home_theater', 'source') == 'Blu-ray' else 'red' }}

I can give you more details if you post a snapshot of the attributes list.

2 Likes

It works !
Thank you again…
:slight_smile:

Would love to make the icons slightly bigger, anyone know of an easy way to modify the .js file to make this change for all card icons instead of for each card independently?

Have tried with card-mod as well but my css isn’t up to snuff I guess.

Should be possible with a theme :slightly_smiling_face:
You can already change the chip size, the border-radius etc… It can be a good idea to add icon size too : GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 🍄
I’m busy at the moment and I don’t have much time to work on Mushroom but that will change :sweat_smile:

1 Like

Were you ever able to figure this out without using layout card? Or care to explain how you do that? Im making a dashboard right now for my tablet and im using badges, however id love to use Chips instead, but cant find a way to center over two grids like yours.

Do you mind sharing how you placed the chips in one row like that? I haven’t been able to figure out a grid with layout card.

@Roflcopterer, @rolfokevin, you can use the Mush Chip Card as badge on top of all other cards:

The only caveat: Editing is done via the raw config (copy & paste)


views:
  - theme: Backend-selected
    title: []
    icon: mdi:toolbox-outline
    badges:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: xxx
          - type: entity
            entity: xxx
          - type: … and so on

        alignment: center

3 Likes

Oh that is great, thanks!

1 Like

can I adjust the font size for the chip card, it is quite small for me. Thanks
Update: I did it by mushroom theme

Is there any way to use this card for an input_number helper just with a slider?

6 Likes

Smart Home Pursuits (@djbrooks022) published a lovely guide for Mushroom:

3 Likes

Has anyone found a way to create a shortcut to the Raw Config Editor?

Similar to the way the menu chip works, I would like to click the chip to bring me to edit mode or even better straight to the raw config editor.

Hoping to use something like this:

- type: custom:mushroom-chips-card
  alignment: center
  chips:
    - type: action
      icon: mdi:dots-vertical
      tap_action:
        action: navigate
        navigation_path: /lovelace-mobile/0?edit=1
 

grafik
In the mobile app on my iphone, this button has not enough space to display the left down button, somehow this needs to be able to cope with less screen space.

Hi. Great HACS Addon

My question, there seems to be no white colour option on the light slider bar for rgb lights ?

My LEDS work no problems but white would be nice as its my main colour and I cant get them back white if I change the colour.

Thanks

Not possible for now (but you can use the temperature color slider to do this if your light support it).

Mushroom color slider only controls the hue parameter because the slider a 1 dimensional control.
If you want to control the “saturation” parameter you can use the more-info popup using a hold_action or a double_tap_action.

Maybe a solution can be to display 2 slider (one for hue, one for saturation). I don’t have the solution in term of design. Mushroom is a minimalist design system, it can be hard to add lot of feature with a minimalistic style.

I think it’s better to use the standard layout instead of horizontal layout if you use 2 controls (buttons and slider).
The horizontal layout only allow 3 buttons instead due to the available space.