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

[schumi2004]

Mmmmm something strange happens on my mobile.

It works perfect in browser but on my mobile the diswasher chip shifts down when active.
Does is have something to do with animation maybe?

[dimitri.landerloos]

Have this issue too when targeting conditional chips.

what i did instead was ditch the conditional chip and used the condition in css with card mod instead like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    double_tap_action:
      action: none
    entity: sensor.washing_machine_washer_job_state
    icon: |-
      {% if states('sensor.washing_machine_washer_job_state') == 'drying' %}
        mdi:tumble-dryer
      {% else %}
        mdi:washing-machine
      {% endif %}
    icon_color: >-
      {% if states('sensor.washing_machine_washer_job_state') == '' %}
        #5bc779
      {% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
        #697fff 
      {% elif states('sensor.washing_machine_washer_job_state') == 'rinse' %} 
        #5eccff 
      {% elif states('sensor.washing_machine_washer_job_state') == 'spin' %} 
        #999c9e
      {% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
        #ff7b2e
      {% elif states('sensor.washing_machine_washer_job_state') ==
      'weightSensing'%} 
        #be9cff 
      {% elif states('sensor.washing_machine_washer_job_state') == 'finish'%}
        #5bc779
      {% endif %}
    content: |-
      {% if states('sensor.washing_machine_washer_job_state') == 'none' %}
        Finished 
      {% else %} 
          {% set ct = states('sensor.washing_machine_washer_completion_time') | as_datetime %}
          {% set final = (ct - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) %}
          {% set test = final.split('h')[0] | int %}
          {% if test == 0 %}
            {{ final.split('h')[1] }}
          {% else %}
            {{final}}
          {% endif %}
      {% endif %}
    tap_action:
      action: more-info
    hold_action:
      action: none
    card-mod: null
    style: |
      @media (prefers-color-scheme: dark) {
        ha-card {
          {% if states('sensor.washing_machine_washer_job_state') == 'none' %}

          {% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
            --chip-background: #001f5c;
          {% elif states('sensor.washing_machine_washer_job_state') == 'rinse' %}
            --chip-background: #004463;
          {% elif states('sensor.washing_machine_washer_job_state') == 'spin' %}
            --chip-background: #3d3d3d;
          {% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
            --chip-background: #3b0c0c;
          {% elif states('sensor.washing_machine_washer_job_state') == 'weightSensing' %}
            --chip-background: #42006e;
          {% elif states('sensor.washing_machine_washer_job_state') == 'finish' %}
            --chip-background: #175400;
          {% endif %}; 

        }
      } 
      @media (prefers-color-scheme: light) {
        ha-card {
          {% if states('sensor.washing_machine_washer_job_state') == 'none' %}

          {% elif states('sensor.washing_machine_washer_job_state') == 'wash' %}
            --chip-background: #b8d0ff
          {% elif states('sensor.washing_machine_washer_job_state') == 'rinse' %}
            --chip-background:#bdeaff
          {% elif states('sensor.washing_machine_washer_job_state') == 'none' %}
            --chip-background:#d6d6d6
          {% elif states('sensor.washing_machine_washer_job_state') == 'drying' %}
            --chip-background:#fccdae
          {% elif states('sensor.washing_machine_washer_job_state') == 'weightSensing' %}
            --chip-background:#d3b6f2
          {% elif states('sensor.washing_machine_washer_job_state') == 'finish' %}
            --chip-background:#d3ffc2
          {% endif %}; 

        }
      } 
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        /* washing machine */
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      }
      @keyframes shake {
        0%, 100% { transform: translate(0, 0) rotate(0); }
        20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
        40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
        60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
        80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
      }
      @keyframes drum {
        50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 42%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
      }
    .: |
      mushroom-template-chip:nth-child(1) {
        {% if states('sensor.washing_machine_washer_job_state') == 'none' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}

        {% endif %}
      }

the key bit is this:

      mushroom-template-chip:nth-child(1) {
        {% if states('sensor.washing_machine_washer_job_state') == 'none' %}
          margin-right: 0px !important;
          display: none !important;
        {% else %}

        {% endif %}
      }

[GeorgeCastanza]

Thanks for this dimitri!

Is it possible to have it popup with multiple lights (say in a light group)?

[dimitri.landerloos]

Sure. Put the lights in a vertical stack and then put them in a pop-up card. (Requires browser mod to be installed).

Code

type: custom:mushroom-light-card
entity: light.bedroom_lights
name: Bedroom Lights
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;
      }
hold_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      content:
        type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: back
                card_mod: null
                style: |
                  ha-card {
                    border: none !important;
                    box-shadow: none !important;
                    background: none !important;
                  }
          - type: custom:mushroom-light-card
            entity: light.bedroom_main_light
            name: Main Light
            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;
                  }
          - type: custom:mushroom-light-card
            entity: light.bedroom_chest_lamp
            name: Chest Lamp
            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;
                  }

