Mushroom Cards Card Mod Styling/Config Guide

dimitri.landerloos · November 2, 2023, 9:47am

Shape shadow:

type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
name: livingroom
secondary_info: none
icon: mdi:toggle-switch
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        align-items: start;
        transform: scalex(-1);
      }
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36) !important;
      }
    .: |
      ha-card {
        ha-card-background: none;
        transform: scalex(-1);
      }
      mushroom-shape-icon {
        --shape-color: rgba(255,255,255,0.9) !important;
      }

Hassio · November 2, 2023, 10:00am

Thank you so much. I can see my mistake now.

Is there also a way to center the chipcard (vertically seeing) next to a title card? I cant see anything about alignment in the chip card documentation. Now if I place a chipcard next to a title card. The chipcard is slightly above center.

Knipsel

type: horizontal-stack
cards:
  - type: custom:mushroom-title-card
    title: Livingroom
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.battery_living
    alignment: end

With the code down here I can get it to work (sort of), but I dont think this is the right way to do it

type: horizontal-stack
cards:
  - type: custom:mushroom-title-card
    title: Livingroom
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.battery_living
    alignment: end
    card_mod:
      style: |
        ha-card {
          margin-top: 8%;
          margin-bottom: 8%;
        }

dimitri.landerloos · November 2, 2023, 12:02pm

If you add outlines to each of the card you would see what the actual issue is. it is because the chip card doesnt have the same height at all as the title card. so we first need to ensure that this is the case. so we set the height to 100% so that it takes up the maximum space. the chips also live in a container that then also needs to be the same height as the card. so set to 100% too. we can then align the items to the center. if we did it before without changing the heights nothing would happen as the card is basically the same height as the chip already.

