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

Networx666 · June 1, 2022, 9:16pm

I have another question.
Im trying to change .chip-container. I want all the chips to be vertically centered.
When im changing the value in firefox its working but not with my code.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: navigate
      navigation_path: test
    icon: mdi:home
    icon_color: green
    mush-chip-height: 60px
    card_mod: null
    style: |
      ha-card {
          --chip-height: 50px;
      }
  - type: template
    content: Wohnzimmer
    icon_color: ''
    icon: mdi:sofa-outline
    tap_action:
      action: navigate
      navigation_path: wohnzimmer
  - type: template
    content: Schlafzimmer
    tap_action:
      action: navigate
      navigation_path: schlafzimmer
    icon: mdi:bed-outline
card_mod: null
style: |
  .chip-containter {
    align-items: center;
  }

brave_X6i9vgtopj

what am I doing wrong?
Thanks again for your help

brett.seefeldt · June 1, 2022, 10:41pm

I use the Mushroom Template card and it is working for me.

type: custom:mushroom-template-card
primary: Bedroom
secondary: Master
icon: mdi:bed-king-outline
tap_action:
  action: navigate
  navigation_path: /lovelace-home/bedroom
hold_action:
  action: none
double_tap_action:
  action: none
multiline_secondary: false
icon_color: ''

pjn77 · June 1, 2022, 11:14pm

Why is this not changing the size of my title font? (I dont want it that big, just so I can see its worked or not)

type: custom:mushroom-title-card
title: House Mode
card_mod:
  style: |
    ha-card {
      --mush-title-font-size: 96px;
    }

also tried

type: custom:mushroom-title-card
title: House Mode
card_mod:
  style: |
    ha-card {
      --title-font-size: 96px;
    }

Danny2100 · June 2, 2022, 9:53am

Can the font of the title card be changed to mirror the font of the other mushroom cards?

It looks as if the entity card font is bold and the title card is not. I would prefer they look the same.

Turbo4door · June 2, 2022, 4:54pm

There was always something that bugged me about the title card font and I think this is exactly it. It’s not the same as the rest of the cards. Just a slight difference.

davidnestico · June 2, 2022, 6:37pm

Hi, I love this design but how do I remove the white bar since i’d like the controls to show but without that?

Valdorama · June 2, 2022, 7:34pm

Can you post your yaml?

Flo.C · June 2, 2022, 8:10pm

Hi all!

I currently try to build a mushroom template card (inspired by @EverythingSmartHome) into my dashboard.
Basically it should look like this but only swipepable:

If I implement the swiper-card it looks like this:

this is the code I use:

type: custom:swipe-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Home
        secondary: ''
        icon: mdi:home
        icon_color: blue
        tap_action: null
        action: navigate
        navigation_path: '1'
        layout: vertical
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Licht
        secondary: ''
        icon: mdi:lightbulb
        icon_color: yellow
        layout: vertical
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Jalousie
        secondary: ''
        icon: mdi:window-shutter
        icon_color: green
        layout: vertical
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Sonos
        secondary: ''
        icon: mdi:cast-variant
        icon_color: red
        layout: vertical

I tried also to make the first version swipable but it just ended in the same result. Any ideas what I can do?

davidnestico · June 2, 2022, 8:23pm

Hi! Here is my yaml:

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: custom:mushroom-template-card
    primary: Thermostat
    secondary: |
      Currently: {{ state_attr('climate.3family_room', 'hvac_action') }}
    icon: |-
      {% set mode = states('climate.3family_room') %}
      {% if mode == 'cool' %}
      mdi:snowflake
      {% else %}
      mdi:fire
      {% endif %}
    icon_color: |-
      {% set status = state_attr('climate.3family_room','hvac_action') %}
      {% if status == 'cooling' %}
      blue
      {% elif status == 'heating' %}
      orange
      {% else %}
      grey
      {% endif %}
    tap_action: none
    style: |
      ha-card {
        padding-bottom: 1px !important;
      }
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-xl: 28px;
        --st-font-size-m: 20px;
        --st-font-size-title: 20px;
        --st-font-size-sensors: 14px;
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 1px;
      }
    entity: climate.3family_room
    header: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: false
      step: row
    decimals: '0'
    step_size: '1'
    control: true
  - type: custom:mushroom-chips-card
    alignment: justify
    chips:
      - type: entity
        entity: sensor.3family_room_humidity
        icon: mdi:water-percent
        icon_color: cyan
      - type: entity
        entity: sensor.3family_room_temperature
        icon: mdi:home-thermometer
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
      }
  - type: custom:mushroom-chips-card
    alignment: justify
    chips:

Valdorama · June 2, 2022, 9:20pm

I think this is to do with the way the simple-thermostat card displays buttons for controlling the thermostat (and depends on what controls are supported by the thermostat). So the solution should lie with adjusting that ‘control’ setting. Have a look at this section of the card’s config options. By playing around with the options you should be able to make the empty ‘buttons’ go away (I think…).

berkans · June 2, 2022, 10:40pm

Hi Piitaya.

I have a future request.

I have automations which are connected to the booleans.

I tried to add pictures but unfotunately when displaying the entities with pictures it is not possible to see their state. Within mushroom entity card the only way to do that is to display state as a secondary info like that :

