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

Yes, exactly! Thank you very much

1 Like

works like a charm.
Thank you :slight_smile:

2 Likes

You can remove the circle like this:

kitchen

type: custom:mushroom-template-card
primary: Kitchen
secondary: ''
icon: ''
layout: vertical
picture: \local\kitchen.png
card_mod:
  style: |
    ha-card {
      --icon-border-radius: 0;
    }
5 Likes

Correct, what I’m saying though is that a normal (non mushroom) button functions correctly, whereas the mushroom button on Android devices highlights the non padded section when active

Please forgive my lack of using CSS but I’m trying to change the text colour in the below example and haven’t found anything that works. I want to change the text ‘Ensuite’ to black so it’s more visible. Can someone please point me in the right direction?

image

type: custom:mushroom-template-card
primary: Ensuite Plant
icon: mdi:leaf
icon_color: green
multiline_secondary: false
fill_container: false
entity: plant.ensuite_plant
card_mod:
  style: |
    ha-card {
      background: rgba(var(--rgb-card-background-color), 0.7) url( '/local/images/monstera_adansonii.jpg' ) center no-repeat;
      background-size: cover;
      background-blend-mode: overlay;

    }
1 Like

This should do the trick:

type: custom:mushroom-template-card
primary: Ensuite Plant
icon: mdi:leaf
icon_color: green
multiline_secondary: false
fill_container: false
entity: plant.ensuite_plant
card_mod:
  style: |
    ha-card {
      background: rgba(var(--rgb-card-background-color), 0.7) url( '/local/images/monstera_adansonii.jpg' ) center no-repeat;
      background-size: cover;
      background-blend-mode: overlay;
      --primary-text-color: rgb(var(--rgb-green));
    }
2 Likes

Thanks Rhys! Worked perfectly.

1 Like

Anyone see why this wouldn’t work? - I’m trying to use card mod to change the color of a single entity chip… but it works fine until I add the if statement in :confused:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.front_door_contact
    icon: mdi:door
  - type: entity
    entity: cover.bedroom_blind
    use_entity_picture: false
    content_info: none
    card_mod:
      style: |
        ha-card {
         --card-mod-icon-color: red !important;
        }

when I change the card mod string to:

        ha-card {
          {% if is_state('cover.bedroom_blind', 'closed') %}
            --card-mod-icon-color: blue;
          {% else %}
            --card-mod-icon-color: red;
          {% endif %}
        }

It breaks and goes from red back to black again :frowning:

Works like a charm thank you very much.

1 Like

Try like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.front_door_contact
    icon: mdi:door
  - type: entity
    entity: cover.bedroom_blind
    use_entity_picture: false
    content_info: none
card_mod:
  style:
    mushroom-entity-chip:nth-child(2)$: |
      ha-icon {
        --color: blue;
        --icon-color: red;
      }

Just remember piitaya’s warning that this may break in future releases.

2 Likes

thanks - it’s easy when you know how… :stuck_out_tongue:

:frowning: still an issue on a new dashboard. I’m close to giving up. I posted on the HA discord to see if anyone has any more ideas.

Hi folks

Ive spent the last week or so building a new dashboard using Mushroom (my first time trying HACs and Cards etc). However tonight disaster struck and I managed to create 2 views at the top, both called home (not sure how I managed that) - Anyway I deleted one of them, and both got deleted taking my Mushroom home dashboard with it (I can still see all tthe views) . At that point I then realised that I dont know where the dashboard(s) are stored or backed up? I couldn’t even find the file that the yaml is stored in when you select the raw configuration editor. Can anyone help? I am hoping to restore from a full snapshot that was created last night. If I choose a partial restore, what do I tick? Thanks in advance!

The “raw” configuration editor is stored in .storage/lovelace as JSON. You can download the backup, find the right part, and paste it back in.

1 Like

Does anyone know if it’s possible to hide a chip based on user account?
I know you can hide views with the visible tag, but hoping we can extend that to chips so I can hide certain chips (like admin controls) from regular users.

I am not too familiar with browser-mod but as far as I know it only displays full screen popup on mobile. How did you manage to display it in half size of the screen ? Plus is it possible to change the background of the popup screen to transparent ? I am actually thinking to build something like this for the popups :

It looks like a full screen pop up to me, don’t know what you’re talking about.

No sorry, as Kendell noted the screenshot is of a full-screen popup.

1 Like

Is it possible to add tap actions to title cards?