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

[rhysb (Rhys)]

Is this it?

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

[RodgerDodger]

@rhysb

--text-color: Chartreuse;

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

And yes, that’s it.

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…

[rhysb (Rhys)]

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

[Kabala (Cata)]

That’s exactly what it is…
Thank you.

[Lunkobelix]

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

[Posreg (Daros)]

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

I need to work with some photos and paddings but i’m getting there!

[rhysb (Rhys)]

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

[Lunkobelix]

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

[TheFourDees (Jay)]

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

[Lunkobelix]

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

[TheFourDees (Jay)]

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

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

[MariuszT]

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

[image969 (James Scialdone)]

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

[RodgerDodger]

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.

[RodgerDodger]

Like a fan maybe?

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

“Stole” the code somewhere in this thread or the card-mod thread. Here’s my full card that only shows if the fan is running. and icon color depending on wind mode. As it’s part of a nested room card a my HA homescreen you maybe have to adjust the itendation. - type: conditional conditions: - entity: fan.MYFAN state: 'on' chip: type: template double_tap_action: action: none icon: mdi:fan icon_color: >…

[dvanderb]

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!

[image969 (James Scialdone)]

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

[image969 (James Scialdone)]

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

[MariuszT]

Thanks but that causes the whole chip to animate

and I’m only interested in the animation of the icon, without losing text information

[RodgerDodger]

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:

Card-mod - Add css styles to any lovelace card

It will be great if these examples help beginners to learn. Update: Animation for Entities card: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). Blinking title: Note: a margin for the 1st row has to be increased. [11] type: entities title: Blinking title icon: mdi:car entities: - entity: sun.sun - sun.sun card_mod: style: div:nth-child(1): hui-simple-entity-row: $: | hui-generic-entity-row { margin-top: …