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

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

1 Like

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 🐇
2 Likes

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.

1 Like

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?

What sensor you have in solar net?

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

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?

Yes, that is correct.

1 Like

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

image

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

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`

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

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

2 Likes

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?

1 Like

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;
      }

Have a look here:

1 Like

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 :+1:

Cheers
P4SQL

1 Like

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

1 Like

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

1 Like

Did you find a solution?