Mushroom Cards Card Mod Styling/Config Guide

Hi,

Version 3.4.1 fixes this problem.

Is that in response to me? Do you know when 3.4.1 may be getting released to HA?

Yes, version 3.4.1 is currently available.

Thanks I did a manual pull and got 3.4.1. It is still chopped off after a restart and clearing cache.

try to add some padding to the primary field like this:
image

type: custom:mushroom-template-card
entity: alarm_control_panel.alarmo
primary: |
  {% if is_state(entity, 'armed_home') %}
  ARMED HOME
  {% elif is_state(entity, 'armed_away') %}
  ARMED AWAY
  {% elif is_state(entity, 'armed_night') %}
  ARMED NIGHT
  {% elif is_state(entity, 'disarmed') %}
  DISARMED
  {% else %}
  OFFLINE
  {% endif %}
fill_container: true
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
badge_color: ''
layout: vertical
multiline_secondary: false
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --card-primary-font-size: 50px;
      }
      .primary {
        padding: 10px 0px 10px 0px;
      }
    .: |
      ha-card {
        border-radius: 0px;
        {% if is_state(config.entity, 'armed_home') %}
          background-color: rgba(255, 0, 0, 100);
        {% elif is_state(config.entity, 'armed_away') %}
          background-color: rgba(255, 0, 0, 100);
        {% elif is_state(config.entity, 'armed_night') %}
          background-color: rgba(255, 0, 0, 100);
        {% elif is_state(config.entity, 'disarmed') %}
          background-color: rgba(0, 100, 0, 100);
        {% else %}
          background-color: rgba(175, 90, 0, .4);
        {% endif %}
      }
2 Likes

Thanks @dimitri.landerloos! Any idea why the text color isn’t working?

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