Mushroom Cards Card Mod Styling/Config Guide

Yannik · January 16, 2024, 8:37am

Thank you, that really helps me!
It would be nice to color the icon. Is that even possible?

The size and position work for me:

2024-01-16_09h38_54

card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            white-space: normal !important;
          }
        mushroom-badge-icon$: |
          .badge {
             position: absolute;
             top: -25px;
             left: 20px;
             background: transparent !important;
             }          
           mushroom-shape-icon {
             position: absolute;
             top: -57px;
             left: -40px;
             }
           mushroom-state-info {
             padding-left: 34px;
             z-index: 1;
             }
        .: |
          mushroom-shape-icon {
            position: absolute;
            top: -57px;
            left: -40px;
             }
          mushroom-state-info {
            padding-left: 34px;
            z-index: 1;
            }
          :host {
            --mush-icon-size: 2.84em;
            --mush-icon-symbol-size: 1em;
            --mush-badge-size: 22px;
                   }
        mushroom-shape-icon$: |
          .shape {  
              background: transparent !important;
             }

LiQuid_cOOled · January 16, 2024, 8:47am

adding this will control the color

      .badge ha-icon {
             color: red !important;   
                }

card_mod:
  style:
    mushroom-state-info$: |
      .primary {
        white-space: normal !important;
      }
    mushroom-badge-icon$: |
      .badge {
         position: absolute;
         top: -27px;
         left: 24px;
         background: transparent !important;
                }    
      .badge ha-icon {
             color: red !important;   
              }
    .: |
      mushroom-shape-icon {
        position: absolute;
        top: -57px;
        left: -40px;
         }
      mushroom-state-info {
        padding-left: 34px;
        z-index: 1;
        }
      :host {
        --mush-icon-size: 2.84em;
        --mush-icon-symbol-size: 1em;
        --mush-badge-icon-size: 20px;
                 }
    mushroom-shape-icon$: |
      .shape {  
          background: radial-gradient(var(--card-background-color) 100%, transparent);
         }

Yannik · January 16, 2024, 9:01am

Thank you!

now i have built myself something beautiful: (what i find beautiful)

2024-01-16_10h09_17

