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

is the Pollenflug Card an Auto Entities Card? Can you share them?

not, but conditional.

type: vertical-stack
cards:
  - type: markdown
    content: >
      <h2><font color= lightgrey><ha-icon
      icon="mdi:flower-pollen-outline"></ha-icon> Pollenflug</font></h2>
    card_mod:
      style: |
        ha-card {
          background: none;
          --ha-card-box-shadow: 0px;
          --ha-card-border-width: 0;
        }
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_ambrosia_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Ambrosia
          entity: sensor.pollenflug_ambrosia_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_ambrosia_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_ambrosia_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_ambrosia_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_ambrosia_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_ambrosia_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_ambrosia_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_beifuss_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Beifuß
          entity: sensor.pollenflug_beifuss_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_beifuss_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_beifuss_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_beifuss_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_beifuss_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_beifuss_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_beifuss_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_birke_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Birke
          entity: sensor.pollenflug_birke_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_birke_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_birke_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_birke_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_birke_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_birke_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_birke_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_erle_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Erle
          entity: sensor.pollenflug_erle_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_erle_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_erle_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_erle_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_erle_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_erle_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_erle_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_esche_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Esche
          entity: sensor.pollenflug_esche_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_esche_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_esche_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_esche_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_esche_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_esche_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_esche_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_graeser_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Gräser
          entity: sensor.pollenflug_graeser_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_graeser_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_graeser_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_graeser_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_graeser_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_graeser_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_graeser_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_hasel_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Hasel
          entity: sensor.pollenflug_hasel_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_hasel_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_hasel_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_hasel_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_hasel_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_hasel_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_hasel_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }
      - type: conditional
        conditions:
          - condition: state
            entity: sensor.pollenflug_roggen_50
            state_not: '0'
        card:
          type: custom:mushroom-entity-card
          name: Roggen
          entity: sensor.pollenflug_roggen_50
          icon_color: grey
          card_mod:
            style: |
              ha-state-icon {
                {% if is_state('sensor.pollenflug_roggen_50', "0") %}
                  --icon-color: #66BB6A !important;
                {% elif is_state('sensor.pollenflug_roggen_50', "0.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_roggen_50', "1") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_roggen_50', "1.5") %}
                  --icon-color: #66BB6A  !important;
                {% elif is_state('sensor.pollenflug_roggen_50', "2") %} 
                  --icon-color: #83BB6A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "3") %} 
                  --icon-color: #A0BB6A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "4") %} 
                  --icon-color: #BDBB6A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "5") %} 
                  --icon-color: #DABB6A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "6") %} 
                  --icon-color: #F7BB6A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "7") %} 
                  --icon-color: #FFA06A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "8") %} 
                  --icon-color: #FF856A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "9") %} 
                  --icon-color: #FF6B6A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "10") %} 
                  --icon-color: #FF506A !important;  
                {% elif is_state('sensor.pollenflug_roggen_50', "11") %} 
                  --icon-color: #FF366A !important;  
                {% endif %};      
               }

i will provide a github-link, because the first page/dashboard has over 1600 lines of code :sweat_smile:

https://github.com/b1ackbyte/HomeAssistant/tree/f0166fa91f9ead7d7030f0a3a52f8b5cdf361de5
Just ask, if i forgot something.

Hello, does anyone have examples of animation of icons for heating, humidification and air conditioning? I’ve been leafing through the forum all day, but I haven’t found any suitable examples. I would appreciate any code example. I found one example on heating, I’ll attach it, maybe it will be useful to someone. :handshake:

type: custom:mushroom-template-card
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
primary: heater
secondary: ''
entity: input_boolean.vkliuchenie_rozetok_kukhnia
tap_action:
  action: toggle
fill_container: true
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: clip 1s linear infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes clip {
        0% {
          clip-path: inset(50% 0 0 0);
        }
        100% {
          clip-path: inset(0 0 0 0);
        }
      }
      .shape {
        {{ '--shape-animation: ping 2s infinite;' if is_state(config.entity, 'on') }}
        transform-origin: 29% 88%;
      }
      @keyframes ping {
        0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
    .: |
      ha-card {
        background: none;
        box-shadow: none;
        margin-left: -0px !important;
        margin-right: 0px !important;
        margin-bottom: 0px !important;
        #width: 75%;
      }

You did find “Part 1” I assume?
Because in there, there are tons of anitmation examples. You can start (approx.) here:

1 Like

Hi!

Is there a way to put text on an action chip card?

Guys, after a long time without any issue…
Some update broken my dashboard.
The space between the chips is too big.

I already tried to adjust “–chip-spacing:” property but no success.

See below how it was before:
Fototeca - 1 de 2

After the update, the space is too big that a second line is being showed :frowning:
Fototeca - 2 de 2

Does someone knows how to fix this space between the icons?

This is the code:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Sala
    icon: mdi:sofa-outline
    layout: hotizontal
    multiline_secondary: false
    fill_container: true
    entity: light.luzes_sala
    tap_action:
      action: navigate
      navigation_path: sala
    hold_action:
      action: none
    double_tap_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.luzes_sala', 'on') %}
        amber
      {% else %}
        blue
      {% endif %}
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0;
        }
    alignment: end
    chips:
      - type: template
        entity: media_player.tv_da_sala
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:television-play
          {% elif state=='off' %}
          mdi:television-off
          {% else %}
          mdi:television-off
          {% endif %}
        tap_action:
          action: none
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
      - type: template
        entity: switch.porta_virtual
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:door-open
          {% elif state=='off' %}
          mdi:door-closed
          {% else %}
          mdi:door
          {% endif %}
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: none
      - type: template
        entity: binary_sensor.janela_da_sala_contact
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:window-open-variant
          {% elif state=='off' %}
          mdi:window-closed-variant
          {% else %}
          mdi:window-closed-variant
          {% endif %}
        tap_action:
          action: none
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
      - type: template
        entity: binary_sensor.pir_da_sala_occupancy
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:motion-sensor
          {% elif state=='off' %}
          mdi:motion-sensor-off
          {% else %}
          mdi:motion-sensor
          {% endif %}
        tap_action:
          action: none
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
      - type: conditional
        conditions:
          - entity: fan.ventilador
            state: 'on'
        chip:
          type: template
          icon_color: blue
          entity: fan.ventilador
          icon: mdi:fan
          tap_action:
            action: toggle
      - type: conditional
        conditions:
          - entity: media_player.echo_show_da_sala
            state: playing
        chip:
          type: template
          icon_color: blue
          entity: media_player.echo_show_da_sala
          icon: mdi:music
          tap_action: none
style: |
  ha-card {
    height: 102px;
  }

1 Like

Hello friends, please tell me, this code contains the animation I need, but when I insert an icon into the code, it starts to rotate along with the animation. Is there any way to stop the icon from rotating but still have the animation around the icon continue to rotate? is this even real?

type: custom:mushroom-template-card
icon: none
primary: Dual
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: spin 1s ease infinite;
        border: 4px solid transparent;
        border-top-color: rgb(var(--rgb-deep-orange));
        border-bottom-color: rgb(var(--rgb-deep-orange));
        --shape-color: none !important;
        --icon-size: 34px;
      }

I have been playing around with the different options you have helped me with.

This last one is the best in terms of supporting different devices/orientations but I much prefer two separate entitities (with a border/gap between - so they look normal in my dashboard).

Overall, I like the following design the most and I think I can build on this concept for a number of my dashboard views.

I would like to develop this idea so that any cell in the grid can have a stack in card and the chips can be aligned to either the cell or the entity card in the cell. Do you think this is possible.

Below is my fav design and yaml.

image

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      grid-template-rows: 75px 75px
      margin: 5px 0px -10px 0px
    cards:
      - type: custom:mushroom-template-card
        primary: Watering Setup
        secondary: |
          Profile: {{ states ('input_select.watering_schedule') }} 
        icon: mdi:sprinkler-variant
        tap_action:
          action: call-service
          service: script.set_watering_schedule
          target: {}
        hold_action:
          action: none
        multiline_secondary: true
        fill_container: false
        double_tap_action:
          action: none
        entity: script.set_watering_schedule
        icon_color: >-
          {% if state_attr ('script.set_watering_schedule', 'last_triggered') +
          timedelta (hours = 24) < now() %} red {% else %} green {% endif %}
      - type: custom:mushroom-entity-card
        entity: input_boolean.watering_smart
        name: Smart Watering
        icon: mdi:toggle-switch
        layout: horizontal
        tap_action:
          action: toggle
        double_tap_action:
          action: none
      - type: custom:mushroom-entity-card
        entity: switch.linktap_tap_front
        name: Front
        fill_container: true
      - type: custom:mushroom-entity-card
        entity: switch.linktap_tap_back
        name: Back
        fill_container: true
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.linktap_tap_front_battery
            icon: mdi:battery-charging
            icon_color: >-
              {% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %}
              red  {% elif states ('sensor.linktap_tap_front_battery') | int(0)
              < 50 %} orange  {% else %} green  {% endif %}
            content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                border: none;
                box-shadow: none;
                 }        
          - type: template
            entity: sensor.linktap_tap_front_signal
            icon: mdi:wifi
            icon_color: >-
              {% if states ('sensor.linktap_tap_front_signal') | int < 30 %}
              red  {% elif states ('sensor.linktap_tap_front_signal') | int < 50
              %} orange  {% else %} green  {% endif %}
            content: '{{ states (''sensor.linktap_tap_front_signal'') }}%'
            tap_action:
              action: more-info
            alignment: justify
            card_mod:
              style: |
                ha-card {
                border: none;
                box-shadow: none;
                 }
        card_mod:
          style: |
            ha-card {
             position: absolute;
             top: 87px;
              left: 170px;
              width: 60px;
             --chip-spacing: -12px;
            --chip-background: none;
               }
            @media screen and (max-width: 400px) {
             ha-card {
             position: absolute;
             top: 87px;
             left: 120px;
              width: 60px;
             --chip-spacing: -12px;
            --chip-background: none;
               } 
               
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.linktap_tap_back_battery
            icon: mdi:battery-charging
            icon_color: >-
              {% if states ('sensor.linktap_tap_back_battery') | int(0) < 30 %}
              red  {% elif states ('sensor.linktap_tap_back_battery') | int(0) <
              50 %} orange  {% else %} green  {% endif %}
            content: '{{ states (''sensor.linktap_tap_back_battery'') }}%'
            tap_action:
              action: more-info
            card_mod:
              style: |
                ha-card {
                border: none;
                box-shadow: none;
                 }        
          - type: template
            entity: sensor.linktap_tap_back_signal
            icon: mdi:wifi
            icon_color: >-
              {% if states ('sensor.linktap_tap_back_signal') | int < 30 %} red 
              {% elif states ('sensor.linktap_tap_back_signal') | int < 50 %}
              orange  {% else %} green  {% endif %}
            content: '{{ states (''sensor.linktap_tap_back_signal'') }}%'
            tap_action:
              action: more-info
            alignment: justify
            card_mod:
              style: |
                ha-card {
                border: none;
                box-shadow: none;
                 }
        card_mod:
          style: |
            ha-card {
             position: absolute;
             top: 87px;
              right: 10px;
              width: 60px;
             --chip-spacing: -12px;
            --chip-background: none;
               }
            @media screen and (max-width: 400px) {
             ha-card {
             position: absolute;
             top: 87px;
             right: 10px;
              width: 60px;
             --chip-spacing: -12px;
            --chip-background: none;
               }
3 Likes

May I ask something. Is there a way to extend the clickable area of “tap_actions” ? Whenever I play with the height of the card I see tap actions has a limited area where we can click and activate the service. Playing with the height causes the bottom part of any card to become unclickable.

I haven’t tested it, but reducing padding may resolve what you are describing.

This is what your card layout looks like

image

Can you give me an example of the card you are working with? With so many different designs, I imagine it will be different based on individual cards.

2 Likes
type: custom:mushroom-template-card
entity: entity.entity
icon: null
tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.secret_main_screen_lights_page
primary: TELEVİZYON
secondary: |
  {{ states('sensor.tv_group_count') }} 
fill_container: false
multiline_secondary: false
layout: vertical
picture: null
card_mod:
  style: |
    ha-card {
      cursor: pointer;
      height: 180px !important;
    }

Ok. This is a simple example. The bottom of the card is not clikable.

Guys someone had a deal with timer bar card over mushrooms style?

I wonder if there is any way to move the timer somewhere in the center or position it to the right? I tried several options for the card mod, but other than changing the text style, nothing else worked.

image

This will increase your tap _action area. Credit goes to @Ildar_Gabdullin for an educating example that I converted to a Mushroom card…

**Please do not like this post.

type: custom:mushroom-template-card
entity: entity.entity
tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.sprinklers_on
primary: TELEVİZYON
secondary: |
  {{ states('sensor.tv_group_count') }} 
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
  style: |
    mushroom-state-item {
            background: green;
            height: 140px;
            padding-left: 100px !important;
            display: flex;
            align-items: center;
            padding-right: 100px !important;
             }
    ha-card {
      cursor: pointer;
      align-items: center;
          }

Hello!!!

Somebody can help out here?

Please post your code to expedite a solution.

Here we go:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Sala
    icon: mdi:sofa-outline
    layout: hotizontal
    multiline_secondary: false
    fill_container: true
    entity: light.luzes_sala
    tap_action:
      action: navigate
      navigation_path: sala
    hold_action:
      action: none
    double_tap_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.luzes_sala', 'on') %}
        amber
      {% else %}
        blue
      {% endif %}
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0;
        }
    alignment: end
    chips:
      - type: template
        entity: media_player.tv_da_sala
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:television-play
          {% elif state=='off' %}
          mdi:television-off
          {% else %}
          mdi:television-off
          {% endif %}
        tap_action:
          action: none
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
      - type: template
        entity: switch.porta_virtual
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:door-open
          {% elif state=='off' %}
          mdi:door-closed
          {% else %}
          mdi:door
          {% endif %}
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
        tap_action:
          action: none
      - type: template
        entity: binary_sensor.janela_da_sala_contact
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:window-open-variant
          {% elif state=='off' %}
          mdi:window-closed-variant
          {% else %}
          mdi:window-closed-variant
          {% endif %}
        tap_action:
          action: none
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
      - type: template
        entity: binary_sensor.pir_da_sala_occupancy
        icon: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          mdi:motion-sensor
          {% elif state=='off' %}
          mdi:motion-sensor-off
          {% else %}
          mdi:motion-sensor
          {% endif %}
        tap_action:
          action: none
        icon_color: |-
          {% set state=states(entity) %}
          {% if state=='on' %}
          blue
          {% elif state=='off' %}
          grey
          {% else %}
          grey
          {% endif %}
      - type: conditional
        conditions:
          - entity: fan.ventilador
            state: 'on'
        chip:
          type: template
          icon_color: blue
          entity: fan.ventilador
          icon: mdi:fan
          tap_action:
            action: toggle
      - type: conditional
        conditions:
          - entity: media_player.echo_show_da_sala
            state: playing
        chip:
          type: template
          icon_color: blue
          entity: media_player.echo_show_da_sala
          icon: mdi:music
          tap_action: none
style: |
  ha-card {
    height: 102px;
  }

You cannot just have style: | That changed several months ago. It must include card_mod:

That will apply to all instances of style: | in this card

Lines 24 -31

  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: -5px;
          }