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

[rhysb (Rhys)]

Try like this:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 120px auto 120px
      grid-template-rows: auto
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: menu
          - type: alarm-control-panel
            entity: alarm_control_panel.home_212_alarm
            content_info: none
            name: Alarm
        alignment: start
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            icon: mdi:washing-machine
            icon_color: |
              {% if is_state(entity, 'off') %}
                disabled
              {% else %}
                teal
              {% endif %}
            entity: switch.gf_br01_fan1
          - type: template
            icon: mdi:washing-machine
            icon_color: |
              {% if is_state(entity, 'off') %}
                disabled
              {% else %}
                brown
              {% endif %}
            entity: switch.washing_machine
            tap_action:
              action: none
        alignment: center
        card_mod:
          style:
            mushroom-template-chip:nth-child(1)$: |
              ha-icon {
                {{ 'animation: shake 400ms ease-in-out infinite;' if is_state('switch.washing_machine', 'on') }}
                transform-origin: 50% 58%;
                -webkit-clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
              }
              @keyframes shake {
                0%, 100% { transform: translate(0, 0) rotate(0); }
                20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
                40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
                60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
                80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
              }
            mushroom-template-chip:nth-child(2)$: |
              mushroom-chip {
                cursor: default !important;
              }
              ha-icon {
                position: absolute;
                left: -31.5px;
                bottom: 6px;
                {{ 'animation: spin 1s linear infinite;' if is_state('switch.washing_machine', 'on') }}
                transform-origin: 50% 58%;
                -webkit-clip-path: circle(21.7% at 50% 58%);
              }
              @keyframes spin {
                100% { transform: rotate(360deg); }
              }
            .: |
              .chip-container :nth-child(2) {
                --chip-background: none;
                --chip-box-shadow: none;
                --chip-border-width: 0;
                width: 0px;
                margin-left: calc(-1 * var(--chip-spacing));
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.persons_home_count
            icon: mdi:account-group
            icon_color: |
              {% if is_state(entity, '0') %}
                red
              {% else %}
                blue
              {% endif %}
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card:after {
                  content: "{{ states('sensor.persons_home_count') }}";
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: rgb(var(--rgb-orange));
                  color: var(--card-background-color);
                  font-weight: bolder;
                  border-radius: 50%;
                  top: -7px;
                  right: -2px;
                  width: 17px;
                  height: 17px;
                  font-size: 13px;
                }
          - type: template
            entity: lock.front_door
            icon: >-
              {{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
              'mdi:lock-open' }}
            icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
            content: null
            tap_action:
              action: more-info
        alignment: end
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: switch.all_power_strips_group
            state: 'on'
        chip:
          type: template
          entity: sensor.powerstrips_on_count
          icon: mdi:lightbulb-on
          icon_color: |
            {% if is_state(entity, '0') %}
              disabled
            {% else %}
              orange
            {% endif %}
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card:after {
                content: '{{ states('sensor.powerstrips_on_count') }}';
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -7px;
                right: -2px;
                width: 17px;
                height: 17px;
                font-size: 13px;
              }
      - type: conditional
        conditions:
          - entity: switch.all_fans_group
            state: 'on'
        chip:
          type: template
          entity: sensor.fans_on_count
          icon: mdi:fan
          icon_color: |
            {% if is_state(entity, '0') %}
              disabled
            {% else %}
              teal
            {% endif %}
          tap_action:
            action: more-info
          card_mod:
            style: |
              ha-card:after {
                content: "{{ expand(states.switch.all_fans_group) | selectattr( 'state', 'eq', 'on') | list | count }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                font-weight: bolder;
                border-radius: 50%;
                top: -7px;
                right: -2px;
                width: 17px;
                height: 17px;
                font-size: 13px;
              }
    alignment: start
    card_mod:
      style:
        mushroom-conditional-chip:nth-child(1):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('sensor.powerstrips_on_count') != '0' %}
                {{ 'animation: illumination 1.75s infinite;' }}
              {% endif %}
            }
            @keyframes illumination {
              0%, 100% { -webkit-clip-path: inset(0 0 0 0);}
              80% { -webkit-clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%);}
            }
        mushroom-conditional-chip:nth-child(2):
          mushroom-template-chip$: |
            ha-icon {
              {% if states('sensor.fans_on_count') != '0' %}
                {{ 'animation: spin 2s ease-in, spin 1s linear 2s infinite, spin ease-out;' }}
              {% endif %}
            }
            @keyframes spin {
              0% { transform: rotate(0deg);}
              100% { transform: rotate(360deg); }
            }
        .: |
          mushroom-conditional-chip {
            height: var(--chip-height);
            padding: 8px;
          }

[Mattia2399]

Hey @rhysb , sorry to bother you again!

i have this problem here that i can’t solve.
Do you know how to help me?

