Mushroom Cards Card Mod Styling/Config Guide

Community Guides
, ,
225

Yes, just do:

card_mod:
  style: |
    ha-state-icon {
      {% if states('fan.example') == 'on' %}
        animation: spin 1s linear infinite;
      {% endif %}
    }

And if your animation has keyframes just keep them outside the ha-state-icon block like this:

card_mod:
  style: |
    ha-state-icon {
      {% if states('fan.example') == 'on' %}
        animation: spin 1s linear infinite;
      {% endif %}
    }
    @keyframes spin {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
1 Like
226

Thank you. But why it won’t work for me? also tried in Mushroom Fan card, same result.

image
image1992×1314 145 KB

227

Oops, missed the s from 1s… now amended, should work! :slight_smile:

2 Likes
228

That fixed it! thank you so much!!!

1 Like
229

I’m new to using card-mod, wondering if it is possible to use a card-mod block to update all mushroom cards in a vertical stack?

Example being, I have my lights in a single vertical stack, when a light is off, I want the secondary text to be red “Off”

I started with a single light, but going this route will bloat my code like crazy…
Hoping there might be a variable to use instead of calling the exact entity?

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    subtitle: Light Controls
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.kitchen_lights
        use_light_color: true
        show_brightness_control: true
        tap_action:
          action: more-info
        name: Kitchen Lights
        collapsible_controls: true
        icon: mdi:light-recessed
        double_tap_action:
          action: toggle
      - type: custom:mushroom-light-card
        entity: light.island_light_switch
        use_light_color: true
        show_brightness_control: true
        tap_action:
          action: more-info
        name: Island Light
        collapsible_controls: true
        double_tap_action:
          action: toggle
        card_mod: null
        style:
          mushroom-state-info$: |
            .container {
              {% if states('light.island_light_switch') == 'off' %}
                --secondary-text-color: #FF483F;
              {% endif %}
            }

image
image1034×1602 78.1 KB

230

No. but you can do a couple things:

  1. try and edit it using your theme instead and target only mushroom light cards (this will however apply to ALL mushroom light cards in your dashboard.)
  2. Use Decluttering Card from HACS. cant go into much detail as i dont use it, but many use it to clean their config.
  3. Yaml anchors. seems like the solution you want but once you save your anchors are converted to the raw code instead defeating the entire purpose (unless you do your dashboard in Yaml only mode.)

You can refer to the light that you are reffering to in the card in card mod with config.entity instead.

so lets say you want to do:

card_mod:
  style: |
    ha-card {
      {% if states(config.entity) == 'on' %}
        background: blue;
      {% endif %}
    }
1 Like
231

gave that a try, even simplified the code to just a couple lights with all defaults…
Assuming this is what you mean? But I am not seeing any changes

image
image1958×1090 204 KB

even tried this…

card_mod:
  style: |
    ha-card {
      {% if states(config.entity) == 'off' %}
        --secondary-text-color: #FF483F;
      {% endif %}
    }
232

No. so that is what i mean - no way other than the ways i listed to try and reduce the amount of code written. but instead of writing:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    subtitle: Light Controls
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.kitchen_lights
        card_mod:
          style: |
            ha-card {
              {% if states('light.kitchen_lights') == 'on' %}
                background: blue;
              {% endif %}
            }
      - type: custom:mushroom-light-card
        entity: light.island_light_switch
        card_mod:
          style: |
            ha-card {
              {% if states('light.island_light_switch') == 'on' %}
                background: blue;
              {% endif %}
            }

you can instead write:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    subtitle: Light Controls
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.kitchen_lights
        card_mod:
          style: |
            ha-card {
              {% if states(config.entity) == 'on' %}
                background: blue;
              {% endif %}
            }
      - type: custom:mushroom-light-card
        entity: light.island_light_switch
        card_mod:
          style: |
            ha-card {
              {% if states(config.entity) == 'on' %}
                background: blue;
              {% endif %}
            }

its not a big help, but at least now you can copy the code between light cards without having to change the entity in card mod every time.

233

that is maybe the happy medium for now… Thanks!
also changed it a bit to check on the unavailable condition
This works now…

            ha-card {
              {% if (states(config.entity) == 'unavailable') or (states(config.entity) == 'off')  %}
                --secondary-text-color: #FF483F;
              {% endif %}
            }

was trying for a

{% if 'unavailable' or 'off' in states(config.entry) %}

But that didn’t work correctly

234

You can do:

{% if states(config.entity) in ['off','unavailable'] %}

It will then check if either is true in the list. Using [] ensures what you have with commas is seen as a list. Using in will also work using () as this also tends to become a list with jinja. Using () with comma seperated values is meant to make a tuple rather than a list, but jinja is smart enough to know intent most of the time. But i think its better to be explicit with this and use [].

1 Like
235

@dimitri.landerloos
Since you mentioned the declutter card, I had to check it out in a couple places I had it running on other custom cards (just never explored what they did)…

Wanted to say BIG thanks for the tip on that! This reduced my code for mushroom cards down to 75% per light entity (including the card-mod code).

I put this on the main lovelace yaml for dashboard (at top):

decluttering_templates:
  light_template:
    card:
      type: custom:mushroom-light-card
      entity: '[[entity]]'
      icon: '[[icon]]'
      name: '[[name]]'
      use_light_color: true
      show_brightness_control: true
      show_color_temp_control: false
      tap_action:
        action: more-info
      collapsible_controls: true
      double_tap_action:
        action: toggle
      card_mod:
        style: |
          ha-card {
            {% if states(config.entity) in ['off','unavailable'] %}
              --secondary-text-color: #FF483F;
            {% endif %}
          }
views:

This you fill out your manual card for your mushroom light entities…

image
image972×478 60.6 KB

2 Likes
236

@dimitri.landerloos Would you know how I can go abouts having the card background as the light colour? Basically like the Hue app, where the it fills the whole card. Thanks

237 
    card_mod:
      style: |
        ha-card {
          {% if states(config.entity)=='on' %}
            background: white; #your light-color
          {% endif %}
        }
1 Like
238

You can do that pretty easily :slight_smile:

card_mod:
  style: |
    ha-card {
      background: rgba{{state_attr(config.entity,'rgb_color') + (1,)}};
    }

image
But as you can see just using the straight color of the light kinda hides everything. so you might want to adjust the color slightly. like this maybe:

card_mod:
  style: |
    ha-card {
      background: rgba{{state_attr(config.entity,'rgb_color') + (0.4,)}};
    }

image
you could also have it fade kinda like the hue app does like this:

card_mod:
  style: |
    ha-card {
      background: linear-gradient(to right, rgba{{state_attr(config.entity,'rgb_color') + (0.4,)}}, rgba{{state_attr(config.entity,'rgb_color') + (1,)}});
    }

image
might want to use border: none !important; with this too, else you can see that little bit of color bleed on the edge of the card for some reason.

card_mod:
  style: |
    ha-card {
      border: none !important;
      background: linear-gradient(to right, rgba{{state_attr(config.entity,'rgb_color') + (0.4,)}}, rgba{{state_attr(config.entity,'rgb_color') + (1,)}});
    }

image

3 Likes
239

Amazing as always, thank you for your great work and help! :+1:t3:

1 Like
240

@dimitri.landerloos . I am struggling to configure the icon color according to its current state. I also would like to perform the card padding just like you have it in this card:
image

Here is my card screenshot:
image

And here is the code:

type: custom:mushroom-entity-card
entity: switch.main_water_valve
tap_action:
  action: more-info
name: Main water valve
card_mod:
  style: 
    mushroom-state-info$: |
      .container {
        --primary-text-color: skyblue;
        --secondary-text-color: orange;
        --card-secondary-font-size: 20px;
        --card-primary-font-size: 20px;
      }
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 90px;
        --icon-size: 100px;
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
          0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
          70% {box-shadow: 0 0 0 10px transparent;}
          100% {box-shadow: 0 0 0 0 transparent;}
      }

