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

[sid1907 (Sid M)]

Thanks for that quick one. I guess I’m still doing something wrong. Adding that in does nothing and breaks my other formatting for the chip.

EDIT: Added my relatively more complex chip template card code

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.den
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:sofa-single
      {% else %}
        mdi:sofa-single
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #F97B22
      {% else %}
        #B4B4B8
      {% endif %}
    content: >-
      Den: {{ expand(state_attr(entity, 'entity_id'))|
      selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
      expand(state_attr(entity,
      'entity_id'))|map(attribute='entity_id')|list|count }}
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state(light.den, 'on') else 'red' }};
          box-shadow: none !important;
          justify-content: right;
          --chip-height: 35px;
          --chip-border-radius: 0px;
          --chip-icon-size: 18px;
          --chip-font-size: 12px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 70px !important;       
        }

[LiQuid_cOOled]

If you a specifying the entity, you need single quotes around the entity.

--chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};

  - type: entity
    entity: light.pine
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon: mdi:lamp
    icon_color: green
    content_info: none
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};
          justify-content: center;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 20px;
          --chip-font-size: 9px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 20px !important;       
        }

[sid1907 (Sid M)]

THANK YOU! Works like a charm! Also learned something new!

I’ll have another look at the Config guide. I just can’t seem to wrap my head around how to use .: | , or > or $

I’m just going to piggyback on your kind availability for another follow-up which I’ve been struggling with for days now.

If I were to add any sort of icon animation to this card, how would I go about formatting it into card-mod? Can you please draft an example code

[LiQuid_cOOled]

Chips aren’t the best to start with. They are the most difficult to mod of the Mushroom Cards.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.pc_lights
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    icon: mdi:lamp
    icon_color: green
    content_info: none
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state('light.pine', 'on') else 'red' }};
          justify-content: center;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 20px;
          --chip-font-size: 9px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 20px !important;       
        }
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
      animation: blink 2s linear infinite;
       }
      @keyframes blink { 50% {opacity: 0;} }

[sid1907 (Sid M)]

@LiQuid_cOOled

card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      ha-state-icon {
      animation: blink 2s linear infinite;
       }
      @keyframes blink { 50% {opacity: 0;} }

Thanks! What do you suggest I use as a card/template? I’m not yet there to use YAML for a complete card from scratch and mushroom chips offered some flexibility.

I see you’ve added a card-mod at the parent chip level - so if if I have multiple chips, I’d have to use child(2), child(3)…?

I’m assuming since you did it this way, there is no way of including this under style we used for the entity chip card?

[LiQuid_cOOled]

Correct, Dimitri’s guide lays that out here. Understanding a template card is a good way to start.

Mushroom Cards Card Mod Styling/Config Guide

Chips Card Sections are split:

Main Icon Styling

You can style the main icon of each chip type like this: Change the icon type/mdi. [image] The weather chip icon cannot be modified as it is not a normal HA icon. Note that when you have a conditional chip (like the first chip in this config is) with another chip inside of it you need to go 1 layer deeper. card_mod: style: mushroom-conditional-chip:nth-child(1): mushroom-template-chip$: | ha-state-icon { --card-…

There is also a section on understanding the shadow-root

If you are on Chrome, the Dev Tool helps layout the CSS structure as well. Right click and inspect or F12 will get you to the tool.

[sid1907 (Sid M)]

Thank you. I’m going to do that now.

For some reason, your animation code didn’t seem to work for me. I’ve gone ahead and attempted to have it change based on state as well - I know it’s wrong, but if you will help me with figuring out the code.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.den
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:sofa-single
      {% else %}
        mdi:sofa-single
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #F97B22
      {% else %}
        red
      {% endif %}
    content: >-
      Den: {{ expand(state_attr(entity, 'entity_id'))|
      selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
      expand(state_attr(entity,
      'entity_id'))|map(attribute='entity_id')|list|count }}
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state('light.den', 'on') else 'yellow' }};
          box-shadow: none !important;
          justify-content: right;
          --chip-height: 35px;
          --chip-border-radius: 0px;
          --chip-icon-size: 18px;
          --chip-font-size: 12px;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 70px !important;       
        }
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      {% if is_state(entity, 'on') %}
        ha-state-icon {
        animation: blink 2s linear infinite;
         }
        @keyframes blink { 50% {opacity: 0;} }
      {% else %}
        ha-state-icon {
        animation: blink 0s linear infinite;
         }
        @keyframes blink { 50% {opacity: 0;} }
      {% endif %}        

[LiQuid_cOOled]

You switched to a template card so it not matching up.

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
      animation: blink 2s linear infinite;
       }
      @keyframes blink { 50% {opacity: 0;} }

Your If statement is also an issue.

If you just use

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      
        ha-state-icon {
        animation: blink 2s linear infinite;
         }
        @keyframes blink { 50% {opacity: 0;} }

the animation works

card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: >
      ha-state-icon { animation: {{ 'blink 2s linear infinite;' if
      is_state('light.den','on') else 'blink 0s linear infinite;' }}
          }
      @keyframes blink { 50% {opacity: 0;} }

[sid1907 (Sid M)]

Thanks a bunch! It’s 8:30AM where I live so off to work. I’m going to try this out in a few hours.

Thanks for the guidance - You’ve been awesome!

[LiQuid_cOOled]

No problem! Happy to assist and have a good day…

[sid1907 (Sid M)]

I’m back only because for some reason the text color change code works for everyone but me!

Below is what was suggested by Dimitri and many others online:

card_mod:
  style: |
    ha-card {
      --primary-text-color: blue;
    }

This is me:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.den
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:sofa-single
      {% else %}
        mdi:sofa-single
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #F97B22
      {% else %}
        #D8AE7E
      {% endif %}
    content: >-
      Den: {{ expand(state_attr(entity, 'entity_id'))|
      selectattr('state','eq','on')|map(attribute='entity_id')|list|count}} / {{
      expand(state_attr(entity,
      'entity_id'))|map(attribute='entity_id')|list|count }}
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state('light.den', 'on') else '#FFF2D7' }};
          box-shadow: none !important;
          justify-content: right;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 18px;
          --chip-font-size: 12px;
          --primary-text-color: blue;
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          min-width: 70px !important;       
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: >
      ha-state-icon { animation: {{ 'blink 2s linear infinite;' if
      is_state('light.den','on') else 'blink 0s linear infinite;' }}
          }
      @keyframes blink { 50% {opacity: 0;} }

Also, if I apply you background color conditional formatting to this, will it work? Something like the below?

--primary-text-color: {{ 'lime' if is_state('light.den', 'on') else '#FFF2D7' }};

[LiQuid_cOOled]

try --text-color: blue; It should resolve your issue.

[sid1907 (Sid M)]

THANK YOU - AGAIN! Works like a charm - even with the conditional

How do I go about figuring this on my own without going crazy?

[LiQuid_cOOled]

It can be frustrating at first, but it was actually in Dimitri’s guide

This is also a good source for a better understanding of custom card modding

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

[sid1907 (Sid M)]

Thanks again,

I have multiple lights and realized I need to change the specific entity name in like 3-4 places for each light (see below)

--chip-background: {{ 'FFF2D7' if is_state('light.yeelight_bslamp1_0x31b3710', 'on') else '#F6F5F2' }};

--text-color: {{ 'lime' if is_state('light.yeelight_bslamp1_0x31b3710', 'on') else '#D8AE7E' }};

card_mod:
  style:
    mushroom-template-chip:nth-child(2)$: >
      ha-state-icon { animation: {{ 'blink 2s linear infinite;' if
      is_state('light.yeelight_bslamp1_0x31b3710','on') else 'blink 0s linear infinite;' }}
          }
      @keyframes blink { 50% {opacity: 0;} }

Without creating a template in the config.yaml file, is there a way to replace all references to the entity with just an ‘entity’ or ‘enitity_id’?

Similar to the way they use for icon and icon_color:

  - type: template
    entity: light.yeelight_bslamp1_0x31b3710
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:lamp
      {% else %}
        mdi:lamp-outline
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #F97300
      {% else %}
        #B4B4B8
      {% endif %}

[LiQuid_cOOled]

config.entity or entity works most of the time unless the mod is using the nth-child

This works and will reduce the number of changes.

    card_mod:
      style: |
        ha-card {
          --chip-background: {{ 'lime' if is_state(config.entity, 'on') else 'yellow' }};
          --text-color: {{ 'lime' if is_state(config.entity, 'on') else '#D8AE7E' }};

[Frosty]

@LiQuid_cOOled

config.entity or entity works most of the time unless the mod is using the nth-child

I spent ages trying to get that to work on a chip template before I realised it just didn’t work, I thought it was me lol

[oneseventhree (Eli)]

Hi,
Currently I have this template card:

But I want to change the word “Temperature” and “Humidity” to an MDI icon. Is this possible?

Example:

secondary: >-
  mdi:thermometer: {{ states('sensor.living_room_temperature') }}°  |  mdi:water-percent: {{
  states('sensor.living_room_humidity')}}%

This is my full code:

type: custom:mushroom-template-card
primary: 'Inside Feels Like: {{ states(''sensor.living_room_feels_like_temperature'') }}°'
secondary: >-
  Temperature: {{ states('sensor.living_room_temperature') }}°  |  Humidity: {{
  states('sensor.living_room_humidity')}}%
icon: mdi:home-import-outline
multiline_secondary: true
entity: sensor.living_room_feels_like_temperature
tap_action:
  action: more-info
fill_container: false

[Frosty]

I don’t think it’s possible with mushroom template card… I maybe wrong.
only way I know would be to use markdown card, stack-in-card and card_mod

type: custom:stack-in-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-template-card
        card_mod:
          style: 
            mushroom-shape-icon$: |
             .shape {
               margin-top: 20px;
             }
            .: |
              ha-card {
                margin-top: -20px;
                border: none;
                box-shadow: none;
              }
        primary: >-
          Inside Feels Like: {{
          states('sensor.living_room_feels_like_temperature') }}°
        icon: mdi:home-import-outline
        multiline_secondary: true
        entity: sensor.living_room_feels_like_temperature
        tap_action:
          action: more-info
        fill_container: false
      - type: markdown
        card_mod:
          style: |
            ha-card {
              border: none;
              box-shadow: none;
              margin-left: 40px;
              margin-top: -50px;
            }
        content: >
          <ha-icon icon="mdi:thermometer"></ha-icon>{{
          states('sensor.living_room_temperature') }}°  |  <ha-icon
          icon="mdi:water-percent"></ha-icon> {{
          states('sensor.living_room_humidity')}}%

[sid1907 (Sid M)]

I’m back with another query - and happy if you can point me at a source to learn the syntax.

I’m trying to get my mushroom ‘template’ chip card to show the state (on/off) of the entity within the card. Is there a way to combine multiple attributes in a card, say state + brightness level? Something like “ON | 95%”

My failed code below:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: light.pine
    icon: |-
      {% if is_state(entity, 'on') %}
        mdi:lamp
      {% else %}
        mdi:lamp-outline
      {% endif %}
    icon_color: |-
      {% if is_state(entity, 'on') %}
        #FF9130
      {% else %}
        #B4B4B8
      {% endif %}
    content: {{state_attr(config.entity, 'state')
    card_mod:
      style: |
        ha-card {
          --chip-background: {{ '#FFF2D7' if is_state(config.entity, 'on') else '#F6F5F2' }};
          box-shadow: none !important;
          justify-content: center;
          --chip-height: 35px;
          --chip-border-radius: 10px;
          --chip-icon-size: 20px;
          --chip-font-size: 12px;
          --text-color: {{ 'lime' if is_state(config.entity, 'on') else '#D8AE7E' }};
          font-style: bold;
          font-variant: small-caps;
          padding-right: 0px;
          padding-left: 0px;
          font-family: "Roboto";
          font-weight: bolder;
          width: 0px !important;
          min-width: 88px !important;
        }

I’m being ambitious with a chip card, but can we by any chance have the content/attributes across lines? To look something like this?