Mushroom Cards Card Mod Styling/Config Guide

yes. --primary-text-color and --secondary-text-color have changed in version 3.4.1 to
--card-primary-color and --card-secondary-color. this is to keep mushroom in line with the standard tile cards.

i havent updated this guide to 3.4.1 just yet as i have seen a few more open bugs still that i am waiting a bit to see if they will get squashed. but it will be updated to reflect this change soon :slight_smile:

1 Like

You’re awesome dude!

@dimitri.landerloos Hi! Could you help me out? If you look at my picture the 2nd weather card is “good” but this is one using an other entity which doesnt work with tap_action. So i wanted to add a other weather card but the scaling is bad ( the one above ) it should be like the 2nd…

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto auto
      margin: 8px 4px 4px 4px;
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.laurens
            content_info: none
            use_entity_picture: true
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: entity
            entity: person.adna
            content_info: none
            use_entity_picture: true
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  --chip-background:
                  {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                    rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                  {% else %}
                    rgb(var(--rgb-state-person-zone))
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: template
            entity: input_boolean.jax_home_not_home
            picture: local/images/jax.jpg
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  {% if is_state(config.entity, 'on') %}
                    --chip-background: rgb(var(--rgb-state-person-home));
                  {% else %}
                    --chip-background: red; /* Set to red when the status is 'off' */
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
          - type: template
            entity: input_boolean.gasten_modus
            icon: mdi:account-plus
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod:
              style: |
                /* Color border around avatar to show person status */
                ha-card {
                  {% if is_state(config.entity, 'on') %}
                    --chip-background: rgb(var(--rgb-state-person-home));
                  {% else %}
                    --chip-background: red; /* Set to red when the status is 'off' */
                  {% endif %};
                } 
                /* Slightly enlarge & bring to front on hover */
                ha-card:hover {
                  transform: scale(1.2);
                  transform-origin: top center;
                  z-index: 1;
                  transition: all 1s;
                }
        alignment: end
        card_mod:
          style: |
            ha-card { 
              /* Overlap avatar Chips */
              --chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));

              /* Set size of border around Chips */
              --chip-avatar-padding: 2px;

              /* Reduce width to fit Chips & allow max space for weather */
              width: fit-content;
              transition: all 0s;
            }
      - type: weather-forecast
        show_current: true
        show_forecast: false
        entity: weather.buienradar
        forecast_type: daily
        theme: Mushroom Shadow
        name: ' '
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Weersverwachting
              content:
                type: entities
                entities:
                  - type: custom:weather-card
                    entity: weather.forecast_home
                    forecast: true
                    details: false
        card_mod:
          style:
            .: |
              ha-card {
                --ha-card-background: none;
                --ha-card-box-shadow: none;
                --ha-card-border-width: 0;
                padding: 5px !important;
              }
              .current{
                font-size: 6px;
              }

This is not related to this topic…

Please look here :arrow_down:

1 Like

Hello gentlemen,

could you please help me out, I’m trying to rotate 90 degrees a custom:mushroom-title-card. Thanks for your time.

type: custom:mushroom-title-card
title: Rollo Küche
alignment: center
card_mod:
    style: |
        ha-card {
          rotate: 90deg;
        }

It rotated for me. Is it part of a larger card?

image

I added a few more mods you can play with

type: custom:mushroom-title-card
title: Rollo Küche
alignment: center
card_mod:
  style: |
    ha-card {
      rotate: 90deg !important;
      margin: 40px;
      --title-color: red !important;
      --title-font-size: 20px;
        }

Hi,
I am totally confused and maybe a stupid question. I know that the color naming has changed but I can’t get my title card working. even a damn short one doesn’t work as expected. What am I doing wrong here ? It’s not blue it’s not green.
Thx for any help.

type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: hello
card_mod:
  style: |
    ha-card {
      --card-primary-color: blue !important;
      --card-secondary-color: green !important;
      }

Different fields for Mushroom’s Title card

type: custom:mushroom-title-card
title: Hello, {{ user }} !
subtitle: hello
card_mod:
  style: |
    ha-card {
      --title-color: red !important;
      --subtitle-color: blue !important;
      }

You just saved my life. Many Thx. Where do I find these kind of infos. Was looking around but I guess I found only wrong places.

This extensive guide by @dimitri.landerloos

1 Like

Yes I know that. My question goes more into the direction where to find infos when something is changing as for example under the title card the old staff is still present. Don’t get me wrong I am not telling @dimitri.landerloos to update this asap. No No I am actually very very glad about this post. But there must be somewhere a release note or something else. Was on the GitLab side but unfortuately I didn’t find anything.

I look at the JS directly in an editor to understand the fields.

image

OK Thx. That is actually a quite good approach. I will use that in the future. Thx for pointing that out. :+1:

The post will be updated soon, i tend to keep quite up to date. it is just that there are some open bug reports in 3.4.X at the moment that i am waiting to see if they will get resolved before updating :slight_smile:

2 Likes

LiQuid_cOOled, thank you, but somehting is not working on my side.

Is not a larger card, it’s just a horizontal stack. But even alone is still not displayed rotated.
image

Card mod is installed, mushroom as well… do you have any other sugestions, what to check?

image
image

If its a horizontal stack post the full code please. Its likely due to the fact that horizontal and vertical stack dont have a ha-card element.

Is there a better way for me to utilize the current color of an RGB bulb to declare the color in the ping animation?

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: black !important;
        {% set light_state = states(config.entity) %}
        {% if light_state == 'on' %}
          --shape-animation: ping 2s infinite; 
        {% else %}                    
        {% endif %}
      }
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba({{state_attr(config.entity,'rgb_color') | join(', ')}}, 0.7);}
        70% {box-shadow: 0 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
        }

In theory, this should work. It seems to cause a lot of weird performance issues, though (i.e. the icon background won’t stay black, the animation continues after the light turns off, etc). The color of the animation does change properly, though. That has me curious if my syntax is outta whack.

Can anyone help with this query? I am setting up a new dashboard and using an input number set linked to a mushroom title card. I can style the title card with a single background color, but when it comes to templating the code doesn’t appear to work. by itself the border will work, but when I add the if/else code, nothing works.

I am new to CSS, so any help would be appreciated.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: All Lights
    card_mod:
      style: |
        ha-card {
          border: white 1px dashed !important;
          {% if is_state('input_number.tabs_lights') == '1.0' %}
            background: #00ff00;
          {% else %}
            background: #ff00ff;
          {% endif %}
        }
    title_tap_action:
      action: call-service
      service: input_number.set_value
      target:
        entity_id: input_number.tabs_lights
      data:
        value: 1

