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

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

By default the cover entity looks like this:
image

But I would like something like this:

image

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.

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.

1 Like

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)

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?

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!

image

1 Like

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?

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

thanks man

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

3 Likes


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?

3 Likes

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

Show us your YAML mode configuration.


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

Bild

2 Likes

Danke!

Works perfectly!

Adding a gap card before the nav bar will make your page scrollable

type: custom:gap-card
height: 1000

@rhysb Could you help me out with the cardmod?
unable to get the “animation” to work for the dishwasher icon

                      - type: custom:mushroom-template-card
                        primary: kitchen
                        secondary: "{{ states('sensor.smoke_detector_air_temperature') }}°C"
                        icon: mdi:fridge
                        tap_action:
                          action: kitchen
                          navigation_path: kitchen
                        icon_color: |
                          {% if is_state('light.kitchen', 'on') %}
                            green
                          {% else %}
                            disabled
                          {% endif %}
                        style: |
                          ha-card {
                          margin-bottom: -30px;
                          box-shadow: none;
                          }
                      - show_name: false
                        show_icon: true
                        show_state: false
                        theme: mushroom_room
                        type: glance
                        entities:
                          - entity: light.kitchen
                            icon: mdi:lightbulb-group
                            tap_action:
                              action: toggle
                          - entity: light.kitchen_table
                            tap_action:
                              action: toggle
                          - entity: input_select.dishwasher_status
                            style: |
                              ha-icon {
                              {{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('input_select.diswasher_status', 'On') }}
                              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% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
                              }
                        state_color: true
                        style: |
                          ha-card {
                          margin-top: -20px;
                          margin-bottom: -20px;
                          box-shadow: none;
                          background: rgba(0, 0, 0, 0);
                          }

Hi everybody,

