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

[cowboysdude (John Wade)]

I don’t think it’s possible to use templates with chip cards… If not please make that work
In the case I’m using it it’s cleaner to use the chip card…

I want to round the last 2 but don’t really want to build sensors to do that… so for now I’ll just leave them as they are.

AND is there a possible way to set background on entire card or do I have to do each chip seperately?

Thank you!

[Posreg (Daros)]

is the last chip template or entity chip ?
You don;t need to build sensor to round, just put in lovelace:

  - type: template
    (other code)
    content: '{{ states(''sensor.srednia_temperatura'') | round(1, default=0) }} °C'

PS I;m not so good, and I;m not sure what should be the default , but without default it fails

[echo_Mark]

Is it possible at all to adjust the Title Card with card_mod??
I tried everything I could think of to change the text color, but nothing seems to work. Likewise the padding/margins of that card.

[piKolin]

Hi!

Would be possible to do a dropdown like the 1st image, with the appearance of the 2nd one ? I don’t know how to disable de background-color: white of the layout-card.

1st

2nd

This is the code for the 1st one:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px'
    cards:
      - type: custom:mushroom-title-card
        subtitle: Apertura Cancela
      - type: custom:mushroom-template-card
        entity: input_boolean.apertura_cancela
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
          }}
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }
    card_mod:
      style: |
        ha-card {
          background-color: #fafafa !important;
        }
  - type: conditional
    conditions:
      - entity: input_boolean.apertura_cancela
        state: 'on'
    card:
      type: horizontal-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Coche
          icon: mdi:garage
          hold_action:
            action: none
          double_tap_action:
            action: none
          entity: switch.cancela
          fill_container: false
          multiline_secondary: false
          icon_color: ''
        - type: custom:mushroom-template-card
          primary: Peatonal
          icon: mdi:door
          double_tap_action:
            action: none
          tap_action:
            action: none
          hold_action:
            action: none
          icon_color: ''

[berkans (Berkan Sezer)]

This should work

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px'
    cards:
      - type: custom:mushroom-title-card
        subtitle: Apertura Cancela
      - type: custom:mushroom-template-card
        entity: input_boolean.dropdown_radios
        primary: ''
        secondary: ''
        icon: >-
          {{ 'mdi:chevron-down' if is_state(entity, 'off') else 'mdi:chevron-up'
          }}
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-box-shadow: 0px;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }
    card_mod:
      style: |
        ha-card {
          background-color: #fafafa !important;
        }
  - type: conditional
    conditions:
      - entity: input_boolean.dropdown_radios
        state: 'on'
    card:
      type: horizontal-stack
      cards:
        - type: custom:mushroom-template-card
          primary: Coche
          icon: mdi:garage
          hold_action:
            action: none
          double_tap_action:
            action: none
          entity: switch.cancela
          fill_container: false
          multiline_secondary: false
          icon_color: ''
        - type: custom:mushroom-template-card
          primary: Peatonal
          icon: mdi:door
          double_tap_action:
            action: none
          tap_action:
            action: none
          hold_action:
            action: none
          icon_color: ''
card_mod:
  style: |
    ha-card {
      background: rgba(var(--rgb-primary-background-color), 0.1);
      --paper-item-icon-active-color: #2196f3;
      --paper-item-icon-color: #6f6f6f;
    }

You can also set the background full transparent with this:

card_mod:
  style: |
    ha-card {
      background: transparent;
      --paper-item-icon-active-color: #2196f3;
      --paper-item-icon-color: #6f6f6f;
    }

[snootched]

Not 100% sure… I think you may have to do a template such as this:
https://community.home-assistant.io/t/change-entity-picture-if-i-turn-on-a-switch-run-a-script-scene-etc/21079/20

Any reason you don’t want to make Melanie a ‘Person’ entity and use that tracker for her?
I use different tracker entities for my cat - and just use the Person card for him in the chips.
Today he’s chilling at a Cottage.

[berkans (Berkan Sezer)]

I have been dealing with creating a new mobile page using mushroom, for a month now. I am on my final page which is the “Multimedia” page.

I have 3 Amazon Echo dot, 1 Echo Show 5 and a Fire TV. I also have a Music follow automation which music follows me in every room which I am present. For example if I start the music in office and leave the room and enter the kitchen, the music also transfers to the kitchen. Basically it travels with me within the house.

So I wanted to control all of my Amazon devices from one tab from my mushroom multimedia page. The easiest way to achieve this was to create a dropdown. But I wanted to be as simple as possible while building my mushroom instance. So I created a simple automation running template commands over media players. Due to their state of standby ,idle, paused or playing, my media card also changes. I also used a Input.boolean with on - off. And of course “Conditional Card” does all the work here. You can accomplish wonders with it.

