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

[martinst (Martin)]

Thanks that works. But isn’t it a bug? So I think I have to create it? (Because in other controls there are no problems).

It seems to be that there is another bug:

                    icon_color: >
                      {% if states('sensor.woonkamer_total_covers_closed') == 0 %}
                        disabled
                      {% else %}
                        blue
                      {% endif %}

This doesn’t work. My sensor gives zero as value and in the UI the icon_color is blue.

When I change the code to:

                    icon_color: >
                      {% if states('sensor.woonkamer_total_covers_closed') | int == 0 %}
                        disabled
                      {% else %}
                        blue
                      {% endif %}

So I have added the ‘| int’ part and then it works. But that is already in the template sensor.

[uvjim]

You could try and raise again but this was already raised and closed here: [Bug]: Template chips card cannot return 0 when Jinja templating · Issue #515 · piitaya/lovelace-mushroom · GitHub

RE: your colour. I’m pretty sure states are strings so you would need to cast to int as you did in your working example or compare against '0' in your first example.

[martinst (Martin)]

Okay I didn’t know that it already was reported. For now I will do the hidden character. Everything works now.

Thanks!

[Mosher]

Hey,

could you please share how you did House, Lights, Raptor,… cards?

Thanks

[Mosher]

Good day;
could anyone point me into a way to center the card in the space.
I am using Mushroom template card and want to put multiple cards side-by-side in horizontal stack. But this way each card is aligned to the left.

I use following Card mod adjustments:

    card_mod:
      style: |
        ha-card {
          border-radius: 30px;
          width: 70px;
          --card-primary-font-size: 10px;
        }

[jaku2k (Jakub)]

Hello,
as it’s my first post in this topic I wouuld like to thank you all for creating this amazing project and sharing your ideas. @rhysb I’m really grateful for what you posted - thanks to your work my dashboard looks very modern. Unfortunetly I occured some problem. I hope that someone will manage to help me dealing with them.

1. In the mobile app every card after being touched is being surrounded by a huge rectangle for a while (recording attached below). How could I prevent this? What am I doing wrong? There is no shuch problem in the desktop browser (but it occurs in the mobile one).
   

2. I would like to edit rhys’ room card, so that I could switch specific light entities by pressing an icon displayed at the bottom of the card. I am able to add an interactive icon to that card, but it is being displayed at its right side and I would like it to be positioned on the left. When I add “toogle chip” after alignment: end it interferes with those conditional ones, made by the author. @rhysb could you please tell me how could I add such icon? I’m sending an example in the attachment. I would like the toogle icon to be placed in the place of red dot.
   

Best regards,
Jakub

PS. In the first GIF the mouse is visible only because it was easier for me to stream my phone’s screen to computer than record it locally - but still: it is a smartphone app.

[vschild]

Hello everyone!
I’m trying to remove this outline in this card but havent succeed. Anyone that can help me?
Thanks!!

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.opensprinkler_last_run
        secondary_info: last-changed
        name: Última activación riego
        icon: mdi:sprinkler-variant
  - type: custom:vertical-stack-in-card
    horizontal: true
    cards:
      - square: false
        columns: 2
        type: grid
        cards:
          - type: custom:mushroom-entity-card
            entity: script.activar_riego_10min
            icon: mdi:sprinkler-variant
            name: Activar
            layout: vertical
            secondary_info: none
          - type: custom:mushroom-entity-card
            entity: script.parar_riego
            name: Parar
            icon: mdi:stop-circle-outline
            layout: vertical
            secondary_info: none
  - type: custom:timer-bar-card
    entities:
      - timer.riego

EDIT: Found the solution. Added this to the end of the custom vertical stack in card:

    card_mod:
      style: |
        ha-card {
        border: solid 0px ;
        }

[jaku2k (Jakub)]

Hello,
I’m not sure, but it seems like you’re using the wrong theme. You should use minimalist-desktop or minimalist-mobile.

[jar87 (Jarosław Drewnicki)]

This is mine climate card:

My problem was:

In studio i`m having 2 climates, radiator and AC. I wanted join both into one card and i did it.

The big issue is:

1. im having problem with changing colours of status from AC. When im starting radiator status is changing to red, but when im srtarting AC its not changing to blue:( - Any ideas?

2. I want give names for chips (for example “Humidity” i want to change for other name and i don`t know how i can do this:/ Same thing woth other chips (fire chip and snowflake chip)

3. This is the biggest problem and i dont know if its possible, at right top corner im having values of my climate radiator. I wish to create that thing, when im starting AC then it should appear values of AC, when i`m starting radiator, then should appear radiators values…

Do You have any ideas Guys?

type: custom:stack-in-card
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        style: |
          ha-card {
            padding-bottom: 1px !important;
          }
        primary: Studio
        secondary: |
          Status: {{ state_attr('climate.studio_kaloryfer', 'hvac_action') }}
        icon: |-
          {% set mode = states('climate.studio_kaloryfer') %}
          {% if mode == 'off' %}
          mdi:power
          {% elif mode == 'heat' %}
          mdi:fire
          {% else %}
          mdi:home-thermometer
          {% endif %}
        icon_color: >-
          {% set status = state_attr('climate.studio_kaloryfer','hvac_action')
          %}

          {% if status == 'off' %}

          grey

          {% elif status == 'heating' %}

          red

          {% endif %}
        tap_action: none
      - type: vertical-stack
        cards:
          - type: custom:simple-thermostat
            style: |
              ha-card {
                --st-spacing: px;
              }
              ha-card .current--value {
                color: #ffffff;
              }
              header {
                margin-bottom: 12px !important;
                padding-bottom: 0px !important;
              }
              ha-card .thermostat-trigger { 
                color: #9e9e9e;
              }
            entity: climate.studio_kaloryfer
            header:
              name: false
              icon: false
            decimals: '1'
            fallback: 'Off'
            hide:
              temperature: true
              state: true
            layout:
              mode:
                names: false
                icons: false
                headings: false
              step: row
            step_size: '0.5'
            control:
              hvac:
                'off': false
                heat: false
                cool: false
                heat_cool: false
                auto: false
    chips: null
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
      }
    alignment: justify
    chips:
      - type: template
        content: '{{state_attr(entity, ''temperature'')}} °C'
        entity: climate.studio_kaloryfer
        icon: mdi:fire
        tap_action:
          action: more-info
        icon_color: >-
          {% set status = state_attr('climate.studio_kaloryfer','hvac_action')
          %}

          {% if status == 'off' %}

          grey

          {% elif status == 'heating' %}

          red

          {% endif %}
      - type: template
        content: '{{state_attr(entity, ''temperature'')}} °C'
        entity: climate.midea_ac
        icon: mdi:snowflake
        tap_action:
          action: more-info
        icon_color: |-
          {% set status = state_attr('climate.midea_ac','hvac_modes') 
          %}

          {% if status == 'off' %}

          grey

          {% elif status == 'cool' %}

          blue

          {% endif %}
      - type: template
        double_tap_action:
          action: none
        content: '{{ states(entity) }}% Humidity'
        entity: sensor.studio_czujnik_temperatury_humidity
        icon: mdi:water
        icon_color: blue
        tap_action:
          action: none
        hold_action:
          action: none
  - type: custom:simple-thermostat
    style: |
      ha-card {
        --st-font-size-toggle-label: 6px
        --st-spacing: 0px;
        --st-default-spacing: 0px;
        --st-mode-background: #262626;
        margin-left: 12px;
        margin-right: 12px;
      }
      ha-card .mode-item.active.off { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item.active.cool { 
        background: #1d3447;
        color: #2196f3;
      }
      ha-card .mode-item.active.heat { 
        background: #472421;
        color: #f44336;
      }
      ha-card .mode-item.active.heat_cool { 
        background: #493516;
        color: #ff9800;
      }
      ha-card .mode-item.active { 
        background: #263926;
        color: #4caf50;
      }
      ha-card .mode-item.active:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item:hover { 
        background: #363636;
        color: #9e9e9e;
      }
      ha-card .mode-item {
        --st-spacing: 10px;
        border-radius: 10px;
      }
      ha-card .modes {
        grid-gap: 12px
      }
    entity: climate.studio_kaloryfer
    header: false
    setpoints: false
    hide:
      temperature: true
      state: true
    layout:
      mode:
        headings: false
        icons: true
        names: false
      step: row
    control:
      hvac:
        'off':
          name: Power
        heat:
          name: Heat
        auto: false
  - type: grid
    square: false
    columns: 3
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.studio_czujnik_temperatury_temperature
        primary_info: state
        secondary_info: name
        name: W studiu
        icon_color: green
      - type: custom:mushroom-entity-card
        entity: sensor.temperatura_na_zewnatrz_temperature
        primary_info: state
        secondary_info: name
        name: Na zewnątrz
        icon_color: blue
        icon: mdi:home-thermometer
      - type: custom:simple-thermostat
        style: |
          ha-card {
            --st-font-size-toggle-label: 6px
            --st-spacing: 0px;
            --st-default-spacing: 1.3px;
            --st-mode-background: #262626;
            margin-right: 12px;
          }
          ha-card .mode-item.active.off { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item.active:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item:hover { 
            background: #363636;
            color: #9e9e9e;
          }
          ha-card .mode-item {
            --st-spacing: 6px;
            border-radius: 10px;
          }
          ha-card .modes {
            grid-gap: 12px
          }
        entity: climate.midea_ac
        header: false
        setpoints: false
        hide:
          temperature: true
          state: true
        layout:
          mode:
            headings: false
            icons: true
            names: false
          step: row
        control:
          hvac:
            'off': true
            heat: false
            cool: true
            heat_cool: false
            fan_only: false
            dry: false

[tischer.s (Sebastian Tischer)]

Hi team,
at first, amazing what you are doing in this thread - I love how everybody helps out

Now I need your help - I want to create a responsive 3 column dashboard, where:

• Full width is used
• iPad landscape all 3 columns beside each other are used
• iPhone view the columns got stacked - c1, c2, c3 - all below each other

What is the best way to do that? Thanks team

[Haningback]

Id say:
New dashboard → ‘Panel type’ (this way it expands for the whole page) → horizontal stack with 3 vertical stacks ( c1, 2, 3) inside?

Edit: didn’t see your 3rd point, so this wouldn’t work …

[nappyjim (Jim)]

I know my else statement is wrong, but how do I make it right? I want the color to change based on if the state is reading over 200.0 or under 200.0

  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Watts
        secondary: '{{ states(''sensor.outlet_garage_heater_watts'') }}'
        icon: mdi:electron-framework
        entity: sensor.outlet_garage_heater_watts
        picture: ''
        icon_color: |-
          {% if is_state("sensor.outlet_garage_heater_watts", < 200.0) %}
                red
          {% elif is_state("sensor.outlet_garage_heater_watts", > 200.0) %}
                green

          {% endif %}

[Kollisionskurs]

@nappyjim

{% if is_state("sensor.outlet_garage_heater_watts", < 200.0) %}
                red
          {% elif is_state("sensor.outlet_garage_heater_watts", > 200.0) %}
                green

          {% endif %}

try the following please

{% set watts = states("sensor.outlet_garage_heater_watts") | float %}    
{% if watts > 200 %} green    
{% else %} red    
{% endif %} 

[adijk74 (Alle D.)]

This works for me

card_mod:
  style: |
    ha-card {
      border-radius: 30px;
      width: 70px;
      margin-left: auto;
      margin-right: auto;
      --card-primary-font-size: 10px;
    }

[nappyjim (Jim)]

@Kollisionskurs

try the following please

{% set watts = states("sensor.outlet_garage_heater_watts") | float %}    
{% if watts > 200 %} green    
{% else %} red    
{% endif %} 

Worked perfectly. Thank you!

[carpenter01 (Ur Red Chemist)]

Dang that looks great! Question, how did you made those buttons (2nd row) in that particular shape?

[Pepeanuts]

is it normal if the card not reduce when nothing is playing ?

[adijk74 (Alle D.)]

I use this

card_mod:
  style: |
    ha-card { 
      background: var(--card-background-color);
      width: 66px;
      border-radius: 30px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 2px;
    }

[ArenaCloser]

@tischer.s

responsive 3 column dashboard

You can do this with layout card, specifically the custom:grid-layout.

For the page layout you have to select ‘Grid’ and then add some code below, for example:

grid-template-columns: 0.5em 22em 22em 22em 0.5em
grid-template-rows: 9em auto auto
grid-gap: 0.7em
grid-template-areas: |
  "welcome welcome welcome . ."
  ". left1 center1 right1 ."
  ". left2 center2 right2 ."
mediaquery:
  '(max-width: 400px)':
    grid-template-columns: 3% 94% 3%
    grid-template-rows: auto
    grid-gap: 0em
    grid-template-areas: |
      ". welcome ."
      ". left1 ."
      ". left2 ."
      ". center1 ."
      ". center2 ."
      ". right1 ."
      ". right2 ."

This code creates 3 main columns for tablets/desktop, which you can fill with vertical stacks. For phones (less than 400px wide) it stacks the columns instead. All with a certain column width and row height.

[henalmeida1978]

Hello guys, have my dashboard almost with mushroom cards and it is lovely.

Is there anyway to have a light entity with a timer? Basically when the light is on it goes off after x time and a timer to see how may time is remaining?

thank you