Mushroom Cards Card Mod Styling/Config Guide

[Hassio]

I saw this video, where someone made a sticky menu at the bottom of the screen.

Is this possible for a chipcard, to make en sticky menu at the bottom?

type: custom:mushroom-chips-card
chips:
  - type: template
    tap_action:
      action: navigate
      navigation_path: ''
    icon: mdi:home
    content: test1
  - type: template
    tap_action:
      action: navigate
      navigation_path: ''
    icon: mdi:bed
    content: test2
  - type: template
    icon: mdi:human-baby-changing-table
    content: test3

[iona]

@LiQuid_cOOled Sorry to nudge, any ideas? thanks

[LiQuid_cOOled]

Is this what you are looking for?

Spacing will need adjusted.

type: vertical-stack
cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 1fr 1fr
          margin: 4px 4px 4px 4px;
        cards:
          - type: custom:mushroom-title-card
            title: ''
            subtitle: Family
        
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: person.jay673
                content_info: none
                use_entity_picture: true
                card_mod:
                  style: |
                    /* Color border around avatar to show person status */
                    ha-card {
                      --chip-background:
                      {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                        rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                      {% else %}
                        rgb(var(--rgb-state-person-zone))
                      {% endif %};
                    } 
                    /* Slightly enlarge & bring to front on hover */
                    ha-card:hover {
                      transform: scale(1.2);
                      transform-origin: top center;
                      z-index: 1;
                      transition: all 1s;
                    }
                    ha-card:after {
                    content: "name";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: transparent;
                    color: grey;
                    font-weight: bolder;
                    border-radius: 15px 15px 15px 15px;
                    top: 40px;
                    left: 2px;
                    width: 30px;
                    height: 11px;
                    font-size: 8px;
                          }
                    
              - type: entity
                entity: person.jay673
                content_info: none
                use_entity_picture: true
                card_mod:
                  style: |
                    /* Color border around avatar to show person status */
                    ha-card {
                      --chip-background:
                      {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                        rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                      {% else %}
                        rgb(var(--rgb-state-person-zone))
                      {% endif %};
                    } 
                    /* Slightly enlarge & bring to front on hover */
                    ha-card:hover {
                      transform: scale(1.2);
                      transform-origin: top center;
                      z-index: 1;
                      transition: all 1s;
                    }
                    ha-card:after {
                    content: "name";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: transparent;
                    color: grey;
                    font-weight: bolder;
                    border-radius: 15px 15px 15px 15px;
                    top: 40px;
                    left: 2px;
                    width: 30px;
                    height: 11px;
                    font-size: 8px;
                          }
                    
              - type: entity
                entity: person.jay673
                content_info: none
                use_entity_picture: true
                card_mod:
                  style: |
                    /* Color border around avatar to show person status */
                    ha-card {
                      --chip-background:
                      {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                        rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                      {% else %}
                        rgb(var(--rgb-state-person-zone))
                      {% endif %};
                    } 
                    /* Slightly enlarge & bring to front on hover */
                    ha-card:hover {
                      transform: scale(1.2);
                      transform-origin: top center;
                      z-index: 1;
                      transition: all 1s;
                    }
                    ha-card:after {
                    content: "name";
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: transparent;
                    color: grey;
                    font-weight: bolder;
                    border-radius: 15px 15px 15px 15px;
                    top: 40px;
                    left: 2px;
                    width: 30px;
                    height: 11px;
                    font-size: 8px;
                          }                    
            alignment: end
            card_mod:
              style: |
                ha-card { 
                  /* Overlap avatar Chips */
                  --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

                  /* Set size of border around Chips */
                  --chip-avatar-padding: 2px;

                  /* Reduce width to fit Chips & allow max space for weather */
                  width: fit-content;
                  transition: all 0s;
                }

      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 1fr 1fr
          margin: -14px 4px 4px 0px;
        cards:
          - type: custom:mushroom-title-card
            title: ''
            subtitle: Rooms
          - type: custom:mushroom-entity-card
            entity: light.pc_spot
            title: ''
            subtitle: Rooms          

card_mod:
  style: |
   ha-card {
     background: none;

[Mrdjg]

Thanks, that works perfectly. One more question - how do I change the icon for each button?

[filikun]

Some variables have changed it seems.

mushroom-state-info$: |
  .container {
    --primary-text-color: blue;
    --secondary-text-color: orange;
  }

should be

mushroom-state-info $: |
  .container {
    --card-primary-color: red;
    --card-secondary-color: red;
  }

[Bug]: primary-text-color no longer working? · Issue #1355 · piitaya/lovelace-mushroom (github.com)

[LiQuid_cOOled]

Has been that way since version 3.4.1. Lots of posts here about it.

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

Hi! I would like to present you a project I’ve been working for several weeks: Mushroom [image] It’s collection of cards to help you to build a lovelace dashboard. Features Editor for all cards and and all options (no need to edit yaml but you can!) Icon picker Color picker 0 dependencies : no need to install another card. Based on Material UI colors Light and dark theme support …

[HA_Newbie_2024]

Hello,

thank you for your help. Yes, I want to have the follow color situation:

If the windows is closed, the shape background should be transparent. If the window is open, the shape background color should change to red.

The icon color change is already working related to the status of the window.

Further, the color of the control buttons should always be “white”. Actually. the color of the control button is also changing related to the status. I can’t fix this color to “white” always.

Thank you very much for your support.

[LiQuid_cOOled]

type: horizontal-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.bed_curtains
    layout: vertical
    show_buttons_control: true
    card_mod:
     style:
      mushroom-shape-icon$: |
       .shape {
        {% if is_state('binary_sensor.fenster_buro', 'off') %}
        background: transparent !important;
        {% else %}
        background: red !important;
        {% endif %}
            }
        
      .: |
        ha-state-icon {
         {% if is_state('binary_sensor.fenster_buro', 'off') %}
           color: green !important;
         {% else %}
          color: red !important;
         {% endif %}
            }

[Evirc]

Hi, because the padding or margin doesn’t work well? When i wrong? Can i move the chips row to 5-10px offset to top?

type: custom:stack-in-card
cards:
  - type: custom:mushroom-person-card
    entity: input_select.riccardo_in_casa
    icon_type: entity-picture
    primary_info: state
    secondary_info: last-changed
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        mushroom-badge-icon {
          {% if is_state(config.entity, 'fuori casa') %}
            --card-mod-icon: mdi:home-export-outline;
            --main-color: orange !important;
          {% else %}
          {% endif %}
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: >
          {% set battery_level = (states(entity) | int / 10) | round(0) | int *
          10 %} {% if is_state('sensor.iphone_di_riccardo_battery_state',
          'Charging' ) %}
            {% if battery_level > 0 %}
              mdi:battery-charging-{{ battery_level }}
            {% else %}
              mdi:battery-charging-outline
            {% endif %}
          {% else %}
            {% if battery_level == 100 %}
              mdi:battery
            {% elif battery_level > 0 %}
              mdi:battery-{{ battery_level }}
            {% else %}
              mdi:battery-alert-variant-outline
            {% endif %}
          {% endif %}
        icon_color: |-
          {% set battery_level = states(entity) | int %}
          {% if battery_level > 90 %}
            green
          {% elif battery_level > 60 %}
            light-green
          {% elif battery_level > 50 %}
            lime
          {% elif battery_level > 40 %}
            yellow
          {% elif battery_level > 30 %}
            amber
          {% elif battery_level > 20 %}
            orange
          {% elif battery_level > 10 %}
            deep-orange
          {% else %}
            red
          {% endif %}
        content: '{{ states(entity) }} %'
        card_mod:
          style: |
            @keyframes blink {
              50% {opacity: 0;}
            }
            ha-card {
              {% if  (states(config.entity) | int) < 15 %}
                 animation: blink 1s linear infinite;
              {% endif %}
            }
        tap_action:
          action: none
        entity: sensor.iphone_di_riccardo_battery_level
      - type: template
        tap_action:
          action: toggle
        entity: sensor.iphone_di_riccardo_sim_1
        icon_color: >-
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Cellular'
          ) %}
            green
          {% else %}
            grey
          {% endif %}
        icon: >
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Cellular'
          ) %}
            mdi:cellphone
          {% else %}
            mdi:cellphone
          {% endif %}
      - type: template
        tap_action:
          action: toggle
        entity: sensor.iphone_di_riccardo_ssid
        icon_color: >-
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Wi-Fi' )
          %}
            green
          {% else %}
            grey
          {% endif %}
        icon: >
          {% if is_state('sensor.iphone_di_riccardo_connection_type', 'Wi-Fi' )
          %}
            mdi:wifi
          {% else %}
            mdi:wifi
          {% endif %}
      - type: template
        tap_action:
          action: toggle
        entity: binary_sensor.iphone_di_riccardo_focus
        icon_color: |-
          {% if is_state('binary_sensor.iphone_di_riccardo_focus', 'Spento' ) %}
            green
          {% else %}
            grey
          {% endif %}
        icon: |
          {% if is_state('binary_sensor.iphone_di_riccardo_focus', 'Spento' ) %}
            mdi:moon-waning-crescent
          {% else %}
            mdi:moon-waning-crescent
          {% endif %}
    alignment: center
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          padding-bottom: 20px !important;
        }  
