Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[paulsfields (Stretch)]

Hi, I’m trying to merge 3 cards with the last being scrolling text, is it possible to reduce the size and move left the first two cards so I can make more use of the available space for the scrolling.The top picture is what I have and the second is what I would like.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none !important;
          --ha-card-border-width: 0;
        }
    cards:
      - type: custom:digital-clock
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none !important;
          --ha-card-border-width: 0;
        }
    cards:
      - type: custom:mushroom-template-card
        primary: Alerts & Weather
        icon: mdi:weather-partly-snowy-rainy
        tap_action:
          action: navigate
          navigation_path: '#livingroom'
        icon_color: blue
        multiline_secondary: true
        card_mod:
          style: |
            ha-card {
              --ha-card-background: none;
              --ha-card-box-shadow: none;
              --ha-card-border-width: 0;
              z-index: 1;
            }
            :host {
              --mush-icon-border-radius: 12px;
            }
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {
          border: none !important;
          --ha-card-border-width: 0;
        }
    cards:
      - type: custom:button-card
        name: |
          [[[return `<div style='display: flex;display: -webkit-flex;'>
             <div>&nbsp;</div>
             <marquee>
             <span style='color: red;'>
             There are '${states['sensor.lights_on_test'].state}' lights on
             and '${states['sensor.count_windows_open'].state}' doors or windows open,&nbsp           
             the inside average house temperature is ${states['sensor.everything_presence_one_temperature'].state}°c,&nbsp
             and the outside temperature is ${states['sensor.gw2000a_v2_2_0_outdoor_temperature'].state}°c.&nbsp
             </span>
             <span style='color: var(--primary-color);'>
             <span style='color: green;'>
             Today's weather summary is ${states['sensor.openweathermap_weather'].state}&nbsp
             and ${states['sensor.openweathermap_forecast_condition'].state}&nbsp
             with a possible ${states['sensor.openweathermap_forecast_precipitation'].state}mm of rain in the next hour
             </span>
             </marquee>`]]]

[tomg1970]

@dimitri.landerloos

Very Nice - thanks thanks

Unfortunately the screenshot upload is not working at the moment.

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: DUFT
    secondary: null
    icon: >-
      {{ iif (is_state('input_boolean.duft', 'off'), 'mdi:alarm',
      'mdi:alarm-off') }}
    icon_color: '{{ iif (is_state(''input_boolean.duft'', ''off''), ''purple'', ''grey'') }}'
    entity: input_boolean.duft
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        :host {
          --primary-text-color:
          {% if is_state('input_boolean.duft', 'off') %}
            var(--primary-text-color)
          {% else -%}
            var(--secondary-text-color)
          {% endif %}
        }  
  - type: entities
    entities:
      - entity: input_datetime.duft
        secondary_info: none
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge { display: none; }
              div.info.pointer { display: none; }
            ha-time-input:
              $ ha-base-time-input $:
                ha-textfield:
                  $: |
                    .mdc-text-field {
                      height: 40px !important;
                    }
                    .mdc-line-ripple::after,
                    .mdc-line-ripple::before {
                      border-bottom-style: none !important;
                    }
                    .mdc-text-field__ripple {
                      display: none !important;
                    }
                ha-select $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-select__ripple {
                    display: none !important;
                  }
            .: |
              :host {
                --mdc-text-field-fill-color: transparent;
                --mdc-select-fill-color: transparent;
                {% if is_state('input_boolean.duft','on') %}
                  --mdc-text-field-ink-color: var(--disabled-text-color);
                  color: var(--disabled-text-color);
                  --mdc-select-ink-color: var(--disabled-text-color);
                  --mdc-text-field-idle-line-color: var(--disabled-text-color);                  
                  --mdc-select-idle-line-color: var(--disabled-text-color);
                  --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                  --paper-item-icon-color: var(--disabled-text-color);
                  pointer-events: none;
                {% endif %}
              }
  - type: custom:timer-bar-card
    entities:
      - timer.duft
    layout: full_row
    text_width: 40px
    bar_background: '#222'
    bar_foreground: purple
