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

[jkseamons]

Since 2024.07 I’ve not been able to get negative values to work with chip spacing. Positive values work, but not negative.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Entry
    secondary: |-
      🌡️ {{ state_attr('weather.home', 'temperature') }}°F |
      💦 {{ state_attr('weather.home', 'humidity') }}%
    icon: mdi:coach-lamp
    entity: light.entry_lights
    icon_color: blue
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          height: 35px !important;
          background: transparent;
          border-style: none;
          left: -25px;
          top: 5px;
          --icon-size: 75px;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: light.front_porch_light
        icon: mdi:coach-lamp
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
      - type: template
        entity: light.permanent_outdoor_lights
        icon: mdi:led-strip-variant
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
      - type: template
        entity: binary_sensor.mail_notify
        icon: mdi:mailbox-open-up-outline
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
      - type: template
        entity: binary_sensor.door_front
        icon: mdi:door-open
        card_mod:
          style: |
            ha-card {
              background: transparent;
              border-style: none;
              }
    card_mod:
      style: |
        .chip-container {
          --chip-spacing: -10px;
        }          
    alignment: end

I’ve tried both with !important and without with no success.

[GTunney]

I am also having the same issue, reported it in the card_mod topic but had no reply

[tofrie (Tobias)]

This worked for me and fixed the padding:

    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        } 
        ha-card {
          background: rgba(var(--rgb-primary-text-color), 0.025) !important;
          height: 55px;
          width: 500px;
          position: relative;
          left: -18px;
          top: -18px;
          --spacing: 12px 10px 0 12px;
          --icon-size: 76px;
          --ha-card-border-width: 0;
        }
        mushroom-state-info {
          padding-left: 5px !important;
        }

[Dmitry3650 (Dmitry)]

Hello! help me please! how can I edit my code so as to preserve the animation of the icon but at the same time add a temperature adjustment on the side as in the second picture. I photoshopped this picture

type: custom:mushroom-template-card
entity: climate.otoplenie_zal
secondary: |
  {% if states(config.entity) == 'heat' %}
  On -
   {{state_attr(config.entity, 'temperature')}}%
  {% else %}
    off
  {% endif %}
tap_action:
  action: more-info
icon: mdi:fire
layout: vertical
icon_color: |
  {{ '#ff6f22' if is_state(config.entity, 'heat') else 'grey' }}
primary: Hall
fill_container: false
multiline_secondary: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {

       }
    .: |

      ha-state-icon {
      {% if state_attr(config.entity, 'hvac_action') ==
      'heating'  %}

        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      {% endif %} }

      ha-card {
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
        }
      @keyframes fire {
        0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
        100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      }

[Faecon (Jo)]

I have an icon I want to spin. but it is not working

the state of climate.ruimte1_airco is “cool”. What is wrong ?

                card_mod:
                  style:
                    mushroom-state-info$: |
                      .container {
                        margin: 10px;
                      }
                    mushroom-shape-icon$: |
                      .shape {
                      margin-top: 0px;
                      }
                    .: |
                      ha-state-icon {
                        {{ 'animation: spin 1s linear infinite;' if not is_state('climate.ruimte1_airco','off') }}
                        }
                        @keyframes spin {
                        100% { transform: rotate(360deg); }
                        }
                      ha-card {
                        --chip-background: transparent;
                        border: none !important;
                        box-shadow: none !important;
                      }

[Spl4sh (Kevin)]

Hi @rhysb ! I have a problem with this card since the last update

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

Something like this? [Mushroom Triple Gauges] type: grid square: false columns: 3 cards: - type: custom:stack-in-card cards: - type: custom:apexcharts-card chart_type: radialBar series: - entity: sensor.processor_use_percent color: rgb(76, 175, 80) max: 100 show: legend_value: false apex_config: plotOptions: radialBar: offsetY: 0 startAngle: -108 …

Here’s how it looks on a smartphone :

Thank you in advance ! And sorry for my bad english

[dimitri.landerloos]

Like this:

type: custom:mushroom-climate-card
entity: climate.office_heating
collapsible_controls: false
show_temperature_control: true
layout: horizontal
layout_options:
  grid_columns: 4
  grid_rows: 1
icon: mdi:fire
card_mod:
  style: |
    ha-state-icon {
      {% if state_attr(config.entity, 'hvac_action') == 'heating'  %}
        animation: fire 3.5s infinite;
        transform-origin: 50% 85%;
      {% endif %} 
    }
    ha-card {
      box-shadow: none;
      margin-left: -0px !important;
      margin-right: 0px !important;
      margin-bottom: 0px !important;
    }
    @keyframes fire {
      0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
      95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
      100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
    }

