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

[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?

[TheMystery (Johnny)]

with the release of ha 2022.11 i have a line between cards if i use the custom:stack-in-card:

How can i get rid of it?

[piitaya (Paul)]

There is a PR on stack-in-card to fix that behavior but there is no update since 2 years.
The vertical-stack-in-card has been fixed, you can try this one if you want.

[TheMystery (Johnny)]

Thanks, replaced custom:stack-in-card with custom:vertical-stack-in-card and no further changes and it now good.

another question this morning i changes the code of my chip card for the border te code below to see no border / shadow:

    card_mod:
      style: |
        ha-card {
          --ha-card-border-width: 0;
          --chip-background: none;
          --chip-height: 35px;
          --chip-padding:12px;

But after updating to v2.3.1 they came back but can’t find how to remove it:

[Jarne_Roussard]

nice card can you share this code or this card ?

[TheMystery (Johnny)]

yes, needs only the fix for the border:

type: custom:vertical-stack-in-card
cards:
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.br_unknown_station
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: >-
          {{ state_attr('weather.br_unknown_station', 'forecast')
          [0].precipitation}} mm
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 35px;
              --chip-padding:12px;
            }
      - type: template
        content: >-
          {{ state_attr('weather.br_unknown_station', 'forecast')
          [1].precipitation}} mm
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 35px;
              --chip-padding:12px;
            }
      - type: template
        content: >-
          {{ state_attr('weather.br_unknown_station', 'forecast')
          [2].precipitation}} mm
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 35px;
              --chip-padding:12px;
            }
      - type: template
        content: >-
          {{ state_attr('weather.br_unknown_station', 'forecast')
          [3].precipitation}} mm
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 35px;
              --chip-padding:12px;
            }
      - type: template
        content: >-
          {{ state_attr('weather.br_unknown_station', 'forecast')
          [4].precipitation}} mm
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 35px;
              --chip-padding:12px;
            }
    alignment: center
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.aqara_tuin_temperature
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 30px;
              --chip-padding:7px;
            }
      - type: entity
        entity: sensor.aqara_tuin_humidity
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 30px;
              --chip-padding:7px;
            }
      - type: entity
        entity: sensor.br_wind_direction_2
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 30px;
              --chip-padding:7px;
            }
      - type: entity
        entity: sensor.br_wind_speed_2
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 30px;
              --chip-padding:7px;
            }
      - type: template
        content: '{{ state_attr(''weather.br_unknown_station'', ''visibility'') }} km'
        icon: mdi:eye
        card_mod:
          style: |
            ha-card {
              --chip-border-width: 0;
              --chip-background: none;
              --chip-height: 30px;
              --chip-padding:7px;
            }
    alignment: center

Edit: fix for border added

[piitaya (Paul)]

–chip-border-width: 0

[WebPower (Karoly Papp)]

As I can see, you will write about this a few more times this week
Mushroom Shadow and Mushroom Square Shadow.

[TheMystery (Johnny)]

Thanks, that fixed it. Changed is now 3 times the last week so was a bit confused what to use now.
Everythig is fixed now with release 2022.11 for me, except the map card in a grid card but posted that in the 2022.11 topic.