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

rhysb · November 8, 2022, 7:33pm

You would need to use Mushroom Template cards and do something like this:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    entity: sensor.benext_solar_electric_production_w
    icon: mdi:sun-wireless
    secondary: Now
    primary: '{{ states(entity) | float | round(0) }} W'
    icon_color: blue
  - type: custom:mushroom-template-card
    entity: sensor.solarday
    icon: mdi:sun-clock
    secondary: Daily
    primary: '{{ states(entity) | float | round(2) }} kWh'
    icon_color: blue
  - type: custom:mushroom-template-card
    entity: sensor.solar_net
    icon: mdi:solar-power
    secondary: NET
    primary: '{{ states(entity) }}'
    icon_color: blue

drpau · November 8, 2022, 9:22pm

Thank you so much - it IS simple, can you point me in the right direction of where i can reference this in the future or read from? be great to learn the different bits to pull together. Thank you

rhysb · November 8, 2022, 9:36pm

The documentation for Templating can be found here.

HA Templating uses Jinja2, so you can find various references on the www.
https://jinja.palletsprojects.com/en/3.1.x/templates/#

It may be a bit daunting, but have a look at the examples here. I try to provide ones that have the essential components and there are many other contributors. I find a good way to learn is to create a separate dashboard where you can create cards and figure out how it all works.

Sddawson · November 9, 2022, 12:32am

I am a bit confused by the new theme situation. For instance, do the Mushroom cards now respond to those new variables as well as the original mush-rgb ones (so I could use the “mush” ones to apply only to the Mushroom cards)? If I have used mush-rgb in my own theme, do I now have to change it to --rgb ones? And do all the other Mushroom variables still work in my own theme? And should I now remove

    # HA variables
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px

from my own theme, because those are now the HA defaults (there being no need for a default Mushroom theme any more). So many questions! Hope you can enlighten me…

Marauder2 · November 9, 2022, 2:28am

FreakLikeMe:

custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: input_boolean.home
        state: 'on'
    chip:
      type: entity
      entity: input_boolean.home
      content_info: name

If I’m understanding correctly, your chip is conditional and only shows up if the input_boolean.home is on, but in your screenshot the chip shows Away, how does that work?

drpau · November 9, 2022, 3:26am

Is anyone aware of how to add an icon, inline of a title.

For example, i have a title called “Harper’s Bedroom”

I would like to have the icon of the bunny beside it (similar to the megaphone in the link here - where the questions has been asked before) .

type: custom:mushroom-title-card
title: ''
subtitle: Harpers Room {{icon:'mdi:rabbit-variant-outline'}}

doesn’t work and similar variants seem not to work too

Tyfoon · November 9, 2022, 7:42am

Thanks Rhys! This fixed it. Almost feel ashamed that I did not know the template sensor existed.

rhysb · November 9, 2022, 8:17am

You can’t use an mdi icon in the Mushroom Title card, but you can use emoji.

Mushroom title emoji

type: custom:mushroom-title-card
subtitle: Harper's Room 🐇

rhysb · November 9, 2022, 8:46am

No the Mushroom cards do not use the new variables yet. The --mush-rgb-<color> variables are used to override the default Mushroom colors but by defining them in your theme it allows you to use them in other cards. With the new --rgb-<color>-color variables we no longer need to do that. You can continue to use --mush-rgb-<color> or change to --rgb-<color>-color.

The Mushroom cards will work without any theme file, but if you want to change the defaults you can.

Marsman · November 9, 2022, 10:28am

I just started with exploring the custom Mushroom Cards. But now I have seen the new Tile Card in Home Assistant I got the feeling that more Mushroom look-a-like cards will be introduced soon in standard Home Assistant.

So I started doubting if it is wise to migrate more of my dashboard screens to custom Mushroom or that it is better to wait a bit so that similar cards become available in standard Home Assistant.

Is my assumption correct? And if so where can I find roadmap/plans about upcoming front-end changes?

codedmind · November 9, 2022, 10:37am

What sensor you have in solar net?

Tyfoon · November 9, 2022, 10:45am

