Mushroom Cards Card Mod Styling/Config Guide

Is it possible to display three entity “ON” states at the same time with three different colored rotating animations?

I am trying to apply the flip/value of two buttons but with no success, could you help me out please?

This is my code:

type: custom:mushroom-cover-card
name: Persiana
icon: mdi:curtains
fill_container: false
secondary_info: none
icon_type: icon
primary_info: name
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
entity: cover.persiana_escritorio_cortina
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          rotate: 90deg;
        }
      mushroom-button:nth-child(3)$: |
        .button {
          rotate: 90deg;
        }

First button should be enabled and be able to close the blind cover, and not the third one:

image

You can flip them by adjusting the margins

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          rotate: 90deg;
          margin-left: 104px !important;
        }
      mushroom-button:nth-child(3)$: |
        .button {
          rotate: 90deg;
          margin-left: -104px !important;
        }

Thank you for replying back! Sorry if I didn’t made myself clear enough, but the buttons locations is fine. Is only their value, the first one is disable but should be enabled, same as the third button. Because this way is suggesting that I need to open my covers, but in fact I need to close (which is the first button). Is that possible?

That would suggest your cover sensor is reading the state in reverse. The first one will be disabled when the curtains are open.

When you add the state to the secondary info, what info do you get?

The button state is controlled by the cover state so I am trying to work through the basics.

type: custom:mushroom-cover-card
name: Persiana
icon: mdi:curtains
fill_container: false
secondary_info: state
icon_type: icon
primary_info: name
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
layout: horizontal
entity: cover.persiana_escritorio_cortina
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1)$: |
        .button {
          rotate: 90deg;
                 }
      mushroom-button:nth-child(3)$: |
        .button {
          rotate: 90deg;
                  }

Hello!
I will try again to show the phenomenon on another card.

Apparently 2 identical cards, 2 darts with the same card_mod code.

After the save button, the card_mod modification is displayed correctly.
Open after editing:

The saved setting is gone.

I experience a similar “error” on many cards, that I don’t see the card_mod lines in the code editor, but the change works.
I tried another computer, firefox, edge, chrome browsers.

What could be the cause of the phenomenon? Annoying!

type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    card_mod:
      style: |
        ha-card {
          box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75)
          }
    entity: light.gu10_group
    name: Terasz világítás
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon: mdi:lightbulb-group-outline
    collapsible_controls: true
  - type: custom:mushroom-light-card
    card_mod:
      style: |
        ha-card {
          box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75)
          }
    entity: light.shellyplus1pm_441793a74d20_switch_0
    name: Fenyő
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon: mdi:pine-tree
    collapsible_controls: true

I did some research and there is an old open issue with card_mod that looks the same as yours. looking at the comments there maybe a solution but I’ll leave that upto you.
the open issue can be found here

1 Like

Hello all

Looking for some assistance. I am using conditional cards to show lights that are on. I am trying to keep them small so i can stack them horizontally and maximize space.

How do i make the entire container smaller?

I have tried margin, but that seems to do nothing

Please help HA community!

Please post your code so we have a starting point.

type: custom:mushroom-light-card
entity: light.living_room_main_lights
name: Living room
layout: vertical
primary_info: name
secondary_info: state
show_brightness_control: false
tap_action:
  action: toggle
visibility:
  - condition: state
    entity: light.living_room_main_lights
    state: 'on'
card_mod:
  style: |
    ha-card {
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      width: 110px;  /* Adjust the width as needed */
      height: 105px !important; /* Ensure the height remains fixed */
      display: inline-block; /* Use inline-block to allow alignment */
      vertical-align: top; /* Align cards at the top */
      padding: 0; /* Reset padding */
      box-sizing: border-box; /* Include padding in the height */
      margin: 2px !important; /* Minimal space between cards */
    }
    :host {
      --primary-text-color: black !important;
    }
    .name, .state {
      color: var(--primary-text-color) !important;
      margin: 0; /* Remove any default margins */
    }

I used chatgpt so it may have some useless portions.

Any help is appreciated!

Can I change the color of the icon when an update is active ?

Are you using HA Supervised?

Throw them in a horizontal stack if you are using Sections

type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.living_room_main_lights
    name: Living room
    layout: vertical
    primary_info: name
    secondary_info: state
    show_brightness_control: false
    tap_action:
      action: toggle
    visibility:
      - condition: state
        entity: light.living_room_main_lights
        state: 'on'
    card_mod:
      style: |
        ha-card {
          background-color: white;
          border-radius: 16px;
          padding: 0; /* Reset padding */
          --card-primary-color: black !important;
          --card-secondary-color: black !important;
        }
  - type: custom:mushroom-light-card
    entity: light.living_room_main_lights
    name: Living room
    layout: vertical
    primary_info: name
    secondary_info: state
    show_brightness_control: false
    tap_action:
      action: toggle
    visibility:
      - condition: state
        entity: light.living_room_main_lights
        state: 'on'
    card_mod:
      style: |
        ha-card {
          background-color: white;
          border-radius: 16px;
          padding: 0; /* Reset padding */
          --card-primary-color: black !important;
          --card-secondary-color: black !important;
        }
  - type: custom:mushroom-light-card
    entity: light.living_room_main_lights
    name: Living room
    layout: vertical
    primary_info: name
    secondary_info: state
    show_brightness_control: false
    tap_action:
      action: toggle
    visibility:
      - condition: state
        entity: light.living_room_main_lights
        state: 'on'
    card_mod:
      style: |
        ha-card {
          background-color: white;
          border-radius: 16px;
          padding: 0; /* Reset padding */
          --card-primary-color: black !important;
          --card-secondary-color: black !important;
        }

Just a heads up, I edited your card_mod code

The issue with that is that I cannot use the “conditions” feature. These set of cards are for my mobile dashboard which will show only if the lights are on for quick and easy access. Throwing them in any stack does not allow the new conditions feature to work unfortunately

Ok, I’ll rework the code. From what I remember the card width in the Sections is static, but I haven’t checked in a bit. I’ll look again.

yes I do … it’s installed anyway :slight_smile:

1 Like

Then you can use update sensors to define the icon color

1 Like

It’s not feasible with Sections yet!