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

it should be

ha-state-icon

Still not working :frowning:

type: custom:mushroom-template-card
entity: climate.thermostat
icon: mdi:fan
icon_color: |-
  {% if is_state_attr('climate.thermostat', 'fan_mode', 'off') %}
    grey
  {% elif is_state_attr('climate.thermostat', 'fan_mode', 'on') %}
    blue
  {% endif %}
primary: |-
  {% if is_state_attr('climate.thermostat', 'fan_mode', 'off') %}
    Not Running
  {% elif is_state_attr('climate.thermostat', 'fan_mode', 'on') %}
    Running
  {% endif %}
tap_action:
  action: navigate
  navigation_path: /lovelace/temperature
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-state-icon { 
        {{ '--icon-animation: spin 1s linear infinite;' if is_state_attr('climate.thermostat', 'fan_mode', 'on') }}
      }

OK will admit this is more of a guess because I am unsure. @LiQuid_cOOled will know and gladly assist.

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon-icon { 
        {{ iif(is_state_attr('climate.thermostat', 'fan_mode', 'on'), '--icon-animation: spin 1s linear infinite') }}
      }

This doesnt work either so will wait for @LiQuid_cOOled :slight_smile:

This should work for you

type: custom:mushroom-template-card
entity: climate.thermostat
icon: mdi:fan
icon_color: |-
   {{ 'grey' if state_attr(config.entity, 'fan_mode') == 'off' else 'blue'}}
primary: |-
   {{ 'Not Running' if state_attr(config.entity, 'fan_mode') == 'off' else 'Running'}}
tap_action:
  action: navigate
  navigation_path: /lovelace/temperature
card_mod:
  style: |
    ha-state-icon {
      {{ 'animation: spin 1s linear infinite;' if state_attr(config.entity, 'fan_mode') == 'off' else 'animation: none;' }}
       }

2 Likes

I’ve been trying to recreate this thermostat card for a long time, especially this variant (there are several variants) - New Thermostat card based on Lovelace Style - #11 by spencersmb, Because I think it’s a very beautiful design, so far I’ve only succeeded mediocrely.
Unfortunately the project is dead and was not generic (only for Honeywell), it would be great if someone with experience could help here. :hugs:

1 Like

I’m trying to get my dashboards all working with the new sections view. All seems pretty good, but I’m having an issue where conditional chips are leaving a gap when they shouldn’t be in view.

You can see the large gap that shouldn’t really be there in the image.

The second image is in edit view to show the chips.

Anyone else having this issue?


1 Like

Yes when I cast to a nest hub the gap shows up but not on the home assistant app or a browser. I have a pixel tablet hub as well, same behaviour cast gap is there, app displays as it should.



1 Like

pretty much that exact layout is here in one of these mushroom threads as i used to use it myself … sorry not sure where but i do remember getting there code from here

Is it possible to animate the stove icon?

image

All Mushroom Icons can be animated in some form. You’ll have to describe what animation you’d like the stove to have.

Check out this thread

Happy Birthday!

Been browsing that thread but can’t figure out how to animate when the stove top or oven is in use.

Definitely something I can assist with. Do you have 2 different sensors that tell you when the oven and stove top are on/off?

As an example

chrome-capture-2024-6-12 (2)

Thanks for the birthday wishes

Yes
“sensor.range_cooktop_burner” which is either “run”, or “ready”
“sensor.range_oven_job_state” which is either “preheat”, “cooking”, or “ready”

Ok, give me a bit, and I’ll put together a solution. Do you have an idea how you’d like each section represented with activity? Colors, animation?

for the cooktop maybe animate the flame for “mdi:gas-burner”
image

for the oven maybe animate the middle section similar to the dryer without the shaking, or maybe add the flame as you did with the fireplace.
image

Mushroom Dryer

That’s doable!

1 Like

I went through the thousand posts from parts 1 and 2 several times and didn’t find anything similar. Help for the minimized tile would be great…

@rhysb is it possible to resize the cover of media player ?

Other question, when i listen music on Spotify, i have all the buttons, but on Plexamp, i can’t have the buttons :slight_smile: Any idea please ? Thanks

Hi, how can i change the color for light chips? All examples with card don’t work(