Mushroom Cards Card Mod Styling/Config Guide

There is no need to have your main card a grid when you are using a layout card in grid-layout mode.

I placed your cards in a vertical stack and used two layout grid cards to square everything up. You can control the spacing in the second set of margin: -14px 4px 4px 4px;

I used a -14px to show how you can bring the cards as close as you want.

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;
                    }
              - 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;
                    }
              - type: entity
                entity: person.3
                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;
                    }
            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;
1 Like

I’d suggest using a conditional Mushroom Chips card with alignment: center for what you are looking for.

Good idea. Would you have an example where switch and lights are displayed in the on status.
And lock in the closed status
Because the combination of several conditions still causes me problems

Works great thank you! One more thing, I didn’t see it on the op, but how do I add a secondary line for the chip card? thanks

Like this ?

or do you mean text under the chip

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

hi dimitri,
I tried to copying and pasting the card_mod but it doesn’t make an effect

type: custom:mushroom-number-card
entity: input_number.dimmer_example
display_mode: ''
card_mod:
  style: |
    ha-card {
      background-color: #002f7a;
    }
secondary_info: nun
icon_color: amber
name: Ű„Ù†Ű§Ű±Ű© Ù…ŰźÙÙŠŰ©
tap_action: nun

Hello Community,

I’m new to HomeAssistant and I try to customize the “Mushroom-cover-card”. I was able to change the background color in one of the “cover-card” to “orange” but I’m still not able to change it in the cover-card “BĂŒro”.

I want to have the background “transparent” and also the color from the control buttons in white color Actually, when the window is open the icon color change to red but also the color of the control buttons are changing to red. Any idea how to solve it?

My code is:


  - type: horizontal-stack
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.ankleide
        layout: vertical
        show_buttons_control: true
      - type: custom:mushroom-cover-card
        entity: cover.badezimmer
        layout: vertical
        show_buttons_control: true
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: orange !important;
              }
      - type: custom:mushroom-cover-card
        entity: cover.buro
        styles: null
        layout: vertical
        icon: mdi:window-closed
        show_buttons_control: true
        card_mod:
          style: |
            ha-card {           
            {% if is_state('binary_sensor.fenster_buro', 'off') %}
              border-style: none;
              --card-mod-icon-color: green;
              --primary-text-color: white;
              --icon-symbol-size: 40px !important;
              --icon-size: 50px !important;            
              --ha-card-background: transparent }             
            {% else %}
            --card-mod-icon-color: red;
            --primary-text-color: white;        
            {% endif %}
            }

It worked for me, but try adding !important after the color.

type: custom:mushroom-number-card
entity: input_number.dimmer_example
display_mode: ''
card_mod:
  style: |
    ha-card {
      background-color: #002f7a !important;
    }
secondary_info: nun
icon_color: amber
name: Ű„Ù†Ű§Ű±Ű© Ù…ŰźÙÙŠŰ©
tap_action: nun

You’ll have to add your if statements, but it would be like this


type: horizontal-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.badezimmer
    layout: vertical
    show_buttons_control: true
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: blue !important;
          }
        .: |
         ha-card {
         background: transparent !important;
          }
    - type: custom:mushroom-cover-card
    entity: cover.badezimmer
    layout: vertical
    show_buttons_control: true
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: red !important;
          }
        .: |
         ha-card {
         background: transparent !important;
          }
  - type: custom:mushroom-cover-card
    entity: cover.buro
    layout: vertical
    icon: mdi:window-closed
    show_buttons_control: true
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            --shape-color: orange !important;
          }
        .: |
         ha-card {
         background: transparent !important;
          }

Hi guys,

Fairly sure that I am doing something obviously wrong but I just can’t see it. Trying to style the alarm control card and can’t get anything to work. Copying code straight from this page doesn’t even work. Can somebody see where I’m going wrong please!

Welcome to the community. Please post you code using this guide (#11)

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371/3

I’ll take a look at your issue.

I found the problem, card mod was not downloaded, I download it and it works

thank you so much

1 Like

This card needs reviewed for modding. In the meantime you can use the tile card, which Mushroom is based off.

Here is code for adjusting that card’s colors.

type: tile
entity: alarm_control_panel.homebase
features:
  - type: alarm-modes
    modes:
      - armed_home
      - armed_away
      - armed_night
      - armed_vacation
      - armed_custom_bypass
card_mod:
  style:
    hui-card-features $:
      hui-alarm-modes-card-feature $:
        ha-control-select $: |
          .option:nth-child(1)::before {
            background-color: orange !important;
          }
          .option:nth-child(2)::before {
            background-color: blue !important;
          }
          .option:nth-child(3)::before {
            background-color: cyan !important;
          }
          .option:nth-child(4)::before {
            background-color: yellow !important;
          }
          .option:nth-child(5)::before {
            background-color: red !important;
          }
    .: |
      :host {
         --mdc-icon-size: 10px !important;
         --card-mod-icon-color: grey;
                  }
      ha-card {
      background-color: black !important;
        }

chrome-capture-2024-3-13 (2)

1 Like

Hello everyone,

i can change the color in a non modified cover but I’m loking how to include the background color of the icon inside this “if-condition”:

      card_mod:
          style: |
            ha-card {           
            {% if is_state('binary_sensor.fenster_buro', 'off') %}
              border-style: none;
              --card-mod-icon-color: green;
              --primary-text-color: white;
              --icon-symbol-size: 40px !important;
              --icon-size: 50px !important;            
              --ha-card-background: transparent }             
            {% else %}
            --card-mod-icon-color: red;
            --primary-text-color: white;        
            {% endif %}
            }

I'm not finding the way to change the background color if there is ancard-mod style already set. I would need to add the background color in this card-mod section.

It’s not clear what you mean by background color. The card background or the shape color?

Start with this and let me know what you want changed.

type: custom:mushroom-template-card
primary: Hello
secondary: How are you?
icon: mdi:home
icon_color: |
  {{ 'red' if is_state('binary_sensor.fenster_buro', 'off') else 'green' }}
card_mod:
  style: |
    ha-card {  
      --icon-symbol-size: 40px !important;
      --icon-size: 50px !important;
      --primary-text-color: white !important;
      border-style: none;
      background: transparent;
       }

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

@LiQuid_cOOled Sorry to nudge, any ideas? thanks

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;

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