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.
Anyone know how?
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:
I do notice that sometimes I have to clear by browser cache after making a new card before it works properly.
@doranashburner , do you think that could be possible to do the same to show last changed value?
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.
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.
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ā¦
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.
just to mention:
this card mod does not look well if you use the tile in vertical 
Does anyone have an idea, how to āalignā the text without using ābeforeā etc.?
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.
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?
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
Hi @CChris
I did it the following way:
type: tile
entity: binary_sensor.vitoconnect_status_verdichter
grid_options:
columns: 3
rows: 2
vertical: true
name: Verdichter
card_mod:
style:
ha-tile-info$: |
.secondary state-display {
display: none;
}
.secondary:after {
content: "{{ states('sensor.vitoconnect_betriebsstunden_verdichter') | round(0) }} h";
}
thanks.
But both - āsecondary:beforeā and āsecondary:afterā are basically the same thing - the information will be displayed before - or after the secondary information - even, if this will be hidden.
The ideal solution would be, if you could define / use a custom āsecondaryā information in addition to the given options in the Card configuration - something like a templated text or similar 
Sorry to bump. How do I change this in theme level?
Iāve tried the following and rebooted, but it makes no difference:
secondary-text-color:
card-secondary-color:
Better suited to ask here
Share your card code pleaseā¦
type: horizontal-stack
cards:
- type: tile
name: Garage
icon: mdi:garage
tap_action:
action: perform-action
perform_action: cover.toggle
target:
entity_id: cover.garage_door_garage_door
entity: light.garagenlichter
hold_action:
action: navigate
navigation_path: /lovelace/garage
features_position: bottom
vertical: false
card_mod:
style:
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: '{{ states('sensor.temperatursensor_garage_temperature') | round(0) }} Ā°C | {{ states('sensor.temperatursensor_garage_humidity') | round(0) }} % | {{ state_translated('cover.garage_door_garage_door') }} '
}
- type: tile
name: HWR
icon: mdi:tools
tap_action:
action: navigate
navigation_path: /ubersicht-2-0/hwr
hold_action:
action: toggle
entity: switch.umwalzpumpe
card_mod:
style:
ha-tile-info$: |
.secondary {
visibility: hidden;
}
.secondary:before {
visibility: visible;
content: '{{ states('sensor.temperatursensor_hwr_temperature') | round(0) }} Ā°C | {{ states('sensor.temperatursensor_hwr_humidity') | round(0) }} %'
}
The shadow-dom paths have changed.
See the main card_mod thread, especially this post by Dcapslock.
Iād suggest this as one approach.
To explain, making the secondary info visibility hidden does not remove the reserved space for that element, but display:none does. The space you specified wasnāt padding, just the reserved space I mentioned.
card_mod:
style:
ha-tile-info$: |
.secondary {
display: none;
}
.primary:after {
color: lime !important;
font-size: 12px;
content: '{{ states('sensor.temperatursensor_garage_temperature') | round(0) }} Ā°C | {{ states('sensor.temperatursensor_garage_humidity') | round(0) }} % | {{ state_translated('cover.garage_door_garage_door') }} '
}
His shadow-dom path was fine.