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

[mase]

iirc you could install any theme and add this to it:

  card-mod-root: |
    app-toolbar {
      display: none;
    }

[Lunkobelix]

This works for me when opening/closing the garage door:

type: custom:mushroom-entity-card
entity: switch.garageporten_template
primary_info: none
layout: vertical
secondary_info: name
tap_action:
  action: toggle
  confirmation:
    text: 'Vill du öppna/stänga garageporten?'
hold_action:
  action: none

[RaA11]

Hi,

There’s any option to show/hide the upper toolbar?

Thanks

[angusc (Chris)]

Thank you @mase

I tried a few different places to put that code but none removed the app toolbar… Any guidance, thank you

on
background: var(--background-image)
resources:
  - url: /community_plugin/dual-gauge-card/dual-gauge-card.js
    type: js
  - url: https://github.com/wowgamr/animated-weather-card
    category: Theme
  - url: /hacsfiles/simple-thermostat/simple-thermostat.js
    type: module
  - url: /local/mini-graph-card-bundle.js?v=0.10.0
    type: module
card-mod-root: |
  app-toolbar {
    display: none;
  }
views:
  - path: default_view
    title: Home
    icon: mdi:home-assistant
    badges: []
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            double_tap_action:
              action: none

[mase]

for me it´s in a theme.yaml.

try this:
add theme.yaml in \themes\mytheme
in the theme.yamladd:

mytheme:
   card-mod-root: |
    app-toolbar {
      display: none;
    }

after a restart apply the theme in your profile

i use the theme that comes with ui-minimalist and that´s how it works there.

[RaA11]

you can install kiosk browser from HACS
then you can add to Raw configuration editor at the first line the following:
(if you want to bring back the header you can add at the and of your HA any page url - ?disable_km)

kiosk_mode:
  hide_header: true

[ljovcheg (Lev)]

Hey everyone.
Is there a chance to modify font size in mushroom-template-card?
Thanks.

[piitaya (Paul)]

You can override some variables with theme variables : GitHub - piitaya/lovelace-mushroom-themes: Additional themes for Lovelace Mushroom Cards 🍄

[Lunkobelix]

When using a template card and displaying sensors like my garage door I get the state shown as “on” while it in my normal dashbpard shows as “Open”. Same with a sensor that tells me when the next mail delivery is, in Mushroom I get “2” and in my normal dashboard I get “Day after tomorrow” written.

Is this the correct way to show a sensors value in Mushroom or should I use something else to get the formatted better looking result:

{{states('sensor.postnord_delivery_70150') }}

Same with localizations, in Mushroom I get everything from the template card in English and in my normal dashboard it is in Swedish.

How do the rest of you display sensors in the template card?

Entity card vs. Template card. “Övermorgon” means “day after tomorrow”, that’s why the “2”.

type: custom:mushroom-template-card
secondary: '{{states(''sensor.postnord_delivery_70150'') }}'
icon: mdi:home
entity: sensor.postnord_delivery_70150
primary: Postnord

[MrThiemann]

this looks great! Can you show me, how do you do that ?

[cloudbr34k (Apples)]

Create the card in my example,??

[cloudbr34k (Apples)]

I figured it out

[Bohemian]

I’m looking to embed a site like Windy using an iframe. Is this possible using any of the existing Mushroom cards?

Here’s what it looks like in my current Lovelace dashboard:

[Didgeridrew]

If there’s just the one weather condition that you need to fix you can just use a replace():

Currently it is {{ state_attr('weather.home', 'temperature') }}ºC 
and {{ (states('weather.home')).replace("partlycloudy", "partly cloudy") }} outside.

If there are more than that you can use a dictionary:

{%- set con = states('weather.home') -%}
{%- set fix = {
"partlycloudy":"partly cloudy",
"scatteredshowers":"scattered showers"} -%}

Currently it is {{ state_attr('weather.home', 'temperature') }}ºC 
and {{ fix.get(con) if con in fix.keys() else con }} outside.

[Posreg (Daros)]

I’m here once to again to show the appreciation !!!
It was never so clean!
My dashboard for HA maintenance in General

And the vacuum card… i just can’t wait for it!

[joshcrosby]

I’m trying to use mdi icons in the template card to display devices that are currently on. I am trying to add the following code in Secondary Information. Is it possible to alter this so the icon will properly display?

{% if is_state('fan.living_room_fan', 'on') %}
mdi:fan
{% endif %}

[AaronAutomation (Aaron)]

Thanks for the response - I was hoping to get dynamic that is state based. In the meantime I’m using state agnostic text.

[Ross_Davey]

This may have already been asked but I cant find it in the thread but everyone’s corners on the cards seem to have a much more pronounced roundness to the corners in comparison to mine.

Did yours round that much with a basic install or have to edited the config to do this? My cards don’t look as rounded as they do in the demo pictures on the github page for this project.

See photo below, my cards on the left and the Demo cards on the right from the github project. Am I missing something?

I tried this on my original HA install and on a brand new install just in case I had something in my main install that was causing it however it does it on a brand new install of HA as well.

[cromelex]

You need to download the mushroom themes, it’ll give you the nice rounded corners.

[Ross_Davey]

Thats better thank you!