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

[Tyfoon]

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

[rhysb (Rhys)]

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

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

🐇 Rabbit Emoji

[rhysb (Rhys)]

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]

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]

What sensor you have in solar net?

[Tyfoon]

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]

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 (Rhys)]

Yes, that is correct.

[Airyphyla]

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

[oversponged]

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

[Tyfoon]

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]

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 (Glyn Davies)]

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 (Stuart)]

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?

[rhysb (Rhys)]

Is this what you wanted?

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);
        }
    .: |
      ha-card {
        padding-top: 0px !important;
      }

[rhysb (Rhys)]

Have a look here:

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

This change has been reverted, so you will need to change this back to --chip-box-shadow. Unfortunately you will not be able to do a ‘Replace All’ as --ha-card-box-shadow is used by Mushroom Cards. If you would like to remove the new border, you can add ha-card-border-width: 0 to your theme. It is nice to see some being added to HA with the new Tile Card.

[P4SQL]

Morning Intro_Verti,

this conditional approach for having an overview on the main dashboard is awesome. I will have a look into this for sure and as far as I understood this correctly it can be used for all kind of things with an entity e.g. a disk in my NAS is not ok, but the state is not “on” or “off” so something to consider, or one of many docker containers which I use is down etc.

Thanks for sharing this with us

Cheers
P4SQL

[glyn (Glyn Davies)]

Rhys, that is exactly what I wanted . I couldn’t work out how to insert the ha-card modifier. Thanks, you are a genius.

[rhysb (Rhys)]

If you want to use the animations with the Tile Card I’ve added some instructions to Part 4.

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

Mushroom Animations - Part 4 Even More Mushroom Card Icon Animations [Mushroom HA Animation]

HA Animation

type: custom:mushroom-template-card icon: mdi:home-assistant icon_color: blue primary: Home Assistant card_mod: style: mushroom-shape-icon$: | ha-icon { --icon-animation: boing 3s ease infinite; transform-origin: 50% 90%; } @keyframes boing { 0% { transform: scale3d(1, 1, 1); } 7% { transform: scale3d(1.25, 0.75, 1); } …

[RKor (Rani)]

Did you find a solution?