Thank you!

241

1 suggestion for the icon color bit. Is there any reason why you arent just using the mushroom template card then? You can then use a template to determine the icon color for example:

type: custom:mushroom-template-card
icon_color: |-
  {% states('light.office_main_light') == 'on' %}
    amber
  {% else %}
    disabled
  {% endif %}
242

Sorry, I tried and could not figure it out with the template card. My above card is great and I just need to change the icon color according to the entity state.

243

Try like this:

type: custom:mushroom-template-card
entity: switch.main_water_valve
icon: mdi:pipe-valve
tap_action:
  action: more-info
primary: Main water valve
secondary: '{{states(config.entity) | capitalize}}'
icon_color: |-
  {% if states(config.entity) == 'on' %}
    amber
  {% else %}
    disabled
  {% endif %}
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --primary-text-color: skyblue;
        --secondary-text-color: orange;
        --card-secondary-font-size: 20px;
        --card-primary-font-size: 20px;
      }
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 90px;
        --icon-size: 100px;
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
          0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
          70% {box-shadow: 0 0 0 10px transparent;}
          100% {box-shadow: 0 0 0 0 transparent;}
      }

And to add the padding:

type: custom:mushroom-template-card
entity: switch.main_water_valve
icon: mdi:pipe-valve
tap_action:
  action: more-info
primary: Main water valve
secondary: '{{states(config.entity) | capitalize}}'
icon_color: |-
  {% if states(config.entity) == 'on' %}
    amber
  {% else %}
    disabled
  {% endif %}
card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --primary-text-color: skyblue;
        --secondary-text-color: orange;
        --card-secondary-font-size: 20px;
        --card-primary-font-size: 20px;
      }
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 90px;
        --icon-size: 100px;
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
          0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
          70% {box-shadow: 0 0 0 10px transparent;}
          100% {box-shadow: 0 0 0 0 transparent;}
      }
    .: |
      ha-card {
        padding: 60px !important;
      }
1 Like
244

Thank you very much and really appreciate your time and effort!