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

[josuabarron]

@rhysb

type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''headline'') }}'
secondary: '{{ state_attr(entity, ''description'') }}'
icon: mdi:alert-circle
entity: binary_sensor.warning_blaubeuren_stadt_1
multiline_secondary: true
icon_color: white
card_mod:
  style: 
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;;
      }
      
      @keyframes ping {
        0% { box-shadow: 0 0 0 0 rgba(var(--rgb-white), 0.7); }
        100% { box-shadow: 0 0 5px 15px transparent; }
      }
      @keyframes blink {
        100% {opacity: 0;}
      }
    .: |
      ha-card {
        {% if state_attr(config.entity, 'severity') == 'Severe') %} 
          background: red;
          --primary-text-color: AliceBlue;
          --secondary-text-color: white
        {% endif %}
      } 

Thank you so much! It worked perfectly.

[KyleBrown0221]

Looking at the new state home proposed default layout, I loved the nav bar at the bottom of the screen for easier navigation.

Any idea on how to approach a static nav bar at the bottom of the screen? Especially useful for quick and easy mobile navigation? Can it be done with this theme or is that a larger HACS integration needed?

r/homeassistant - Future prototype of Home Assistant

[berkans (Berkan Sezer)]

it is not finished yet. I will when its complete.

[class (Bjarki)]

Greetings to you all. I have been to figure out how to make this card work.

with my netatmo climate ratiators, but no luck i get no blinking ratiator icon.
here is my template code, what am i doing wrong here? thanks in advanced.

- type: template
        entity: climate.living_room
        content_info: none
        use_light_color: false
        card_mod: null
        icon: |2-
              {% if is_state_attr("climate.living_room", "hvac_action", "heating") %}
                red
              {% if state=='heating' %}
                mdi:radiator
              {% elif state=='idle' %}
               mdi:radiator-disabled
              {% endif %}
        icon_color: |2-
              {% if is_state_attr("climate.living_room", "hvac_action", "heating") %}
              {% if state=='heating' %}
              red
              {% elif state=='idle' %}
              black
              {% endif %}       
        style: |
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          ha-card {
            box-shadow: 0px 0px;
            animation: rotation linear infinite;
            {% if states('climate.living_room') == 'heating' %}
             animation-duration: 3s;
            {%- else -%}
            {%- endif %}
            template
    alignment: center

[SpookyAwol]

GitHub - thomasloven/lovelace-state-switch: 🔹Dynamically replace lovelace...

[theandouz]

Its possible to create something similar but its limited to your dashboard and in order for the bar to stick to the bottom screen the dashboard page needs to be longer than what’s visible (ie. scrollable)

Sticky Nav Bar

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: Home
    icon: mdi:home
    tap_action:
      action: navigate
      navigation_path: home
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
  - type: custom:mushroom-template-card
    primary: Media
    icon: mdi:play-box-multiple-outline
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
            --shape-color: none;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
  - type: custom:mushroom-template-card
    primary: Energy
    icon: mdi:lightning-bolt-outline
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
            --shape-color: none;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
  - type: custom:mushroom-template-card
    primary: Map
    icon: mdi:map-outline
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          .shape {
            width: 66px !important;
            height: 36px !important;
            --shape-color: none;
          }
        .: |
          ha-card {    
            background: none;
          }
          :host {
            --mush-icon-border-radius: 16px;
          }
card_mod:
  style: |
    :host {
      z-index: 999;
      position: sticky;
      position: -webkit-sticky;
      bottom: 0;
    }
    ha-card {    
      background: rgb(30,30,30);
      padding-bottom: 15px;
      margin: 0px -8px -10px -8px;
      border-radius: 0px;
    }

[kurtvdpoel]

Thank you.

[kurtvdpoel]

I have this media player card with buttons to select radio stations, everything works great.
How can I set the volume to 10% when I press one of the buttons?

square: false
columns: 1
type: grid
cards:
  - type: custom:vertical-stack-in-card
    cards:
      - type: grid
        square: false
        columns: 1
        cards:
          - type: custom:mushroom-media-player-card
            entity: media_player.living_room
            use_media_info: true
            media_controls:
              - play_pause_stop
              - previous
              - next
            collapsible_controls: true
            volume_controls:
              - volume_set
            show_volume_level: false
            fill_container: false
            icon: mdi:music
            card_mod:
              style: |
                ha-card {
                  {% if not is_state(config.entity, 'off') %}
                    background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    position: relative;
                    background-blend-mode: overlay;
                    background-color: rgba(var(--rgb-card-background-color),0.5);
                  {% endif %}
                  #--icon-symbol-size: 32px;
                  #--icon-size: 64px;
                }
      - type: grid
        square: false
        columns: 4
        cards:
          - type: custom:mushroom-template-card
            primary: Topradio
            secondary: ''
            icon: mdi:music
            tap_action:
              action: call-service
              service: media_player.select_source
              data:
                source: TOPradio
              target:
                device_id: f68de1583e7b807342d53504d0dbe200
            layout: vertical
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  --icon-symbol-size: 32px;
                  --icon-size: 64px;
                }
          - type: custom:mushroom-template-card
            primary: MNM
            secondary: ''
            icon: mdi:music
            tap_action:
              action: call-service
              service: media_player.select_source
              data:
                source: VRT MNM
              target:
                device_id: f68de1583e7b807342d53504d0dbe200
            layout: vertical
            hold_action:
              action: none
            double_tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  --icon-symbol-size: 32px;
                  --icon-size: 64px;
                }

