Mushroom Cards Card Mod Styling/Config Guide

I’d like to increase the entire icon size for the template cards. They are too small to be readable on my hub. However, the CSS listed in post #13 for template cards doesn’t seem to work. What am I missing?

For reference, this is what it looks like right now, and I’d like the icons to be readable from at least a couple feet away.

Definitely should work.

card_mod:
  style: |
    /* changes size of icon itself */
    ha-state-icon {
      --icon-symbol-size: 80px;
    }
    /* changes background size */
    mushroom-shape-icon {
      --icon-size: 100px;
    }
2 Likes

Hi!
I have modded the follow code, but i don’t understand when am i wrong. I am not skilled in HA…
Someone help me?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    primary: Trash
    card_mod:
      style: |
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: inset(26% 0 0 0);
          }
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    card_mod:
      style: |
        mushroom-shape-icon$: |
          ha-icon {
            --icon-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); }
          }
          
          .shape {
            --shape-color: none;
            top: 0.3px;
          }
          
          .: |
            ha-card {
              width: 66px;
              top: -66px;
            }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Please dont crosspost. I already answered your question in the mushroom thread.

1 Like

Hi, I have edit the code, but it is wrong and I don’t understand what I must change for the correct execution.
I’am sorry.

I linked you to a post with how the new animations work. Part 4 has the exact animation you want to use in it.

Try and apply it and if you are still having problems feel free to send a message :slight_smile:

1 Like

thank you very much! it is work!

i have tried to modify the " Calendar Clock Animation (changed)".
i would like a mdi:calendar-clock icon grey when input_boolean.menu_condizionatori_mobile is off, while Calendar Clock Animation (changed) animation when the input_boolean.menu_condizionatori_mobile is on.
what am i wrong?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.menu_condizionatori_mobile
    icon: mdi:calendar-clock
    icon_color: grey
    primary: Calendar Clock
    card_mod:
      style: |
        {{% if is_state(config.entity, 'on') %}
           ha-state-icon {
              --icon-color: purple;
             clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
           }
        {% else %}
        {% endif %}
        display: flex;         
        }         
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    card_mod:
      style:
        mushroom-shape-icon$: |
          {{% if is_state(config.entity, 'on') %}
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            animation: spin 1s linear infinite;
            transform-origin: 67% 67%;
            clip-path: circle(17% at 67% 67%);
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Try like this.

Replace the input_boolean with your own one.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    entity: input_boolean.bedroom_fan
    icon: mdi:calendar-clock
    icon_color: grey
    primary: Calendar Clock
    card_mod:
      style: |
        ha-state-icon {
          clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
          display: flex;     
          {% if is_state(config.entity, 'on') %}
            --icon-color: rgba(var(--rgb-purple), 1)
          {% else %}
          {% endif %}
        }
        mushroom-shape-icon {
          {% if is_state(config.entity, 'on') %}
            --shape-color: rgba(var(--rgb-purple), 0.2) !important;
          {% else %}
          {% endif %}
        }
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    entity: input_boolean.bedroom_fan
    icon_color: grey
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
          }
          ha-state-icon {
            transform-origin: 67% 67%;
            clip-path: circle(17% at 67% 67%);
            {% if is_state(config.entity, 'on') %}
              --icon-color: rgba(var(--rgb-purple), 1);
              animation: spin 1s linear infinite;
            {% else %}
            {% endif %}
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }
2 Likes

Animation is fine but there it looks like stack-in-card is showing a border.

This is how it is showing to me.

image

I have to add border: 0px to both mushroom cards.

But why?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    primary: Trash
    card_mod:
      style: |
        ha-card {
            border: 0px !important;
          }
        ha-state-icon {
          clip-path: inset(26% 0 0 0);
        }
  - type: custom:mushroom-template-card
    icon: mdi:trash-can
    icon_color: green
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: none;
            top: 0.3px;
          }
        .: |
          ha-card {
            width: 66px;
            top: -66px;
            border: 0px !important;
          }
          ha-state-icon {
            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); }
          }
card_mod:
  style: |
    ha-card {
      height: 66px;
    }

Differences in theme being used. I use minimalist which has no border by default.

1 Like

Got you. Thanks!

hi @dimitri.landerloos ,
thanks for this awesome styling guideline.This takes my HA UI to the next level.

I’ve got one question: is it possible to add a icon transition to e.g. the template card? Lets say we start with mdi:hamburger and change the icon after 2s to mdi:pizza. After another 2s we change the icon back to mdi:hamburger and so on? Furthermore I wonder if its possible to give both a different icon color.

Do you have any idea if this is possible?

Thanks in advance.

Sure, definitely possible. but not as easy as you might expect as we cant use --card-mod-icon directly in animations.
Untitled video - Made with Clipchamp - 2023-09-21T225619.148

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:hamburger
    icon_color: brown
    card_mod:
      style: |
        ha-card {
          width: fit-content;
          background: none;
          border: none;
          box-shadow: none;
        }
        mushroom-shape-icon {
          opacity: 0;
          animation: displaytest 4s steps(1, end) infinite;
        }
        @keyframes displaytest {
          0% {opacity: 0;}
          25% {opacity: 1;}
          50% {opacity: 0;}
          100% {opacity: 1;}
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:pizza
    icon_color: red
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 0;
          width: fit-content;
          background: none;
          border: none;
          box-shadow: none;
        }
        mushroom-shape-icon {
          opacity: 0;
          animation: displaytest 4s steps(1, end) infinite;
        }
        @keyframes displaytest {
          0% {opacity: 1;}
          25% {opacity: 0;}
          50% {opacity: 1;}
          100% {opacity: 0;}
        }

So here i am overlapping 2 cards and then transitioning between the 2 icons.

1 Like

Thank you. Thats cool and works like a charm when using Chrome at the desktop pc. Sadly it seem that this doesn’t work with the iOS Companion App. It just shows an overlapped image. :cry:

If I’m using icon_type: entity-picture with Media Card, how to change size of this picture icon?

Below should do it. no guarantee that the picture will look good in it though :slight_smile:

card_mod:
  style: 
    mushroom-shape-avatar$: |
      .container {
        --icon-size: 200px;
      }
1 Like

Excellent, works great and quality is good, atleast with quick test.

Hey, i built a version of this specifically made to make this layout work neatly with different sizes.

check out my post here:

hopefully it works for your use case :slight_smile: