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

[joshcrosby]

Thanks a ton for these! Given me some great inspiration for some changes to my dashboard. Would love to see your full dashboard when you get a chance!

[Danny2100]

Does anyone know how to remove the shadow of the stack in card not the auto-entities, but the stack in card? I want to keep the shadow around the auto-entities but not the stack-in-card.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[te]mperature/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}°F'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style:
                mushroom-state-info$: |
                  * {
                     text-align: center;
                  }
                .: |
                  mushroom-shape-icon {
                    --shape-color: none !important;
                    --shape-color-disabled: none !important;
                  }
                  ha-card { 
                    background: transparent;
                    border-radius: 20px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 2px;
                    --icon-border-radius: 0;
                  }
      exclude: []
  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - area: Temperature Sensors
          entity_id: /[hu]midity/
          options:
            type: custom:mushroom-template-card
            primary: '{{ states[entity].name }}'
            secondary: '{{ states(entity) | title }}%'
            picture: null
            hold_action:
              action: toggle
            double_tap_action:
              action: more-info
            layout: null
            tap_action:
              action: none
            card_mod:
              style:
                mushroom-state-info$: |
                  * {
                     text-align: center;
                  }
                .: |
                  mushroom-shape-icon {
                    --shape-color: none !important;
                    --shape-color-disabled: none !important;
                  }
                  ha-card { 
                    background: transparent;
                    border-radius: 20px;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 2px;
                    --icon-border-radius: 0;
                  }
      exclude: []

[rolfokevin (Kevin Rolfo)]

did something change with the theme again after the 2022.11 HA update? borders around chips again after just removing them again haha.

[ArenaCloser]

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

There is one breaking change for the chips. --chip-box-shadow has changed to --ha-card-box-shadow. You can do a find and replace all to fix.

[rolfokevin (Kevin Rolfo)]

would these have reverted some how after the update? I made this change a few days ago and all was well until today.

[rhysb (Rhys)]

This change has been reverted, so you will need to change this back to --chip-box-shadow. Unfortunately you will not be able to do a ‘Replace All’ as --ha-card-box-shadow is used by Mushroom Cards.

If you would like to remove the new border, you can add ha-card-border-width: 0 to your theme.

It is nice to see some being added to HA with the new Tile Card.

[Posreg (Daros)]

@rhysb

–ha-card-border-width: 0

and what if I’m not using theme and I want to remove borders (that appeared) in every card ?
shall I add --ha-card-border-width: 0 to every single card ?

[HarvinDhillon (Harvinder)]

Do you have an example please?

I did that to my themes but doesnt change anything
This is what I have in mine

Mushroom:
    # Nothing here as it's the default HA theme since 2022.11
    modes:
        light: {}
        dark: {}
    --ha-card-border-width: 0

[burg93 (Adam)]

Odd choice to add those large borders when it’s known that people are already happy with the way mushroom looks (due to its popularity). Anyway it looks terrible with them so thanks for the tips on removing it here. One liner worked a charm in the now empty mushroom theme file.

[burg93 (Adam)]

Remove the double dash perhaps. This is working in mine, nothing else in the file. Obviously with it set as current theme in the user settings.

Mushroom:
    # Nothing here as it's the default HA theme since 2022.11
    modes:
        light: {}
        dark: {}
    ha-card-border-width: '0px'

[HarvinDhillon (Harvinder)]

Didnt work for me for some reason
Tried a new browser and cleared my cache, but still there

[piitaya (Paul)]

Are you using stack in card or vertical stack in card ?
There is an open PR to solve this problem with stack in card : Home Assistant 2022.11 compatibility by ov1d1u · Pull Request #47 · custom-cards/stack-in-card · GitHub

[HarvinDhillon (Harvinder)]

yes I am, Ok then that explains it thanks

[WebPower (Karoly Papp)]

This also works in my system, so there is no border.

Mushroom:
  # Nothing here as it's the default HA theme since 2022.11
  modes:
    light: {}
    dark: {}
  ha-card-border-width: "0px"

[Avi_Cohen]

@cowboysdude
Did u get error or know what could be the reason ?

Visual editor is not supported for this configuration:
At path: card_mod -- Expected a value of type `never`, but received: `[object Object]`
You can still edit your config in YAML.

[Thekholm]

Well…!

After the latest update my cards look like this now

So I tried to change stuff, but it didn’t work! Then I tried to change my theme to Mushroom Shadow and got this.

Not right yet, so now I tried to change this line in my card --ha-card-box-shadow: none;
to this --chip-box-shadow: 0px; Then it all worked again.

Is Mushroom Shadow the one too use from now on? I have used the Mushroom original from day one.

Best regards
Thekholm

[cowboysdude (John Wade)]

Uhmmmmm not really sure I never got that error…

This is what is in my configuration.yaml file for card mod

 extra_module_url:
    - /local/card-mod.js

as well as this

- url: /hacsfiles/lovelace-card-mod/card-mod.js
  type: module

While card-mod can be installed as a lovelace resource, some functionality will benefit greatly from it being installed as a frontend module instead.

To do that, add the following to your configuration.yaml file and restart Home Assistant:

frontend: extra_module_url: - /local/card-mod.js

You’ll need to adjust that path according to where you have installed card-mod.js. If you installed through HACS, this is probably /hacsfiles/lovelace-card-mod/card-mod.js.

Any resource definitions automatically added by HACS can be kept as is even after adding extra_module_url.

[piitaya (Paul)]

Mushroom doesn’t need themes. It’s built to work with the default Home Assistant theme. If you use other custom cards (vertical-stack-in-card, stack-in-card, etc…), it can requires some tweaks. So you can use Mushroom without themes and just add --chip-box-shadow: none if you don’t want the border in chips.

I try to keep Mushroom as close as possible to the Home Assistant default design to avoid issues during updates.

[Thekholm]

Thanks,

Then I have to work out a solution to get cards using Stack-in-card and others.

Best regards
Thekholm

Ps: Great work with the Mushroom cards and hope everything works out great at Nabu-casa

[Homeotte41 (Jonathan)]

Is it possible to flashing mushroom chips card?