Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 1)

Is this it?

Mushroom-chip

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
    content: Mushroom
    card_mod:
       style: |
         ha-card {
           --text-color: Chartreuse;
         }
4 Likes

Goddamnit! I fiddled with like everything from primary-text-color and all I found in examination via Google Chrome.

And yes, thatā€™s it. :slight_smile:

And tip to find the right designations via Chrome as all these cards are clickable and the code wonā€™t highlight like in static code?

I thought I found the color setting for the person card control in --state-home-color but that doesnā€™t work as expected eitherā€¦

1 Like

Click on main html code, ctrl-f, search for mushroom and drill down from there. As you drill down elements will be highlighted.

2 Likes

Thatā€™s exactly what it isā€¦
Thank you.

Wow - thank you! That is almost exactly what I wanted! I guess there is no way to only blink the actual icon and not the colored circle around it?

Edit:
Trying to make it condition based so that the icon only blinks when the car is charging. Any idea why this is not doable?

style: |
{% set state=states('sensor.easee_laddbox_status') %}
{% if state == 'charging' %}
  mushroom-shape-icon {
    animation: blink 3s ease-in infinite;
  }
  @keyframes blink {
    50% {opacity: 0;}
  }
{% endif %}
  ha-card {
     --ha-card-background: rgba(0, 0, 0, 0);
     box-shadow: none;
     
   }
   div#header__title {
     font-size: 10px;
   }

thank you!
that is actually what Iā€™ve need, i think my media / radio card is finished now

image

I need to work with some photos and paddings but iā€™m getting there!

7 Likes

This worked for me.

card_mod:
   style: |
     {% set state=states('sensor.rhys_phone_detected_activity') %}
     {% if state == 'still' %}
       mushroom-shape-icon {
         animation: blink 3s ease-in infinite;
       }
       @keyframes blink {
         50% {opacity: 0;}
       }
     {% endif %}
       ha-card {
          --ha-card-background: rgba(0, 0, 0, 0);
          box-shadow: none;
       }
       div#header__title {
          font-size: 10px;
       }
5 Likes

It was the indention, as always :slight_smile: Thank you for the help!

Hi, Iā€™m trying your code and erroring out. Not sure what Iā€™m missing:

type: custom:mushroom-template-card
primary: Powder Room
secondary: ''
icon: mdi:fan
layout: vertical
entity: switch.powder_room_fan
icon_color: |
  {% if is_state("switch.powder_room_fan", 'on') %}
    orange
  {% endif %}
style: |
  {% set state=states('switch.powder_room_fan') %}
  {% if state == 'on' %}
    mushroom-shape-icon {
      animation: blink 3s ease-in infinite;
    }
    @keyframes blink {
      50% {opacity: 0;}
    }
  {% endif %}
    ha-card {
       --ha-card-background: rgba(0, 0, 0, 0);
       box-shadow: none;
    }
    div#header__title {
       font-size: 10px;
    }

but Iā€™m getting the error:

Visual editor is not supported for this configuration:
At path: style -- Expected a value of type `never`, but received: `"{% set state=states('switch.powder_room_fan') %}\n{% if state == 'on' %}\n mushroom-shape-icon {\n animation: blink 3s ease-in infinite;\n }\n @keyframes blink {\n 50% {opacity: 0;}\n }\n{% endif %}\n ha-card {\n --ha-card-background: rgba(0, 0, 0, 0);\n box-shadow: none;\n }\n div#header__title {\n font-size: 10px;\n }\n"`
You can still edit your config in YAML.

Also, is it possible to change the icon based on state? It tried using the below code in the icon section but it doesnā€™t work so Iā€™m thinking itā€™s not implemented in the card:

{% if is_state("states.powder_room_fan", 'on') %}
  mdi:fan
{% else %}
  mdi:fan-off
{% endif %}

In the first code block, look at the indention. Not sure that is the issue but here is how mina looks:

style: |
  {% set state=states('sensor.easee_laddbox_status') %}
  {% if state == 'charging' %}
  mushroom-shape-icon {
    animation: blink 3s ease-in infinite;
  }
  @keyframes blink {
    50% {opacity: 0;}
  }
  {% endif %}

To change icon based on state you can do it like this:

icon: |-
  {% set state=states('sensor.easee_laddbox_power') %}
    {% if state=='0.0' %}
      mdi:ev-station
    {% else %}
      mdi:battery-charging
  {% endif %}
1 Like

Strange, believe I have the indentation is right but still get the error.

Your icons state code worked like a charm though! Thanks!

Someone managed to animate an icon on the chip card? Type template.

Is it possible to make a color and icon change based on state(locked vs unlocked) with a shlage deadbolt I have. I realize there is the custom button card, but my entire theme is mushroom cards, so Im looking for a way that it will match everything else.

Template card, if else statements, anything that will help

custom:mushroom-template-card OR custom:mushroom-chips-card (type: template)

You can use this code and shrink or increase it to your needs for the icon, icon_color and whatnot.

{% if is_state('ENTITY HERE', 'STATE HERE') %}
  CHOOSE HERE          
{% elif is_state('ENTITY HERE', 'STATE HERE') %}
  CHOOSE HERE
{% elif is_state('ENTITY HERE', 'STATE HERE') %}
CHOOSE HERE
{% elif is_state('ENTITY HERE', 'STATE HERE') %}
CHOOSE HERE
{% else %}
CHOOSE HERE
{% endif %}

If you want to change the color of the whole card youā€™ll have to dive into card-mod and if you scroll through this thread youā€™ll find a base.

1 Like

Like a fan maybe?

Trying to figure out how to use an entity_picture as the icon in a template cardā€¦ is this possible? When I try to use the attribute as a value for the icon I just get a gray icon. Thanks!

so am I writing this
{% if is_state(ā€˜ENTITY HEREā€™, ā€˜STATE HEREā€™) %}
CHOOSE HERE

Everytime I need to change something for the same card? one for icon change, one for icon color chnage, and one for text change like door is locked to door is unlocked for example.

Also iā€™m getting missed comma between flow collection entries on my first ā€œIFā€ line

I actually just got everything to work. Thank you so much for the reply. My brain hurts from trying to figure this out the last few days. lol

Thanks but that causes the whole chip to animate
Animation
and Iā€™m only interested in the animation of the icon, without losing text information

1 Like

What it ā€˜animationā€™ for you? The code I linked to of course letā€™s the fan icon rotate. So what should your battery do?

Maybe have a look at this: