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

[compoundbow83]

Also with this code I get only a black circle.

If I put this code in the template tool, it correctly replaces that {{ phase }} in waxing crescent.png

And if I put the /local/moon_phases/waxing_crescent.png behind my HA domain I see the picture:

[compoundbow83]

perfect that works.

But now I still have entities that are not on or off. But have value.

e.g. b. a humidity. Now I only want to display the heading if at least one entity is over 50%.

What code can I use to do this?

[rhysb (Rhys)]

Do you have card-mod installed?

[rhysb (Rhys)]

Have you included the themes dir in your configuration.yaml?

frontend:
  themes: !include_dir_merge_named themes

[compoundbow83]

Sorry, I didn’t realize I had to have this installed. It works now.

[Danny2100]

This worked and because of piitaya’s warning I won’t use it. I did think of removing the word lights and I will just do that.

If I ever really need this, I will use minimalist if this would work with some modifications. Thank you for the help.

[SeRiusRod (Sergio)]

What tag I should target to? I asked because I tried, but I couldn’t make it work.

[cowboysdude (John Wade)]

That’s an awesome card!!! My problem is the image I’m trying to show is a map of my location that changes so there is no static url I instead am trying to use it like this->

{{ state_attr('sensor.john', 'map_link') }}

I created a sensor.mapinfo to try and use which is redundant as it’s the same info…

If I could find a picture card of some kind that I can use that will allow me to use a template I’d be happy with just that… the popup I can figure out after…just getting the image to show up has been the challenge… I’m sure it’s been done but I cannot find anything that works.

OHhhhhhhh ok I found the map card… it shows now I can work on the actual popup stuff

I really wanted to use the above info as it updates quite frequently… more then the map card does.

[cowboysdude (John Wade)]

Thank you! That’s a wee bit above my pay grade at the moment
I looked at it…and decided for now I’ll just show the map… when I get better at this I’ll try that.
Right now I’d just drive myself insane trying that.

[KTibow (Kendell R)]

chip-background sets the background for the chip, instead of adding an entity picture.

[nappyjim (Jim)]

@Boostin4HP

Can you post the code for the white color card please?

Do you mean the white lightstrip card?

[Boostin4HP]

This one.

[JesseWebDotCom]

Yep. The theme works perfectly on everything except entity card items

[berkans (Berkan Sezer)]

So, after long hours I managed to write my own mushroom page. First of all I would like to thank @rhysb for the lovely codes he shared throughout the page. He has done an amazing job. And also @Boostin4HP for inspiring me with the homepage setup and the code he shared. Finally @piitaya you have done an amazing job with creating this project. I hope you will get what you deserve. For me, Mushroom must be implemented to Home Assistance main setup.

So I have created 1 dashborad for pc, 2 separate dashborads for tablet and 1 dashboard for mobile. And now I have also created another mobile page. Here are screenshots :

This is the main page for my mobile.

And this is when tabs are expanded.

This is full screen tablet mushroom page.

This is another full screen tablet page with sidebar.

This was the mobile page I was using until today.

I have also other pages rather then the main page like:

Thanks again for everyone who has a share.

[mistrovly (Marc-Edouard Louis)]

look very nice. Is there any you could share the code?

[berkans (Berkan Sezer)]

Yes sure but for which one ?

[mistrovly (Marc-Edouard Louis)]

thank you for your quick reply. The dashboard

[rhysb (Rhys)]

Post the card(s) you are wanting to add it to and we can advise

[SeRiusRod (Sergio)]

Fair enough

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Estado energético
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_select.energy_system_mode
      - type: entity
        entity: input_select.energy_battery_chargecurve
      - type: entity
        entity: input_number.energy_settings_battery_capacity
      - type: entity
        entity: sensor.energy_battery_soc
      - type: entity
        entity: sensor.energy_battery_voltage
  - type: custom:bar-card
    entities:
      - entity: sensor.energy_acsources_grid_power
        max: 4500
      - entity: sensor.energy_pvsources_total_power
        max: 9000
      - entity: sensor.energy_battery_power
        min: -5000
        max: 5000
      - entity: sensor.energy_acloads_critical_power
        max: 7300
      - entity: sensor.energy_acloads_diverter_power
        max: 7300
      - entity: sensor.energy_acloads_ev_power
        max: 7300
    card_mod:
      style: |
        ha-card {
          background: rgba(var(--rgb-card-background-color), 0.9) url( '/local/solar_production.jpeg' ) center no-repeat;
          background-size: cover;
          background-blend-mode: overlay;
        }

I thought it could be nice to have that background on the whole vertical stack and also giving it the same round corners. Being the nested cards darker, but tamping with hui-vertical-stack-card element didn’t work.
It’s the same code, but reducing the indentation and with said tag. #root doesn’t work either.

[nappyjim (Jim)]

Can you link to a PNG or JPG for an entity icon? I dont like any of the MDI ones and I found one online. I tried entering in the path to JPG in the icon field but it didnt like it.

Or I could use a template card but then how do I get the secondary information in the template card to show the data from an input number helper? So for example, I have INPUT_NUMBER.RAINFALL_FRIDAY. I would I get the data in that helper to display in the secondary informaiton of a template card?