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

[rayte (Raymond)]

can i align my template card to be centered?

type: conditional
conditions:
  - entity: binary_sensor.uptimekuma_cloudflare
    state: 'on'
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-template-card
      primary: '{{ states.sensor.upload_speed.state|round|int}} Mbps'
      secondary: Upload
      icon: mdi:progress-upload
      entity: sensor.upload_speed
      icon_color: purple
      tap_action:
        action: more-info
      fill_container: true
      layout: horizontal
      hold_action:
        action: navigate
        navigation_path: /lovelace-admin/mi-wifi
    - type: custom:mushroom-template-card
      primary: '{{ states.sensor.download_speed.state|round|int }} Mbps'
      secondary: Download
      icon: mdi:progress-download
      entity: sensor.download_speed
      icon_color: cyan
      tap_action:
        action: more-info
      hold_action:
        action: navigate
        navigation_path: /lovelace-admin/download
      fill_container: false

[weppa]

Thanks mate. The var(–mush-rgb-indigo, 63, 81, 181) resolved the progress bar issue however the --secondary-background-color suggestion did the following

Before:

background: url( '{{ state_attr("media_player.plex_plex_for_apple_tv_apple_tv", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);

After:

background: url('{{ state_attr("media_player.plex_plex_for_apple_tv_apple_tv", "entity_picture") }}'), linear-gradient(to left, transparent, var(--secondary-background-color) 50%);

[rhysb (Rhys)]

Hang on, are you in dark mode or light mode? In light mode the text should be black not white .
Try using default theme if you are not already.

This is the difference I see with using --secondary-background-color. It’s subtle but top is --card-background-color and bottom is --secondary-background-color.

[rhysb (Rhys)]

Do you mean like this?

Mushroom Card Centered:

type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
  style: |
    mushroom-card {
      margin: auto;
    }

[rayte (Raymond)]

yes it was, thanks

[Faecon (Jo)]

I have an icon that looks like a light. Is it possible to let it blink (icon shown and gone all the time) when a condition of a sensor is active ?

[albaras (Alberto)]

Thanks!

I don’t fully understand this, but you’ve given me the idea to create two sensors, which is all I need. One for the weekday and other for the month.

- platform: template
  sensors:
    diadelasemana_actual:
      friendly_name: "Día de la semana"
      icon_template: mdi:calendar
      value_template: >
        {{ ['lunes','martes','miercoles','jueves','viernes','sabado','domingo'][now().weekday()] }}
        
- platform: template
  sensors:
    mes_actual:
      friendly_name: "Mes actual"
      icon_template: mdi:calendar
      value_template: >
        {{ ['enero','febrero','marzo','abril','mayo','junio','julio','julio','agosto','septiembre','octubre','noviembre','diciembre'][now().month-1] }}

And finally in the card:

content: >-
          {{ states('sensor.diadelasemana_actual') | capitalize}}, {{
          now().strftime("%d") }} de {{ states('sensor.mes_actual')}}

[0tto0o]

When I recreate your media player the volume controls don’t work for me, when I click the volume button the standard buttons do disapear, but I don’t get the volume bar in this place, it is just empty. Does this require a Node Red flow?

[wgumaa (Waleed)]

Wondering if I can get some help. I am trying to create a custom card that changes colour based on state for my electric car charging.

type: custom:mushroom-template-card
primary: ''
secondary: Charge Power
icon: |-
  {% set state=states(entity) %}
  {% if state=='0.0' %}
  mdi:flash-off
  {% else %}
  mdi:flash
  {% endif %}
icon_color: |-
  {% set state=states(entity) %}
  {% if state=='0.0' %}
  grey
  {% elif state>'0.1' %}
  green
  {% endif %}
entity: sensor.sawa_id5_gtx_charge_rate

This is my code. When the state is 0 ie not charging it should be grey. If the consumption goes above 0.1 it should turn green.

What i would like to show is the rate of charge in KW from the entity in the primary information.

This is the information from the charging entity.
Any help would be appreciated.

[pabla]

Trying to think of a way to have a chip on the top of my page that acts as a drop down menu when clicked so I can navigate between pages without having to go back to my home page. Any thoughts on how to do that?

[Dibbler (Thomas Bail)]

I am still a beginner, but if i got it right the staes(entity) gives a string. If you compare this with a float you will get no result try

{% set state=states(entity) | float %}

[wgumaa (Waleed)]

@Dibbler

I got it working thanks!

{{(states(entity))}} KW

[vaemarr]

Hi all,

Does anyone know if its possible to do a mushroom template card with the button/slider from a mushroom number card? I would like the custom benefits of a template while having the number buttons.

[Lunkobelix]

Do you also know how to transform an icon in a Mushroom card?

I can transform the entire card (with card_mod) like below but not only the icon:

transform: rotate(90deg);

[Faecon (Jo)]

- type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: binary_sensor.bureau_bewegingsmelder_occupancy
            content_info: none
            use_light_color: false
            card_mod: null
            tap_action:
              !include alarm.yaml    
            icon: |2-
                  {% set state=states('binary_sensor.bureau_bewegingsmelder_occupancy') %}
                  {% if state=='on' %}
                  mdi:bell-outline
                  {% elif state=='off' %}
                  show_icon: false
                  {% endif %}
            icon_color: |2-
                  {% set state=states('binary_sensor.bureau_bewegingsmelder_occupancy') %}
                  {% if state=='on' %}
                  red
                  {% elif state=='off' %}
                  grey
                  {% endif %}
            style: |
              ha-card {
                {% if states('binary_sensor.bureau_bewegingsmelder_occupancy') == 'on' %}
                animation: blink 0.4s linear infinite;
                }
                @keyframes blink {
                  50% {opacity: 0;}
                  }
                {%- else -%}
                box-shadow: 0px 0px;
                {%- endif %}
              ha-card {
                box-shadow: 0px 0px;

So, the icon bell is blinking when some entity is 1. But when there are no alarms, i want the button gone. How do I do that ?

[tokeskristof]

Hey, I have a template card where the primary sensor state is too long (not fit) so I need to wrap it. With the following code everything is ok in browser but not in the homeassistant app or mobile browser (android). Is there any other option what can fix this issue?

  type: custom:mushroom-template-card
  primary: '{{states(''sensor.idokep_mai_idojaras'')}}'
  secondary: '{{states(''sensor.idokep_mit_vegyek_fel'')}}'
  card_mod:
    style:
      mushroom-state-info$: |
        .primary {
         white-space: normal;
        }
      .: |
        mushroom-state-item {
          margin-bottom: 0px;
        } 
        ha-card {
        background: transparent !important;
        border: none;  
        }

[Jimmy1974 (James)]

Hey All,

Anyone have a good looking Mushroom input select?

[moskovskiy82]

Is there an option to set the width of the mushroom card? Want to utilise the header to show the temp and humidity but with horizontal-stack they take all the available space as shown. I know i can use a template card but that way i won’t be able to access the history graphs. Any suggestions are welcomed

[Faecon (Jo)]

found it already

[Arroma]

Hello, sorry for the question, I’m learning!
I modified my mushroom template card with card_mod and using ha-card.
I would like to integrate some icon animation with ha-icon, but I don’t understand how to write the code.
If I use mushroom-shape-icon$: then the ha-card part is not processed

Here is my current code:

card_mod:
  style: |
    ha-card{box-shadow:none;border-radius:25px;border-width:0px;}
    {%if is_state('switch.asciugatrice_pow','on') or is_state('switch.tasmota_2','on')%}
    ha-card{background-color:#79a63d;--icon-border-radius:12px;--primary-text-color:black;--secondary-text-color:#242424;}
    {%else%}{%endif%}
    {%if is_state('switch.asciugatrice_pow','off') and is_state('switch.tasmota_2','off') and is_state('switch.riscaldamento_2','on')%}
    ha-card{background-color:#b07248;--primary-text-color:black;--secondary-text-color:#242424;}
    {%else%}{%endif%}
    ha-card:active{transform:scale(0.92);transition:0ms;border-radius:10px;background:rgba(var(--rgb-disabled),0.3);}

EDIT
For those who have my same problem and are not competent (just like me), I solved it temporarily using custom:stack-in-card

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    ...
    card_mod:
      style:
        mushroom-shape-icon$: |
        ...
card_mod:
  style: |
    ha-card {
    }

EDIT 2
But I don’t solve the problem with the mushroom-template-cards with the modified icon, like the one in the attached photo.
I modified the icon with ha-card and I can’t keep that code if I want to put animation, even using stack-in-card.

This is the code I made to get it like this, how can I add animations to it?

card_mod:
  style: |
    ha-card {
    box-shadow: none;
      background: rgba(0,0,0,0);
      --icon-size: 60px;
      {% if is_state('light.luce_ingresso_light', 'on') %}
      --icon-border-radius: 15px;
      {% else %}
      --icon-border-radius: 100px;
      {% endif %}
    }