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

[tomg1970]

Ich habe das jetzt noch etwas anders gemacht, weil die ganzen Räume einfach zuviel Platz
benötigen. Deswegen habe ich das in eine tabbed-card eingebaut

Code is too big for share here… i can sent it to you as a file

This is only one climate card

square: false
type: grid
columns: 1
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.wz
        name: WZ
        icon: bha:thermostat
        secondary_info: state
        show_temperature_control: true
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-color: rgb(255, 191, 0, 0.2) !important;
              }
            mushroom-climate-temperature-control$:
              mushroom-input-number$: |
                .value {
                  font-size: 18px;
                  color: rgb(255, 191, 0, 0.9) !important;
                }
                #container .button:nth-child(1) {
                  --card-mod-icon-color: rgb(255, 191, 0, 0.85);
                }
                #container .button:nth-child(3) {
                  --card-mod-icon-color: rgb(255, 191, 0, 0.85);
                }
            .: |
              ha-state-icon {
                color: rgb(255, 191, 0, 0.8);
                --icon-symbol-size: 25px;
              }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.wand_wz_temperature
          - type: entity
            entity: sensor.wand_wz_humidity
          - type: entity
            entity: sensor.wz_temperature
        alignment: end
        card_mod:
          style: |
            ha-card {
              background: none !important;
              border: 0px transparent solid !important;          
              --primary-text-color: grey;
              --text-color: grey;
              --chip-background: transparent !important;  
              --chip-height: 44px;
              --chip-border-radius: 20%;
              --chip-border-color: transparent;
              --chip-icon-size: 16px;
              --chip-font-size: 13px;
              --chip-spacing: -18px !important;
              position: absolute;
              top: 12px;
              right: 10px;

            }
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-number-card
        entity: input_number.heizung_wz_nacht
        display_mode: buttons
        secondary_info: none
        icon_color: amber
        name: night
        card_mod:
          style:
            mushroom-number-value-control$:
              mushroom-input-number$: |
                .minus {
                  display: none !important;
                }
                .plus {
                  display: none !important;
                }
            mushroom-state-info$: |
              .container {
               --card-secondary-font-size: 13px;
               --card-primary-font-size: 13px;
              }
            .: |
              mushroom-number-value-control {
                pointer-events: none;
              }
              ha-card {
                font-variant: small-caps;
              }
      - type: custom:mushroom-number-card
        entity: input_number.heizung_wz_eco
        display_mode: buttons
        fill_container: false
        secondary_info: none
        icon_color: amber
        name: eco
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
               --card-secondary-font-size: 13px;
               --card-primary-font-size: 13px;
              }
            .: |
              ha-card {
                font-variant: small-caps;
              }
      - type: custom:mushroom-number-card
        entity: input_number.heizung_wz_comfort
        display_mode: buttons
        secondary_info: none
        icon_color: amber
        name: comf
        card_mod:
          style:
            mushroom-number-value-control$:
              mushroom-input-number$: |
                .minus {
                  display: none !important;
                }
                .plus {
                  display: none !important;
                }
            mushroom-state-info$: |
              .container {
               --card-secondary-font-size: 13px;
               --card-primary-font-size: 13px;
              }
            .: |
              mushroom-number-value-control {
                pointer-events: none;
              }
              ha-card {
                font-variant: small-caps;
              }
    columns: 3
  - type: entities
    entities:
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: automation.heizung_wz
            icon_color: amber
            name: AUTO
            use_entity_picture: false
            content_info: name
            card_mod:
              style: |
                ha-card {
                  background: rgb(144,144,144, 0.3)!important;
                  --chip-font-size: 11px;
                  --primary-text-color: rgb(211,211,211, 0.7);
                  --text-color: rgb(211,211,211, 0.7);
                }
          - type: entity
            entity: switch.wz
            icon_color: amber
            name: TRV
            use_entity_picture: false
            content_info: name
            card_mod:
              style: |
                ha-card {
                background: rgb(144,144,144, 0.3)!important;
                --chip-font-size: 11px;
                --primary-text-color: rgb(211,211,211, 0.7);
                --text-color: rgb(211,211,211, 0.7);
                }
          - type: entity
            entity: input_boolean.heizung_wz_comfort
            icon_color: amber
            name: COMF
            use_entity_picture: false
            content_info: name
            card_mod:
              style: |
                ha-card {
                background: rgb(144,144,144, 0.3)!important;
                --chip-font-size: 11px;
                --primary-text-color: rgb(211,211,211, 0.7);
                --text-color: rgb(211,211,211, 0.7);
                }
          - type: entity
            entity: input_boolean.heizung_wz_eco
            icon_color: amber
            name: ECO
            use_entity_picture: false
            content_info: name
            card_mod:
              style: |
                ha-card {
                background: rgb(144,144,144, 0.3)!important;
                --chip-font-size: 11px;
                --primary-text-color: rgb(211,211,211, 0.7);
                --text-color: rgb(211,211,211, 0.7);
                }
    state_color: true
    show_header_toggle: true

