Mushroom Cards Card Mod Styling/Config Guide

Hi Dimitri,

About the number card. Is there a list with the available display_modes ?

At github docs we don’t have the “display_mode” as an option for number card.
lovelace-mushroom/docs/cards/number.md at 3d94e92bbad748e0ec332407bb6668d74ce99502 · piitaya/lovelace-mushroom · GitHub

And my second question: is there an hybrid display mode for the number card: a slider with buttons and the value?
I think about this to finelly adjust an slider with large ranges.
Roughly adjust with the slider and the final touch with the buttons.

Thanks.

3 questions I did not get managed…

  1. I have a mushroom template card with this code
                                    ha-card {        
                                      {% if is_state('light.gevel','on') %}
                                      background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      {% endif %}
                                      }

it looks like the card is staying white, and is not getting the card color. what is wrong ?

edit:
background: {% if states('light.gevel') == 'on' %} rgb({{ states("input_text.kleur_iconen_bleker")}}) !important; {% endif %}

  1. I have a background icon I want removed from a mushroom entity card…
              card_mod:
                style: | 
                  ha-card {
                    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
                    background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
                    margin: 15px ;
                    width: 200px ;
                    border-radius: 8px !important;
                    margin-bottom: 30px;                              
                    }
                  mushroom-shape-icon$: |
                    .shape {
                      background: transparent !important;
                    }

this is not working for me…

edit:

                  card_mod:
                    style:
                      mushroom-state-info$: |
                        .container {
                          --card-secondary-font-weight: bold;    
                        }   
                      .: |
                        ha-state-icon {
                          --icon-symbol-size: 0px;
                          background-color: transparent !important;
                        }
                        .mushroom-state-icon {
                          background-color: transparent !important;  # Ensures background of the icon itself is transparent
                        }
                      mushroom-shape-icon$: |
                        .shape {
                          background: transparent !important;
                          background-color: transparent !important;  # Ensure no background is set on the icon's shape
                        }
  1. I have a mushroom template card where I want it aligned on the right. How do I do that ?

                                     ha-card {
                                         box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
                                         background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                         width: 160px;
                                         height:60px !important;  
                                         border-radius: 8px !important;   
                                         ha-card-border-radius: '8px'
                                        right: 30px;
                                       }
    

edit

                            - type: custom:mod-card
                              style: |
                                ha-card {
                                  display: flex;
                                  justify-content: flex-end;  # This pushes the card to the right
                                }

Hello, I have finally started migrating my simple dashboard to something more functional and pleasing to the eye but I’m scratching my head with the chip cards leaving spaces between cards. I’ve googled and googled and tried suggestions but nothing has quite worked. Any guidance is appreciated.

Screenshot 2024-12-20 105727

type: horizontal-stack
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: alarm_control_panel.alarm_state
        content_info: []
        icon: |-
          {% if is_state('alarm_control_panel.alarm_state', 'armed_away') %}
            mdi:shield-lock-outline
          {% else %}
            mdi:shield-off
          {% endif %}    
        icon_color: |-
          {% if is_state('alarm_control_panel.alarm_state', 'armed_away') %}
            blue
          {% else %}
            red
          {% endif %}
        use_entity_picture: true
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Alarm System
              content:
                type: horizontal-stack
                cards:
                  - features:
                      - type: custom:service-call
                        entries:
                          - type: button
                            entity_id: alarm_control_panel.alarm_state
                            tap_action:
                              action: call-service
                              service: script.ajax
                            label: >-
                              {% if states ('alarm_control_panel.alarm_state')
                              == 'armed_away' %}
                                DISARM
                              {% else %}
                                ARM
                              {% endif %}
                    type: tile
                    entity: alarm_control_panel.alarm_state
                    tap_action:
                      action: none
    card_mod:
      style: |
        ha-card {
          animation:
            {% if states ('alarm_control_panel.alarm_state')
            == 'disarmed' %}
              pulse 2s ease-in-out infinite
            {% else %}
            {% endif %}  
          }
                    
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions: []
        card:
          type: custom:mushroom-chips-card
          chips:
            - type: template
              entity: sensor.indoor_lights_on_2
              icon_color: amber
              icon: mdi:lightbulb
              content: "{{ states(entity) }}"
              tap_action:
                action: fire-dom-event
                browser_mod:
                  service: browser_mod.popup
                  data:
                    title: Indoor Lights On
                    content:
                      type: custom:auto-entities
                      card:
                        type: entities
                      filter:
                        include:
                          - entity_id: light.*
                            state: "on"
                        exclude:
                          - entity_id: light.indoor_lights
                          - entity_id: light.outdoor_lights
                          - entity_id: light.b740e035_ecc9536a_screen
                          - entity_id: light.front_door_hue_light
                          - entity_id: light.garage_door_hue_east
                          - entity_id: light.garage_door_hue_west
                          - entity_id: light.ratgdo_light
                          - entity_id: light.mbr_ceiling_fan_light
                          - entity_id: light.outdoor_garage_lights
                          - entity_id: light.outdoor_string_lights
          alignment: start
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.sense_daily_energy
        content: "{{ states(entity) | round(0) }} kWh"
        icon: mdi:home-lightning-bolt-outline
        icon_color: primary
        tap_action:
          action: more-info
    alignment: start
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: sensor.phyn_pp1_daily_water_usage
        content: "{{ states(entity) | round(0) }} gal"
        icon_color: primary
        icon: mdi:water-outline
        tap_action:
          action: more-info
    alignment: start
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.gas_usage
        icon_color: primary
        icon: mdi:meter-gas-outline
    alignment: start

