Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

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?

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

Have a read of my guide here:

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;
      }

Thanks a lot, I missed that part, sorry :sweat_smile:

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 :slight_smile:

2 Likes

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); }
        }

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.

1 Like

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;
            }
1 Like

Thank you, thatā€™s work!

Hello everyone,

I would like to display the air pressure level as a pie chart:
2023-09-12_11h51_02

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:
2023-09-12_11h50_48

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?

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);
    }

Thanks!

My English is probably not the best.

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

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;
          }

Thanks, works great!

1 Like

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%);

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?

image

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

In this case doesnt look like the issue is theme. You have a badge that doesnt have its z-index set so the badge is behind the graph.

Try and add this.

        .: |
          mushroom-state-info {
            z-index: 1;
          }
          mushroom-badge-icon {
            z-index: 1;
          }

I notice that i missed the badge existing in my first response. Ill update my initial response to include it :slight_smile:

1 Like

Thank you!

1 Like

I have a idea about something but before trying to create what i have in mind I would like to know if it is even possible with Mushroom cards?

Basscily itā€™s a normal card with all the bells and whissles but with a vertical bar next to it that can be used as a slider to set level or in worst case indicate the current level?

/edit:
Looks like i found my answer in the Bar card topic using stack-in-card + card-mod or the layout card it should be doableā€¦
Can someone confirm?