[dimitri.landerloos]

Here is a proper solution that allows you to set your minimum and maximums for each thing to what you like. it is not short, but it allows the most flexibility

card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        perspective: 7px;
      }
    .: |
      ha-state-icon {
        {% if is_state(config.entity,'on') %}
          {% set animation_sec_min = 0.35 %}
          {% set animation_sec_max = 5 %}
          {% set vol_min = 0 %}
          {% set vol_max = 0.7 %}
          {% if state_attr(config.entity,'volume_level') > vol_max %}
            {% set input_value = vol_max %}
          {% else %}
            {% set input_value = state_attr(config.entity,'volume_level') %}
          {% endif %}
          {% set output_value = (input_value - vol_max) / (vol_min - vol_max) * (animation_sec_max - animation_sec_min) + animation_sec_min %}
          animation: music {{output_value}}s ease-in-out infinite alternate;
        {% endif %}
      }
      @keyframes music {
        0%, 100% { transform: translateY(0px) scaleX(1); }
        20% { transform: translateY(2px) scaleX(0.9); }
        40% { transform: rotateY(10deg) rotateZ(-10deg); }
        60% { transform: translateY(-4px) scaleX(1.1); }
        80% { transform: rotateY(-10deg) rotateZ(10deg); }
      }

for some people they may need to use this instead for the check to see if media player is on:

        {% if is_state(config.entity,'playing') %}

This does assume that a linear relationship between audio level and animation speed is what you want. but this is the easiest. if it isnt linear it will start to get a bit more difficult with the algebra

you could of course also just do this instead, but makes it less intuitive what values to change and where

{% if is_state(config.entity,'on') %}
  {% if state_attr(config.entity,'volume_level') > 0.7 %}
     animation: music {{(0.7 - 0.7) / (0 - 0.7) * (5 - 0.35) + 0.35}}s ease-in-out infinite alternate;
  {% else %}
     animation: music {{(state_attr(config.entity,'volume_level') - 0.7) / (0 - 0.7) * (5 - 0.35) + 0.35}}s ease-in-out infinite alternate;
  {% endif %}
{% endif %}

[0tto0o]

@dimitri.landerloos

Hi Dimitri: Can I ask, how did you set up which batteries will be shown?

Mushroom Inspiration!

I have made some significant improvements and changes to my battery card that i posted a while back that i feel like it warrants another post if that is ok. if not i will remove and update my original post instead. Card now lists lowest battery detected with auto entities only, and gives the option for a dropdown menu to see the rest. i really like this change as it now doesnt take up loads of space at the bottom of my room cards, only when i expand it to see all of them will it take up that …

[dimitri.landerloos]

Sure!

This section searches for entity IDs that have the words battery and the name of the room in it. as this is how i have my entity ids set up.

{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}

this section needs to match that to remove part of the name when it is actually added to the bar.

'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],

you do need to ensure that you update this in the 2 places that it is in the card as it is actually running this check twice, but in the first instance only showing you the lowest battery result, and in the second showing you all but the lowest result.

[burg93 (Adam)]

Does anyone have a good input datetime UI selector? I’ve seen a few for time only but I’d like a nice visual way of selecting a date and time using a helper that’s not the rubbish entity version.

[Puck301 (Keir)]

hi @PskNorz @dimitri.landerloos

Brilliant card! I just tried your code and a few other peoples and no matter what I do the card does not seem to over on top of each other properly. For example I can see your values are overlaid nicely onto the graph yet no matter what I do my values always sit above so the car ends up much larger then most examples…

None of them overlay ont op of each other?

I feel like there is some other HACs pFront End plugin for some custom CSS or something I am missing?

PS. I am brand new to HA and am just trying to read through this thread (Wow I have never seen a thread so large) to figure out things as I go…

[dimitri.landerloos]

First things first you will need card mod from HACS.

you will also need stack in card from HACS.

from looking at it, that looks like its about it

[Puck301 (Keir)]

OK I just found it literally after writing the post… I was missing the “Card Mod” plugin!

Sorry guys

[Puck301 (Keir)]

Thanks so much for replying… I think this thread is brilliant to learn and get ideas. There are so many people on here that know their stuff.

I am finding it quite an uphill battle trying to learn the syntax for YAML and what I can and can’t do with it all but the imagination of people on here and what they have done is crazy!

[dimitri.landerloos]

You can do some really cool stuff with Card Mod so enjoy that journey as it allows you to modify all cards with CSS styling