Kind regards
Kurt

[carlos.vroque]

I’m looking for help, is there any way to enable multiple rows for buttons?

By default the cover entity looks like this:

But I would like something like this:

The best I managed is using two cards but the borders don’t help much. I’d like to use multiple rows for media players and lights too.

[GoodyGizmos]

I would use stack-in-cards. That’s what I used in the remote I’ll link to in my next post asking a related question.

[GoodyGizmos]

What method do you all use to insert transparent space when you’re using Mushroom Cards in combination with stack-in-card, vertical-stack, horizontal-stack, and grid cards?

For context…
Spacer Card · Discussion #783 · piitaya/lovelace-mushroom (github.com)

[Mariusthvdb (Marius)]

looking for C&P version of the ‘open-in-external’ for a link to a subview, I can only find this:

tooltip: 🔗 Summary

its ok-ish, but id rather have the material external-link icon.
Anyone know where to find that?

[carlos.vroque]

Thanks, I was able to get the card I wanted!
Sadly I can’t use auto entities in combination with two mushroom cards AND the stack-in so it’ll take some extra work, but works!

[tylas13]

Hi all -

Hopefully a quick question, I am trying to implement a new Mushroom Chip card to display my next Alexa Alarm (sensor.bedroom_next_alarm) - but I can’t get it to show the actual time/date. It only shows how many hours until the alarm. On a regular entity card it does show the alarm time and date.

Is there a way to convert this over on the chip card?

[Specularx]

Install UI Lovelace Minimalist and Button card.
It works for me after the installation

[Jarne_Roussard]

thanks man

[pedolsky]

Mushroom v2.4 is out with a cute new feature:

Release v2.4.0 · piitaya/lovelace-mushroom

[KyleBrown0221]

90% done. Exactly what I was looking for! Only problem, as you said the bar doesn’t stick to to the bottom (1st screenshot). Wish we could find a workaround for that?

[pedolsky]

Installing UI Lovelace Minimalist and Button card instead is a bit of over-engineering

Show us your YAML mode configuration.

[pedolsky]

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.echo_show_next_alarm
  - type: template
    entity: sensor.echo_show_next_alarm
    content: |
      {% set next = as_timestamp(states(entity), 0) |timestamp_custom("%d.%m.%Y,
      %H:%M Uhr", True, now() ) %}
      {% if states(entity) != 'unavailable' %}{{ next }}
      {% else %}Kein Wecker gestellt {% endif %}
    icon: '{{ state_attr(entity, "icon") }}'

results in