[dimitri.landerloos]

i dont want to act like the police of the thread or anything. but please only english. it is in the guidelines. but the main reason is it will be very difficult for someone in the future to follow the conversation if they dont speak German.

[Montreal666]

I started using your custom slider and really like it; however I have an issue with some entities (brightness only - no RGB or CT) ending up with no slider. They work correctly with the original mushroom light card.

I suspect it is related to the device attributes and how it is processed.

Here is one example + output.
Let me know what you think.

Thx

[Guizmos]

Regarding the chatGPT integration, I went through this:

ChatGPT Integration for Home Assistant: Enhance Your Smart Home with AI

Home Assistant OpenAI Response Sensor I’m excited to share my latest project, a custom integration that brings the power of OpenAI’s ChatGPT directly into your Home Assistant setup. With this integration, you can harness the potential of AI-driven conversations and automations to make your smart home even more intelligent and versatile. From incorporating ChatGPT into dashboard views to triggering automations based on AI-generated responses, the possibilities are endless. [videothumbnail.PNG] …

But the small problem with this integration is that the response takes time to arrive (30 seconds)

[dimitri.landerloos]

i did put a fix in for this a while ago, when did you start using the code?

and can you show me what attributes the light has when it is on please?

[Montreal666]

Here are the attributes:

I’ve tried multiple versions of the code for troubleshooting. Can you point me to the correct source code, will try it and report back.

[dimitri.landerloos]

This code is the one that works with my light that also doesnt have rgb_color just as yours.

Code

type: custom:mushroom-light-card
entity: light.kitchen_down_light_1
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --primary-text-color: #1a1a1a;
            {% else %}
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          flex-shrink: 1;
          flex-grow: 0;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --secondary-text-color: #3b3b3b;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --secondary-text-color: #3b3b3b;
            {% else %}
              --secondary-text-color: #c9c9c9;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }

But it is the same as the code here:

Mushroom Inspiration!

Hi All, I have built an alternative to the existing mushroom horizontal layout that currently exists with card_mod: [image] i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this: [image] and its alternative that keeps the text in 2 rows: [image] You need to ensure that you have layout: horizontal in your card it works with no buttons, 1 button or both of the buttons: [image] it will auto adjust th…

[david-romero]

You have to update the code to the last version of mushroom.

type: custom:mushroom-template-card
primary: Spin
icon_color: teal
icon: mdi:fan
card_mod:
    style: |
        ha-state-icon {
            animation: spin 1s linear infinite;
        }

[weemaba999 (Bart Weemaels)]

Hi Sebba,

Is your code finished and do you have some kind of a repository for this card if you want it to share of course ?

Thanks !

bart

[Montreal666]

Thanks, works now

[FedeL16 (Federico)]

yes me too. i thought to have a problem cause the delay… Im configuring your switch bar. I dont understand because if i dont hide the cards, switch bar disappear, while with " regular cards on dashboard" i can see all my buttons on switch card fixed bottom.

Can you give me a right code? thanks

[Montreal666]

when light is off, the secondary text moves to a second line; any way to have “off” simply replace the brightness value / same position on the first line ?

I also changed the font sizes with :

      ha-card {
        --card-primary-font-size: 2rem;
        --card-secondary-font-size: 1.25rem;
        #text-align: center;
        }

different font sizes seem to align to the bottom, any way to align-items center?

I’ve tried some options from the styling guide and other sources, unsuccessfully.

Thanks again!

[dimitri.landerloos]

Yes. just remove the check that i have. i wanted it to move back to default when off, but if you dont like that behaviour just remove the if statements from this section:

        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            flex-direction: row !important;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }

so then like this:

        .container {
          display: flex;
          z-index: 1;
          flex-direction: row !important;
          align-items: baseline;
          pointer-events: none !important;
          margin-left: 10px;
          margin-right: -8px;
        }

align-items: baseline aligns the text to the bottom, so the bottom of the font is on the same line. so just try align-items: center instead

[zgadson (Zach)]

Hoping one of yall brilliant minds can help me out. I’m trying to increase the height of a slider. I use top/left to position my cards, and it although it places my card correctly, the height element has zero effect. I’ve also tried various configurations with card-mod but could not get the desired results.

- type: custom:mushroom-light-card
  entity: light.zachs_lamp
  show_brightness_control: false
  show_color_control: true
  primary_info: none
  secondary_info: none
  icon_type: none
  style: |
    :host {
      top: 70%;
      left: 50%;
      width: 95%;
      height: 60px;}

[Montreal666]

Thank you
was trying to modify container/secondary…
Cheers,

[Montreal666]

Have a look here:

https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472/10

[Trilis29]

Hey guys, can’t find a soultion, maybe you could help

