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

[rhysb (Rhys)]

Make sure you add --ha-card-background: none to the top Mushroom Card and apply the background to just the stack-in-card.

[rhysb (Rhys)]

You can hide the 2nd Chip like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:trash-can
    icon_color: green
  - type: template
    icon: mdi:trash-can
    icon_color: green
    tap_action:
      action: none
  - type: template
    icon: mdi:mushroom
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-icon {
        clip-path: inset(26% 0 0 0);
      }
    mushroom-template-chip:nth-child(2)$: |
      mushroom-chip {
        cursor: default !important;
      }
      ha-icon {
        position: absolute;
        left: -27px;
        
        animation: lid 1s ease infinite;
        clip-path: inset(0 0 75% 0);
        transform-origin: 50% 25%
      }
      @keyframes lid {
        0%, 50%, 80%, 100% { transform: translateY(0); }
        10% { transform: translateY(-5px) rotate(-37deg); }
        20% { transform: translateY(-5px) rotate(31deg); }
        30% { transform: translateY(-5px) rotate(-25deg); }
        40% { transform: translateY(-5px) rotate(19deg); }
        60% { transform: translateY(-3px); }
      }
    .: |
      mushroom-template-chip:nth-child(2) {
        --chip-background: none;
        --chip-box-shadow: none;
        --chip-border-width: 0;
        width: 0px;
        margin-left: calc(-1 * var(--chip-spacing));
      }

[c0rnflake]

Thanks again @rhysb that done the trick

[rupamkonar]

Hi! everyone, I have just migrated from homebridge to HA a week back and thank you for all of your post and work, I have learned a lot. Can I how can get a battery icon in the place of “person’s state” word to show the battery icon with percentage? Is that possible?

[jetolu]

Try using this “empty space symbol” instead of regular spaces: https://www.editpad.org/tool/invisible-character

[sebbaT]

This looks really nice! good job! How are you handling the navigation between the different media players?

[schmierlappe]

