Change icon style and text color in mushroom template card

Hi,

I checked this but then I get an eror!

Indentation is important in yaml, so you need to fix it. It seems to be indented too deep to me. It should be 2 spaces deeper than ha-card I think.

Check docs for card-mod, the “style” option’s value is ether a string or a dictionary, you are trying to use both simultaneously.
This is correct:

  style: |-
    ha-card {

but only for this “string” ha-card part.
The next expression with “$” is a part of dictionary which cannot be combined with a “string” part like you did.
Go to a huge card-mod thread → 1st post → link at the bottom → others → combining.

hm!
It will not wor:

type: custom:mushroom-template-card
primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
fill_container: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 20px;
        --icon-size: 0px;

this is worling as it should!
image

and this is also working!

type: custom:mushroom-template-card
primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
fill_container: false
card_mod:
  style: |-
    ha-card {
     {% if
      is_state('binary_sensor.cupra_born_car_is_online','on') %} 
       --card-primary-color:
     {%else%}
      --card-primary-color:#7E7E7E;
     {% endif %}

but not together, I tried sevaral cobinations!

hä?!?! I do not understand, what you mean!

Just read the last sentence of my post.

it would be very nice, if you can post the link, I do not find it!

sorry, I’m sorry, I have no idea what you mean! The riddle is obviously too high for me! Anyway, thank you! I don’t see what that has to do with what I want.

You need to learn step by step on simple examples if you wish to use card-mod.
The link I provided contains a lot of tutorial examples - including an explicit answer to

Ok, thank you, you can learn a lot and I learn every day. But, you can’t learn everything there is in the world, that’s just the way it is. When I buy a car, I want to drive it, not design it build it up and then drive it. Certain things have to be there!

Yes, I know, this is not a consumer product and I am grateful for people who develop the whole thing and support it. But my aspiration is different, so I like to learn from examples. It’s enough for me if I can handle it. Here I have obviously reached my limits and then I have to leave it at that! That’s just the way it is! “Schuster bleib bei deinen Leistent”, as a german saying goes.
Thanks for the support, I’ll break this off here.

That is why I gave you a path to a list of examples.

Check out this thread if you are going to learn about modding mushroom cards

You had serval issue as @Ildar_Gabdullin pointed out.

One that wasn’t mentioned was:


a color wasn’t defined here and I have found if states works best for the first portion of the if statement.

The link I sent you has a great section on what the $ and .: | does as well as healthy guide to everything mushroom.

type: custom:mushroom-template-card
primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
fill_container: false
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 20px;
        --icon-size: 0px;
        }
    .: |
      ha-card {
      {% if states('binary_sensor.cupra_born_car_is_online','on') %} 
       --card-primary-color: #821b1b;
       {%else%}
       --card-primary-color:#7E7E7E;
      {% endif %}

ok, I think I habe it! Two open points are left:

  • how I can I reduce the space between the Icons and the first line
  • is it possible to use the keyword “entity” in the card-mod section (see post before)

The code:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr
      margin: null
    cards:
      - type: custom:mushroom-template-card
        primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
        icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape
               {% if is_state('binary_sensor.cupra_born_car_is_online','on') %}
                  {
                   --shape-animation: ping 2s infinite;
                   --icon-symbol-size: 20px;
                   --icon-size: 40px;
                  }
                  @keyframes ping 
                   {
                    0%
                    {
                     box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                    }
                    100%
                    {
                     box-shadow: 0 0 5px 15px transparent;
                    } 
                   }
               {%else%}
                 {
                   --icon-symbol-size: 20px;
                   --icon-size: 40px;
                 }
               {% endif %}
            .: |
              ha-card 
              {
               border: none !important;
               {% if is_state('binary_sensor.cupra_born_car_is_online','on') %} 
                 --card-primary-color:
               {%else%}
                 --card-primary-color:#7E7E7E;
               {% endif %}
              }
      - type: custom:mushroom-template-card
        primary: '{{ ''Motor läuft'' if states(entity) == ''on'' else ''Motor aus'' }}'
        icon: >-
          {{"mdi:engine-outline" if states(entity)=="on" else
          "mdi:engine-off-outline"}}
        entity: binary_sensor.cupra_born_engine_status
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(entity) == ''on'' else ''grey'' }}'
        card_mod:
          style: |
            ha-card 
            {
             border: none !important;
             {% if is_state('binary_sensor.cupra_born_engine_status','on') %} 
               --card-primary-color:
             {%else%}
               --card-primary-color:#7E7E7E;
             {% endif %}
            }
      - type: custom:mushroom-template-card
        primary: '{{states(entity)}} %'
        icon: >-
          {{"mdi:battery-charging-high" if
          states("sensor.cupra_born_charging_state")=="charging" else
          "mdi:battery-10" if states(entity)<"10"else "mdi:battery-20" if
          states(entity)<"20"else "mdi:battery-30" if states(entity)<"30"else
          "mdi:battery-40" if states(entity)<"40"else "mdi:battery-50" if
          states(entity)<"50"else "mdi:battery-60" if states(entity)<"60"else
          "mdi:battery-70" if states(entity)<"70"else "mdi:battery-80" if
          states(entity)<"80"else "mdi:battery-90" if states(entity)<"90"else
          "mdi:battery-charging-100" if states(entity)<"100"}}
        entity: sensor.cupra_born_state_of_charge
        multiline_secondary: false
        layout: vertical
        icon_color: >-
          {{ 'red' if states(entity)<"10" else 'amber' if
          ((states("sensor.cupra_born_charging_state")=="charging")or
          states(entity)<"70")else ('green' if ((states(entity) ==
          states("number.cupra_born_target_state_of_charge")or
          states(entity)<"80"))) }}
        fill_container: false
        secondary: >-
          {{ 'charging' if
          states("sensor.cupra_born_charging_state")=="charging" }}
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape
               {% if is_state('sensor.cupra_born_charging_state','charging') %} 
                  {
                   --shape-animation: ping 2s infinite;
                   --icon-symbol-size: 20px;
                   --icon-size: 40px;
                  }
                  @keyframes ping 
                   {
                    0%
                    {
                     box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 0.7);
                    }
                    100%
                    {
                     box-shadow: 0 0 5px 15px transparent;
                    } 
                   }
               {%else%}
                 {
                   --icon-symbol-size: 20px;
                   --icon-size: 40px;
                 }
               {% endif %}
            .: |
              ha-card 
              {
               border: none !important;
               {% if is_state('sensor.cupra_born_charging_state','charging') %} 
                 --card-primary-color:;
                 --card-secondary-color:#00CC00;
               {%else%}
                 --card-primary-color:;
                 --card-secondary-color:;
               {% endif %}
              }
      - type: custom:mushroom-template-card
        primary: '{{ ''geöffnet'' if states(entity) == ''on'' else ''verschlossen'' }}'
        icon: '{{"mdi:car-door" if states(entity)=="on" else "mdi:car-door-lock"}}'
        entity: binary_sensor.cupra_born_overall_status
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''amber'' if states(entity) == ''on'' else ''green'' }}'
        card_mod:
          style: |
            ha-card 
            {
             border: none !important;
             {% if is_state('binary_sensor.cupra_born_overall_status','on') %} 
               --card-primary-color:
             {%else%}
               --card-primary-color:#7E7E7E;
             {% endif %}
            }
      - type: custom:mushroom-template-card
        primary: '{{ ''Heinzung an'' if states(entity) == ''on'' else ''Heizung aus'' }}'
        icon: '{{"mdi:radiator" if states(entity)=="on" else "mdi:radiator-off"}}'
        entity: light.lidl_edison_bulb_2
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''red'' if states(entity) == ''on'' else ''grey'' }}'
        fill_container: false
        secondary: >-
          {% if states("light.lidl_edison_bulb_2")=="on" %} {{'Temperatur:'}}
          {{(states("number.cupra_born_target_climate_temperature")|int)}}
          {{"°C"}} {%endif%}
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card 
            {
             border: none !important;
             {% if is_state('light.lidl_edison_bulb_2','on') %} 
               --card-primary-color:;
               --card-secondary-color:#00CC00;
             {%else%}
               --card-primary-color:#7E7E7E;
             {% endif %}
            }
  - type: markdown
    content: >-
      <hr>

      <br/>

      <img src = '/local/Cupra-Logo.png'

      align='middle' 

      width='100' 

      height='59'></img> <font color="#B3773F"><font
      size="5">{{'&emsp;&emsp;'}}Fahrzeugübersicht</font></font><br/>

      <font color="#B3773F"><font size="4">UN - AC 999</font></font>

      <hr>

      <br/>


      |||||

      |:---|---:|---:|---:|

      Parkposition am {{as_timestamp(state_attr('sensor.cupra','last_changed'))|
      timestamp_custom('%d.%m.%Y um %H:%M')}} Uhr:

      |{{'&emsp;&emsp;'}}{{(state_attr('sensor.cupra','street'))}} {{
      (state_attr('sensor.cupra','street_number'))}}

      |{{'&emsp;&emsp;'}}{{(state_attr('sensor.cupra','postal_code'))}}
      {{(state_attr('sensor.cupra','city'))}}

      |{{'&emsp;'}}


      |||||

      |:---|---:|---:|---:|

      verbleibende
      Ladezeit:|{{states("sensor.cupra_born_remaining_charging_time")}} min.

      verbleibende
      Aufheizzeit:|{{'&emsp;&emsp;&emsp;&emsp;'}}{{states("sensor.cupra_born_remaining_climatisation_time")}}
      min.

      |{{'&emsp;'}}

      Kilometerleistung:|{{states("sensor.cupra_born_odometer_in_kilometers")}}
      km

      Reichweite:|{{states("sensor.cupra_born_range_in_kilometers")}} km

      letzter Trip:|{{states('sensor.cupra_born_odometer_in_kilometers') |int -
      states('input_number.save_current_mileage')| int }} km


      Motor ein: {{as_timestamp(states('input_datetime.on_time_engine'))|
      timestamp_custom("%d.%m.%Y um %H:%M Uhr") }}

      Motor aus: {{as_timestamp(states('input_datetime.off_time_engine'))|
      timestamp_custom("%d.%m.%Y um %H:%M Uhr") }}


      {% if (((as_timestamp(states('input_datetime.off_time_engine')) -
      as_timestamp(states('input_datetime.on_time_engine')))/60) |int)<=0%}

      {{""}}

      {%else%} 

      Die Fahrzeit betrug ca.
      {{((as_timestamp(states('input_datetime.off_time_engine')) -
      as_timestamp(states('input_datetime.on_time_engine')))/60) |int}} min.

      {%endif %}
    card_mod:
      style:
        ha-markdown $: |
          img {
            vertical-align: middle !important;
        .: |
          ha-card 
          {
           border: none !important;
          }
card_mod:
  style: |
    ha-card {
      border: none !important;
        }

Let’s start small with your formatting. I think you are going to need to shrink things for it to fit better.

I cleaned up the code a bit and got your animation working.

type: custom:mushroom-template-card
primary: '{{ ''Online'' if states(entity) == ''on'' else ''Offline'' }}'
icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
entity: binary_sensor.cupra_born_car_is_online
multiline_secondary: false
layout: vertical
icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                  
                 --icon-symbol-size: 20px;
                   --icon-size: 40px;
                     {% set light_state = states(config.entity) %}
                    {% if light_state == 'on' %}
                    --shape-animation: ping 2s infinite; 
                   }
                   @keyframes ping {
                   0% {box-shadow: 0 0 0 0 green }

                    70% {box-shadow: 0 0 0 10px transparent;}
                    100% {box-shadow: 0 0 0 0 transparent;}
                         }
                      {% else %} 
                      {% endif %}

            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
                      }
            .: |
              ha-card{
               border: none !important;
               --card-primary-color: grey;
                 }