As you can see there is only one multimedia card which represents office echo dot. But if I pass the music to bedroom this card also disapperas and Bedroom Echo multimedia card appears on the same spot. If I use more then one media player then every of them appears on the screen like this :

And finally when any of media players stops playing music meaning passes to standby, idle or paused state then the cards or a single card disapperas and everywheere multimedia card becomes active.

I also used browser mode within chips to access spotcast list and firetv remote so that they do not appear on main page.

With a single touch to Spotify chip icon the Spotcast media screen appears. And again with a double tap action, the spotcast list disappears. For the fire remote I used browser mode. With a simple touch to the mushroom chip (red remote icon) makes the remote appear on screen in a popup.

So after using this everything is clean and feels minimalistic. With transparency everything looks very nice. I will share my configuration and screenshots whenever I complete my design.

[fisch55]

Is it possible to hide the map when no door is open and vice versa when one is open?

type: custom:mushroom-template-card
primary: >-
  {{
  expand('group.tueren_kg_eg')|selectattr('state','eq','on')|map(attribute='name')|list|join(',
  ') }}
secondary: ''
icon: mdi:door
icon_color: ''
badge_icon: mdi:exclamation-thick
badge_color: red
picture: ''
multiline_secondary: true

Or ist is it possible to get the template in a chip?

[fisch55]

Hey that’s pretty cool. It don“t no- how to get the first row off, so that only chip cards seeing! Maybe you could help me…

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

This is a boolean I use to expand menus. You can create a boolean from settings>devices&services>helpers when on helpers section just press"Create Helper" choose toggle, name it. After created you can use the entity for dropdown. When the entity state is off it means dropdown menu is closed. Using conditional card you can set anything you like on “OFF” mode. Like in this example : [Ekran Resmi 2022-07-12 15.42.17] As you can see I am using chips on the first row when the dropdown is on “OF…

[Boostin4HP]

It’s just using Bar Chart

[jeroen.nijssen]

Yeah, i just started with home-assistant and the platform i came from (Homey) you had to make a flow for life 360 and update the location for the person… i just discovered that it’s just a person and a tracker here thank you! and say hi to Dexter from me

[cowboysdude (John Wade)]

OMG I’m sorry it’s a chip card…

- type: custom:mushroom-chips-card
  chips:
    - type: entity
      entity: sensor.budd_st_weather_uv
      card-mod:
           style: |
              ha-card {                     
              background-color: rgba(255, 255, 255, .1);
               }
     - type: entity
       entity: sensor.budd_st_weather_wind_speed
       icon: mdi:turbine
     - type: entity
       entity: sensor.budd_st_weather_rel_pressure
       icon: mdi:gauge
     - type: entity
       entity: sensor.budd_st_weather_dew_point
       icon: mdi:thermometer-water
  alignment: center

[berkans (Berkan Sezer)]

You have to use conditional card and input booleans together. Just tell me what you want to do.

[fisch55]

How can I get the navigation Line off?
On yours it is off - am I right ?

[benchr]

GitHub - maykar/kiosk-mode: 🙈 Hides the Home Assistant header and/or sidebar

[fisch55]

installed it via hacs.

configuration.yaml

kiosk_mode:
  hide_header: true

Check config…no kiosk mode found

[piKolin]

White background is gone, thx!

But box-shadow and border-radius (30% in my other cards) of the mushroom template card is missing

[cowboysdude (John Wade)]

In case anyone is wondering…here’s the answer to my ‘template’ and chip card answer!! Thanks @Posreg

- type: custom:mushroom-chips-card
  chips:
      - type: entity
        entity: sensor.budd_st_weather_uv
      - type: entity
       entity: sensor.budd_st_weather_wind_speed
       icon: mdi:turbine
     - type: template
       entity: sensor.budd_st_weather_rel_pressure
       content: "{{ states('sensor.budd_st_weather_rel_pressure') | round(0, default=0) }}%"
       icon: mdi:gauge
     - type: template
       entity: sensor.budd_st_weather_dew_point
       content: "{{ states('sensor.budd_st_weather_dew_point') | round(0, default=0) }}%"
       icon: mdi:thermometer-water
   alignment: center

Result!

[Jovink (Jeroen)]

Nice last name. Family of Emile?

[Pulpyy]

Hello,

I’m on my way to use mushroom all over my dashboards (theme/decluttering_templates/card_mod) and i was wondering if i could enable slider indicator everywhere ?

like this (changed class from slider-track-active to slider-track-indicator on browser for screenshot) while keeping coloring

Thanks