or like this:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: climate.lounge_heating
    secondary: |
      {% if states(config.entity) == 'heat' %}
        On -
       {{state_attr(config.entity, 'temperature')}}%
      {% else %}
        Off
      {% endif %}
    tap_action:
      action: more-info
    icon: mdi:fire
    layout: horizontal
    icon_color: |
      {{ '#ff6f22' if is_state(config.entity, 'heat') else 'grey' }}
    primary: Hall
    fill_container: false
    multiline_secondary: false
    card_mod:
      style: |
        ha-state-icon {
          {% if state_attr(config.entity, 'hvac_action') == 'heating'  %}
            animation: fire 3.5s infinite;
            transform-origin: 50% 85%;
          {% endif %} 
        }
        ha-card {
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
        }
        @keyframes fire {
          0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        }
  - type: custom:mushroom-climate-card
    entity: climate.lounge_heating
    collapsible_controls: false
    show_temperature_control: true
    layout: horizontal
    card_mod:
      style: |
        mushroom-state-item {
          display: none;
        }

both give the same kinda effect:

[dimitri.landerloos]

works fine for me:

type: custom:mushroom-climate-card
entity: climate.office_heating
collapsible_controls: false
show_temperature_control: true
layout: horizontal
layout_options:
  grid_columns: 4
  grid_rows: 1
icon: mdi:fire
card_mod:
  style: |
    ha-state-icon {
      {{ 'animation: spin 1s linear infinite;' if not is_state('climate.bedroom_heating','off') }}
    }
    @keyframes spin {
      100% { transform: rotate(360deg); }
    }

[Faecon (Jo)]

          - type: horizontal-stack 
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: climate.ruimte1_airco
                    icon: mdi:fire
                    icon_color: >
                      {% if is_state("climate.ruimte1_airco", 'heat') %}
                        [176,17,17]
                      {% else %}
                        [84, 84, 84]
                      {% endif %}
                    tap_action:
                      action: " "
                    card_mod:
                      style: |
                        ha-state-icon {
                            {% if is_state("climate.ruimte1_airco", 'heat') %}
                            --icon-animation: fire 1.5s infinite;
                            transform-origin: 50% 85%;

                        }
                        @keyframes fire {
                            0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                            95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                            100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                        }
                alignment: center

              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    entity: climate.ruimte1_airco
                    icon: mdi:snowflake
                    icon_color: >
                      {% if is_state("climate.ruimte1_airco", 'cool') %}
                        [3, 244, 252]
                      {% else %}
                        [84, 84, 84]
                      {% endif %}
                    tap_action:
                      action: " "                      
                    card_mod:
                      style: |
                        mushroom-shape-icon {
                          {% if is_state("climate.ruimte1_airco", 'cool') %}
                            --card-mod-icon: mdi:snowflake;
                            animation: cool 6s ease-in-out infinite;
                          {% endif %}
                        display: flex;
                        }
                        @keyframes cool {
                          0%, 100% { transform: rotate(25deg); }
                          25% { transform: rotate(-25deg); }
                          50% { transform: rotate(50deg); }
                          75% { transform: rotate(-50deg); }
                        }                        
                    alignment: center

so my both card mods are not working…

[dimitri.landerloos]

With how long and how many questions you have asked in this forum i do feel that you should know by now that this is not how you apply animations to chip icons.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: climate.ruimte1_airco
    icon: mdi:snowflake
    icon_color: |
      {% if is_state("climate.ruimte1_airco", 'cool') %}
        [3, 244, 252]
      {% else %}
        [84, 84, 84]
      {% endif %}
    tap_action:
      action: ' '
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state("climate.bedroom_heating", 'cool') %}
          --card-mod-icon: mdi:snowflake;
          animation: cool 6s ease-in-out infinite;
        {% endif %}
        display: flex;
      }
      @keyframes cool {
        0%, 100% { transform: rotate(25deg); }
        25% { transform: rotate(-25deg); }
        50% { transform: rotate(50deg); }
        75% { transform: rotate(-50deg); }
      }  

[Faecon (Jo)]

ok, i will search a little further

[dimitri.landerloos]

No, i gave you the answer too. i wouldnt just tell you that you should know.

[Faecon (Jo)]

Ok. Thanks !

[Faecon (Jo)]

do you have a link where i can find the difference between | and .: | and when to use ?

I want to add this to your code, but I don’t know how

                    ha-card {
                      --chip-background: transparent;
                      border: none !important;
                      box-shadow: none !important;
                    }

[Faecon (Jo)]

what If I have 2 templates, where do I place the card-mod ?

type: custom:mushroom-chips-card
chips:
  - type: template
card_mod:
 - type: template

this does not look good. Do I have to make 2 chips cards in a horizontal stack ?

        type: custom:mushroom-chips-card
        chips:
          - type: template
        card_mod:
        type: custom:mushroom-chips-card
        chips:
          - type: template
        card_mod:

[dimitri.landerloos]

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.5.4 and Card Mod Version 3.4.3 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.9). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

This section:

@dimitri.landerloos

What the $ and .: | symbols do

[dimitri.landerloos]

Like this:

type: custom:mushroom-chips-card
chips:
  - type: template
  - type: template
card_mod:
  style:
    mushroom-template-chip:nth-child(1): |
      ha-state-icon {
      }
    mushroom-template-chip:nth-child(2): |
      ha-state-icon {
      }

Here is the chip card section:

Mushroom Cards Card Mod Styling/Config Guide

Chips Card Sections are split:

Main Icon Styling

