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

[beurdy]

So… almost everything works… Exept for the animation:

type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: >-
  {% if is_state("switch.washing_machine", "on") %} amber {% else %} grey {%
  endif %}
primary: Laundry
layout: vertical
secondary: >-
  {% if is_state("switch.washing_machine", "off") %} Off {% else %} {{
  states("sensor.washing_machine_washer_job_state") }} {% endif %}
entity: switch.washing_machine
tap_action:
  action: more-info
card_mod:
  style: |
    ha-state-icon {
      {% if is_states('switch.washing_machine', 'on') %}
        animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
        transform-origin: 50% 110%;
      {% else %}
      {% endif %}
    }
    @keyframes shake {
      0%, 100% { transform: translate(0, 0) rotate(0); }
      20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
      40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
      60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
      80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
    }
    @keyframes drum {
      50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
    }

If I remove the if-statement for the animation, the animation does work. But… the same if-statement does work for the icon-color. What am I missing?

[andreadannibale (Andrea)]

Hi guys, anyone can suggest me why the code for the mushroom-shape-icon is not applied ?

- type: custom:mushroom-template-card
            secondary: >-
              {{ states('sensor.cucina_temperature') |round(1)| replace
              (".",",")}} °C 
            icon: mdi:home-thermometer-outline
            layout: vertical
            entity: sensor.corridoio_temperature_2
            icon_color: |
              {% if states['switch.shellyplug_s_80646f81bd30'].state == 'on' %}
                amber    
              {%- else -%}
                brown
              {% endif %} 
            tap_action:
              action: toggle
            card_mod:
              style: |-
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }
              mushroom-shape-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.pixel_6a_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
                  --icon-size: 66px
                }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: 50%;
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }

[LiQuid_cOOled]

The icon color?

[LiQuid_cOOled]

I don’t use themes, but let me see if that is a possibility with Mushroom. The JavaScript controls what you can adjust via a theme.

[andreadannibale (Andrea)]

@andreadannibale

 mushroom-shape-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.pixel_6a_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
                  --icon-size: 66px
                }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: 50%;
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }

this code isn’t applied

[LiQuid_cOOled]

@andreadannibale

--icon-size: 66px

add a ; here --icon-size: 66px;

[andreadannibale (Andrea)]

thanks but not working… It seems there is a conflict between the code portion ha-card and the code portion mushroom-shape-icon… because if I apply them separately, both work.

[LiQuid_cOOled]

@andreadannibale

'switch.shellyplug_s_80646f81bd30'

Working on cleaning up your code.

[andreadannibale (Andrea)]

the entity is correct… the card is shown correctly but the style with card mod works partially

[LiQuid_cOOled]

Let’s start with this in a separate test card and make the appropriate adjustments if you are good with that?

type: custom:mushroom-template-card
secondary: '{{ states(''sensor.cucina_temperature'') |round(1)| replace (".",",")}} °C '
icon: mdi:home-thermometer-outline
layout: vertical
entity: sensor.corridoio_temperature_2
icon_color: >
  {{ 'amber' if is_state('switch.shellyplug_s_80646f81bd30', 'on') else 'brown'
  }}
tap_action:
  action: toggle
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
         background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.pixel_6a_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
         --icon-size: 66px;
         }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
         }
    .: |
      ha-card {
        width: 58px;
        --spacing: 8px;
        padding-bottom: calc(var(--spacing) * 1.618) !important;
        background: var(--card-background-color) !important;
        box-shadow: var(--ha-card-box-shadow) !important;
        border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
        margin-left: auto;
        margin-right: auto;
        transition: all 0s;
            }

The shape after background code looks off to me, but I need a little help understanding what you want.

[andreadannibale (Andrea)]

type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.soggiorno_humidity'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: blue
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.soggiorno_humidity') }}% 0%, var(--card-background-color) 0% 100%);       
      }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
      }

This works correct… but if i try to add style to ha-card… the shape don’t work

[LiQuid_cOOled]

Your brackets ; need adjusted in. I added red background to ensure you know when it’s working

type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.soggiorno_humidity'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: blue
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.soggiorno_humidity') }}% 0%, var(--card-background-color) 0% 100%);       
          }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
           }
    .: |
      ha-card {
        width: 58px;
        --spacing: 8px;
        padding-bottom: calc(var(--spacing) * 1.618) !important;
        background: red !important;
        box-shadow: var(--ha-card-box-shadow) !important;
        border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
        margin-left: auto;
        margin-right: auto;
        transition: all 0s;
            }

[andreadannibale (Andrea)]

@LiQuid_cOOled

type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.soggiorno_humidity'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: blue
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.soggiorno_humidity') }}% 0%, var(--card-background-color) 0% 100%);       
          }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
           }
    .: |
      ha-card {
        width: 58px;
        --spacing: 8px;
        padding-bottom: calc(var(--spacing) * 1.618) !important;
        background: red !important;
        box-shadow: var(--ha-card-box-shadow) !important;
        border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
        margin-left: auto;
        margin-right: auto;
        transition: all 0s;
            }

thank you, this worked!!!

[LiQuid_cOOled]

Happy to assist!! I like your icon concept

[Faecon (Jo)]

The position is ok

i changed it in font-weight : bold; and added font-size: 12 ;

But it looks like this is not working

[LiQuid_cOOled]

Font weight is only going to affect the 4, the + and - are icons.

type: custom:numberbox-card
entity: input_number.test
icon: false
picture: false
border: false
name: false
card_mod:
  style: |
    ha-card {
       color: lime;
             }
    .cur-num{
      font-weight: 900 !important;
      color: red;
             }
    .cur-box {
    padding-top: 20px !important;
             }

[andreadannibale (Andrea)]

type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.soggiorno_humidity'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: blue
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent 65%), conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.soggiorno_humidity') }}% 22%, var(--card-background-color) 0% 100%);       
        
          }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
           }
    .: |
      ha-card {
        width: 88px;
        --spacing: 8px;
        padding-bottom: calc(var(--spacing) * 1.618) !important;
        
        box-shadow: var(--ha-card-box-shadow) !important;
        border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
        margin-left: auto;
        margin-right: auto;
        transition: all 0s;
            }

now i have this:

can i work to reach this(?):

look at the margin of border… get by conic-gradient…but how to get margin from shape ?

[LiQuid_cOOled]

@andreadannibale

border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

Can you post your current code for the green icon?

[Bully89 (Bas)]

Good morning, I’m trying to figure out how to skip the background on the chip card and have searched the forum/thread for an answer, can across some previous topics but none of the solution seems to work.

Did anybody manage to do this? Tried several things:

styles:
  img_cell:
    - background: '#FFFFFF'
  card:
    - background: none and or '#FFFFFF' or var(--contrast1)
card_mod:
  style: |
    :host([type='menu']) .chip {
      background: none !important;
    }

etc… Of course with the correct indentation

Thanks!

[LiQuid_cOOled]

Please post your code corerctly. See #11

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…