Card is slightly updated now (here). solarnet is the solar power going back into the grid (so after deduction of own use of solar). The bars are actual power consumption. Green area = solar power generated

Sddawson · November 9, 2022, 10:46am

So to change, say, the blue used in a Mushroom card, I still need to use mush-rgb-blue: n, n, n in my own theme?

rhysb · November 9, 2022, 10:49am

Yes, that is correct.

Airyphyla · November 9, 2022, 1:52pm

hi there everybody. Maybe someone here knows if its possible to merge these two together to one chip?

oversponged · November 9, 2022, 2:31pm

And were ist the sidebar defined? i don’t get it.

Tyfoon · November 9, 2022, 2:41pm

I have a 2 sensors called sensor.gad_today and sensor.gad_tomorrow. They hold fixed values: None, gft, papier, pmd or restafval. In the “custom button card” I can change the image that is shown in the button based on the state (see code below).

I know want to transform this into a button that belongs to the look and feel of Mushroom, like the rest of my dash. So the mushroom ‘icon’ should show an icon when value is non and use the pictures if any of the other states.

Probably can be done by a template but have not found one yet where an image is loaded. Help appreciated

So currently I have this:

My current custom button code:

`cards:

entity: sensor.gad_today
icon: mdi:trash-can
layout: icon_name_state2nd
name: Today
show_entity_picture: true
show_last_changed: false
show_name: ‘yes’
show_state: true
size: 60%
state:
- entity_picture: /local/green.png
  value: gft
- entity_picture: /local/paper.png
  value: papier
- entity_picture: /local/pmd.png
  value: pmd
- entity_picture: /local/grey.png
  value: restafval
  styles:
  card:
  - height: 67px
    entity_picture:
  - padding: 5px 60px 0px px
    name:
  - padding: 0px 10px
  - font-size: 15px
  - font-family: Helvetica
  - justify-self: end
    state:
  - font-size: 15px
  - font-family: Helvetica
  - padding: 0px 10px
  - justify-self: end
  - text-transform: capitalize
  - font-weight: bold
    tap_action:
    action: more-info
    type: custom:button-card
entity: sensor.gad_tomorrow
icon: mdi:trash-can
layout: icon_name_state2nd
name: Tomorrow
show_entity_picture: true
show_last_changed: false
show_name: ‘yes’
show_state: true
size: 60%
state:
- entity_picture: /local/green.png
  value: gft
- entity_picture: /local/paper.png
  value: papier
- entity_picture: /local/pmd.png
  value: pmd
- entity_picture: /local/grey.png
  value: restafval
  styles:
  card:
  - height: 67px
    entity_picture:
  - padding: 5px 60px 0px px
    name:
  - padding: 0px 10px
  - font-size: 15px
  - font-family: Helvetica
  - justify-self: end
    state:
  - font-size: 15px
  - font-family: Helvetica
  - padding: 0px 10px
  - justify-self: end
  - text-transform: capitalize
  - font-weight: bold
    tap_action:
    action: more-info
    type: custom:button-card
    type: horizontal-stack`

Roflcopterer · November 9, 2022, 3:01pm

The sidebar is made using the Custom sidebar card: GitHub - DBuit/sidebar-card

You can see my sidebar code here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #129 by Roflcopterer

glyn · November 9, 2022, 3:54pm

Hi thee, I have the following card:

This was created with the following YAML:

type: custom:mushroom-climate-card
entity: climate.bathroom
primary_info: none
icon_type: none
show_temperature_control: true
secondary_info: none
card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container {
          background: none;
          padding: 0px;        
        }
        #container .button {
          height: 100%;
          width: 30%;
        }
        #container .button:nth-child(1) {
          background: rgba(var(--rgb-blue), 0.2);
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
        }

What I would like to do is remove or reduce the white space at the top of the card. Any ideas anyone?

Thanks

Stuartie · November 9, 2022, 7:09pm

Maybe I’ve missed it because I’m on mobile and currently out so apologies if this has been explained before.

Everything on my dashboard now has an outline around it since updating to 2022.11 how do I remove this back to how it looked before?