Card-Mod and Mushroom Template Card

Configuration Frontend
1

Hi All,

I’m guessing I’ve updated mushroom recently and not read the docs - thus I appear to have lost a load of formatting on my cards. I’m trying to center the text on this card, and change the color of the secondary text - which was working fine until the last update - I’m not sure if this is a mushroom update, or hass update issue:

image

YAML is as follows:

type: custom:mushroom-template-card
primary: House A/C
secondary: >-
  {{states('sensor.air_conditioning_power')}} W / £{{
  '{:.2f}'.format(states('sensor.sensor_air_con_cost')|float(0)) }}
icon: ''
entity: sensor.air_conditioning_power
tap_action:
  action: more-info
card-mod:
 style: |
    ha-card {
          text-align: center;
          height: 70px !important;
          }
    :host { 
      --secondary-text-color: {% set state=states('sensor.air_conditioning_power') %}
              {% if state.startswith('-') %}
              green
              {% else %}
              red
              {% endif %}
    }

This was previously working fine, using the excellent Mushroom theming guide on here!

Any ideas where I may have gone wrong?

Thanks
Leacho

2

Mushroom changed to

--card-primary-color: red;
--card-secondary-color: blue;
3

Thanks @LiQuid_cOOled - just updated the code block, no luck I am afraid. I’ve checked my themes, and there isn’t anything set in there.

type: custom:mushroom-template-card
primary: Office A/C
secondary: >-
  {{states('sensor.office_air_con_power')}} W / £{{
  '{:.2f}'.format(states('sensor.sensor_office_air_con_cost')|float(0)) }}
icon: ''
entity: sensor.office_air_con_power
tap_action:
  action: more-info
style: |
  ha-card {
        text-align: center;
        height: 70px !important;
        }
  :host { 
    --card-secondary-color: {% set state=states('sensor.office_air_con_power') %}
            {% if state.startswith('-') %}
            green
            {% else %}
            red
            {% endif %}
  }
4

Put in under ha-card, not host. You we also missing card mod.

I arranged your logic too

type: custom:mushroom-template-card
primary: Office A/C
secondary: >-
  {{states('sensor.office_air_con_power')}} W / £{{
  '{:.2f}'.format(states('sensor.sensor_office_air_con_cost')|float(0)) }}
icon: ''
entity: sensor.office_air_con_power
tap_action:
  action: more-info
card_mod:
 style: |
  ha-card {
        text-align: center;
        height: 70px !important;
      {% set state=states('sensor.office_air_con_power') %}
            {% if state.startswith('-') %}
             --card-secondary-color:green
            {% else %}
             --card-secondary-color:red
            {% endif %}
                          }

image

1 Like
5

Nailed it thank you!! :slight_smile: