Mushroom Cards Card Mod Styling/Config Guide

Sure, definitely possible. but not as easy as you might expect as we cant use --card-mod-icon directly in animations.
Untitled video - Made with Clipchamp - 2023-09-21T225619.148

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:hamburger
    icon_color: brown
    card_mod:
      style: |
        ha-card {
          width: fit-content;
          background: none;
          border: none;
          box-shadow: none;
        }
        mushroom-shape-icon {
          opacity: 0;
          animation: displaytest 4s steps(1, end) infinite;
        }
        @keyframes displaytest {
          0% {opacity: 0;}
          25% {opacity: 1;}
          50% {opacity: 0;}
          100% {opacity: 1;}
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:pizza
    icon_color: red
    card_mod:
      style: |
        ha-card {
          position: absolute;
          top: 0;
          width: fit-content;
          background: none;
          border: none;
          box-shadow: none;
        }
        mushroom-shape-icon {
          opacity: 0;
          animation: displaytest 4s steps(1, end) infinite;
        }
        @keyframes displaytest {
          0% {opacity: 1;}
          25% {opacity: 0;}
          50% {opacity: 1;}
          100% {opacity: 0;}
        }

So here i am overlapping 2 cards and then transitioning between the 2 icons.

1 Like

Thank you. Thats cool and works like a charm when using Chrome at the desktop pc. Sadly it seem that this doesn’t work with the iOS Companion App. It just shows an overlapped image. :cry:

If I’m using icon_type: entity-picture with Media Card, how to change size of this picture icon?

Below should do it. no guarantee that the picture will look good in it though :slight_smile:

card_mod:
  style: 
    mushroom-shape-avatar$: |
      .container {
        --icon-size: 200px;
      }
1 Like

Excellent, works great and quality is good, atleast with quick test.

Hey, i built a version of this specifically made to make this layout work neatly with different sizes.

check out my post here:

hopefully it works for your use case :slight_smile:

Wow, this has helped me a lot with some things, but here’s a question… I have, for example, an air purifier card and three chips underneath it. Is there any way to make it so that within the same vertical-stack, the purifier card and the chips are on the same line, not “underneath”? And that the card would occupy, for example, 75% of the width, and the chips would occupy 25%?

Now I have:

type: vertical-stack
cards:
  - type: custom:mushroom-fan-card
    entity: fan.ochistitel_vozdukha
    icon_animation: true
    fill_container: false
    show_percentage_control: false
    show_oscillate_control: false
    collapsible_controls: false
    secondary_info: state
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/1/
    name: Очиститель воздуха
    card_mod:
      style: |
        ha-card {
        box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.ochistitel_vozdukha_tvoc
        name: AQI
        use_entity_picture: false
        icon: mdi:air-filter
        icon_color: green
      - type: entity
        entity: sensor.ochistitel_vozdukha_filter_use
        icon_color: green
        icon: mdi:clock-remove-outline
      - type: entity
        entity: sensor.ochistitel_vozdukha_filter_life_remaining
        icon_color: green
        icon: mdi:percent-circle-outline
    alignment: justify

Perhaps it can be done through horisontal-stack, but I have not tried it. Perhaps it is necessary to “influence” the mushroom-cards somehow…

Thank U!

you mean the issue you have is that you have this:
image
but you want this:
image

you can change to a horizontal stack and then play around with the widths of each card with card mod:

Code
type: horizontal-stack
cards:
  - type: custom:mushroom-fan-card
    entity: light.bedroom_chest_lamp
    icon_animation: true
    fill_container: false
    show_percentage_control: false
    show_oscillate_control: false
    collapsible_controls: false
    secondary_info: state
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/1/
    name: Очиститель воздуха
    card_mod:
      style: |
        ha-card {
          box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
          width: 150%;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.average_cost
        name: AQI
        use_entity_picture: false
        icon: mdi:air-filter
        icon_color: green
      - type: entity
        entity: sensor.average_cost
        icon_color: green
        icon: mdi:clock-remove-outline
      - type: entity
        entity: sensor.average_cost
        icon_color: green
        icon: mdi:percent-circle-outline
    alignment: justify
    card_mod:
      style: |
        ha-card {
          position: relative;
          left: 50%;
          width: 50%;
        }

or you could just install the layout card from Hacs. a little hard to understand at first, but actually way easier than modifying each card with card mod.

image

Code
type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-fan-card
    entity: light.bedroom_chest_lamp
    icon_animation: true
    fill_container: false
    show_percentage_control: false
    show_oscillate_control: false
    collapsible_controls: false
    secondary_info: state
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: navigate
      navigation_path: /lovelace/1/
    name: Очиститель воздуха
    card_mod:
      style: |
        ha-card {
          box-shadow: 0px 2px 4px 0px rgba(0,255,0,0.66);
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.average_cost
        name: AQI
        use_entity_picture: false
        icon: mdi:air-filter
        icon_color: green
      - type: entity
        entity: sensor.average_cost
        icon_color: green
        icon: mdi:clock-remove-outline
      - type: entity
        entity: sensor.average_cost
        icon_color: green
        icon: mdi:percent-circle-outline
    alignment: justify
layout:
  grid-template-columns: auto 27%
  grid-template-rows: auto
  max_cols: 2

options for this card are here:

Yes, I meant the second example. I realize that the thing is trivial, but I looked and tried to apply to the whole “type” of “stack”-s, but it didn’t work. There’s just a little bit of combing left to do (well, that’s just me) and everything will be fine.

Thank you very much!

This is not working here. Did something changed?

Odd. Seems that you need to use background instead now for this card.

Ill look into it because --shape-color still works for the Template card for example.

EDIT: --shape-color still works. The light needs to be on for it to take effect. If you want to change the color whether light is off or on use background instead. The remaining syntax is the same. Ill update the guide to make this clear and check whether this also applies to things like the cover card.

1 Like

–background-color: doesn’t work in my light card.

–shape-color doesn’t even seem to work in a template card

image

  1. You have a | after after style: that shouldnt be there.

  2. It is not --background-color: it is just background-color: or simply just background: either work.

1 Like

Hi Dimitri,

Your guide helps me a lot in preparing the dashboard. But I’m stuck in one place, can you please help?

I have two grids and I’m trying to remove the gap between them. Im using padding for each card, but the size wont reduce for the entire grid.

First grid code:

square: true
type: grid
cards:
  - features:
      - type: vacuum-commands
        commands:
          - start_pause
          - stop
          - return_home
    type: tile
    entity: vacuum.roborock_s7_maxv
    vertical: false
    show_entity_picture: false
    name: Vacuum
    card_mod:
      style: |
        ha-card {
        height:120px !important;
        padding: 0px !important;
        }
  - features:
      - type: cover-open-close
    type: tile
    entity: cover.kitchen_shades
    name: Shades
    card_mod:
      style: |
        ha-card {
        height:120px !important;
        padding: 0px !important;
        }
  - features:
      - type: fan-speed
    type: tile
    entity: fan.family_room_fan
    name: Fan
    vertical: false
    icon: mdi:fan
    card_mod:
      style: |
        ha-card {
        height:120px !important;
        padding: 0px !important;
        }
columns: 3

Second Grid code:

square: false
type: grid
cards:
  - type: custom:button-card
    entity: script.first_floor_off
    card_mod: null
    style: |-
      ha-card {
        --card-mod-icon-color: grey;
      }
    size: 25%
    tap_action:
      action: call-service
      service: script.first_floor_off
      service_data: null
      entity_id: {}
  - type: custom:button-card
    entity: script.second_floor_off
    card_mod: null
    style: |-
      ha-card {
        --card-mod-icon-color: grey;
      }
    size: 25%
    tap_action:
      action: call-service
      service: script.second_floor_off
      service_data: null
      entity_id: {}
  - type: custom:button-card
    entity: script.movie_time
    card_mod: null
    style: |-
      ha-card {
        --card-mod-icon-color: grey;
      }
    size: 25%
    tap_action:
      action: call-service
      service: script.movie_time
      service_data: null
      entity_id: {}
  - type: custom:button-card
    entity: script.cozy
    card_mod: null
    style: |-
      ha-card {
        --card-mod-icon-color: grey;
      }
    size: 25%
    tap_action:
      action: call-service
      service: script.cozy
      service_data: null
      entity_id: {}
columns: 2

Dashboard gap:

Thanks again

You could bring the bottom cards up a touch by just adding top: -10px; to each of your:

    style: |-
      ha-card {
        --card-mod-icon-color: grey;
        top: -10px;
      }

Sections

2 Likes

Thank you, sir. But this is leaving an empty space at the bottom of the grid.

I’m trying to push the cards up a bit, so everything fits in a single screen on my tablet dashboard without scrolling the page up and down.

Can i delete the empty space at bottom of the cards somehow?

You can add the same amount of top: -10px; that you added to your last 2 cards as margin-bottom: -10px; that will remove the extra empty space.

So like this:

    style: |-
      ha-card {
        --card-mod-icon-color: grey;
        top: -10px;
        margin-bottom: -10px;
      }

But only for your last 2 cards.

1 Like

Wow thank you for the quick responses. You made CSS easy for me

1 Like

How do I combine

card_mod:
  style: |
    ha-card {
      --ha-card-background: none;
      --icon-size: 50px;
    }
    mushroom-shape-icon {
      --shape-color: rgba(255,255,255,0.9) !important;
    } 

with

card_mod:
  style: 
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }

?

One of the most common questions:

card_mod:
  style: 
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }
    .: |
      ha-card {
        --ha-card-background: none;
        --icon-size: 50px;
      }
      mushroom-shape-icon {
        --shape-color: rgba(255,255,255,0.9) !important;
      }

There is a section in the first post about what the .: | symbol does. Take a look at that :slight_smile:

2 Likes