card_mod:
  style: |
    :host {
      --primary-text-color:
      {% if is_state('input_boolean.duft', 'off') %}
        var(--primary-text-color)
      {% else -%}
        var(--secondary-text-color)
      {% endif %}
    }  
     ha-card {
       {% if is_state('input_boolean.duft', 'on') %}
       border: 2.5px outset rgb(128,0,128, 0.6) !important;
       {% else %}
       border: none;
       {% endif %} 
     }

[kvanluijtelaar (Kevin van Luijtelaar)]

Could you perhaps share the code you used?

[jagam (Jacob Gammeltoft)]

@EMP83

/hacsfiles/lovelace-mushroom/mushroom.js?hacstag=444350375121

Hi, I also got this problem. I can´t resolve it.
I have re-downloaded all Mushroom cards etc. in HACS. But nothing seems to change. It works on pc but not on ios. Is anybody able to assist in solving issue? Regards, Jacob

Its fixed now after reload of cards.

[Mngsps]

Continuing the discussion from Card-mod - Add css styles to any lovelace card:

Card-mod - Add css styles to any lovelace card

Hi there, I created and modified a mushroom cover card and when changing the icon color by using a template the spacing gets lost. However, changing the icon color without templating does not affect the spacing. Any idea to use my template to change the icon color without destroying the original spacing? type: custom:mushroom-cover-card entity: cover.rollladen_schlafen_kinder card_mod: style: | ha-state-icon { color: gray; } ha-card { --card-primary-font-size: 18px; …

Hi there,

I created and modified a mushroom cover card and when changing the icon color by using a template the spacing gets lost. However, changing the icon color without templating does not affect the spacing.
Any idea to use my template to change the icon color without destroying the original spacing?

type: custom:mushroom-cover-card
entity: cover.rollladen_schlafen_kinder
card_mod:
  style: |
    ha-state-icon {
      color: gray;
    }
    ha-card {
      --card-primary-font-size: 18px;
    } :host {
      --mush-spacing:5px;
      --mush-card-primary-font-weight: normal
    } mushroom-shape-icon {
        --shape-color: none !important;
        --shape-color-disabled: transparent !important;
        --icon-symbol-size: 100px;
        margin: 1px !important;
    }
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical

results in:

This is regardless whether using color name (e.g. grey, red…) or color code (e.g. #ffffff…).

type: custom:mushroom-cover-card
entity: cover.rollladen_schlafen_kinder
card_mod:
  style: |
    ha-state-icon {
    {% set entity = 'cover.rollladen_schlafen_kinder' %} 
    {% if state_attr(entity, 'current_position') |int == 100 %}
      {% set icon_col = '#%02x%02x%02x' % (255,255,255) %}
    {% elif state_attr(entity, 'current_position') |int > 75 %}
      {% set icon_col = '#%02x%02x%02x' % (224,224,224) %}
    {% elif state_attr(entity, 'current_position') |int > 50 %}
      {% set icon_col = '#%02x%02x%02x' % (193,193,193) %}
    {% elif state_attr(entity, 'current_position') |int > 25 %}
      {% set icon_col = '#%02x%02x%02x' % (162,162,162) %}
    {% elif state_attr(entity, 'current_position') |int > 0 %}
      {% set icon_col = '#%02x%02x%02x' % (131,131,131) %}
    {% else %} {{ '#%02x%02x%02x' % (100,100,100) }}
       {% set icon_col = '#%02x%02x%02x' % (100,100,100) %}
    {% endif %}
      color: {{ icon_col }};
    }
    ha-card {
      --card-primary-font-size: 18px;
    } :host {
      --mush-spacing:5px;
      --mush-card-primary-font-weight: normal
    } mushroom-shape-icon {
        --shape-color: none !important;
        --shape-color-disabled: transparent !important;
        --icon-symbol-size: 100px;
        margin: 1px !important;
    }
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical

Results in:

This happens regardless the type of template. Even inserting {{ whatever }} as value for color did not change the behaviour.

Also tried using --card-mod-icon-color: but using template for the value showed the same outcome.

Any idea to change the icon color state attribute dependend without crashing the spacing of my modification?

Thank you for your help and kind regards,
Benedikt

[malosaa (Hector)]

use this:

  style: |
    ha-state-icon {
      color: orange;
    }

See here:

Mushroom Cards Card Mod Styling/Config Guide

Cover Card Sections are split:

Main Icon Styling

You can style the main icon like this: Change the icon type/mdi. [image] card_mod: style: | ha-state-icon { --card-mod-icon: mdi:mushroom; } Change the icon color. [image] card_mod: style: | ha-state-icon { color: orange; } Change icon size. [image] card_mod: style: | ha-state-icon { --icon-symbol-size: 40px; } Rotate Icon. [image] card_mod: style: | ha-state-icon { rotate: 3…

[malosaa (Hector)]

try something like this:

type: custom:mushroom-cover-card
entity: cover.livingroom_window_front
card_mod:
  style: |
    ha-state-icon {
     
    {% if state_attr('cover.livingroom_window_front', 'current_position') == 100 %}
      color: purple;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 75 %}
      color: green;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 50 %}
      color: pink;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 25 %}
      color: yellow;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 0 %}
      color: red;
    {% endif %}
    }
    ha-card {
      --card-primary-font-size: 18px;
    } :host {
      --mush-spacing:5px;
      --mush-card-primary-font-weight: normal
    } mushroom-shape-icon {
        --shape-color: none !important;
        --shape-color-disabled: transparent !important;
        --icon-symbol-size: 100px;
        margin: 1px !important;
    }
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical

this works you can implement it on your code, tested with the cover card.

[Mngsps]

@malosaa

use this:

  style: |
    ha-state-icon {
      color: orange;
    }

This is what I already did. It works. But I want to use a template aa mentioned above and then it doesn’t…

[hazio]

Thanks, what about individual font sizes for a single line?
Ex: ‘Good Morning’ is size 60px, and {{user}}) is size 10px for title only.

[dimitri.landerloos]

Simple answer you cant.

You can use css pseudo elements to do something like it. but its not actually on the same line. it is technically a different element entirely.

type: custom:mushroom-title-card
title: Hello,
subtitle: Test
card_mod:
  style: |
    .title:before {
      content: '😊';
      font-size: 80px;
    }
    .title:after {
      content: '{{user}} !';
      font-size: 20px;
    }
    :host {
      --title-font-size: 60px !important;
    }

[dimitri.landerloos]

Tested and this works perfectly fine for me. no issue for me.

type: custom:mushroom-cover-card
entity: cover.office_blinds
card_mod:
  style: |
    ha-state-icon {
      {% set entity = 'cover.office_blinds' %} 
      {% if state_attr(entity, 'current_position') | int == 100 %}
        {% set icon_col = '#%02x%02x%02x' % (255,255,255) %}
      {% elif state_attr(entity, 'current_position') |int > 75 %}
        {% set icon_col = '#%02x%02x%02x' % (224,224,224) %}
      {% elif state_attr(entity, 'current_position') |int >= 50 %}
        {% set icon_col = '#%02x%02x%02x' % (193,193,193) %}
      {% elif state_attr(entity, 'current_position') |int >= 25 %}
        {% set icon_col = '#%02x%02x%02x' % (162,162,162) %}
      {% elif state_attr(entity, 'current_position') |int > 0 %}
        {% set icon_col = '#%02x%02x%02x' % (131,131,131) %}
      {% else %} {{ '#%02x%02x%02x' % (100,100,100) }}
         {% set icon_col = '#%02x%02x%02x' % (100,100,100) %}
      {% endif %}
      color: {{ icon_col }};
    }
    ha-card {
      --card-primary-font-size: 18px;
    } 
    :host {
      --mush-spacing: 5px;
      --mush-card-primary-font-weight: normal;
    } 
    mushroom-shape-icon {
      --shape-color: none !important;
      --shape-color-disabled: transparent !important;
      --icon-symbol-size: 100px;
      margin: 1px !important;
    }
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical

but is there any reason why you dont just do what was suggested here?

@malosaa

    {% if state_attr('cover.livingroom_window_front', 'current_position') == 100 %}
      color: purple;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 75 %}
      color: green;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 50 %}
      color: pink;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 25 %}
      color: yellow;
    {% elif state_attr('cover.livingroom_window_front', 'current_position') > 0 %}
      color: red;
    {% endif %}

seems a much easier way if you are going to set each state anyway…

[hazio]

Works great, thank you!

[Mngsps]

@dimitri.landerloos

Tested and this works perfectly fine for me. no issue for me.

Did you try to refresh/reload your browser site? After leaving the editing its fine with me as well. After reloading it crashes (lost spacing). With both suggested versions. Regardless the browser (Chrome, Mozilla, Fully Kiosk), regardless the device (Android Tablet ans Smartphone, two different Windows PCs)…

[dimitri.landerloos]

i see it on edge. but not firefox.

the issue is related to your margin i think rather than anything else. even if i remove the entire if section it still has the same issue. so looks like you cant use a margin on the mushroom-shape-icon element.

try like this instead:

type: custom:mushroom-cover-card
entity: cover.office_blinds
card_mod:
  style: |
    ha-state-icon {
      {% if state_attr(config.entity, 'current_position') == 100 %}
        color: rgba(255,255,255);
      {% elif state_attr(config.entity, 'current_position') > 75 %}
        color: rgba(224,224,224);
      {% elif state_attr(config.entity, 'current_position') > 50 %}
        color: rgba(193,193,193);
      {% elif state_attr(config.entity, 'current_position') > 25 %}
        color: rgba(162,162,162);
      {% elif state_attr(config.entity, 'current_position') > 0 %}
        color: rgba(131,131,131);
      {% else %}
        color: rgba(100,100,100);
      {% endif %}
    }
    ha-card {
      --card-primary-font-size: 18px;
      --mush-spacing: 5px;
      --mush-card-primary-font-weight: normal;
    }
    mushroom-shape-icon {
      --shape-color: none !important;
      --shape-color-disabled: transparent !important;
      --icon-symbol-size: 100px;
    }
    mushroom-state-item {
      padding-top: 20px;
      --spacing: 30px;
      margin-bottom: 10px;
    }
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
icon_type: icon
fill_container: true
secondary_info: none
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
layout: vertical

[matata (Martin Prochazka)]

Hi, animation not working for me… is static. Any idea please?

[dimitri.landerloos]

check the updated animations. how they are applied changed earlier in the year.

Mushroom Cards - Build a beautiful dashboard easily

Hi @rhysb, i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here. i will …

[Ryan_Grandy (Ryan)]

Does the template card support using the HA color variables?

Can I, for example use the following code?

It doesn’t seem to work for me, but instead just shows the icon as black, but if I replace the variable with just a simple color like: “red” it works.

icon_color: >-
  {% if is_state('switch.media_room_switch','on') %}
    var(--state-light-active-color)
  {% else %}
    var(--state-light-inactive-color)
  {% endif%}

[dimitri.landerloos]

No. You cant use CSS in templates unless you use card mod.

You could achieve the same thing in card mod like this:

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
icon_color: ''
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('switch.media_room_switch','on') %}
          background: rgba(var(--state-light-active-color),0.2) !important;
        {% else %}
          background: rgba(var(--state-light-inactive-color),0.2) !important;
        {% endif %}
      }
    .: |
      ha-state-icon {
        {% if is_state('switch.media_room_switch','on') %}
          color: var(--state-light-active-color) !important;
        {% else %}
          color: var(--state-light-inactive-color) !important;
        {% endif %}
      }

[malosaa (Hector)]

First of all my intention was to provide assistance and share knowledge, making it more accessible for others, not getting criticized!

Everyone’s got their own way of doing things, and that’s what makes coding cool. I’m just here to help out and share what I know. Let’s keep it positive and learn from each other. Cheers to coding together!"

[dimitri.landerloos]

No criticism from me whatsoever. In fact i was saying that he should employ what you suggested as its just an easier way to accomplish what he wanted to accomplish.

I think you may have misunderstood my tone. I am always positive and just trying to help (see the guide in my profile for evidence of this )