It is set up with the state-switch card for the main page cards (#Navigation) and browser mod. I created scripts, that will close the popup and navigate to the hash page

[Hell255]

Hi there, first of all, a big thanks for these awesome cards!

I’m trying to display my Hue grouped light in home assistant. This group is composed of several hue lights. Unfortunately, when i disable power (via a real power switch) to all the hue bulbs, its still showing the light group (created in Hue app) as enabled:

As a workaround, my idea was to traverse through the individual lights from the group and to check if they are really enabled. I can get the individual light names (friendly names), but i don’t know how to access their state. Do you have a tip how to do that?

      - type: custom:button-card
        entity: light.hue_wohnzimmerdecke
        show_state: false
        show_name: true
        name: |
          [[[
           return `${variables.at_least_one_light_enabled}`;
          ]]]

        variables: 
          at_least_one_light_enabled: >
            [[[
              if (!entity) return "Unavailable";
              if (!entity.attributes.is_hue_group) {
                 return "No hue group";
              }
              for (let i = 0; i < entity.attributes.lights.length; i++) {
                let mylightname = entity.attributes.lights[i];
                return mylightname;
              }
              return "no sub-lights";  
             ]]]

[Mattia2399]

hello @rhysb , you are great! But I want to do something even more complicated. I explain to you:

• I have these 3 switches that I use to open and close the gate of my house. Well, I would like the click to activate the animation (door animation for example).

Otherwise, I also thought that with the click the ‘plain spinner’ animation would start and after 4/5s an always animated check icon would come out.

I know, my mind travels too much, but I know you can do it

Thank you

[zorvalth]

Hey all, in some rooms i have smart switch/relay behind the mechanical switch and smart bulbs. How can I combine them in one light card? To on/oof the lights through the switch and regulate brightness and temperature trough the bulbs?

[mase]

i got a humidty sensor, is there a way to show a conditional chip only if the sensor is above 60%?

[andrew.vint]

@Kabala This is the closest i have got to what you are lookinh for

https://community.home-assistant.io/t/dynamic-width-for-mini-graph-card-within-a-mushroom-template-card/520860/5

[Spartacus]

Hi there,

does anyone know, how to change the font-size from an custom:mushroom-entity-card?

None of this does not work:

card_mod:
  style: |
    ha-card 
     {
     --font-size: 21px;
     background: transparent;
     box-shadow: 0px 0px;
     --title-font-size: 96px;
      }

[dimiforty (Dimi)]

Hello all!
It is a superb thema and i have started to experiment with this!
Is any easy way to change the colours of the cards? More specific the text and the bars or icon colours.
I saw that is customisable but i thought that this can be done through GUI.
Thank you very much for your help.

[Ryan_Grandy (Ryan)]

Is there somewhere that shows all of the options for the mushroom cards yaml config? For example, the chips card doesn’t really say much in the github documentation beyond the types of chips possible but what are the specific configurations available for those chips?

[milandzuris (Milan Dzuriš)]

Code for Header? thx, or how u make header bottom.

[sjabby]

Nice! Exactly what i’m looking for for my Sonos setup. Could you share the code?

[proza]

Can’t find what is going wrong

square: false
columns: 3
type: grid
cards:

• type: custom:stack-in-card
  cards:
  • type: custom:apexcharts-card
    chart_type: radialBar
    series:
    • entity: sensor.proza1_gor1_nas_cpu_utilization_total
      color: rgb(76, 175, 80)
      max: 100
      show:
      legend_value: false
      apex_config:
      plotOptions:
      radialBar:
      offsetY: 0
      startAngle: -108
      endAngle: 108
      hollow:
      size: 65%
      dataLabels:
      name:
      show: false
      value:
      show: false
      track:
      strokeWidth: 80%
      margin: 0
      legend:
      show: false
      chart:
      height: 170px
  • type: custom:mushroom-entity-card
    entity: sensor.proza1_gor1_nas_cpu_utilization_total
    primary_info: name
    secondary_info: state
    name: Core
    icon_color: green
    layout: vertical
    card_mod:
    style: |
    ha-card {
    top: -63px;
    }
    card_mod:
    style: |
    ha-card {
    height: 158px;
    }
• type: custom:stack-in-card
  cards:
  • type: custom:apexcharts-card
    chart_type: radialBar
    series:
    • entity: sensor.proza1_gor1_nas_cpu_utilization_total
      color: rgb(33, 150, 243)
      max: 100
      show:
      legend_value: false
      apex_config:
      plotOptions:
      radialBar:
      offsetY: 0
      startAngle: -108
      endAngle: 108
      hollow:
      size: 65%
      dataLabels:
      name:
      show: false
      value:
      show: false
      track:
      strokeWidth: 80%
      margin: 0
      legend:
      show: false
      chart:
      height: 170px
  • type: custom:mushroom-entity-card
    entity: sensor.proza1_gor1_nas_cpu_utilization_total
    primary_info: name
    secondary_info: state
    name: Memory
    icon_color: blue
    layout: vertical
    card_mod:
    style: |
    ha-card {
    top: -63px;
    }
    card_mod:
    style: |
    ha-card {
    height: 158px;
    }
• type: custom:stack-in-card
  cards:
  • type: custom:apexcharts-card
    chart_type: radialBar
    series:
    • entity: sensor.proza1_gor1_nas_cpu_utilization_total
      color: rgb(233, 30, 99)
      max: 100
      show:
      legend_value: false
      apex_config:
      plotOptions:
      radialBar:
      offsetY: 0
      startAngle: -108
      endAngle: 108
      hollow:
      size: 65%
      dataLabels:
      name:
      show: false
      value:
      show: false
      track:
      strokeWidth: 80%
      margin: 0
      legend:
      show: false
      chart:
      height: 170px
  • type: custom:mushroom-entity-card
    entity: sensor.proza1_gor1_nas_cpu_utilization_total
    primary_info: name
    secondary_info: state
    name: Disk
    icon_color: pink
    layout: vertical
    card_mod:
    style: |
    ha-card {
    top: -63px;
    }
    card_mod:
    style: |
    ha-card {
    height: 158px;
    }

[icemanxbe]

what are those dropdown button/card things (house/lights/…)?

[Mattia2399]

they are shortcuts to other menus, rather than having them on the top bar.