card_mod:
  style: |
    ha-card {
      height: 102px;
    }

[Aephir]

Great guide, thanks a lot!

What I couldn’t find is whether you can dynamically change the color of each chip in a chips card based on the state of the respective entity?

E.g., with this:

        - type: custom:mushroom-chips-card
          chips:
            - type: entity
              entity: input_boolean.cooking_mode
              tap_action:
                action: toggle
              icon: mdi:silverware-fork-knife
            - type: entity
              entity: input_boolean.party_mode
              tap_action:
                action: toggle
            - type: entity
              entity: input_boolean.guest_mode
              tap_action:
                action: toggle

Can I make each “chip” have a different background color depending on whether the input_boolean is on or off?

So something like this:

          card_mod:
            style: |
              ha-card {
                {% if states('your_entity_id') == 'on' %}
                --chip-background: yellow;
                {% else %}
                --chip-background: gray;
                {% endif %}
              }

But changing each chip based on the state of only it’s “own” entity? That would be great to be able to remove the state text, but still see the state.

[LiQuid_cOOled]

Yes just put the mod on the individual chip

type: custom:mushroom-chips-card
chips:
      - type: template
        icon: mdi:mushroom
        card_mod:
            style: |
              ha-card {
                {% if states('your_entity_id') == 'on' %}
                --chip-background: red;
                {% else %}
                --chip-background: grey;
                {% endif %}
              }

      - type: template
        icon: mdi:mushroom
        card_mod:
            style: |
              ha-card {
                {% if states('your_entity_id') == 'on' %}
                --chip-background: blue;
                {% else %}
                --chip-background: grey;
                {% endif %}
              }        
      - type: template
        icon: mdi:mushroom
        card_mod:
            style: |
              ha-card {
                {% if states('your_entity_id') == 'on' %}
                --chip-background: yellow;
                {% else %}
                --chip-background: grey;
                {% endif %}
              }