Is it possible to make mini-graph-card as background of stack-in-card?
Now it is stacked at bottom, but would like to make background as minigraph.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: >-
      {{ states('sensor.atc_vonia_3d70_temperature') | round(0) }} °C🌡️ {{
      states('sensor.atc_vonia_3d70_humidity') | round(0) }} %💧 {% if
      states("sensor.atc_vonia_3d70_battery") | round(0) > 50 -%} {{
      states('sensor.atc_vonia_3d70_battery') | round(0) }} %🔋{%- else -%}{{
      states('sensor.atc_vonia_3d70_battery') | round(0) }} %🪫 {%- endif %}
    icon: mdi:stove
    entity: light.kitchen_all
    tap_action:
      action: toggle
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 64px;
          height: 66px;
          margin-left: -20px !important;
          margin-top: -2px !important;
          --mush-card-secondary-font-size: 15px
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        tap_action:
          action: toggle
        icon: mdi:led-strip-variant
        entity: light.virtuves_led
        icon_color: '{% if states("light.virtuves_led") == "on" %} orange {% endif %}'
      - type: light
        entity: light.virtuves_sala
        icon: mdi:vanity-light
        tap_action:
          action: toggle
      - type: conditional
        conditions:
          - entity: binary_sensor.dishwasher_running
            state: 'on'
        chip:
          type: template
          icon_color: blue
          icon: mdi:dishwasher
          card_mod:
            style: |
              .content {
                animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
                transform-origin: 50% 75%;
              }
              @keyframes bounce {
                0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
                40% { transform: rotate(5deg); }
                60% { transform:  rotate(-4deg); }
              }
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 1;
          --chip-height: 50px
        } 
  - type: custom:mini-graph-card
    name: Temperature
    entities:
      - sensor.atc_salion_23a9_temperature
    label: null
    show:
      labels: false
      icon: true
    color_thresholds:
      - value: 20
card_mod:
  style: |
    ha-card {
      height: px;
      {% if is_state('group.light.mini5', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

[dimitri.landerloos]

This isnt pretty but you can use it to figure out what to do.

Set the position to absolute on the graph card and then set the height on the stack card and graph card to the same.

If you need any card to be on top of the graph. Then set the card to have a transparent background and set it to z-index: 1;

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: >-
      {{ states('sensor.atc_vonia_3d70_temperature') | round(0) }} °C🌡️ {{
      states('sensor.atc_vonia_3d70_humidity') | round(0) }} %💧 {% if
      states("sensor.atc_vonia_3d70_battery") | round(0) > 50 -%} {{
      states('sensor.atc_vonia_3d70_battery') | round(0) }} %🔋{%- else -%}{{
      states('sensor.atc_vonia_3d70_battery') | round(0) }} %🪫 {%- endif %}
    icon: mdi:stove
    entity: light.kitchen_lights
    tap_action:
      action: toggle
    hold_action:
      action: toggle
    icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 64px;
          height: 66px;
          margin-left: -20px !important;
          margin-top: -2px !important;
          --mush-card-secondary-font-size: 15px
        }
        ha-card {
          z-index: 1;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        tap_action:
          action: toggle
        icon: mdi:led-strip-variant
        entity: light.bedroom_chest_lamp
        icon_color: '{% if states("light.virtuves_led") == "on" %} orange {% endif %}'
      - type: light
        entity: light.bedroom_main_light
        icon: mdi:vanity-light
        tap_action:
          action: toggle
      - type: conditional
        conditions:
          - entity: input_boolean.dishwasher
            state: 'off'
        chip:
          type: template
          icon_color: blue
          icon: mdi:dishwasher
          card_mod:
            style: |
              .content {
                animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
                transform-origin: 50% 75%;
              }
              @keyframes bounce {
                0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
                40% { transform: rotate(5deg); }
                60% { transform:  rotate(-4deg); }
              }
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 1;
          --chip-height: 50px
        } 
  - type: custom:mini-graph-card
    name: Temperature
    entities:
      - sensor.lounge_downstairs_temperature
    label: null
    show:
      labels: false
      icon: true
    color_thresholds:
      - value: 20
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          height: 200px;
          top: 0px;
          left: 0px;
        }
card_mod:
  style: |
    ha-card {
      height: 200px;
      {% if is_state('group.light.mini5', 'on') %}
        background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

[laurens362]

@dimitri.landerloos

Hi,

I was wondering if you could give me an example of the following… Id like to have an input_boolean instead of person here. But it should look the same as person card…
Becouse id like to make a “guest” mode toggle & a toggle for my dog… But i dont want to use them to fill up my zone.home

entity: input_boolean.jax_home_not_home
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
name: Jax

            entity: person.jax
            content_info: none
            use_entity_picture: true
            tap_action:
              action: call-service
              service: input_boolean.toggle
              target:
                entity_id: input_boolean.jax_home_not_home
              data: {}
            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;

[gojonny (Giovanni)]

Hi, sorry if I’m going off topic, I wanted to ask you how did you create these family avatars?