Mushroom Cards Card Mod Styling/Config Guide

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

1 Like

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

So now I have rebuilt the “type: entities / button”
Is it possible to center the chips?

type: entities
entities:
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: automation.heizung_anne
        icon_color: amber
        name: AUTO
        use_entity_picture: false
        content_info: name
        card_mod:
          style: |
            ha-card {
              background: rgb(144,144,144, 0.3)!important;
              --chip-font-size: 11px;
              --primary-text-color: rgb(211,211,211, 0.7);
              --text-color: rgb(211,211,211, 0.7);
            }
      - type: entity
        entity: switch.anne
        icon_color: amber
        name: TRV
        use_entity_picture: false
        content_info: name
        card_mod:
          style: |
            ha-card {
            background: rgb(144,144,144, 0.3)!important;
            --chip-font-size: 11px;
            --primary-text-color: rgb(211,211,211, 0.7);
            --text-color: rgb(211,211,211, 0.7);
            }
      - type: entity
        entity: input_boolean.heizung_anne_comfort
        icon_color: amber
        name: COMFORT
        use_entity_picture: false
        content_info: name
        card_mod:
          style: |
            ha-card {
            background: rgb(144,144,144, 0.3)!important;
            --chip-font-size: 11px;
            --primary-text-color: rgb(211,211,211, 0.7);
            --text-color: rgb(211,211,211, 0.7);
            }
      - type: entity
        entity: input_boolean.heizung_anne_eco
        icon_color: amber
        name: ECO
        use_entity_picture: false
        content_info: name
        card_mod:
          style: |
            ha-card {
            background: rgb(144,144,144, 0.3)!important;
            --chip-font-size: 11px;
            --primary-text-color: rgb(211,211,211, 0.7);
            --text-color: rgb(211,211,211, 0.7);
            }
state_color: true
show_header_toggle: true

2 Likes

Built into the mushroom chips card.

type: custom:mushroom-chips-card
alignment: center
chips:
2 Likes

Oh so easy, I always tried it in the wrong place

I’m having a problem where I put in the card_mod code and nothing happens. I can’t get it to change no matter what I do. Does anyone have any ideas?

type: custom:mushroom-chips-card
chips:
  - type: template
    card_mod:
      style: |
        ha-card {
          --chip-background: green;
        }
  - type: menu

First question, may seem really obvious, but have you downloaded card mod from hacs? 2nd question have you then cleared your cache on browser/app manually?

Yes on the downloading card mod. I even redownloaded to be sure. I use homekit-infused and I think the card-mods are working in that dashboard but the custom dashboard i’m trying to make it just ignores it. I even added it to configuration.yaml under front-end in hopes that would help but nothing.

I cleared the cache on two browsers and tried a different PC and my phone and still no luck.

I went into developer mode in the browser and set some variables and it worked for entire chips card but when I put it in yaml it ignored it again.

Hmmm, what version of HA are you on? the latest card mod version i dont think is compatible with some older HA versions.

I’m running the latest 2023.10.5 version.