Mushroom Cards Card Mod Styling/Config Guide

Thanks for sharing. I think it’s would be better to just stick with template card at this point (less hacky).

Would you know how I can align the Template card so the icon is at the top and the primary and secondary text is just below it? Thanks

Well you can always just use the built in vertical layout.
image

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
layout: vertical

but if you specifically still want the text to be left alligned it could be done like this:
image

card_mod:
  style:
    mushroom-state-item$: |
      .container {
        flex-direction: column !important;
        align-items: start !important;
      }
1 Like

Left align was exactly what I was looking for, thank you!

What would be the best way to show the icon on the right side for the Person card?

I’m trying to create a profile icon that shows at the far right of the card, but with my code it shows different for each device. Would it be better to use a Template card in this scenario?

card:
  type: custom:stack-in-card
  cards:
    - type: custom:mushroom-person-card
      entity: person.hazio
      icon_type: entity-picture
      primary_info: none
      secondary_info: none
      layout: vertical
      card_mod:
        style: |
          mushroom-badge-icon {
            --badge-icon-size: 0px;
            --badge-size: 10px;
            outline: 3px #171717;
            border-radius:50%;
            top: 30px;
          }
  card_mod:
    style:
      mushroom-state-item$: |
        .container {
          display: flex;
          flex-direction: column !important;
        }
      mushroom-state-info$: |
        .container {
          width: 83%;
          align-items: center;
        }
      mushroom-shape-avatar$: ''
      .: |
        ha-card {
          -icon-size: 20px;
          width: fit-content;
          margin: 5px 0px 0px 100px;
          padding-left: 20px;
          background: transparent !important;
          border: 0px !important;
        }

Thanks

You mean like this?
image
This code works for any mushroom card:

Code
type: custom:mushroom-person-card
entity: person.dimitri_landerloos
card_mod:
  style: 
    mushroom-state-info$: |
      .container {
        transform: scalex(-1);
        align-items: end;
      }
    .: |
      ha-card {
        transform: scalex(-1);
      }

or just like this:
image
again code works for any mushroom card:

Code
card_mod:
  style: |
    ha-card {
      transform: scalex(-1);
    }
    mushroom-state-info {
      transform: scalex(-1);
    }
1 Like

Oh wow, thanks! Can’t believe I over complicated it, when it’s just a single line of code. :sweat_smile:

Edit: @dimitri.landerloos I’ve noticed this flips the avatar as well. Would it be possible to flip it back to the right way? As I’m using a entity picture, it’s quite noticeable.

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        transform: scalex(-1);
        align-items: end;
      }
    mushroom-shape-avatar$: |
      .container {
        transform: scalex(-1);
      }
    .: |
      ha-card {
        transform: scalex(-1);
      }

if using an avatar.

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        transform: scalex(-1);
        align-items: end;
      }
    .: |
      ha-card {
        transform: scalex(-1);
      }
      ha-state-icon {
        transform: scalex(-1);
      }

if just using the icon still.

1 Like

Hey there, I’ve been really struggling with getting animated state icons working with this chips card and was hoping to get some help. I’d like to make it so the chip for the fan will have a spinning icon only when the fan is on. I was able to get this working with a mushroom template card, but trying to transition to a chips card instead has been difficult.

Here’s the yaml:

type: custom:mushroom-chips-card
chips:
  - type: light
    entity: light.bedroom
    content_info: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    use_light_color: true
    icon: mdi:lightbulb
    card_mod:
      style: |
        ha-card {
          box-shadow: none !important;
          border: none !important;
          min-width: 0px !important;
          width: 32px !important;
          height: 32px !important;
          justify-content: center;
        }
  - type: template
    tap_action:
      action: toggle
    icon: mdi:fan
    icon_color: '{{ ''amber'' if states(entity) == ''on'' else '''' }}'
    card_mod:
      style: |-
        {% if is_state('light.bedroom_hue_plug', 'on') %}
          ha-state-icon {
            animation: spin 1.5s linear infinite;
            }
        {% elif is_state('light.bedroom_hue_plug', 'off') %}

        {% endif %}
        ha-card {
          box-shadow: none !important;
          border: none !important;
          min-width: 0px !important;
          width: 32px !important;
          height: 32px !important;
          justify-content: center;
        }
    entity: light.bedroom_hue_plug
  - type: action
    tap_action:
      action: navigate
      navigation_path: /dashboard-test/bedroom-lights
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:cog
    card_mod:
      style: |
        ha-card {
          box-shadow: none !important;
          border: none !important;
          min-width: 0px !important;
          width: 32px !important;
          height: 32px !important;
          justify-content: center;
        }
card_mod:
  style:
    mushroom-light-chip:nth-child(1)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
       }
      ha-card {
        --chip-spacing: 13px;
        padding-right: 5px;
        padding-bottom: 2px;
        height: 35px;
       }
    mushroom-template-chip:nth-child(2)$: |
      ha-state-icon {
        animation: spin 1.5s linear infinite;
        --chip-icon-size: 30px;
        }
      @keyframes spin {
      100% {transform: rotate(360deg);}
      }
        }
      ha-card {
      --chip-spacing: 13px;
      padding-right: 5px;
      padding-bottom: 2px;
      height: 35px;
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
      ha-card {
      --chip-spacing: 13px;
      padding-right: 5px;
      padding-bottom: 2px;
      height: 35px;
      }

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:fan
    icon_color: red
    entity: switch.4ch_relay_relay1
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
      {% if 'on' in states('switch.4ch_relay_relay1') %}
        animation: spin 1s linear infinite;
      {% endif %}
      }
      @keyframes spin {
        100% {transform: rotate(360deg);}
      }

you have to do everything in the one place

Thanks! Below code works:

type: custom:mushroom-chips-card
chips:
  - type: light
    entity: light.bedroom
    content_info: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    use_light_color: true
    icon: mdi:lightbulb
    card_mod:
      style: |
        ha-card {
          box-shadow: none !important;
          border: none !important;
          min-width: 0px !important;
          width: 32px !important;
          height: 32px !important;
          justify-content: center;
        }
  - type: template
    tap_action:
      action: toggle
    icon: mdi:fan
    icon_color: '{{ ''amber'' if states(entity) == ''on'' else '''' }}'
    card_mod:
      style: |-
        {% if is_state('light.bedroom_hue_plug', 'on') %}
          ha-state-icon {
            animation: spin 1.5s linear infinite;
            }
        {% elif is_state('light.bedroom_hue_plug', 'off') %}

        {% endif %}
        ha-card {
          box-shadow: none !important;
          border: none !important;
          min-width: 0px !important;
          width: 32px !important;
          height: 32px !important;
          justify-content: center;
        }
    entity: light.bedroom_hue_plug
  - type: action
    tap_action:
      action: navigate
      navigation_path: /dashboard-test/bedroom-lights
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon: mdi:cog
    card_mod:
      style: |
        ha-card {
          box-shadow: none !important;
          border: none !important;
          min-width: 0px !important;
          width: 32px !important;
          height: 32px !important;
          justify-content: center;
        }
card_mod:
  style:
    mushroom-light-chip:nth-child(1)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
       }
    mushroom-template-chip:nth-child(2)$: |
      {% if is_state('light.bedroom_hue_plug', 'on') %}
        ha-state-icon {
          animation: spin 1.5s linear infinite;
          --chip-icon-size: 30px;
          }
        @keyframes spin {
        100% {transform: rotate(360deg);}
        }
      {% elif is_state('light.bedroom_hue_plug', 'off') %}
        ha-state-icon {
          --chip-icon-size: 30px;
        }
      {% endif %}
      }
    mushroom-action-chip:nth-child(3)$: |
      ha-state-icon {
          --chip-icon-size: 30px;
      }
    .: |
      ha-card {
      --chip-spacing: 25px;
      padding-right: 5px;
      padding-bottom: 2px;
      height: 35px;
      }

I have removed the background from the chips card according to your guide, also tried removing box shadow.
I still get a small border showing on the gradient part of my background. Very obvious on my phone, not on my computer:
bild

How do I remove this, around the right icon?

Hey everyone. Looking to get some help on a the last few items for my setup. I’ve typically been able to get things working through trial and error, but I can’t seem to figure these out. Any help would be appreciated.

The first are these circular buttons in the Frigate card. I’m trying to change the background circle color, as well as the icon color:
Screenshot 2024-05-08 100049
For the background circle color, the card-mod helper output is
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>frigate-card$#ha-card>frigate-card-menu$div.matching>ha-icon-button:nth-child(1)"
with the property to change being background-color within ha-icon-button.button.

The icon color for it is within the same card-mod helper output, and the property is color, but this is not within ha-icon-button.button.

The last thing is the selected icon color within the controls in a tile card:
Screenshot 2024-05-08 103852
The card-mod helper output is:
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>hui-tile-card$ha-card>hui-card-features$hui-fan-speed-card-feature$div>ha-control-select$#option-off"
with the property being color within .option.selected

For all of these, I’m able to get the property I want changed when inspecting, but can’t figure out how to format it properly for card-mod.

Neither of these questions relate to mushroom and card mod. Please create a new post or post these questions in the card mod thread.

  1. Post your code.
  2. Have you tried to remove any border as well?

Had both open in tabs and posted here by accident, sorry about that!

I’m struggling to do what feels like it should be a fairly simple task: I want my door contact sensors to be green when closed (‘safe/all good’ color) and red when they are open. I have this working in Mushroom as long as I use a template card. I have been advised that I should be instead using a Theme and globally modifying the behavior that way. However, I have not been able to successfully get the icon color right even with non-theme attempts when using CardMod. The biggest issue has been getting the icon background to be light/partly translucent. When I specify a color in a template this seems to be done automatically. Examples I’ve seen online all seem to also show that this is not something that is handled manually. I’m aiming for the look of the bottom right card.

First Method: sets icon and background independently, but does not make background translucent.

- type: custom:mushroom-entity-card
  entity: binary_sensor.basement_door_contact_sensor
  card_mod:
    style:
      mushroom-shape-icon$: |
        .shape {
          background-color: {{ 'green' if is_state('binary_sensor.main_door', 'off') else 'var(--green-color)' }} !important;
        }
      .: |
        ha-state-icon {
          color: var(--black-color);
        }

Second Method: Sets the icon, but not the background

- type: custom:mushroom-entity-card
  entity: binary_sensor.basement_door_contact_sensor
  card_mod:
    style: |
      ha-state-icon {
        color: var(--orange-color);
      }

Third Method: Sets the background, ignores code that works in method 2 for the icon

- type: custom:mushroom-entity-card
  entity: binary_sensor.basement_door_contact_sensor
  card_mod:
    style: |
      mushroom-shape-icon {
        --shape-color: var(--pink-color);
        --shape-color-disabled: var(--blue-color);
      }
      .: |
        ha-state-icon {
          color: var(--orange-color);
        }

Fourth Method: Does everything I want, but is a hassle to copy/paste and difficult to apply globally:

- type: custom:mushroom-template-card
  primary: Basement Door
  secondary: |-
    {% if is_state('binary_sensor.basement_door_contact_sensor', 'off') %}
      Closed
    {% else %}
      Open
    {% endif %} 
  icon: |-
    {% if is_state('binary_sensor.basement_door_contact_sensor', 'off') %}
      mdi:door-closed
    {% else %}
      mdi:door-open
    {% endif %} 
  icon_color: |-
    {% if is_state('binary_sensor.basement_door_contact_sensor', 'off') %}
      green
    {% else %}
      red
    {% endif %} 

Hey, you could Set your binari.sensor as door.
Then the state und Icon got Set automaticly

AFAIK it is already set to door?

1st method:

type: custom:mushroom-entity-card
entity: binary_sensor.hallway_front_door_contact
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background-color: {{ 'rgba(var(--rgb-green),0.2)' if is_state('binary_sensor.main_door', 'off') else 'rgba(var(--rgb-green),0.2)' }} !important;
      }
    .: |
      ha-state-icon {
        color: var(--black-color);
      }

2nd method you already had working, but nothing other than icon was being changed.

3rd method:

card_mod:
  style: |
    mushroom-shape-icon {
      --shape-color: rgba(var(--rgb-pink), 0.2);
      --shape-color-disabled: rgba(var(--rgb-blue), 0.2);
    }
    ha-state-icon {
      color: var(--orange-color);
    }

4th method you dont really need my input, but you can make it a tiny bit easier:

  type: custom:mushroom-template-card
  entity: binary_sensor.hallway_front_door_contact
  primary: Basement Door
  secondary: |-
    {% if is_state(entity, 'off') %}
      Closed
    {% else %}
      Open
    {% endif %} 
  icon: |-
    {% if is_state(entity, 'off') %}
      mdi:door-closed
    {% else %}
      mdi:door-open
    {% endif %} 
  icon_color: |-
    {% if is_state(entity, 'off') %}
      green
    {% else %}
      red
    {% endif %}

FYI if you want to use this simplified if statement in the card mod section as well you have to use config.entity instead of just entity like i have above.

1 Like

Thanks! This confirms that it isn’t done automatically for me, and that I have to add the transparency myself. How come we don’t need a .: - between mushroom-shape-icon and ha-state-icon?

Is there a good way to add this to a theme for all door types? I could figure out how to do it for more global things, but not how to narrow it down further. state-binary_sensor-door-off-color: var(--green-color) and state-binary_sensor-door-on-color: var(--red-color) seems to only apply to non-custom entities.

I already have the simplified template as:

 - type: custom:mushroom-template-card
    primary: Front Door
    secondary: |-
      {% if is_state(config.entity, 'off') %}
        Closed
      {% else %}
        Open
      {% endif %} 
    icon: |-
      {% if is_state(config.entity, 'off') %}
        mdi:door-closed
      {% else %}
        mdi:door-open
      {% endif %} 
    icon_color: |-
      {% if is_state(config.entity, 'off') %}
        green
      {% else %}
        red
      {% endif %} 

Do you have a suggested method between the options? Theme it globally? Or just use the template?