Change icon style and text color in mushroom template card

[Spartacus]

Hi there,
is there anybody who can help with mushroom empleate card?

I wanted to combine the mushroom mod with the ha_card mod? I can only use one of these mods.

Goal is to remoce the light gry circle around the icon and to change the text color in the primary and secondary line.

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 %}
    } mushroom-shape-icon$: >
      .shape {
        --icon-symbol-size: 21px;
        --icon-size: 100px;
      }

[Edwin_D]

@Spartacus

style: |-

I don’t know about the rest, but the |- here should be removed.

[Spartacus]

Hi,

I checked this but then I get an eror!

[Edwin_D]

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.

[Ildar_Gabdullin]

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.

[Spartacus]

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!

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!

[Spartacus]

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

[Ildar_Gabdullin]

Just read the last sentence of my post.

[Spartacus]

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

[Ildar_Gabdullin]

Card-mod - Add css styles to any lovelace card

This is not a custom card. Instead it’s a plugin which changes the way all other cards work How about this? type: entities style: | ha-card { color: red; } entities: - light.bed_light - light.ceiling_lights - light.kitchen_lights [51] Not a custom: in sight. Or this? [mov] (Please click this gif to open it. It seems to be prone to artifacting when compressed) Or how about changing what happens when you click the name or icon in an entities-card? FANTASTIC POST BY ILDAR…

[Spartacus]

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.

[Ildar_Gabdullin]

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

@Spartacus

combine the mushroom mod with the ha_card mod?

[Spartacus]

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.

[Ildar_Gabdullin]

@Spartacus

But my aspiration is different, so I like to learn from examples

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

[LiQuid_cOOled]

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

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[LiQuid_cOOled]

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 %}

[Spartacus]

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;
        }

[LiQuid_cOOled]

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;
                 }

[Spartacus]

@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

[LiQuid_cOOled]

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;

        }