Mushroom Cards - Build a beautiful dashboard easily 🍄

[dimitri.landerloos]

This is definitely a solution. But the reason i liked my template and now the add-on is because it can returns more complex strings like 6d 4h 23m. Or even seconds if needed

Im a sucker for having all of the info available. But i can definitely see relative_time being useful for a lot of people

[dimitri.landerloos]

Definitely not your latency either then. Must just be the type and quantity of modifications you have

[paddy0174 (Patrick)]

^^ What he says!

Anyway, I’d open a new topic, as helping here in this overcrowded place is kinda difficult (and not the scope of this topic). If you decide to do so, please tag me, so I don’t miss it (hopefully).

[schumi2004]

How did you do that with that DSM version in DiskStation Manager entity item?
Tried several things but can’t get the current version to be displayed.

Maybe you can post complete code?

[T1Ph0Zy (Sébastien)]

Hello everyone,

First of all, many thanks for all the ideas and help in this topic, it’s really great.
I’ve read just about every topic about Mushroom Chips Card animations.
But I’m stuck on a configuration that I can’t solve.
I can apply the animation to the first chip but not to the second.
Could someone tell me where the error is in my code?

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: sensor.garbage
        state_not: Inconnu
    chip:
      type: template
      entity: sensor.garbage
      content: |-
        {% if is_state('sensor.garbage', 'Encombrant') %}
          Encombrant
        {% elif is_state('sensor.garbage', 'Poubelle Verte') %}
          Poubelle verte/marron
        {% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
          Poubelle jaune 
        {% else %}
          Pas de poubelle
        {% endif %}
      icon: |-
        {% if is_state('sensor.garbage', 'Encombrant') %}
          fas:recycle
        {% elif is_state('sensor.garbage', 'Poubelle Verte') %}
          ios:trash-fill
        {% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
          ios:trash-fill  
        {% else %}
          ios:trash-slash-fill
        {% endif %}
      icon_color: |-
        {% if is_state('sensor.garbage', 'Encombrant') %}
          #4682B4
        {% elif is_state('sensor.garbage', 'Poubelle Verte') %}
          #228B22
        {% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
          #FFD700   
        {% else %}
          grey
        {% endif %}
      card_mod:
        style: |
          ha-card{
            --chip-background: rgba(66,65,77, 0.50);
          }
      double_tap_action:
        action: none
      tap_action:
        action: none
      hold_action:
        action: none
  - type: conditional
    conditions:
      - entity: sensor.308_charging_mode
        state: 'No'
    chip:
      type: template
      entity: sensor.308_charging_mode
      icon: ios:bolt-car-fill
      content: |-
        {% if is_state('sensor.308_charging_mode', 'Slow') %}
            Reste {{ states('sensor.308_charging_remaining_time')}}
          {% elif is_state('sensor.308_charging_mode', 'Quick') %}
            Reste {{ states('sensor.308_charging_remaining_time')}}
          {% else %}  
            Déconnectée
          {% endif %}
      double_tap_action:
        action: none
      icon_color: |-
        {% if is_state('sensor.308_charging_mode', 'Slow') %}
            #228B22
          {% elif is_state('sensor.308_charging_mode', 'Quick') %}
            #FF8C00
          {% else %}  
            grey
          {% endif %}
      tap_action:
        action: none
      hold_action:
        action: none
      card_mod:
        style: |
          ha-card{
            --chip-background: rgba(66,65,77, 0.50);
          }
alignment: left
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: surprise 3s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-6px) rotate(-14deg); }
        5% { transform: translateY(-6px) rotate(11deg); }
        7.5% { transform: translateY(-6px) rotate(-8deg); }
        10% { transform: translateY(-6px) rotate(5deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-3px) }
        }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: surprise 3s ease infinite;
      }
      @keyframes surprise {
        0%, 20%, 100% { transform: translateY(0); }
        2.5% { transform: translateY(-6px) rotate(-14deg); }
        5% { transform: translateY(-6px) rotate(11deg); }
        7.5% { transform: translateY(-6px) rotate(-8deg); }
        10% { transform: translateY(-6px) rotate(5deg); }
        12.5% { transform: translateY(0); }
        15% { transform: translateY(-3px) }
        }
    .: |
      ha-card {
        --chip-spacing: 0.5em;
      }

Many thanks in advance

[dimitri.landerloos]

Have a read of my guide here:

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. However, i have changed the scope when making this topic to where i will go through each card 1 by 1 to show the options for styling with Card Mod. it is a lot more thorough now than before. Also just wanted to add that alot of the time there is more than 1 way to complete these same things, and its hard to find out what the “…

But to make it easy, because you are using conditional chips you need to specify that first. as per the below.

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    mushroom-conditional-chip:nth-child(2): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    .: |
      ha-card {
        --chip-spacing: 0.5em;
      }

[T1Ph0Zy (Sébastien)]

@dimitri.landerloos

