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

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.

1 Like

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

Regarding the chatGPT integration, I went through this:

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

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?

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.

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


image

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:

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;
        }

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

Thanks, works now :+1:

1 Like

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

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 ?

image

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!

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 :slight_smile:

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;}

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

Have a look here:

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

1 Like

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

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.
image

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 %}
    }

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 %}
    }

@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 :slight_smile:

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;

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

See code

type: horizontal-stack
cards:
  - type: custom:mushroom-person-card
    entity: person.tom
    primary_info: none
    secondary_info: none
    icon_type: entity-picture
    card_mod:
      style:
        mushroom-shape-avatar$: |
          .picture {
            display: flex;
            border-radius: 50%;
            {% if states(config.entity) == 'home' %}
              animation: pinggreen 4s infinite;
            {% else %}
              animation: pingred 5s infinite;
            {% endif %}
          }
          @keyframes pinggreen {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
            100% {box-shadow: 0 0 5px 15px transparent;}
          }
          @keyframes pingred {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
            100% {box-shadow: 0 0 5px 15px transparent;}
          }
        .: |

          ha-card {
           --icon-size: 50px;

          }
  - type: custom:mushroom-person-card
    entity: person.sandra
    primary_info: none
    secondary_info: none
    icon_type: entity-picture
    card_mod:
      style:
        mushroom-shape-avatar$: |
          .picture {
            display: flex;
            border-radius: 50%;
            {% if states(config.entity) == 'home' %}
              animation: pinggreen 4s infinite;
            {% else %}
              animation: pingred 5s infinite;
            {% endif %}
          }
          @keyframes pinggreen {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
            100% {box-shadow: 0 0 5px 15px transparent;}
          }
          @keyframes pingred {
            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
            100% {box-shadow: 0 0 5px 15px transparent;}
          }
        .: |
          ha-card {
           --icon-size: 50px;
          }
  - type: custom:mushroom-person-card
    entity: person.ben
    primary_info: none
    secondary_info: none
    icon_type: entity-picture
    card_mod:
      style:
        mushroom-shape-avatar$: |

          .picture {

            display: flex;

            border-radius: 50%;

            {% if states(config.entity) == 'home' %}

              animation: pinggreen 4s infinite;

            {% else %}

              animation: pingred 5s infinite;

            {% endif %}

          }

          @keyframes pinggreen {

            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}

            100% {box-shadow: 0 0 5px 15px transparent;}

          }

          @keyframes pingred {

            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}

            100% {box-shadow: 0 0 5px 15px transparent;}

          }
        .: |

          ha-card {

           --icon-size: 50px;

          }
  - type: custom:mushroom-person-card
    entity: person.tim
    primary_info: none
    secondary_info: none
    icon_type: entity-picture
    card_mod:
      style:
        mushroom-shape-avatar$: |

          .picture {

            display: flex;

            border-radius: 50%;

            {% if states(config.entity) == 'home' %}

              animation: pinggreen 4s infinite;

            {% else %}

              animation: pingred 5s infinite;

            {% endif %}

          }

          @keyframes pinggreen {

            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}

            100% {box-shadow: 0 0 5px 15px transparent;}

          }

          @keyframes pingred {

            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}

            100% {box-shadow: 0 0 5px 15px transparent;}

          }
        .: |

          ha-card {

           --icon-size: 50px;

          }
  - type: custom:mushroom-person-card
    entity: person.lena
    primary_info: none
    secondary_info: none
    icon_type: entity-picture
    card_mod:
      style:
        mushroom-shape-avatar$: |

          .picture {

            display: flex;

            border-radius: 50%;

            {% if states(config.entity) == 'home' %}

              animation: pinggreen 4s infinite;

            {% else %}

              animation: pingred 5s infinite;

            {% endif %}

          }

          @keyframes pinggreen {

            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}

            100% {box-shadow: 0 0 5px 15px transparent;}

          }

          @keyframes pingred {

            0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}

            100% {box-shadow: 0 0 5px 15px transparent;}

          }
        .: |

          ha-card {

           --icon-size: 50px;

          }

1 Like