I’ve been taking alot of knowledge and code from this amazing thread, people such as @rhysb and @piitaya have, inherently, changed my whole lovelace. Aswell as @Tinkerer on Discord, who has always pointed me in the right direction to figure out how to get this project going. Since im not a programmer myself, learning and getting skilled at this takes a bit longer for me. Nevertheless i would love to contribute my two cents by sharing something that i’ve been working on. Inspired by @benm7’s card.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
  - square: false
    columns: 2
    type: grid
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.processor_use_percent
            name: Processor
            icon_color: green
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                }
            double_tap_action:
              action: none
            hold_action:
              action: none
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Hardware monitor
                  content:
                    type: horizontal-stack
                    cards:
                      - type: custom:vertical-stack-in-card
                        cards:
                          - type: custom:mushroom-template-card
                            primary: CPU use
                            secondary: |
                              {{ states('sensor.processor_use_percent') }}%
                            icon: mdi:cpu-64-bit
                            icon_color: '#2eb9ff'
                            tap_action:
                              action: more-info
                              card_mod:
                                style: |
                                  ha-card {
                                  background: none;
                                  --ha-card-border-width: 0px
                          - type: custom:layout-card
                            layout_type: null
                            layout:
                              width: 250
                              max_cols: 1
                              height: auto
                              padding: 0px
                              card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
                              card_mod:
                                style: |
                                  ha-card {
                                  background: none;
                                  --ha-card-border-width: 0px
                                    background: none;
                                    box-shadow: none;
                                  }
                            cards:
                              - type: custom:apexcharts-card
                                apex_config:
                                  fill:
                                    type: gradient
                                    gradient:
                                      type: horizontal
                                      shadeIntensity: 0.1
                                      inverseColors: false
                                      opacityFrom: 0.5
                                      opacityTo: 1
                                      stops: 5
                                graph_span: 1d
                                header:
                                  show: true
                                series:
                                  - entity: sensor.processor_use_percent
                                    name: CPU Load
                                    curve: smooth
                                    color: '#2eb9ff'
                                    stroke_width: 2
                                    opacity: 2
                                    group_by:
                                      duration: 1h
                                      func: max
                                card_mod:
                                  style: |
                                    ha-card {
                                    --ha-card-border-width: 0px
          - type: custom:mushroom-entity-card
            entity: sensor.memory_use_percent
            name: Memory
            icon_color: orange
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                }
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Hardware monitor
                  content:
                    type: horizontal-stack
                    cards:
                      - type: custom:vertical-stack-in-card
                        cards:
                          - type: custom:mushroom-template-card
                            primary: Memory use
                            secondary: |
                              {{ states('sensor.memory_use_percent') }}%
                            icon: mdi:memory
                            icon_color: orange
                            card_mod:
                              style: |
                                ha-card {
                                  background: none;
                                  box-shadow: none;
                                }
                          - type: custom:layout-card
                            layout_type: null
                            layout:
                              width: 250
                              max_cols: 1
                              height: auto
                              padding: 0px
                              card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
                              card_mod:
                                style: |
                                  ha-card {
                                  background: none;
                                  --ha-card-border-width: 0px
                            cards:
                              - type: custom:apexcharts-card
                                apex_config:
                                  fill:
                                    type: gradient
                                    gradient:
                                      type: horizontal
                                      shadeIntensity: 0.1
                                      inverseColors: false
                                      opacityFrom: 0.5
                                      opacityTo: 1
                                      stops: 5
                                graph_span: 1d
                                header:
                                  show: true
                                series:
                                  - entity: sensor.memory_use_percent
                                    name: CPU Load
                                    curve: smooth
                                    color: orange
                                    stroke_width: 2
                                    opacity: 2
                                    group_by:
                                      duration: 1h
                                      func: max
                                card_mod:
                                  style: |
                                    ha-card {
                                    --ha-card-border-width: 0px
                                    }
          - type: custom:mushroom-entity-card
            entity: sensor.processor_temperature
            name: Temperature
            icon_color: red
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                }
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Hardware monitor
                  content:
                    type: horizontal-stack
                    cards:
                      - type: custom:vertical-stack-in-card
                        cards:
                          - type: custom:mushroom-template-card
                            primary: CPU temperature
                            secondary: |
                              {{ states('sensor.processor_temperature') }}°C
                            icon: mdi:thermometer
                            icon_color: red
                            card_mod:
                              style: |
                                ha-card {
                                background: none;
                                --ha-card-border-width: 0px
                          - type: custom:layout-card
                            layout_type: null
                            layout:
                              width: 250
                              max_cols: 1
                              height: auto
                              padding: 0px
                              card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
                              card_mod:
                                style: |
                                  ha-card {
                                  background: none;
                                  --ha-card-border-width: 0px
                            cards:
                              - type: custom:apexcharts-card
                                experimental:
                                  color_threshold: true
                                apex_config:
                                  fill:
                                    type: gradient
                                    gradient:
                                      type: horizontal
                                      shadeIntensity: 0.5
                                      inverseColors: false
                                      opacityFrom: 0.5
                                      opacityTo: 1
                                      stops: 5
                                graph_span: 1d
                                header:
                                  show: true
                                series:
                                  - entity: sensor.processor_temperature
                                    name: CPU Temperature
                                    curve: smooth
                                    stroke_width: 2
                                    opacity: 2
                                    color_threshold:
                                      - value: 35
                                        color: '#ade8f4'
                                      - value: 45
                                        color: orange
                                      - value: 55
                                        color: orangered
                                      - value: 65
                                        color: red
                                    group_by:
                                      duration: 1h
                                      func: max
                                card_mod:
                                  style: |
                                    ha-card {
                                    --ha-card-border-width: 0px
                                    }
      - type: custom:apexcharts-card
        chart_type: donut
        header:
          show: false
          floating: true
          show_states: true
          colorize_states: false
        apex_config:
          title:
            floating: false
            align: center
            style:
              fontSize: 20px
              fontWeight: normal
          chart:
            offsetY: 0
            height: 230px
          legend:
            show: false
            position: bottom
        series:
          - entity: sensor.sensor_storage_capacity_free
            name: Free
            color: '#00b4d8'
          - entity: sensor.sensor_storage_capacity_used
            name: Used
            color: '#ade8f4'
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
            }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: |2-
                    {%- set up = now().timestamp()-as_timestamp(states('sensor.uptime')) %}

                    {%- macro phrase(name,divisor,mod=None) %}
                      {%- set value = ((up//divisor) % (mod if mod else divisor))|int %}
                      {%- set end = 's' if value > 1 else '' %}
                      {{- '{} {}{}'.format(value,name,end) if value|int > 0 else ''}}
                    {%- endmacro %}

                    {%- set values = [phrase('week',60*60*24*7),
                                      phrase('day',60*60*24,7),
                                      phrase('hour',60*60,24),
                                      phrase('min',60),
                                      phrase('sec',1,60)]
                                      |select('!=','')|list %}
                    {{values[:-1]|join(', ') ~ ' and ' ~ values[-1] if values|length > 1 else
                      values|first}}
        icon: mdi:home-assistant
        icon_color: blue
      - type: template
        content: |2-
                    {%- set up = now().timestamp()-as_timestamp(states('sensor.last_boot')) %}

                    {%- macro phrase(name,divisor,mod=None) %}
                      {%- set value = ((up//divisor) % (mod if mod else divisor))|int %}
                      {%- set end = 's' if value > 1 else '' %}
                      {{- '{} {}{}'.format(value,name,end) if value|int > 0 else ''}}
                    {%- endmacro %}

                    {%- set values = [phrase('week',60*60*24*7),
                                      phrase('day',60*60*24,7),
                                      phrase('hour',60*60,24),
                                      phrase('min',60),
                                      phrase('sec',1,60)]
                                      |select('!=','')|list %}
                    {{values[:-1]|join(', ') ~ ' and ' ~ values[-1] if values|length > 1 else
                      values|first}}
        icon: mdi:nas
        icon_color: '#70e000'
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
    alignment: center

18 Likes

Hi,

I made a Mushrrom person cards getting many inspiration from this threat. Only think looks not very good is the icon color of the badge. Not the badge color (here green), this is fine, the white icon could seen not vey good so I try to make it grey or black but I do not get it with card_mod. Maybe someone have a hint for me:

Screen_20221119-133914

...
          - type: custom:mushroom-template-card
            card_mod:
              style: |
                ha-card {
                  --font-size: 0.5em;
                  --icon-size: 5em;        
                  --badge-icon-size: 1.15em;
                  --badge-size: 1.15em;
                  --spacing: none;
                  --font-weight: normal;
                }
            fill_container: true
            entity: person.steff
            layout: vertical
            picture: /local/pictures/Emojisteff.png
            primary: '{{- states(''sensor.tmp_person_zonestatus_steff'') -}}'
            secondary: >-
              {{- "LastSeen: " -}} {{-
              states('sensor.tmp_person_lastseen_steff') -}}
            badge_icon: '{{- state_attr(''sensor.tmp_person_zonestatus_steff'',''icon'') -}}'
            badge_color: >-
              {% if is_state('sensor.tmp_person_zonestatus_steff','Home') %}
                green
              {% elif
              is_state('sensor.tmp_person_zonestatus_steff','Unbekannt') %}
                red
              {% else %}
                orange
              {% endif %}
            tap_action:
              action: more-info
...

Thanks, Steffen

10 Likes

How do i display the full name?
image

hallo nice cards can you share your code pleas ?

@rhysb how we can add the animations on a chip card instead?