type: custom:mushroom-template-card
    primary:  Vanessa
    secondary: >-
      {% if states(config.entity) == 'home' %} Zuhause:  {% elif
      states(config.entity) == 'not_home' %} Weg:  {% else %}
      {{states(config.entity) }}: {% endif %} {%- set time =
      (as_timestamp(now()) - as_timestamp(states.person.vanessa.last_changed)) |
      int  %}
        {%- set minutes = ((time % 3600) // 60) %}
        {%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
        {%- set hours = ((time % 86400) // 3600) %}
        {%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
        {%- set days = (time // 86400) %}
        {%- set days = '{}d '.format(days) if days > 0 else '' %}
      {{ '<1m' if time < 60 else days + hours + minutes }}
    icon: |
      {% if states(config.entity) == 'home' %}
        mdi:home
      {% elif states(config.entity) == 'Arbeit Y' %}
        mdi:briefcase
      {% elif states(config.entity) == "Eltern V" %}
        mdi:home-heart
      {% elif states(config.entity) == "Eltern Y" %}
        mdi:home-heart
      {% else %}
        mdi:walk
      {% endif %}
    entity: person.vanessa
    icon_color: |-
      {% if states(config.entity) == 'home' %}
        #5ddeb8
      {% elif states(config.entity) == 'not_home' %}
        #FF2D00
      {% elif states(config.entity) == 'Arbeit Y' %}
        #87afff
      {% elif states(config.entity) == "Eltern Y" %}
        #ff99cc
      {% elif states(config.entity) == "Eltern V" %}
        #d0abff
      {% else %}
        #5bc779
      {% endif %}
    badge_icon: mdi:account
    tap_action:
      action: more-info
    hold_action:
      action: none
    double_tap_action:
      action: none
    multiline_secondary: null
    card_mod:
      style:
        mushroom-state-info$: |
          .primary {
            white-space: normal !important;
          }
        mushroom-badge-icon$: |
          .badge {
             position: absolute;
             top: -14px;
             left: 40px;
             background: transparent !important;
                    }    
          .badge ha-icon {
                 color: #F700FF !important;   
                  }
        .: |
          mushroom-shape-icon {
            position: absolute;
            top: -57px;
            left: -40px;
             }
          mushroom-state-info {
            padding-left: 34px;
            z-index: 1;
            }
          :host {
            --mush-icon-size: 2.84em;
            --mush-icon-symbol-size: 1em;
            --mush-badge-icon-size: 20px;
                     }
        mushroom-shape-icon$: |
          .shape {  
              background: transparent !important;
             }

dimitri.landerloos · January 16, 2024, 12:05pm

Honestly, i had never seen anyone use a tap action on the title card, so didnt even know that was an option!

but it is as simple as this:

type: custom:mushroom-title-card
title: Master bedroom
subtitle: >-
  {% if is_state('input_boolean.master_climate_auto', 'on') %}  Automatic mode{%
  else %}Manual mode{% endif %}
alignment: start
title_tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.master_climate_auto
card_mod:
  style: |
    ha-icon {
      display: none !important;
    }

and poof it is gone

freibiergesicht · January 22, 2024, 4:10pm

Can someone point me out how to change the font weight of my secondary information? Best case would be to edit and change my theme file I think

chintito4ever · January 23, 2024, 2:48am

you need card mod for that

card_mod:
  style:
    ha-tile-info$: |
      .info .primary { 
        font-weight: 900;
        letter-spacing: 0px;
      }
      .info .secondary {
        font-weight: 700;
      }

chintito4ever · January 23, 2024, 5:19am

btw what font is that?

Faecon · January 23, 2024, 5:58am

How do you measure 1 cycle ? I really like your idea of the pods

this is one cylce

sensory.energy_socket_actueel_vermogen

and is there a way to measure the energy used for a cycle ?

freibiergesicht · January 23, 2024, 9:08am

Montserrat from Google Fonts

dimitri.landerloos · January 23, 2024, 9:33am

Over X watts for X amount of time turn a boolean helper on.

If under X watts for X amount of time, turn boolean helper off and decrement counter helper for the pods.

Youll likely need to play with the values of watts and time to get a nicely running automation that turns on and off consistently.

Every dishwasher is different

Faecon · January 23, 2024, 9:53am

And to know how much energy used ?

Making a helper that starts and stops when the other helper starts and stops ? But what kind of helper do i need ?

dimitri.landerloos · January 23, 2024, 9:55am

I use the utility meter and have it set to reset daily. I dont record energy used in a cycle.

Denman2103 · January 23, 2024, 1:05pm

Hello,

I’m trying to animate the icon of a template chip in a chipscard, but can’t get i done. Can someone say what is wrong in the code?

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |
      {% if is_state(entity, 'on') %}
      mdi:ev-station
      {% else %}
      mdi:power-plug-off-outline
      {% endif %}
    icon_color: |
      {% if is_state(entity, 'on') %}
      green
      {% else %}
      grey
      {% endif %}
    entity: binary_sensor.kia_sportage_ev_battery_charge
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-template-chip$: |
          ha-state-icon {
            --icon-animation: charge 3s linear infinite;
          }
          @keyframes charge {
            0%, 80% { clip-path: inset(0 0 0 0); }
            10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
            20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
            30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
            40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
            50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
            60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
            70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
          }

dimitri.landerloos · January 23, 2024, 7:38pm

Try like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: |
      {% if is_state(entity, 'on') %}
      mdi:ev-station
      {% else %}
      mdi:power-plug-off-outline
      {% endif %}
    icon_color: |
      {% if is_state(entity, 'on') %}
      green
      {% else %}
      grey
      {% endif %}
    entity: binary_sensor.kia_sportage_ev_battery_charge
    tap_action:
      action: more-info
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: charge 3s linear infinite;
      }
      @keyframes charge {
        0%, 80% { clip-path: inset(0 0 0 0); }
        10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
        30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
        50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
        70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
      }

nth-child(1) refers to the count of the chip you are referring to. And of course make sure you have the chip type referenced correct to. So for example mushroom-entity-chip:nth-child(2)$: | instead if you added a second chip that was an entity chip.

Denman2103 · January 24, 2024, 10:05am

Thank you! this works. I did not know the fucntion of nth-child. This makes sense. Thank you very much

mviamin · January 25, 2024, 11:18pm

I have been struggling with this card. I want to eliminate the 2 white bands on each side of the artwork which does not seem to stretch all the way to fill the card. I tried with the “host”, which I temporarily put in red for visibility, but that does not accomplish what I need. Any help ?

Second question : is there a way to dynamically change the font of the text to adapt to the artwork. For instance, black text of the artwork is predominantly light (as in this picture), or white text if the artwork is predominantly dark ?

Thank you !

type: custom:mushroom-media-player-card
entity: media_player.pyrite
icon: mdi:music
use_media_info: true
show_volume_level: true
primary_info: name
tap_action:
  action: navigate
  navigation_path: /tablet-dash/media
fill_container: true
layout: horizontal
volume_controls: []
card_mod:
  style: |
    ha-card {
      {% if not is_state(config.entity, 'off') %}
        background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        background-blend-mode: overlay;
        background-color: rgba(var(--rgb-card-background-color),0.5);
      {% endif %};
      height: 85px!important;
    }
    :host {
    background-color: red;
    }
    mushroom-shape-icon {
    --card-mod-icon: 
      mdi:music
    }

dimitri.landerloos · January 26, 2024, 12:02am

it fits for me, but you can try and play with the values in background-size:

like this for example:

background-size: auto 320px;

this will make it much wider and you can increase more until the white should be gone.

Supergrobi · January 26, 2024, 10:35am

Hi, maybe someone can help me. I am failing here at the moment.
The question is regarding the cover card.
The Question is: Is it possible to have the second slider option as default ?
I guess pictures will help here.
Thats the default.

I want to have it like that (click right)

Is that possible somehow ? Thx alot for reading.
KR Supergrobi

dimitri.landerloos · January 26, 2024, 3:15pm

I dont think this is possible with card mod unfortunately. How the buttons are set up to show and hide are done in javascript. Your only option would probably be to make a fork of mushroom and edit that bit of the javascript directly.

Supergrobi · January 26, 2024, 4:34pm

Thx alot of your response. I will dig into that