Hello, how can I make the entity card not in the “off” state
the color is displayed white, but another rgb(x,x,x) color?
So that when they are off, they are only visible in the background.

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
              align-self: flex-start !important;
            }
        .: |
          mwc-tab-bar {
            position: sticky;
            position: -webkit-sticky;
            bottom: 4px; 
            display: block;
             /* /* z-index: 999; */  */ 
          }
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
card:
  type: custom:tabbed-card
  styles:
    '--mdc-theme-primary': rgb(255,152,0)
    '--mdc-theme-secondary': grey
    '--mdc-tab-text-label-color-default': white
    '--mdc-typography-button-font-size': 16px
    '--mdc-tab-stacked-height': 30px
    '--mdc-tab-height': 48px
    '--mdc-tab-horizontal-padding': 0px
    '--mdc-tab-color-default': grey
    '--mdc-icon-size': 14px
  tabs:
    - attributes:
        icon: mdi:sofa
        isFadingIndicator: true
        minWidth: false
        isMinWidthIndicator: false
        stacked: false
      card:
        type: grid
        square: false
        columns: 1
        cards:
          - type: custom:stack-in-card
            keep:
              margin: false
              box_shadow: false
              background: false
            cards:
              - type: custom:mushroom-chips-card
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0 0.2em;
                    --chip-border-radius: 10%;
                    --chip-border-color: transparent;
                  }
                alignment: center
                chips:
                  - type: template
                    double_tap_action:
                      action: more-info
                    content: '{{ states(entity) }}% '
                    entity: sensor.wand_wz_temperature
                    icon: mdi:thermometer-lines
                    icon_color: orange
                    tap_action:
                      action: more-info
                    hold_action:
                      action: more-info
                    card_mod:
                      style: |
                        ha-state-icon {
                          --icon-symbol-size: 140px;
                        }
                  - type: template
                    double_tap_action:
                      action: more-info
                    content: '{{ states(entity) }}% '
                    entity: sensor.wand_wz_humidity
                    icon: mdi:water
                    icon_color: blue
                    tap_action:
                      action: more-info
                    hold_action:
                      action: more-info
                  - type: template
                    double_tap_action:
                      action: more-info
                    content: '{{ states(entity) }}°C '
                    entity: input_number.heizung_wz_eco
                    icon: mdi:sprout
                    icon_color: green
                    tap_action:
                      action: more-info
                    hold_action:
                      action: more-info
                  - type: template
                    double_tap_action:
                      action: more-info
                    content: '{{ states(entity) }}°C '
                    entity: input_number.heizung_wz_comfort
                    icon: mdi:home-account
                    icon_color: yellow
                    tap_action:
                      action: more-info
                    hold_action:
                      action: more-info
                  - type: template
                    double_tap_action:
                      action: more-info
                    content: '{{ states(entity) }}°C '
                    entity: input_number.heizung_wz_nacht
                    icon: mdi:weather-night
                    icon_color: blue
                    tap_action:
                      action: more-info
                    hold_action:
                      action: more-info
          - type: custom:stack-in-card
            keep:
              margin: false
              box_shadow: false
              background: false
            cards:
              - type: custom:mushroom-chips-card
                style: |
                  ha-card {
                    --chip-box-shadow: none;
                    --chip-background: none;
                    --chip-spacing: 0px;
                    --chip-padding: 0 0.2em;
                    --chip-border-radius: 10%;
                    --chip-border-color: transparent;
                  }
                alignment: center
                chips:
                  - type: entity
                    entity: person.tom
                    icon_color: light-green
                    icon: mdi:home-automation
                    content_info: none
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                    card_mod:
                      style: |
                        ha-card {
                          {% if not is_state('person.tom', 'home') %}
                            display: none !important;
                          {% endif %}
                        }
                  - type: entity
                    entity: person.sandra
                    icon_color: light-green
                    icon: mdi:home-automation
                    content_info: none
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                    card_mod:
                      style: |
                        ha-card {
                          {% if not is_state('person.sandra', 'home') %}
                           display: none !important;
                          {% endif %}
                        }
                  - type: entity
                    entity: switch.heizung_wz1_switch
                    icon_color: orange
                    content_info: none
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                  - type: entity
                    entity: switch.heizung_wz1_switch_2
                    icon_color: orange
                    content_info: none
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                  - type: entity
                    entity: switch.heizung_wz2_switch
                    icon_color: orange
                    content_info: none
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                  - type: entity
                    entity: switch.heizung_wz2_switch_2
                    icon_color: orange
                    content_info: none
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                  - type: entity
                    entity: input_boolean.heizung_wz_eco
                    content_info: none
                    icon_color: green
                    tap_action:
                      action: more-info
                    hold_action:
                      action: more-info
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                    card_mod:
                      style: |
                        ha-card {
                          {% if not is_state('input_boolean.heizung_wz_eco', 'on') %}
                            display: none !important;
                          {% endif %}
                        }
                  - type: entity
                    entity: input_boolean.heizung_wz_comfort
                    content_info: none
                    icon_color: yellow
                    use_entity_picture: false
                    style: |
                      ha-card {
                        border: none !important;
                        --chip-box-shadow: none;
                        --chip-background: none;
                    card_mod:
                      style: |
                        ha-card {
                          {% if not is_state('input_boolean.heizung_wz_comfort', 'on') %}
                            display: none !important;
                          {% endif %}
                        }
                  - type: template
                    entity: sensor.heizung_wz_night
                    icon: mdi:weather-night
                    icon_color: |-
                      {% if is_state('sensor.heizung_wz_night', 'True') %}
                      blue
                      {% else %}
                      grey
                      {% endif %}
                    tap_action:
                      action: more-info
                    card_mod:
                      style: |
                        ha-card {
                          {% if not is_state('sensor.heizung_wz_night', 'on') %}
                            display: none !important;
                          {% endif %}
                        }
                  - type: entity
                    entity: binary_sensor.fenster_wz
                    content_info: none
                    icon_color: red
                    use_entity_picture: false
                    card_mod:
                      style: |
                        ha-card {
                          {% if not is_state('binary_sensor.fenster_wz', 'on') %}
                            display: none !important;
                          {% endif %}
                        }

Dont think so. if you need it to be the exact color of the light this is the best way.

but yes this is an unfortunate thing about card mod, it doesnt always update the card nicely on entity state update.

1 Like