type: horizontal-stack
cards:
  - type: custom:mushroom-title-card
    title: Livingroom
    card_mod:
      style: |
        ha-card {
          outline: blue solid 1px !important;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.alarm_time
    alignment: end
    card_mod:
      style: |
        ha-card {
          outline: red solid 1px !important;
          height: 100%;
          justify-content: center !important;
        }
        .chip-container {
          height: 100%;
          border: green solid 1px !important;
          align-items: center !important;
        }

try it without the heights being set and see what it looks like. you can see what is happening with the outlines there.

dimitri.landerloos · November 2, 2023, 12:21pm

Just as we did with the other times you wanted to replace text with other text in card that doesnt support it…

dimitri.landerloos:

card_mod:
  style:
    mushroom-state-info$: |
      .secondary {
        color: transparent !important;
        position: relative;
      }
      .secondary:after {
        content: '{{state_attr('climate.bedroom_heating','hvac_action') | capitalize }} - {{states('sensor.bedroom_temperature_humidity_temperature')}} °C';
        color: var(--secondary-text-color);
        position: absolute;
        left: 0px;
      }

but instead of using a template, just write your text that you want.

card_mod:
  style:
    mushroom-state-info$: |
      .secondary {
        color: transparent !important;
        position: relative;
      }
      .secondary:after {
        content: 'Test';
        color: var(--secondary-text-color);
        position: absolute;
        left: 0px;
      }

Krivatri · November 2, 2023, 1:36pm

Hi Dimitri,
I’m not finding what I’m looking for, hope you can help.
is it possible to modify the “button” part in the number-card?
I would like to change the font-size, background-color, etc…

mushroom number card

dimitri.landerloos · November 2, 2023, 1:47pm

Yes, and i am very surprised that this hasnt been pointed out by anyone before. looks like i mistakenly have said that the number card does not have buttons. that is just plainly wrong, so ill have to update that section

but for now here you go

type: custom:mushroom-number-card
entity: input_number.dishwasher_pod_add
display_mode: buttons
card_mod:
  style: 
    mushroom-number-value-control$: |
      mushroom-input-number {
        font-size: 20px;
        --text-color: red;
        --icon-color: blue;
        --bg-color: rgba(var(--rgb-green), 0.2);
      }

Krivatri · November 2, 2023, 1:59pm

Fantastic!
Thank you sir

ryzn · November 9, 2023, 7:38pm

Dear all,

first of all thank you for this page, because it helped me already a lot to customize the mushroom cards to my needs. With one thing I still struggle unfortunately. Is it also possible to change the width of all the chips in the chips card? I want that they have the same width independent of the content in the chips.

Greetz to all!

SilverApe · November 10, 2023, 10:01am

Hi @dimitri.landerloos, This is just great!. I have been testing this in my lab page

I have a thing that is not working. Individually they are but when put together one of the two stops working.
This is my code:

type: custom:mushroom-template-card
primary: Hello,
secondary: How are you?
icon: mdi:home
card_mod:
  style: |
    ha-card {
      font-variant: small-caps;
    }
    mushroom-state-info$: |
      .container {
       --card-secondary-font-size: 45px;
       --card-primary-font-size: 58px;
        --primary-text-color: #EA906C;
        --secondary-text-color: teal;
        align-items: end;   
      }    
badge_icon: ''
badge_color: ''

When I do it this way the font size and color is not working. Must be something I am doing wrong but I tried many different combinations but I can’t figure it out.

greetings

dimitri.landerloos · November 10, 2023, 10:24am

Have a look in the first post the section about what the $ and .: | symbols do. But to fix your code its just this:

type: custom:mushroom-template-card
primary: Hello,
secondary: How are you?
icon: mdi:home
card_mod:
  style: 
    mushroom-state-info$: |
      .container {
       --card-secondary-font-size: 45px;
       --card-primary-font-size: 58px;
        --primary-text-color: #EA906C;
        --secondary-text-color: teal;
        align-items: end;   
      } 
    .: |
      ha-card {
        font-variant: small-caps;
      }
badge_icon: ''
badge_color: ''

SilverApe · November 10, 2023, 10:33am

You are great and thanks for explaining the $ and .: | symbols
It is somewhat clear now At least I know how it should be used.

dimitri.landerloos · November 11, 2023, 2:48pm

You could set a min and max width to the same on all your chip types like this. But content will overflow.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.dimitri_landerloos
  - type: template
    icon: mdi:test-tube
    icon_color: green
  - type: weather
    entity: weather.openweathermap
  - type: conditional
    conditions:
      - condition: state
        entity: light.lounge_main_light
        state: 'on'
    chip:
      type: alarm-control-panel
      entity: alarm_control_panel.home_mode
  - type: spacer
  - type: menu
  - type: light
    entity: light.pc_lights
card_mod:
  style: |
    mushroom-template-chip {
      max-width: 80px;
      min-width: 80px;
    }
    mushroom-conditional-chip {
      max-width: 80px;
      min-width: 80px;
    }
    mushroom-entity-chip {
      max-width: 80px;
      min-width: 80px;
    }
    mushroom-weather-chip {
      max-width: 80px;
      min-width: 80px;
    }
    mushroom-light-chip {
      max-width: 80px;
      min-width: 80px;
    }
    mushroom-menu-chip {
      max-width: 80px;
      min-width: 80px;
    }
    mushroom-spacer-chip {
      max-width: 80px;
      min-width: 80px;
    }

Or maybe a bit neater like this:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.dimitri_landerloos
  - type: template
    icon: mdi:test-tube
    icon_color: green
  - type: weather
    entity: weather.openweathermap
  - type: conditional
    conditions:
      - condition: state
        entity: light.lounge_main_light
        state: 'on'
    chip:
      type: alarm-control-panel
      entity: alarm_control_panel.home_mode
  - type: spacer
  - type: menu
  - type: light
    entity: light.pc_lights
card_mod:
  style: |
    mushroom-template-chip, 
    mushroom-conditional-chip,
    mushroom-entity-chip,
    mushroom-weather-chip,
    mushroom-light-chip,
    mushroom-menu-chip, 
    mushroom-spacer-chip {
      max-width: 80px;
      min-width: 80px;
    }

SilverApe · November 13, 2023, 1:40pm

When I do this it creates an extra border around my weather chip, it does not replace the border that is already there. And I actually want to remove my border but I have no luck with that either
Schermafbeelding 2023-11-13 om 14.39.31

SilverApe · November 13, 2023, 1:50pm

I have done it like this now:

card_mod:
  style: |
    ha-card {
      --chip-background: transparent;
      --chip-border-color: transparent;
    }

Is that the right way?

dimitri.landerloos · November 13, 2023, 1:56pm

With that you are making it so all chips have no background and no border. If thats what you want then sure.

Otherwise if you only want to change one at a time you need to make sure you place the card mod under the chip itself like this for example.

SmartSelect_20231113_135559_Home Assistant

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:test-tube
    card_mod:
      style: |
        ha-card {
          border: inset blue 2px !important;
        }
  - type: template
    icon: mdi:test-tube
    card_mod:
      style: |
        ha-card {
          border: outset green 2px !important;
        }

What you have used is like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:test-tube
  - type: template
    icon: mdi:test-tube
card_mod:
  style: |
    ha-card {
      border: outset green 2px !important;
    }

And this will apply to the card containing the chips, instead of the chip itself.

SilverApe · November 13, 2023, 2:55pm

Thanks! good to know the difference to

MRobi · November 15, 2023, 11:34pm

Template card with vertical layout.
I’m looking to bring the Off (primary) up closer to the bottom of the button and struggling.
Any help is appreciated. Thanks!

dimitri.landerloos · November 16, 2023, 12:09am

Please do post what you have tried next time

type: custom:mushroom-template-card
primary: 'Off'
secondary: Test
icon: mdi:power
layout: vertical
card_mod:
  style: 
    mushroom-state-info$: |
      .primary {
        position: relative;
        bottom: 10px !important;
      }

mgluchgit · November 16, 2023, 10:02am

Hi guys
I have this interesting problem… I would like to animate a chip card with the condition.
If I write the script like this, the icon is displayed when “input_boolean.vd_test” is turned on, but the animation does not work

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.vd_test
        state: 'on'
    chip:
      type: template
      tap_action:
        action: toggle
      entity: input_boolean.vd_test
      icon: mdi:test-tube
      icon_color: red
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
          animation: pulse 2s ease-in-out infinite;
        }

But when I create a classic “custom:mushroom-template-card” the animation works normally

type: custom:mushroom-template-card
icon: mdi:pulse
icon_color: accent
primary: ''
secondary: Aktivita domácnosti
card_mod:
  style: |
    ha-state-icon {
      animation: pulse 2s ease-in-out infinite;
    }
    ha-card {
     border: unset;
     background: unset;
     padding-left: 0px !important;     
     {

Does anyone know where the problem might be?
I am redesigning a mobile dashboard and would like to display chip cards based on conditions. Of course animated icons

hamobile

For example, if the washing machine is on, show the icon and animate it.

Thank you in advance for any help!

Jeroen_Brouwers · November 16, 2023, 3:28pm

@dimitri.landerloos , i tried this card mod code. the static boder line works. the animated border does not work on this card.

im trying to show the border when there is motion, for now the border stays ad all time. Can you pherhaps point me in the right direction?
the code:

show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.oprit
camera_image: camera.oprit
aspect_ratio: 16x9
card_mod:
  style: |
    ha-card {
      -- if (binary_sensor.motion_sensor_inloopkast_occupancy == 'on') return; 
      border: 2.5px outset red
    }

the output:

the red border is there all the time.