[LiQuid_cOOled]

Yes just add top: -15px; to your mod.

card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
          padding-bottom: 20px !important;
          top: -15px;

[Evirc]

thanks, it’s work well!

[Aephir]

Ahh, very nice (and intuitive, if I had just thought a bit longer ) Thanks!

[LiQuid_cOOled]

I was able to figure out the Mushroom Alarm Card

type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.ha_alarm
states:
  - armed_home
  - armed_away
  - armed_night
card_mod:
  style:
    mushroom-button:nth-child(1):
      $: |
        .button {
          --bg-color: orange !important;
          --icon-color: blue !important;
          
        }
    mushroom-button:nth-child(2):
      $: |
        .button {
          --bg-color: red !important;
          --icon-color: white !important;
        }
    mushroom-button:nth-child(3):
      $: |
        .button {
           --bg-color: grey !important;
           --icon-color: yellow !important;
        }       

[LiQuid_cOOled]

Yes it will work with a chips card. This will force pretty much any card to the bottom of the screen.

position: fixed;
bottom: 3px;

full card code

type: custom:mod-card
card_mod:
  style: |
    ha-card {
     background: transparent;
     position: fixed;
     bottom: 3px;
     z-index: 1;
     width: calc(100% - 100px);
     padding: 8px ;
     left: 100px;
     border: none;
     } 
      
card:
  type: custom:mushroom-chips-card
  chips:
    - type: template
      tap_action:
        action: navigate
        navigation_path: ''
      icon: mdi:home
      content: test1
    - type: template
      tap_action:
        action: navigate
        navigation_path: ''
      icon: mdi:bed
      content: test2
    - type: template
      icon: mdi:human-baby-changing-table
      content: test3

[iona]

Mushroom Cards Card Mod Styling/Config Guide

Sorry, it was unrelated question. I wanted to know how to add a second line of text for the Mushroom Chip card, thanks. [chip_navigate]

It’s not related to the previous question or the grid layout code you have posted.

Just a the regular mushroom Chip card with a secondary text line beneath the primary text.

[projectdimpreza]

Hello Community! Can somebody help me out… i want to increase the text size of a sensor card in mushroom… i cant figure it out what I’m doing wrong, size of sensor text is not increasing… i highlighted the card mod that im using… any help is appreciated.

[LiQuid_cOOled]

The code you have is showing standard HA sensor card and is not related to Mushroom.

Please refer to the following guide for a solution

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

[projectdimpreza]

Now i use the mushroom entity card to change the text size… but i got this yellow error…