Hi there.

I have tried this but I onl¡y want the icon to be animated when the entity state is on. It doesn’t work. The icon is always rotating. How can I achieve what I intend to?

Thank you.

type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: mdi:fan
icon_color: |
  {% if states('fan.extractor') == 'on' %}
      green
  {% elif states('fan.extractor') == 'off' %}
        lightgrey
  {% else %}
         red
  {% endif %}
badge_icon: |
  {% if states('fan.extractor') == 'on' %}
   null
  {% elif states('fan.extractor') == 'off' %}
   null
  {% else %}
      mdi:exclamation
  {% endif %}
badge_color: |
  {% if states('fan.extractor') == 'on' %}
    lightgrey
  {% elif states('fan.extractor') == 'off' %}
    lightgrey
  {% else %}
    red
  {% endif %}
tap_action:
  action: perform-action
  perform_action: fan.toggle
  target:
    entity_id: fan.extractor
hold_action:
  action: none
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {

     {% if states('fan.extractor'), 'on' %}
        --shape-animation: rotating 2s linear infinite;
         } 
         @keyframes rotating {
        from {transform: rotate(360deg);}
        to {transform: rotate(0deg);}
        } 
      {%elif states('fan.extractor'), 'off' %}  
        --shape-animation: rotating 0s linear infinite;
         } 
         @keyframes rotating {
        from {transform: rotate(360deg);}
        to {transform: rotate(0deg);}
        }       
      
      {% endif %}
}

Can you try this:

card_mod:
  style: |
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    ha-state-icon {
      animation: rotation linear infinite;
      {% if states('fan.extractor') == 'on' %}
       animation-duration: 3s;
      {%- else -%}
      {%- endif %}
    }
1 Like

Thank you. It rotates the full card, not only the icon.

I’ve changed the code, this should work.

It worked, thank you. Also I just discovered this also works:

card_mod:
  style:
    mushroom-shape-icon$: |


      {% if states('fan.extractor') == 'on' %}
      .shape {
         --shape-animation: rotating 2s linear infinite;
         }
      {%else %}
      .shape {
         --shape-animation: rotating 0s linear infinite;
         }      
      {% endif %}


      @keyframes rotating {
        from {transform: rotate(360deg);}
        to {transform: rotate(0deg);}
        } 
      } 
1 Like

Hi there. My badge is not even showing.

What am I doing wrong in here? The code above card_mod is working fine (it is the original code). I 'd want to add the badge.

Thank you very much.

type: custom:mushroom-chips-card
chips:
  - type: template
    primary: ""
    secondary: ""
    icon: mdi:lightbulb-group
    icon_color: |2
       {% if state_attr('sensor.luces_todas','recuento_luces_encendidas') > 0  %}  amber {% else %} lightgrey {%endif%}
    tap_action:
      action: perform-action
      perform_action: light.turn_off
      target:
        entity_id: light.grupo_luces_todas
      data: {}
    card_mod:
      style: |
        mushroom-badge-icon {
          --card-mod-icon: mdi:mushroom;
          --icon-color: pink;
          --main-color: blue !important;
        }

How do I get the icon color and circular background of a template card to match the default coloring of the entity card. I have an icon that I want to look like everything else, except when a sensor is below 80 where it should turn red.