Mushroom Cards Card Mod Styling/Config Guide

Community Guides
, ,
1644

From my knowledge, you would have to stack cards

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.night_stand
    name: Lys Soveværelset
    use_light_color: true
    show_brightness_control: true
    show_color_control: true
    show_color_temp_control: true
    fill_container: false
    tap_action:
      action: more-info
    card_mod:
      style:
        mushroom-button:nth-child(3)$: |
          .button {
            width: 40px !important;
            height: 40px !important;
            margin: -50px -20px !important;
            position: absolute;
              }
        mushroom-button:nth-child(2)$: |
          .button {
            width: 40px !important;
            height: 40px !important;
            margin: -50px -10px !important;
            position: absolute;
              }
        mushroom-light-brightness-control$:
          mushroom-slider$: |
            .container {
              width: 130% !important;
              }
        mushroom-light-color-temp-control$:
          mushroom-slider$: |
            .container {
              width: 130% !important;
                   } 
        mushroom-light-color-control$:
          mushroom-slider$: |
            .container {
              width: 130% !important;
                   } 
  - type: custom:mushroom-template-card
    entity: light.night_stand
    icon: mdi:clock
    color: blue
    features_position: bottom
    card_mod:
      style: |
        ha-card {
         top: -110px;
         left: 280px;
         background: none;
         height: 0px !important;
          }
        ha-tile-icon {
         --tile-icon-border-radius: 11px;
          }
  - type: custom:mushroom-template-card
    entity: light.night_stand
    icon: mdi:phone
    color: red
    tap_action:
      action: toggle
    card_mod:
      style: |
        ha-card {
          background: none;
          height: 0px !important;
           }
        ha-tile-icon {
          --tile-icon-border-radius: 11px;
          top: -110px;
          left: 320px;
           }

image
image1140×297 25.5 KB

1645

How do I target the title_tap_action chevron icon for the Title card ? I want to get rid of it, but can’t find a way. I believe it’s --mdc-icon, or is it based on the Tile card variable?

Screenshot 2026-01-06 at 16.02.01
Screenshot 2026-01-06 at 16.02.01416×158 1.26 KB

Thanks

1646 
type: custom:mushroom-title-card
title: Hello, {{ user }} !
title_tap_action:
  action: perform-action
  perform_action: ""
card_mod:
  style: |
    .actionable ha-icon {
      display: none;
    }
1 Like
1647

Thanks, but it’s not applying for some reason?

1648

What code are you trying?

1649

I tried my code and your example, but neither work.

1650

Try :arrow_down:

card_mod:
  style: |
    ha-icon {
      display: none !important;
    }

image
image1680×575 37.6 KB

This works as well…

card_mod:
  style: |
    .actionable ha-icon {
      display: none !important;
    }
1 Like
1651

As per @LiQuid_cOOled, try adding ‘!important’. I keep forgetting that some Browsers treat same CSS specificity differently (i.e. which CSS wins). I find I have to add ‘important’ less than others, mainly those on Safari.

1 Like
1652

@LiQuid_cOOled

Amazing. I’m gonna play around with that a bit. Thanks alot!

1 Like
1653

I am using a climate card and when I run an script that enables/disables the HVAC the view goes from temp select to mode select. This is fine when it is turned off but when i turn it out it would be good to go to temp selection view.

Here is an example of the views:

image
image433×124 4.43 KB

Is there anyway to force it back to the first view after running my script?