Tile Card - Changing secondary info text using template

Configuration Frontend
1

I have used card-mod to remove the secondary state text on a tile card as per this post:

Can not create Tile card with empty state on device_tracker?

However, what I now want to do is change the secondary text which i have highlighted below.
tilecard

Anyone know how?

2

I have had some success putting the text template into the content field as below:

type: tile
entity: light.master_bedroom_lamp
card_mod:
  style:
    ha-tile-info$: |
      .secondary {
         visibility: hidden;
       }
       .secondary:before {
         visibility: visible;
         content: "{{ states(config.entity) | title }}";
       }

This gives me the below card:
image

I do notice that sometimes I have to clear by browser cache after making a new card before it works properly.

1 Like
3

@doranashburner , do you think that could be possible to do the same to show last changed value?

4

thank you for this thread.

I have modified so that I can see the state of the gardenshed door and the state of its lock:

            card_mod:
              style:
                ha-tile-info$: |
                  .secondary {
                     visibility: hidden;
                   }
                   .secondary:before {
                     visibility: visible;
                     content: "{{ states('binary_sensor.gartenhaus_tur_intrusion_2') | title + ' & ' + states('lock.gartenhaus_schlos') | title}}";
                   }

However, as a result I get “Off & Locked”
So, one thing is that it’s Off instead of Closed and even in the German view it’s not translated.

Any hint would be greatly appreciated.

5

My Example => Tile Card with two Secondary States

type: tile
entity: sensor.room_temperature
name: Temperature and Humidity
tap_action:
  action: none
icon_tap_action:
  action: none
card_mod:
  style:
    ha-tile-info$: |
      .secondary {
        visibility: hidden;
      }
      .secondary:before {
        visibility: visible;
        content: '{{ states('sensor.room_temperature') | round(1) }} °C - {{ states('sensor.room_humidity') | round(0) }} %'
      }

Note: the preview editor only shows 1 state?
→ Simply click on “OK” in the editor and the second state will appear.

1 Like
6

Another way to perform this is to use the mushroom cards which are very close to Tile cards.

And use specifically the Mushroom template cards, which gives full control on the icon, its color, the primary information, and the secondary information through JINJA2 template.

And as a bonus a small badge that you can customize in icon and color…

All this with UI available, without needing cardmod, and with the possibility to separate the behaviour for single tap, hold and double tap…
image

7 
card_mod:
  style:
    ha-tile-info$: |
      .secondary {
         visibility: hidden;
                  }
      .secondary:before {
         visibility: visible;
          content: "{{ states(config.entity) | title + ' - mdi:thermometer ' + states('sensor.smoke_detector_soverom_air_temperature')| title + '°C'| title}}";
                        }

Can someone please tell me how to insert an thermometer icon in the content string.

8

just to mention:

this card mod does not look well if you use the tile in vertical :frowning:

grafik
grafik702Ă—402 13.7 KB

Does anyone have an idea, how to “align” the text without using “before” etc.?

9

How can you prepend the secondary text using this method ?
I would love to see the last_changed attribute, but before I would also like to add the value of another sensor.

10

Seems like changing the color of the text for the secondary info is not working. I just came across this thread, and the following code does nothing:

card_mod:
  style:
    ha-tile-info$: |
      .secondary {
        color: red;
      }

Any suggestion on how to go and change the color of the secondary text on a tile? If I replace color: red; with visibility: hidden, the text does hide, so I think the selector is working correctly, but the color is not changing.
Inspecting the DOM, I can see the .secondary with various properties including color, followed by another .secondary with only the color property, and it’s strike-through. Any ideas what’s happening?

Screenshot from 2024-12-09 20-47-14

EDIT: To answer my own question. The problem was that I need to add !important after the color change, so that the property is not overridden by another rule with higher specificity