ı would love to see their state like maybe in black and white when they are off. Currently to colorise states of specific entities, the only thing I can do is to use mdi icons.

I can do that with using picture entites but it then doesn’t suit my minimal setup.

Hope this will be available in the near future.

davidnestico · June 2, 2022, 11:31pm

Wow, thanks!

Screen Shot 2022-06-02 at 7.31.04 PM

Screen Shot 2022-06-02 at 7.30.34 PM812×472 19.1 KB

piitaya · June 3, 2022, 7:17am

Hi
I think there is already a feature request on GitHub for this. That’s a good idea

RodgerDodger · June 3, 2022, 11:07am

You definitely have to add configurtion details to the swiper card. In an unconfigured way you’ll get like nothing than a centered card.

As I only dived into this swipe-card topic to steal ideas - - maybe this code will get you a base to tinker around:

    type: custom:swipe-card
    card_width: 155px
    start_card: 2
    parameters:
      effect: cover slide
      grabCursor: true
      centeredSlides: true
      slidesPerView: auto
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Home
            secondary: ''
            icon: mdi:home
            icon_color: blue
            tap_action: null
            action: navigate
            navigation_path: '1'
            layout: vertical
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Licht
            secondary: ''
            icon: mdi:lightbulb
            icon_color: yellow
            layout: vertical
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Jalousie
            secondary: ''
            icon: mdi:window-shutter
            icon_color: green
            layout: vertical
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Sonos
            secondary: ''
            icon: mdi:cast-variant
            icon_color: red
            layout: vertical

The accompanying thread for the swiper-card should give you more ideas.

Aunt Edith says:
Cut the code cause it contained the view and header of a new dashboard.

mhoogenbosch · June 3, 2022, 6:17pm

Could you share your code for this, looks really nice!

davidnestico · June 3, 2022, 6:29pm

Sure thing!

type: horizontal-stack
cards:
  - type: custom:stack-in-card
    keep:
      margin: false
      box_shadow: false
      background: false
    cards:
      - type: custom:mushroom-template-card
        primary: Thermostat
        secondary: |
          Currently: {{ state_attr('climate.3family_room', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.3family_room') %}
          {% if mode == 'cool' %}
          mdi:snowflake
          {% else %}
          mdi:fire
          {% endif %}
        icon_color: |-
          {% set status = state_attr('climate.3family_room','hvac_action') %}
          {% if status == 'cooling' %}
          blue
          {% elif status == 'heating' %}
          orange
          {% else %}
          grey
          {% endif %}
        tap_action: none
        style: |
          ha-card {
            padding-bottom: 1px !important;
          }
      - type: custom:simple-thermostat
        style: |
          ha-card {
            --st-font-size-xl: 28px;
            --st-font-size-m: 20px;
            --st-font-size-title: 20px;
            --st-font-size-sensors: 14px;
            --st-font-size-toggle-label: 6px
            --st-spacing: 0px;
            --st-default-spacing: 1px;
          }
        entity: climate.3family_room
        header: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        decimals: '0'
        step_size: '1'
        control:
          - hvac
      - type: custom:mushroom-chips-card
        alignment: justify
        chips:
          - type: entity
            entity: sensor.3family_room_humidity
            icon: mdi:water-percent
            icon_color: cyan
          - type: entity
            entity: sensor.3family_room_temperature
            icon: mdi:home-thermometer
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
          }
      - type: custom:mushroom-chips-card
        alignment: justify
        chips:
          - type: template
            entity: climate.3family_room
            content: |
              {{ state_attr(entity, 'fan_mode') }}
            icon: mdi:fan
            icon_color: cyan
          - type: entity
            entity: weather.home
            icon: mdi:cloud
            icon_color: cyan
        style: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
          }

Flo.C · June 3, 2022, 10:54pm

Thank you. But I tried different configurations. The cards stayed always the same size. No matter if I used “px” or “%”. Also removing horizontal-Stack before each card didn’t changed anything.

weapons · June 3, 2022, 11:16pm

Hi everyone.
I travel a lot for work and was wondering if there was a template I could use to update the mushroom-person-card location to the current location from the Companion App (locality)

in real-time without having to edit the zones in the config yaml file. 2022-06-04_03-05-52

rhysb · June 4, 2022, 3:28am

I thought I would give back and share my Mushroom graph card. It uses stack-in-card to combine mushroom-entity-card with mini-graph-card. This is the dual version, but it is easy to modify for a single graph.

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.family_room_sensor_temperature
        primary_info: state
        secondary_info: name
        name: Temperature
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.family_room_sensor_humidity
        primary_info: state
        secondary_info: name
        name: Humidity
        icon_color: blue
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.family_room_sensor_temperature
        name: Temperature
        color: var(--green-color)
      - entity: sensor.family_room_sensor_humidity
        name: Humidity
        color: var(--blue-color)
        y_axis: secondary
    hours_to_show: 24
    line_width: 3
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade

Edit 13-1-23: Change to vertical-stack-in-card to remove border lines.

mhoogenbosch · June 4, 2022, 7:05am

I got it almost working, except for the “Currently”.

secondary: |
  Currently: {{ state_attr('climate.kantoor', 'hvac_action') }}

I don’t exactly know what it does, but my cliemate unit doens’t have ‘hvac_action’ as an attribtue:

So I think i have to do something with ‘state’, could you help me out?