@LiQuid_cOOled ,
thanks for you feedbak. I am currently on a business trip and I will check this out on the weekend. Sorry for the late response…
Spartacus

I worked on your card some more…let me know

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-template-card
        primary: '{{ ''Online'' if states(config.entity) == ''on'' else ''Offline'' }}'
        icon: '{{"mdi:wifi" if states(config.entity)=="on" else "mdi:wifi-off"}}'
        entity: light.pc_lights
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(config.entity) == ''on'' else ''red'' }}'
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 
                 --icon-symbol-size: 20px;
                   --icon-size: 40px;
                     {% set light_state = states(config.entity) %}
                    {% if light_state == 'on' %}
                    --shape-animation: ping 2s infinite; 
                   }
                   @keyframes ping {
                   0% {box-shadow: 0 0 0 0 green }

                    70% {box-shadow: 0 0 0 5px transparent;}
                    100% {box-shadow: 0 0 0 0 transparent;}
                         }
                      {% else %} 
                      {% endif %}
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
                      }
            .: |
              ha-card  {
              margin-left: -2px;
              border: none !important;
              {% if is_state(config.entity,'on') %} 
               --card-primary-color: white;
              {%else%}
               --card-primary-color:#7E7E7E;
              {% endif %}
               }
                
      - type: custom:mushroom-template-card
        primary: '{{ ''Motor läuft'' if states(config.entity) == ''on'' else ''Motor aus'' }}'
        icon: >-
          {{"mdi:engine-outline" if states(config.entity)=="on" else
          "mdi:engine-off-outline"}}
        entity: light.pc_lights
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(config.entity) == ''on'' else ''grey'' }}'
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 --icon-symbol-size: 20px;
                 --icon-size: 38px;
                   }
                   
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
                       }
            .: |
              ha-card  {
              margin-left: -20px;
              border: none !important;
              {% if is_state(config.entity,'on') %} 
               --card-primary-color: white;
              {%else%}
               --card-primary-color:#7E7E7E;
              {% endif %}
               }
      - type: custom:mushroom-template-card
        primary: '{{states(entity)}} %'
        icon: >-
          {{"mdi:battery-charging-high" if
          states("light.pc_lights")=="on" else
          "mdi:battery-10" if states(entity)<"10"else "mdi:battery-20" if
          states(entity)<"20"else "mdi:battery-30" if states(entity)<"30"else
          "mdi:battery-40" if states(entity)<"40"else "mdi:battery-50" if
          states(entity)<"50"else "mdi:battery-60" if states(entity)<"60"else
          "mdi:battery-70" if states(entity)<"70"else "mdi:battery-80" if
          states(entity)<"80"else "mdi:battery-90" if states(entity)<"90"else
          "mdi:battery-charging-100" if states(entity)<"100"}}
        entity: sensor.basement_sensor
        multiline_secondary: false
        layout: vertical
        icon_color: >-
          {{ 'red' if states(entity)<"10" else 'amber' if
          ((states(config.entity)=="charging")or
          states(config.entity)<"70")else ('green' if ((states(config.entity) ==
          states(config.entity)or
          states(entity)<"80"))) }}
        fill_container: false
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                  --icon-symbol-size: 20px;
                   --icon-size: 40px;
               {% if is_state(config.entity,'charging') %} 
                  {
                   --shape-animation: ping 2s infinite;
                   
                  }
                  @keyframes ping 
                   {
                    0% { box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 0.7);
                    }
                    100% { box-shadow: 0 0 5px 15px transparent;
                    } 
                  {% endif %}
                 }
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
                  }
            .: |
              ha-card 
              {
               margin-left: -20px;
               border: none !important;
               
               {% if is_state(config.entity,'charging') %} 
                 --card-primary-color:;
                 --card-secondary-color:#00CC00;
               {%else%}
                 --card-primary-color:;
                 --card-secondary-color:;
               {% endif %}
              }
      - type: custom:mushroom-template-card
        primary: '{{ ''Geöffnet'' if states(config.entity) == ''on'' else ''Verschlossen'' }}'
        icon: >-
          {{"mdi:car-door" if states(entity)=="on" else
          "mdi:car-door-lock"}}
        entity: light.bed_lights
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''amber'' if states(config.entity) == ''on'' else ''green'' }}'
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 --icon-symbol-size: 20px;
                 --icon-size: 38px;
                   }
                   
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
               
                  }
            .: |
              ha-card 
              {      
              margin-left: -20px;
              border: none !important;
              {% if is_state(config.entity,'on') %} 
               --card-primary-color:
              {%else%}
               --card-primary-color:#7E7E7E;
              {% endif %}
              }
      - type: custom:mushroom-template-card
        primary: >-
          {{ 'Heinzung an' if states(config.entity) == 'on' else 'Heizung aus'
          }}
        icon: >-
          {{"mdi:radiator" if states(config.entity)=="on" else
          "mdi:radiator-off"}}
        entity: light.bed_lights
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''red'' if states(config.entity) == ''on'' else ''grey'' }}'
        fill_container: false
        secondary: >-
          {% if states(config.entity)=="on" %} {{'Temperatur:'}}
          {{(states("entity)|int)}}
          {{"°C"}} {%endif%}
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 --icon-symbol-size: 20px;
                 --icon-size: 38px;
                   }
                   
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
               
                  }
            .: |
              ha-card 
              {
               margin-left: -20px;
              --icon-symbol-size: 20px;
                    --icon-size: 40px;
                            border: none !important;
              {% if is_state(config.entity,'on') %} 
               --card-primary-color:;
        
              {%else%}
               --card-primary-color:#7E7E7E;
              {% endif %}
              } 

card_mod:
  style: |
    ha-card {
      border: none !important;

        }
1 Like

Hi @LiQuid_cOOled ,

thank you for the update. I checked it out, an it is working so far, but there are two thinks, I do not understand:

      - type: custom:mushroom-template-card
        primary: '{{ ''Online'' if states(config.entity) == ''on'' else ''Offline'' }}'
        icon: '{{"mdi:wifi" if states(config.entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(config.entity) == ''on'' else ''red'' }}'
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                 
                 --icon-symbol-size: 20px;
                   --icon-size: 40px;
                     {% set light_state = states(config.entity) %}
                    {% if light_state == 'on' %}
                    --shape-animation: ping 2s infinite; 
                   }
                   @keyframes ping {
                   0% {box-shadow: 0 0 0 0 green }

                    70% {box-shadow: 0 0 0 5px transparent;}
                    100% {box-shadow: 0 0 0 0 transparent;}
                         }
                      {% else %} 
                      {% endif %}
            mushroom-state-info$: |
              .container {
                --card-primary-font-size: 12px;
                      }
            .: |
              ha-card  {
              margin-left: -2px;
              border: none !important;
              {% if is_state(config.entity,'on') %} 
               --card-primary-color: white;
              {%else%}
               --card-primary-color:#7E7E7E;
              {% endif %}
               }

The line “set light_state…” is different to the other lines "… {% if is_state(config.entity,‘charging’) %} " and I do not really understand is?

I do also not understand the difference between “states(config.entity)” and “states(entity)”. I never saw config.entity before.

Can you please explain it to me?
Many thanks for your excellent work
Spartacus

This is just another way to write an IF ELSE statement. It works well if there are multiple states. For example:

icon_color: |
   {% set light_state = states('light.pc_lights') %}
   {% if light_state == 'on' %}  green 
   {% elif light_state == 'off' %}  yellow
   {% elif light_state == 'unknown' %}  red                        
   {% endif %}

As for config.entity, it’s just the method I use. I found that entity doesn’t always work for me. Someone may know the difference.