to help with that for mushroom cards specifically i made this thread here:

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

but this is not meant to help with the yaml part, just the CSS part

[Puck301 (Keir)]

that is brilliant… I am getting lost trying to find what guides/documenation to read…

Re: YAML, understood! I have JS coding experience and thought I would be able to use that but YAML seems a bit different…

PS you nailed it with the card mod…

Hoping this means I can try and get my person cards laid out properly taking up much less space now

thanks again!!!

[dimitri.landerloos]

Happy to help! you might like the button card by @RomRider then. you can use JS templates in some parts of that card:

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

[Puck301 (Keir)]

@dimitri.landerloos

stack in card

OK this looks brilliant! Thank you again!

[denozord]

Hello! How can I make the gear button be to the right of the mushroom-template-card? Like on the screen below?

Thanks
Current card code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Увлажнитель
    secondary: >-
      {% if states(entity) == 'off' %} 

      Выключено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %

      {% else %}

      Включено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %

      {% endif %} 
    icon: mdi:air-humidifier
    icon_color: |-
      {% if states(entity) == 'off' %} 
        
      {% else %}
        green
      {% endif %} 
    entity: humidifier.deerma_jsq2w_c041_humidifier
    tap_action:
      action: toggle
    multiline_secondary: true
    layout: horizontal
    fill_container: true
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:cog
    tap_action:
      action: call-service
      service: browser_mod.popup
      target: {}
      data:
        dismissable: true
        autoclose: false
        title: Настройка увлажнителя
        content:
          type: custom:stack-in-card
          cards:
            - type: grid
              square: false
              columns: 2
              cards:
                - type: custom:mushroom-entity-card
                  entity: light.deerma_jsq2w_c041_indicator_light
                  name: Световой индикатор
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
                - type: custom:mushroom-entity-card
                  entity: switch.deerma_jsq2w_c041_alarm
                  icon: mdi:alarm-light
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
    fill_container: true
    layout: horizontal

[dimitri.landerloos]

Add mode: horizontal to your stack in card.

You may want to add the card mod that i added to each card too, to make the layout look a bit nicer, but up to you

Code

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Увлажнитель
    secondary: >-
      {% if states(entity) == 'off' %} 
      Выключено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %
      {% else %}
      Включено | Целевая влажность {{ state_attr(entity,
      'humidifier.target_humidity')  }} %
      {% endif %} 
    icon: mdi:air-humidifier
    icon_color: |-
      {% if states(entity) == 'off' %} 
      {% else %}
        green
      {% endif %} 
    entity: humidifier.deerma_jsq2w_c041_humidifier
    tap_action:
      action: toggle
    multiline_secondary: true
    layout: horizontal
    fill_container: true
    card_mod:
      style: |
        ha-card {
          width: max-content;
        }
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: mdi:cog
    tap_action:
      action: call-service
      service: browser_mod.popup
      target: {}
      data:
        dismissable: true
        autoclose: false
        title: Настройка увлажнителя
        content:
          type: custom:stack-in-card
          cards:
            - type: grid
              square: false
              columns: 2
              cards:
                - type: custom:mushroom-entity-card
                  entity: light.deerma_jsq2w_c041_indicator_light
                  name: Световой индикатор
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
                - type: custom:mushroom-entity-card
                  entity: switch.deerma_jsq2w_c041_alarm
                  icon: mdi:alarm-light
                  tap_action:
                    action: toggle
                  double_tap_action:
                    action: none
                  layout: vertical
    fill_container: true
    layout: horizontal
    card_mod:
      style: |
        ha-card {
          width: fit-content;
          right: -90px;
        }

[avigrinberg]

Hi,

I’m trying to use mushroom card with card_mod and few things not working. what I’m doing wrong here why only few things works and few not works.
font size not working
font color not working
icon change not working

THX

type: custom:mushroom-entity-card
entity: switch.garden_lights_l1
name: only_mushroom-entity-card
layout: vertical
fill_container: false
tap_action:
  action: toggle
hold_action:
  action: none
double_tap_action:
  action: none
icon: mdi:lamp
card_mod:
  style: |
    :host {
    color: white;
    text-align: left;
    font-size: 20px;
      --card-mod-icon-color:
      {% if states(config.entity)=='on' %}
         yellow;
         color: red;
      --card-mod-icon: mdi:car;
      {% else %}
        green;
      --card-mod-icon: mdi:lamp;
      {% endif %}
    }

[dimitri.landerloos]

Hi, check out my guide below to find out how to style each element of the mushroom cards with card mod.

Its important with css that you are specific about which element you want to change. Changing things globally with :host will not always work or will sometimes have unintended behaviour.

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …