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

Try this, let me know.

icon_color: |
  {{"#%02x%02x%02x" %state_attr(config.entity,"rgb_color") }}

I should have been a little clearer. This will eliminate the need for the if statement. If the light is off it will show the device disabled color.

1 Like

One general question. Is there a possibility to defined “somewhere” centrally, e.g.,…

            }
              @keyframes blink {
              50% {opacity: 0;
              }

…and use it then simply at the cards via …

animation: blink 2s linear infinite;

… so that in case I would like to change the definition of “blink” I change it only at the central position and do not need to search everywhere and I only need to defined it once?

Many thanks!

1 Like

Great question…Mushroom’s animations are imbedded in the JavaScript to eliminate the need for keyframes so you could adjust the settings there, but there may be another way. Let me think about it…

image

1 Like

the colour when it is on is ok, but disabled gives me a white icon , I want it in 36,36,36 :wink:

This should do it…

icon_color: |
  {% if is_state(config.entity, 'on') %} 
    {{"#%02x%02x%02x" %state_attr(config.entity,"rgb_color") }}
  {% else %} 
   #242424
  {% endif %}

image

1 Like

You will need to figure out how to post the code. but also this isnt related to mushroom so please create a new topic.

1 Like

Thnx @LiQuid_cOOled that is what I wanted.

Hi,

I Also want to have the icon rotate when it is on, but I have this and doesn’t work

  - type: template
    icon: mdi:fan
    icon_color: red
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important;
          position: absolute;
          left: 280px;
          {% if not is_state('sensor.ventilatie', 'hoog') %}
            display: none !important;
          {% endif %}
        ha-state-icon {
          animation: rotate 1s linear infinite;
        }

Chips are a little more complex than the standard cards, check the topic linked in my profile for some simple examples.

But for yours specifically it would be like this. (mushroom-template-chip:nth-child(1)$: | refers to the first chip and the chip type, so change it to the type you are targeting.)

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:fan
    icon_color: red
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important;
          position: absolute;
          left: 280px;
          {% if not is_state('sensor.ventilatie', 'hoog') %}
            display: none !important;
          {% endif %}
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% {transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
      }
1 Like

Thnx Dimitri. One more question. I need to change the size of the card with card mod. If I do this the animation will stop. I added the ha-card section and it stops

card_mod:
  style: |
    ha-card {
      height: 45px !important;
      width: 450px; !important;
      }
    mushroom-template-chip:nth-child(7)$: |
      ha-state-icon {
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% {transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
      }  
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
        animation: beat 1.3s ease-out infinite both;
        transform-origin: 50% 60%;
      }
      @keyframes beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.25); }
        60% { transform: scale(1); }
      }

Have a look at my guide in the section thats called what the .: | and $ symbols do. But esentially it is like this:

card_mod:
  style:
    mushroom-template-chip:nth-child(7)$: |
      ha-state-icon {
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% {transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
      }  
    mushroom-template-chip:nth-child(6)$: |
      ha-state-icon {
        animation: beat 1.3s ease-out infinite both;
        transform-origin: 50% 60%;
      }
      @keyframes beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.25); }
        60% { transform: scale(1); }
      }
    .: |
      ha-card {
        height: 45px !important;
        width: 450px; !important;
      }
2 Likes

nice one!

I made a pulse for when my phones is charging.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:lightning-bolt
    icon_color: yellow
    card_mod:
      style: |
        ha-card {
          background: none !important;
          border: none !important;
          position: absolute;
          left: 280px;
          {% if not is_state('sensor.xxx_battery_state', 'Charging') %}
            display: none !important;
          {% endif %}
        }
card_mod:
  style:
    mushroom-template-chip:nth-child(1)$: |
      ha-state-icon {
        animation: pulse 2s linear infinite;
      }
      @keyframes pulse {
        0% {transform:scale(0.6);color:firebrick; left:0px; top:0px;}
        50% {transform:scale(0.8);color:yellow; left:0px; top:0px;}
        100% {transform:rotate(360deg);color:green; left:0px; top:0px;}
      }

Is there a way to get just 1 icon not clickabele on the chips card ?

Do you mean no action is taken if it’s clicked?

If so the action function can prevent that.

type: custom:mushroom-chips-card
chips:
  - type: action
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none

@rhysb Hi mate, ive been using this for a year now, recently it has stopped displaying the extra percentage state:

decluttering template:

salt_gauge:
  default:
    - entity: null
    - min: 0
    - max: 100
    - high: green
    - medium: orange
    - low: red
    - high_max: 100
    - high_min: 61
    - medium_max: 60
    - medium_min: 21
    - low_max: 20
    - low_min: 0
    - severity_low: 20
    - severity_medium: 40
    - severity_high: 60
  card:
    type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 42px auto
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: '[[entity]]'
        icon: mdi:[[icon]]
        icon_color: |
          {% set colour = states(entity) | int %}
          {% if colour <= [[low_max]] %} 
          [[low]]
          {% elif colour <= [[medium_max]] %}
          [[medium]]
          {% else %}
          [[high]]
          {% endif %} 
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:bar-card
        entity: '[[entity]]'
        height: 42px
        min: '[[min]]'
        max: '[[max]]'
        entity_row: true
        severity:
          - color: rgb(var(--mush-rgb-[[high]]))
            to: '[[high_max]]'
            from: '[[high_min]]'
          - color: rgb(var(--mush-rgb-[[medium]]))
            to: '[[medium_max]]'
            from: '[[medium_min]]'
          - color: rgb(var(--mush-rgb-[[low]]))
            to: '[[low_max]]'
            from: '[[low_min]]'
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod: null
        style: |
          ha-card {
            padding: 12px;
            margin-left: 12px;
            --bar-card-border-radius: 12px;
            --mush-rgb-red: 244, 67, 54;
            --mush-rgb-pink: 233, 30, 99;
            --mush-rgb-purple: 156, 39, 176;
            --mush-rgb-deep-purple: 103, 58, 183;
            --mush-rgb-indigo: 63, 81, 181;
            --mush-rgb-blue: 33, 150, 243;
            --mush-rgb-light-blue: 3, 169, 244;
            --mush-rgb-cyan: 0, 188, 212;
            --mush-rgb-teal: 0, 150, 136;
            --mush-rgb-green: 76, 175, 80;
            --mush-rgb-light-green: 139, 195, 74;
            --mush-rgb-lime: 205, 220, 57;
            --mush-rgb-yellow: 255, 235, 59;
            --mush-rgb-amber: 255, 193, 7;
            --mush-rgb-orange: 255, 152, 0;
            --mush-rgb-deep-orange: 255, 87, 34;
            --mush-rgb-brown: 121, 85, 72;
            --mush-rgb-grey: 158, 158, 158;
            --mush-rgb-blue-grey: 96, 125, 139;
            --mush-rgb-black: 0, 0, 0;
            --mush-rgb-white: 255, 255, 255;
          }
          bar-card-value {
            margin: 12px;
            font-size: 12px;
            font-weight: bolder;
          }
          bar-card-name {
            margin: 12px;
            font-size: 12px;
            font-weight: bolder;
          }
          bar-card-backgroundbar {
            opacity: 0.2;
            filter: brightness(1);
          }
          bar-card-value::before {
            content: " {{ states.sensor.saltlevel_in_percent.state }} % / ";
          }

card itself:

      - title: Water Softener 
        cards:
          - type: vertical-stack
            card_mod:
              class: hki
            cards:
              - type: custom:decluttering-card
                template: salt_gauge
                variables:
                  - entity: sensor.saltlevel_in_cm
                  - icon: cube-outline
                  - low_max: 2.9
                  - medium_min: 3
                  - medium_max: 6.9
                  - high_min: 7.0
                  - max: 35

Displays like this:
image
Used to be like so:
7319bdf481641c8e9fc4ea9508a20b6ef14a98b2_2_690x94

You simply have a small indent issue from what I see.

image

salt_gauge:
  default:
    - entity: null
    - min: 0
    - max: 100
    - high: green
    - medium: orange
    - low: red
    - high_max: 100
    - high_min: 61
    - medium_max: 60
    - medium_min: 21
    - low_max: 20
    - low_min: 0
    - severity_low: 20
    - severity_medium: 40
    - severity_high: 60
  card:
    type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 42px auto
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: '[[entity]]'
        icon: mdi:[[icon]]
        icon_color: |
          {% set colour = states(entity) | int %}
          {% if colour <= [[low_max]] %} 
          [[low]]
          {% elif colour <= [[medium_max]] %}
          [[medium]]
          {% else %}
          [[high]]
          {% endif %} 
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:bar-card
        entity: '[[entity]]'
        height: 42px
        min: '[[min]]'
        max: '[[max]]'
        entity_row: true
        severity:
          - color: rgb(var(--mush-rgb-[[high]]))
            to: '[[high_max]]'
            from: '[[high_min]]'
          - color: rgb(var(--mush-rgb-[[medium]]))
            to: '[[medium_max]]'
            from: '[[medium_min]]'
          - color: rgb(var(--mush-rgb-[[low]]))
            to: '[[low_max]]'
            from: '[[low_min]]'
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod: 
         style: |
           ha-card {
            padding: 12px;
            margin-left: 12px;
            --bar-card-border-radius: 12px;
            --mush-rgb-red: 244, 67, 54;
            --mush-rgb-pink: 233, 30, 99;
            --mush-rgb-purple: 156, 39, 176;
            --mush-rgb-deep-purple: 103, 58, 183;
            --mush-rgb-indigo: 63, 81, 181;
            --mush-rgb-blue: 33, 150, 243;
            --mush-rgb-light-blue: 3, 169, 244;
            --mush-rgb-cyan: 0, 188, 212;
            --mush-rgb-teal: 0, 150, 136;
            --mush-rgb-green: 76, 175, 80;
            --mush-rgb-light-green: 139, 195, 74;
            --mush-rgb-lime: 205, 220, 57;
            --mush-rgb-yellow: 255, 235, 59;
            --mush-rgb-amber: 255, 193, 7;
            --mush-rgb-orange: 255, 152, 0;
            --mush-rgb-deep-orange: 255, 87, 34;
            --mush-rgb-brown: 121, 85, 72;
            --mush-rgb-grey: 158, 158, 158;
            --mush-rgb-blue-grey: 96, 125, 139;
            --mush-rgb-black: 0, 0, 0;
            --mush-rgb-white: 255, 255, 255;
          }
          bar-card-value {
            margin: 12px;
            font-size: 12px;
            font-weight: bolder;
          }
          bar-card-name {
            margin: 12px;
            font-size: 12px;
            font-weight: bolder;
          }
          bar-card-backgroundbar {
            opacity: 0.2;
            filter: brightness(1);
          }
          bar-card-value::before {
            content: " {{ states.sensor.saltlevel_in_percent.state }} % / ";
          }

Thanks, I have tried to change indentation and remove null. the card then doesnt load.

has the entity always been null as well?

salt_gauge:
  default:
    - entity: null
    - min: 0

image

entity was null because I was playing with the ha card editor. my dashboard is all yaml based.

Indentation fixed as you mentioned. Im unsure why it kept breaking when using ha card editor.

There is an open issue for that right now. It’s not saving changes.