Card-mod | Icon .style AND ha-tile-info$ combined

mueller · January 28, 2024, 6:16pm

Hi all,

i got two card-mods running individually, but cannot get them running combined:

.icon

card_mod:
  style: |
    .icon {
      {% if is_state("switch.tasmota_coffee", "on") -%}
        --tile-color: orange;
        --card-mod-icon: mdi:coffee-maker; 
      {% else %}
        --tile-color: grey;
        --card-mod-icon: mdi:coffee-maker-outline;
      {% endif %}

ha-tile-info

card_mod:
  style:
    ha-tile-info$: |
      .secondary:before{
        visibility: visible;
        content: " {{ states('sensor.tasmota_coffee_energy_power') }} W |";
      }

Can anyone tell me, how to join those two mods?
Thanks alot
Jonas

parautenbach · January 29, 2024, 6:01am

There are a number of posts on this.

Essentially, define the first like this:

card_mod:
  style:
    .: |

Google

mueller · January 29, 2024, 6:21am

Thanks alot!
That was the hint i needed.

The following works:

card_mod:
  style:
    ha-tile-info$: |
      .secondary {
        color: black !important;
      }
      .secondary:after {
        visibility: visible;
        content: "| {{ states('switch.tasmota_anycubic') }}";
      }
    .: |
      ha-tile-icon{
        {% if is_state("switch.tasmota_anycubic", "on") -%}
          --tile-color: green;
          --card-mod-icon: mdi:printer-3d-nozzle; 
        {% else %}
          --tile-color: grey;
          --card-mod-icon: mdi:printer-3d-nozzle;
        {% endif %}

mueller · January 29, 2024, 9:51am

The code above is used as part of following dashboard. Just for Inspiration.