P.S. I USE THE MINIMALIST THEME TO HIDE THE TOP BAR

THEME MUSHROOM SHADOW:

THEME MINIMALIST:

THANKS

[rhysb (Rhys)]

Try using Kiosk Mode instead. Can be found in HACS.

[rhysb (Rhys)]

I added an animation for you.

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

Mushroom Animations - Part 5 Mushroom Chip Animations [Mushroom Chip Animated Scene]

Chip Animated Scene

type: custom:mushroom-chips-card chips: - type: template icon: mdi:mushroom icon_color: red - type: template icon: mdi:snail icon_color: brown - type: template icon: mdi:flower icon_color: amber - type: template icon: mdi:butterfly icon_color: cyan card_mod: style: mushroom-template-chip:nth-child(1)$: | ha-icon { anima…

[Mattia2399]

OK, I’ll try. But even with the mushroom theme it doesn’t work well, it stays under the cards

[rhysb (Rhys)]

Add z-index: 9; to :host then.

[StickyClient]

Thanks allot! Fixed it in the meanwhile by changing the icon width to 33px but going to use your approved code.

[Mattia2399]

i could love you hahaa

[filikun]

This is brilliant! Do we know what the official tile card is using for hoover etc so we can add that to mushroom cards as well?

[rhysb (Rhys)]

Is this what you want?

card_mod:
  style: |
    ha-card {
      background-color: var(--nav-link-background);
      margin: 0px 0px -4px -4px;
    }
cards:
  - type: custom:mushroom-template-card
    primary: Lights
    secondary: ''
    icon: mdi:lightbulb-group
    layout: horizontal
    tap_action:
      action: navigate
      navigation_path: /main-control/lights
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card {
          margin: 0px -100px 0px 0px;
        }
        mushroom-shape-icon {
          --icon-color: var(--light-icon-color) !important;
        }
  - type: custom:mushroom-chips-card
    alignment: end
    chips:
      - type: conditional
        conditions:
          - entity: sensor.lights_on_all
            state_not: '0'
        chip:
          type: template
          entity: sensor.lights_on_all
          content: '{{states(entity)}}'
          tap_action:
            action: none
          hold_action:
            action: none
          double_tap_action:
            action: none
          card_mod:
            style: |
              ha-card {
                --chip-height: 20px;
                --chip-border-radius: 0.3em;
                --text-color: var(--button-on-background-secondary);
                --chip-background: var(--button-background-secondary);
                --chip-font-size: 12px;
                --chip-font-weight: 600;
                justify-content: center;
                transition: all 0s;
              }
    card_mod:
      style: |
        :host {
          display: flex;
          justify-content: center;
          align-items: center;
        }

[rhysb (Rhys)]

Why wouldn’t you just use the Mushroom Entity Card then?

[PulsarFX]

Is there a way to align title card with chips?
I already found out that title card is not an ha-card and therefore can’t be modified with card-mod.

This is a horizontal stack (which can’t be card-modded aswell) with a mushroom title card and a chips card next to a timer-bar-card:

Any help appreciated!

[filikun]

Im trying to use your method here and create something like this but I just can’t get it right. I’m using an old custom:button_card template I had for a long time but I just can’t get it right. Can this be recreated easily with mushroom cards and magic?

Imgur: The magic of the Internet

[davidnestico]

Thanks again!

[SinanIbrahim]

hey there, can you please share your YAML code, cause your dashboard very interesting.

[rhysb (Rhys)]

Tile card uses MDC-Ripple which handles the hover and active events in JS.

You can add the hover effect to a Mushroom Entity Card like this:

type: custom:mushroom-entity-card
entity: switch.bedroom_amp
card_mod:
  style: |
    ha-card:hover {
      content: "";
      width: 100%;
      height: 100%;
      
      --icon-color: rgb(var({{ '--rgb-state-entity' if is_state(config.entity, 'on') else '--rgb-disabled' }}));
      background: color-mix(in srgb, var(--icon-color) 6%, var(--card-background-color));
      
      transition: all 0s;
    }

[rhysb (Rhys)]

Anything is possible with… Magic

[rhysb (Rhys)]

You can with mod-card. Have a look here:

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

If anyone needs to modify the Mushroom Title card, it can be done with card_mod like this: [Mushroom Title Card] type: custom:mod-card card: type: custom:mushroom-title-card title: I'd rather be picking subtitle: Mushrooms card_mod: style: mushroom-title-card$: | .title { --primary-text-color: rgb(var(--rgb-grey)); --title-font-size: 20px; --title-font-weight: lighter; } .subtitle { --secondary-text-color: rgb(var(--rgb-red)); …

You want to adjust the --title-padding.

[mmo (Martin)]

yes, U R real professional, many thanks

[jeroenvdd89 (Jeroen)]

I still want the ‘visuals’ of the slider, just not the ‘slidability’ in the UI