You can style the main icon of each chip type like this: Change the icon type/mdi. [image] The weather chip icon cannot be modified as it is not a normal HA icon. Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper. card_mod: style: mushroom-conditional-chip:nth-child(1): mushroom-template-chip$: | ha-state-icon { --card-…

[Faecon (Jo)]

quote

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: blue !important;
      }
    .: |
      ha-card {
        background: red;
      }

note where the .: starts is the exact same place as where you initial mushroom-shape-icon$: | starts. basically treat writing .: | as writting a whole new style: | again.

so i was thinking like this

                card_mod:
                  style:
                    mushroom-template-chip:nth-child(1)$: |
                      ha-state-icon {
                        {% if is_state("climate.ruimte1_airco", 'cool') %}
                          --card-mod-icon: mdi:fan;
                          animation: spin 1s linear infinite ;
                        {% endif %}
                        display: flex;
                      }
                      @keyframes spin {
                      100% { transform: rotate(360deg); }
                      }
                    .: |    
                      ha-card {
                        border: none !important;
                        box-shadow: none !important;
                        }

                    mushroom-template-chip:nth-child(2)$: |
                      ha-state-icon {
                        {% if is_state('media_player.woonkamer', 'playing') %}
                        --icon-animation: music 2s ease-in-out infinite alternate;
                        transform-origin: 50% 100}
                      }
                      .shape {
                        perspective: 7px;
                      }
                      @keyframes music {
                        0%, 100% { transform: translateY(0px) scaleX(1); }
                        20% { transform: translateY(2px) scaleX(0.9); }
                        40% { transform: rotateY(10deg) rotateZ(-10deg); }
                        60% { transform: translateY(-4px) scaleX(1.1); }
                        80% { transform: rotateY(-10deg) rotateZ(10deg); }
                      }
                    .: |    
                      ha-card {
                        border: none !important;
                        box-shadow: none !important;
                        }

but that gives me a duplicate key on the ha-card

[dimitri.landerloos]

So:

1. Chips are quite different from normal cards in terms of the pathing, so just keep that in mind.

2. Chips dont have a .shape i would check the element paths of the card you are trying to style. The background of a chip is just considered a card background, because each chip is considered its own card.

3. The way you get to the icon of a chip and the background of a chip is not the same. So you would do this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:ab-testing
    card_mod:
      style: |
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }                    
  - type: template
    icon: mdi:test-tube
    card_mod:
      style: |
        ha-card {
          border: none !important;
          box-shadow: none !important;
        }                      
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        {% if is_state("climate.ruimte1_airco", 'cool') %}
          --card-mod-icon: mdi:fan;
          animation: spin 1s linear infinite ;
        {% endif %}
        display: flex;
      }
      @keyframes spin {
        100% { transform: rotate(360deg); }
      }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        {% if is_state('media_player.woonkamer', 'playing') %}
          animation: music 2s ease-in-out infinite alternate;
        {% endif %}
        transform-origin: 50% 100;
      }
      @keyframes music {
        0%, 100% { transform: translateY(0px) scaleX(1); }
        20% { transform: translateY(2px) scaleX(0.9); }
        40% { transform: rotateY(10deg) rotateZ(-10deg); }
        60% { transform: translateY(-4px) scaleX(1.1); }
        80% { transform: rotateY(-10deg) rotateZ(10deg); }
      }

[Dmitry3650 (Dmitry)]

Dear friend, I apologize for not answering right away. Your method number two helped me a lot, thank you!!! There is one more small problem… How can you stretch the temperature control so that it is the same length as the sliders? In picture number two, I did it in Photoshop as I would like, but I can’t… I studied your materials but found only editing the slider… But I don’t have a slider and I can’t change the size…

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    entity: climate.otoplenie_zal
    secondary: |
      {% if states(config.entity) == 'heat' %}
        On -
       {{state_attr(config.entity, 'current_temperature')}}%
      {% else %}
        Off
      {% endif %}
    tap_action:
      action: more-info
    icon: mdi:fire
    layout: horizontal
    icon_color: |
      {{ '#ff6f22' if is_state(config.entity, 'heat') else 'grey' }}
    primary: Hall
    fill_container: false
    multiline_secondary: false
    card_mod:
      style: |
        ha-state-icon {
          {% if state_attr(config.entity, 'hvac_action') == 'heating'  %}
            animation: fire 3.5s infinite;
            transform-origin: 50% 85%;
          {% endif %} 
        }
        ha-card {
          border: none;
          box-shadow: none;
          margin-left: -0px !important;
          margin-right: 0px !important;
          margin-bottom: 0px !important;
          }
        @keyframes fire {
          0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
          95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
          100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
        }
  - type: custom:mushroom-climate-card
    entity: climate.otoplenie_zal
    collapsible_controls: false
    show_temperature_control: true
    layout: horizontal
    card_mod:
      style: |

        ha-card {
          border: none;
          }
        mushroom-state-item {
          display: none;
        }
        mushroom-state-info$: |
         .container {
          flex-direction: row !important;
          align-items: baseline;
          gap: 10px;
        }