Mushroom Cards Card Mod Styling/Config Guide

mgluchgit · November 27, 2023, 8:22pm

Thanks, that looks promising!
Can you please advise me what the code will look like if I add more cards?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:dishwasher
    icon_color: blue
  - type: template
    icon: mdi:dishwasher
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 
      } 
      @keyframes wash {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    .: |
      mushroom-template-chip:nth-child(1) {
        {% if states('input_boolean.vd_mycka') == 'off' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}
        {% endif %}
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 
      } 
      @keyframes wash {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    .: |
      mushroom-template-chip:nth-child(2) {
        {% if states('input_boolean.vd_mycka') == 'off' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}
        {% endif %}
      }

If I copy the whole thing and just overwrite nth-child(2) it will return an error. It’s definitely just a bad write

Thank you so much for your help, I would never have figured it out on my own !

duplicated mapping key (45:5)

 42 |       @keyframes wash {
 43 |         50%  { clip-path: polygon(0 ...
 44 |       }
 45 |     .: |
----------^
 46 |       mushroom-template-chip:nth-ch ...
 47 |         {% if states('input_boolean ...

dimitri.landerloos · November 27, 2023, 8:30pm

Sure. so if you had multiple chips you would do this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:dishwasher
    icon_color: blue
  - type: template
    icon: mdi:dishwasher
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 
      } 
      @keyframes wash {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 
      } 
      @keyframes wash {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    .: |
      mushroom-template-chip:nth-child(1) {
        {% if states('input_boolean.vd_mycka') == 'off' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}
        {% endif %}
      }
      mushroom-template-chip:nth-child(2) {
        {% if states('input_boolean.vd_mycka') == 'off' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}
        {% endif %}
      }

mgluchgit · November 27, 2023, 9:59pm

one last thing and it’ll be perfect! How to enlarge the icons please? I tried --chip-icon-size: XXpx; but no result. Thank you very much and I am very grateful!

dimitri.landerloos · November 27, 2023, 11:53pm

–chip-icon-size should work as long as you are putting it in the right section. put it like the example:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:dishwasher
    icon_color: blue
  - type: template
    icon: mdi:dishwasher
    icon_color: red
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        --chip-icon-size: 30px;
        animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 
      } 
      @keyframes wash {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        --chip-icon-size: 30px;
        animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
        transform-origin: 50% 75%;
      }
      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
        40% { transform: translateY(-1.2px) rotate(5deg); } 
        60% { transform: translateY(-1.1px) rotate(-4deg); } 
      } 
      @keyframes wash {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
      }
    .: |
      mushroom-template-chip:nth-child(1) {
        {% if states('input_boolean.vd_mycka') == 'off' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}
        {% endif %}
      }
      mushroom-template-chip:nth-child(2) {
        {% if states('input_boolean.vd_mycka') == 'off' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}
        {% endif %}
      }

andrey170183 · November 28, 2023, 1:24pm

entity: vacuum.dreamebot_l10s_ultra
type: custom:mushroom-vacuum-card
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: blue !important;
      }

this does not work for me

dimitri.landerloos · November 28, 2023, 1:27pm

Yes, we have found that for some it only applies the color using the --shape-color variable when the state is on for the entity in the card. can you test if this is the case?

if you want to change the color regardless of state just do this instead:

entity: vacuum.dreamebot_l10s_ultra
type: custom:mushroom-vacuum-card
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: blue !important;
      }

andrey170183 · November 28, 2023, 3:41pm

Yes, that’s how it works

rog889 · November 29, 2023, 6:11am

Hi,

I need some help.

I don’t know what I did wrong? I added the “badge-icon section” at the bottom of the card_mod, now my main “Red” icon doesn’t rotate anymore when it’s in Heating or Cooling mode.

Can you please give me a pointer? It used to rotate very nicely.


    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            {% set status = state_attr('climate.kitchen','hvac_action') %}
            {% if status == 'cooling' or status == 'heating' %}
              --icon-animation: rotation 2s linear infinite;
            {% endif %}
          }
          @keyframes rotation {
            100% {
              transform: rotate(360deg);
            }
          }
        .: |
          mushroom-shape-icon {
            --shape-color: none !important;
          }
          ha-card {
            padding-bottom: 14px !important;
          }
          :host {
          height: 120px;
          --mush-icon-size: 46px;
          --mush-icon-symbol-size: 1.30em;
          --mush-spacing:9.9px;
          --mush-card-primary-font-size: 16px;
          --mush-card-secondary-font-size: 19px;
          --mush-card-secondary-font-weight: bold;
          --mush-card-primary-line-height: 1.5;
          --secondary-text-color: rgb(151,151,151);
          --primary-text-color: rgb(225,225,225); 
          }
          mushroom-badge-icon {
            top: -10px;
            left: -8px;
            --badge-icon-size: 26px;
            --badge-size: 26px;
            }

dimitri.landerloos · November 29, 2023, 1:34pm

This should work.

  card_mod:
    style: |
      ha-state-icon {
        {% set status = state_attr('climate.kitchen','hvac_action') %}
        {% if status == 'cooling' or status == 'heating' %}
          animation: rotation 2s linear infinite;
        {% endif %}
      }
      @keyframes rotation {
        100% {transform: rotate(360deg);}
      }
      mushroom-shape-icon {
        --shape-color: none !important;
      }
      ha-card {
        padding-bottom: 14px !important;
      }
      :host {
        height: 120px;
        --mush-icon-size: 46px;
        --mush-icon-symbol-size: 1.30em;
        --mush-spacing:9.9px;
        --mush-card-primary-font-size: 16px;
        --mush-card-secondary-font-size: 19px;
        --mush-card-secondary-font-weight: bold;
        --mush-card-primary-line-height: 1.5;
        --secondary-text-color: rgb(151,151,151);
        --primary-text-color: rgb(225,225,225); 
      }
      mushroom-badge-icon {
        top: -10px;
        left: -8px;
        --badge-icon-size: 26px;
        --badge-size: 26px;
      }

Take a look at the updated animations in the first post towards the bottom.

So if it was working before you were/are using an old version of mushroom cards.

rog889 · November 29, 2023, 6:45pm

Ahh…now you reminded me that I actually upgraded the mushroom card version yesterday morning. Why would the new mushroom version break my old animation code? What has changed in the latest versions? I hadn’t updated mushroom card for almost 9 months until yesterday.

BTW, thanks for the suggestion. Would your new suggestion work with the latest mushroom version?

dimitri.landerloos · November 29, 2023, 6:48pm

The structure of css was changed to more closely align with regular HA cards and animation was simplified so all animations (except shape animations) just start with animation rather than for example --icon-animation but yes, what i gave you is for the newest version.

I linked you to the updated animations you can take a look there and compare to the old ones to see how its changed

dimitri.landerloos · November 29, 2023, 6:50pm

Do you have card mod installed?

dimitri.landerloos · November 29, 2023, 7:14pm

Sorry to say but works just fine on mine.

May be a dumb question but have you tried setting to a number larger than 20px?

type: custom:mushroom-title-card
title: My Home
alignment: center
subtitle: test
card_mod:
  style: |
    ha-card {
      --title-font-size: 60px !important;
    }

samperkinton · November 29, 2023, 7:15pm

Very strange maybe I will try reinstall it. This is what I get

Yes i’ve exactly copied your code there with the sizing.

rog889 · November 29, 2023, 10:37pm

You are the best!!! Thanks so much for your help and detailed explanation. I have been doing HA for past 12 months, and thus far, you are the best contributor who is continuously and generously helping others with your vast knowledge and experience. Kudos to you!!! Thank you thank you thank you!!!

BTW, your correction really works!!! Thank you!

rog889 · November 30, 2023, 5:08pm

Hi, I finally got the animation working, it’s working great! Thank you! Now, I got stuck with another problem. I want to replace the default “temperature control button bar” with the “Blue & Red” button bar with bigger font size (pls see attached picture). I tried many edits, and the Blue and Red buttons still wouldn’t show. Can you please take a look and see what error I made? Thanks.


card_mod:
  style: |
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container {
          background: none;
          padding: 0px;
        }
        #container .button {
          height: 100%;
          width: 30%;
        }
        #container .button:nth-child(1) {
           background: rgba(var(--rgb-blue), 0.2);
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
        }    
        .value {
          font-size: 20px;
        }          
    mushroom-shape-icon {
      {% if is_state(config.entity, 'heat_cool') %}
        --card-mod-icon: mdi:autorenew;
      {% elif is_state(config.entity, 'heat') %}
        --card-mod-icon: mdi:fire;
      {% elif is_state(config.entity, 'cool') %}
        --card-mod-icon: mdi:snowflake;
      {% elif is_state(config.entity, 'dry') %}
        --card-mod-icon: mdi:water-percent;
      {% elif is_state(config.entity, 'fan_only') %}
        --card-mod-icon: mdi:fan;
        animation: spin 1s linear infinite;
      {% else %}
        --card-mod-icon: mdi:air-conditioner;
      {% endif %}
      display: flex;
    }
    :host {
          height: 120px;
          --mush-card-primary-font-size: 16px;
          --mush-card-secondary-font-size: 19px;
          --mush-card-secondary-font-weight: bold;
          --mush-card-primary-line-height: 1.5;
          --secondary-text-color: rgb(151,151,151);
          --primary-text-color: rgb(225,225,225); 
        }
    ha-state-icon {
      --icon-symbol-size: 33px;
    }    
    mushroom-badge-icon {
          top: -10px;
          left: -8px;
          --badge-icon-size: 23px;
          --badge-size: 23px;
    }
    ha-state-icon {
          {% set status = state_attr('climate.bedroom','hvac_action') %}
          {% if status == 'cooling' or status == 'heating' %}
            animation: shake 6s ease-in-out infinite;
          {% endif %}
    }
    @keyframes shake {
      0%, 100% { transform: rotate(25deg); }
      25% { transform: rotate(-25deg); }
      50% { transform: rotate(50deg); }
      75% { transform: rotate(-50deg); }
    mushroom-shape-icon {
          --shape-color: none !important;
    }

dimitri.landerloos · November 30, 2023, 5:13pm

You cant have multiple | in a single line. take a look in the first post a section called “what the $ and .:| symbols do”

but essentially you need to do this:

card_mod:
  style: 
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container {
          background: none;
          padding: 0px;
        }
        #container .button {
          height: 100%;
          width: 30%;
        }
        #container .button:nth-child(1) {
           background: rgba(var(--rgb-blue), 0.2);
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
        }    
        .value {
          font-size: 20px;
        }
    .: |
      mushroom-shape-icon {
        {% if is_state(config.entity, 'heat_cool') %}
          --card-mod-icon: mdi:autorenew;
        {% elif is_state(config.entity, 'heat') %}
          --card-mod-icon: mdi:fire;
        {% elif is_state(config.entity, 'cool') %}
          --card-mod-icon: mdi:snowflake;
        {% elif is_state(config.entity, 'dry') %}
          --card-mod-icon: mdi:water-percent;
        {% elif is_state(config.entity, 'fan_only') %}
          --card-mod-icon: mdi:fan;
          animation: spin 1s linear infinite;
        {% else %}
          --card-mod-icon: mdi:air-conditioner;
        {% endif %}
        display: flex;
      }
      :host {
        height: 120px;
        --mush-card-primary-font-size: 16px;
        --mush-card-secondary-font-size: 19px;
        --mush-card-secondary-font-weight: bold;
        --mush-card-primary-line-height: 1.5;
        --secondary-text-color: rgb(151,151,151);
        --primary-text-color: rgb(225,225,225); 
      }
      ha-state-icon {
        --icon-symbol-size: 33px;
      }    
      mushroom-badge-icon {
        top: -10px;
        left: -8px;
        --badge-icon-size: 23px;
        --badge-size: 23px;
      }
      ha-state-icon {
        {% set status = state_attr('climate.bedroom','hvac_action') %}
        {% if status == 'cooling' or status == 'heating' %}
          animation: shake 6s ease-in-out infinite;
        {% endif %}
      }
      @keyframes shake {
        0%, 100% { transform: rotate(25deg); }
        25% { transform: rotate(-25deg); }
        50% { transform: rotate(50deg); }
        75% { transform: rotate(-50deg); }
      }
      mushroom-shape-icon {
        --shape-color: none !important;
      }

so your error is here:

  style: |
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |

you have a | in style, followed by another |. that is not allowed. only one is allowed per “flow” shall i call it.

and then because you want to use style: | for the other entries (because they dont need to enter the shadow root via the $ symbol), then you can use .: | to pretend you are back at style: |

rog889 · November 30, 2023, 6:00pm

Ahh…got it! I read more of the first post. Now, I understand. Thanks for the help and correction. It’s working the way I want now.

Thanks again

Altosaxophony · December 3, 2023, 11:49am

Thank you so much! With your help i was able to set up cards like a pro
I was googling and trying quite a lot and it was a pain until i found your guide.

chintito4ever · December 4, 2023, 12:31am

@dimitri.landerloos Hi Dimitri, is it possible to animate the icon based on an entity state?