card_mod:
  style:
    mushroom-conditional-chip:nth-child(1): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    mushroom-conditional-chip:nth-child(2): 
      mushroom-template-chip$: |
        ha-state-icon {
          animation: surprise 3s ease infinite;
        }
        @keyframes surprise {
          0%, 20%, 100% { transform: translateY(0); }
          2.5% { transform: translateY(-6px) rotate(-14deg); }
          5% { transform: translateY(-6px) rotate(11deg); }
          7.5% { transform: translateY(-6px) rotate(-8deg); }
          10% { transform: translateY(-6px) rotate(5deg); }
          12.5% { transform: translateY(0); }
          15% { transform: translateY(-3px) }
        }
    .: |
      ha-card {
        --chip-spacing: 0.5em;
      }

Thanks a lot, I missed that part, sorry

[dimitri.landerloos]

No need for apology, sometimes all you need is a fresh pair of eyes after 2 hours of smashing your head into the wall trying to fix an issue

[EinfachKjell]

Hey Guys i need help.

I created a mushroom template card in a conditional card. I want to change the size but it doesn’t work.
If I created the card without the conditinal card it worked.
Where is my mistake?

type: conditional
conditions:
  - entity: switch.fahrender_ritter
    state: 'on'
card:
  type: custom:mushroom-template-card
  primary: ''
  icon: |-
    {% if is_state('switch.fahrender_ritter','on') -%}
      mdi:bus
    {%- else -%}
      mdi:bus-stop
    {%- endif %}
  icon_color: |-
    {% if is_state('switch.fahrender_ritter','on') -%}
      purple
    {%- else -%}
      disabled
    {%- endif %}
  tap_action:
    action: toggle
  layout: horizontal
  secondary: ''
  entity: switch.fahrender_ritter
  picture: ''
  multiline_secondary: false
  fill_container: true
  card_mod:
    style:
      .: |
        :host {
         --mush-icon-size: 45px;
         height: 50px !important;
         width: px;
        }
        ha-state-icon {
        {% if is_state('switch.fahrender_ritter', 'on') %}
          animation: beat 1.3s ease-out infinite both;
          {% else %}
          
          {% endif %}
        }
        @keyframes beat {
          25% { transform: scale(1); }
          50% { transform: scale(1.1); }
          50% { transform: scale(1.1); }
          25% { transform: scale(1); }
        }

[dimitri.landerloos]

Try like this:

  card_mod:
    style: |
      :host {
        --mush-icon-size: 45px;
      }
      ha-card {
        height: 60px !important;
        width: px;
      }
      ha-state-icon {
        {% if is_state(config.entity, 'on') %}
          animation: beat 1.3s ease-out infinite both;
        {% else %}
          
        {% endif %}
      }
      @keyframes beat {
        25% { transform: scale(1); }
        50% { transform: scale(1.1); }
        50% { transform: scale(1.1); }
        25% { transform: scale(1); }
      }

Specificity is important in CSS. Try to use :host as little as possible. Better to drill down to the element you actually want to style.

[weppa]

The Synology DSM intergration includes an Update entity.

Here is the code:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Synology NAS
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: DiskStation Manager
        secondary: |-
          {% if is_state(entity, 'off') %}
            {{ state_attr('update.braavos_dsm_update', 'installed_version') | replace('DSM','') | replace(' Update ','.') }}
          {% else %}
            {{ state_attr('update.braavos_dsm_update', 'latest_version') | replace('DSM','') | replace(' Update ','.') }}
          {% endif %}
        icon: mdi:nas
        entity: update.braavos_dsm_update
        icon_color: blue
        tap_action:
          action: more-info
        hold_action:
          action: more-info
        double_tap_action:
          action: more-info
        badge_icon: '{{ ''mdi:check-bold'' if is_state(entity, ''off'') else ''mdi:help'' }}'
        badge_color: '{{ ''green'' if is_state(entity, ''off'') else ''orange'' }}'
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: button.braavos_reboot
            icon_color: white
            icon: mdi:restart
            content_info: none
            tap_action:
              action: toggle
              confirmation:
                text: Are you sure you want Restart?
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }  
          - type: entity
            entity: button.braavos_shutdown
            icon_color: white
            icon: mdi:power
            content_info: none
            tap_action:
              action: toggle
              confirmation:
                text: Are you sure you want Shutdown?
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                } 
        card_mod:
          style: |
            ha-card {
                --chip-box-shadow: none;
                top: 16px;
                width: -webkit-fill-available;
                right: 12px;
                position: absolute;
            } 
            .chip-container {
                right: 0px;
                position: absolute;
            }

[EinfachKjell]

Thank you, that’s work!

[Yannik]

Hello everyone,

I would like to display the air pressure level as a pie chart:

Code:

    type: custom:mushroom-template-card
    primary: Kompressor
    secondary: |-
      {% if is_state('switch.kompressor','on') %}
       {{states('sensor.kompressor_power')  |  round (0)}} W
      {% endif %}
    icon: mdi:gas-cylinder
    icon_color: |
      {% if is_state('switch.kompressor','on') %}
        blue
      {% endif %}
    entity: switch.kompressor
    tap_action:
      action: toggle
    layout: horizontal
    multiline_secondary: false
    fill_container: true
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            /* Radial progress bar */
            background: radial-gradient(var(--card-background-color) 60%, 
            transparent calc(60% + 1px)), 
            conic-gradient(var(--icon-color) {{ states('sensor.druck_to_percentage') }}% 0%, 
            var(--card-background-color) 0% 100%);
          }
          .shape:after {
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            border-radius: var(--icon-border-radius);
            background: var(--shape-color);
          }

in my overview of the garage:

Code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: >-
      {{states('sensor.garage_temp_temperature')  |  round (1)}}°C |
      {{states('sensor.garage_temp_humidity')  |  round (0)}}%
    icon: |-
      {% if is_state('binary_sensor.garagentorkontakt_contact','on') %}
        mdi:garage-open-variant
      {% else %}
        mdi:garage-variant
      {% endif %}
    icon_color: |-
      {% if is_state('light.garage_licht','on') %}
        orange
      {% endif %}
    badge_color: red
    badge_icon: |-
      {% if is_state('binary_sensor.garagetorturkontakt_contact','on') %}
        mdi:door-open
      {% endif %} 
    entity: light.garage_licht
    tap_action:
      action: navigate
      navigation_path: /lovelace-newhome/Garage
    hold_action:
      action: toggle
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          z-index: 1;
        }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.garage_temp_temperature
        color: '#ff33ff'
        y_axis: secondary
    height: 60
    hours_to_show: 24
    points_per_hour: 4
    line_width: 5
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
      labels: false
      labels_secondary: false
      points: false
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          left: 3px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }
card_mod:
  style: |
    ha-card:active {
      transform: translateY(1.5px);
      transition: 0s;
      box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
    }

Unfortunately I can’t do that because of the Mini Graph. Can you help me?

[dimitri.landerloos]

Try like this:
Replace with your own sensors. FYI not called a pie chart. Its a radial bar.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garage
    secondary: >-
      {{states('sensor.outside_temperature')  |  round (1)}}°C |
      {{states('sensor.outside_humidity')  |  round (0)}}%
    icon: |-
      {% if is_state('binary_sensor.bedroom_wardrobe_left_contact','on') %}
        mdi:garage-open-variant
      {% else %}
        mdi:garage-variant
      {% endif %}
    icon_color: |-
      {% if is_state('light.bed_light','on') %}
        orange
      {% endif %}
    badge_color: red
    badge_icon: |-
      {% if is_state('binary_sensor.bedroom_wardrobe_left_contact','on') %}
        mdi:door-open
      {% endif %} 
    entity: light.garage_licht
    tap_action:
      action: navigate
      navigation_path: /lovelace-newhome/Garage
    hold_action:
      action: toggle
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            /* Radial progress bar */
            background: radial-gradient(var(--card-background-color) 60%, 
            transparent calc(60% + 1px)), 
            conic-gradient(var(--icon-color) {{ states('sensor.downstairs_bathroom_temperature_humidity_pressure') }}% 0%, 
            var(--card-background-color) 0% 100%);
            z-index: 1;
          }
          .shape:after {
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            border-radius: var(--icon-border-radius);
            background: var(--shape-color);
          }
        .: |
          mushroom-state-info {
            z-index: 1;
          }
          mushroom-badge-icon {
            z-index: 1;
          }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.processor_temperature
        color: '#ff33ff'
        y_axis: secondary
    height: 60
    hours_to_show: 24
    points_per_hour: 4
    line_width: 5
    font_size: 50
    animate: true
    show:
      name: false
      icon: false
      state: false
      legend: false
      fill: fade
      labels: false
      labels_secondary: false
      points: false
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 100%;
          width: 100%;
          top: 0px;
          left: 3px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
        }
card_mod:
  style: |
    ha-card:active {
      transform: translateY(1.5px);
      transition: 0s;
      box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
    }

[Yannik]

Thanks!

My English is probably not the best.

Is it possible to color only the radial bar depending on the state of the compressor?

[dimitri.landerloos]

Yes. Like this:
Replace with your own binary sensor or other device.

    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            /* Radial progress bar */
            {% if states('binary_sensor.yourdevice') == 'on' %}
              background: radial-gradient(var(--card-background-color) 60%, 
              transparent calc(60% + 1px)), 
              conic-gradient(var(--icon-color) {{ states('sensor.downstairs_bathroom_temperature_humidity_pressure') }}% 0%, 
              var(--card-background-color) 0% 100%);
            {% endif %}
            z-index: 1;
          }
          .shape:after {
            content: '';
            height: 100%;
            width: 100%;
            position: absolute;
            border-radius: var(--icon-border-radius);
            background: var(--shape-color);
          }
        .: |
          mushroom-state-info {
            z-index: 1;
          }
          mushroom-badge-icon {
            z-index: 1;
          }

[Yannik]

Thanks, works great!

[andreadannibale (Andrea)]

hi rhysb, how we can add circular indicator in the icon of your card such as:
background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ states(config.entity) }}% 0%, var(--card-background-color) 0% 100%);

[hsec]

Hi @dimitri.landerloos

I’ve asked that before, but I am still getting some sort of issues with the code you post, even with UI Minimalist installed.
What should I look into not the specific case below but in general?

[schumi2004]

Last question.
Which entity did you use for health?
I do see the binary for security status but non for health?