Issues with style on card based on source input from TV

[civic ridge]

I'm trying to add a border to a official button card based on state from my TV.

The entity media_player.tv reports
`source_list:

• TV
• Nvidia Shield
• HW-Q-Series
  source: Nvidia Shield`

The button correctly changes source input on my TV to Nvidia Shield and it also reports the source Nvidia Shield above. However I can't get the card to change style based on media_player.tv state
type: button name: Nvidia Shield icon: mdi:filmstrip show_name: true show_icon: true show_state: false grid_options: columns: 3 rows: 2 tap_action: action: call-service service: media_player.select_source service_data: entity_id: media_player.tv source: Nvidia Shield styles: card: - border: | [[[ return states['media_player.tv'].state === 'playing' && states['media_player.tv'].attributes.source === 'Nvidia Shield' ? '2px solid red' : 'none'; ]]]

[mellow moon]

if you install card-mod yuu can do it with something like this

  style: |
    ha-card {          
      {% if 1 == 1 %}
        border-color: red !important;
      {% endif %}
    }```

obviously you need to replace the `{% if 1 == 1 %}` with templating for what you want to trigger on

[hardy nimbus]

It looks like you followed an example for the custom:button-card. The custom:button-card and Button card are not the same. The custom:button-card has its own styling capabilities and uses JavaScript while the Button card uses Jinja.
If you want your idea to work with the stock Button card, you will need to use card_mod. Once you have it installed (preferably via HACS), replace the styles: section with: yaml card_mod: style: | ha-card { {% if states('media_player.tv') == 'playing' and state_attr('media_player.tv', 'source') == 'Nvidia Shield' %} border: 2px solid red; {% endif %} } I don't think the show_state: false works with the Button card. The show_name & show_icon defaults are true so they're not needed either.

[hardy nimbus]

I came back to change my answer to using card_mod and you pressed Enter two minutes before me! 😆

[mellow moon]

you had a more complete answer though so we can call it a draw 🙂

[hardy nimbus]

Here's the bonus answer. 😁
If you want to take it a step further and do some stuff with the icon, consider: ```yaml
card_mod:
style: |
ha-card {
{% if states('media_player.xbox_plex') == 'playing' and state_attr('media_player.xbox_plex', 'media_content_type') == 'tvshow' %}
border: 2px solid red;
--card-mod-icon: mdi:filmstrip;
--card-mod-icon-color: red;
{% else %}
--card-mod-icon: mdi:filmstrip-off;
--card-mod-icon-color: gray;
{% endif %}
}

[civic ridge]

Wow thanks easter is booked, I will have a look at both card_mod and custom_card, do people have any preferences?
From my perspective I like the new dashboard where I can drag and drop the official button card and it fits nicely both on a big screen, tablet and phone, it's easy to move/adapt and add additional YAML if needed. Earlier experience with the custom button card would be that I need use YAML and horizontal stacks just to define the button itself (size/location) and I tend to run into issues/getting frustrated.

I'm also planning to use return entity.attributes.app_id to highlight running app on my media player.

I will definitely have a go with the bonus answer

[hardy nimbus]

If you have your dashboard laid out with the Button card, then card_mod is going to be the easiest route. Just install, refresh, and drop the code into the card.
Learning how to use card_mod is a whole different thing. It is probably one of the more advanced things to work with in HA. (That's why we provided the code for you.) There's lots of examples in the forum and understanding CSS and Jinja is useful.
The custom:button-card is probably one of the most useful cards. But, as you've already realized, it is not very user-friendly and it does not play well in a Sections view. But, it is probably the single most useful card out there. IMO, once you get to understanding how to set it up (and perhaps learning a little bit of JavaScript and understanding YAML), there's almost nothing this card can't do. Just being able to use configuration templates is super handy. (Essentially you can define a template that can be referenced by multiple cards and when you want to make changes to the design, you only have to make them in the template.)

[civic ridge]

This works great thanks for the help (and the base script), i'm so happy I don't need to use the custom card with horizontal/vertical stacks. Is it still possible to use card_mod to pull a template/script someway or is that limited to the custom card completely? I'm thinking of having a script called within card_mod and set a variable directly in the card above the script). I could then easily modify the script for all buttons and just set the variable locally.
I also have some issues with small (or variable size icons) and AFAIK it's not exposed in the official button card I would need to do it within card_mod. I have tried --mdc-icon-size: 1000px; and some other solutions without any impact on the icon size, any tips?
Haven't had the chance to find alternative icons for the bonus solutions so that's still on the TODO list.

Source
`card_mod:
style: |
ha-card {
{% set target_source = 'Nvidia Shield' %}
{% set shield_active = (state_attr('media_player.tv', 'source') == target_source) %}

  border: {{ '2px solid red' if shield_active else 'none' }};
  --card-mod-icon-color: {{ 'red' if shield_active else 'gray' }};
}`

AppID
`card_mod:
style: |
ha-card {
{% set target_app = 'com.google.android.youtube.tv' %}
{% set appid_active = (state_attr('media_player.shield', 'app_id') == target_app) %}

  border: {{ '2px solid red' if appid_active else 'none' }};
  --card-mod-icon-color: {{ 'red' if appid_active else 'gray' }};
}`

[civic ridge]

Just for reference I have now created a new template "sensor.active_shield_app" which returns the appid replacing state_attr with the states from the new sensor instead. In the state for the new sensor I have friendly names corresponding to the name of the button instead of appid for example YouTube

The idea was then to reference the card button name dynamically, this does not seem to work. Perhaps I need to reference the button.entity (button.name.youtube or something) but that would defeat the purpose I as the script would be button specific for that button.

I suppose I have hit the limitation with card_mod, official button card. Any tips appreciated if it's possible to do something generic without installing a different card or complicate things to much.

I also have still not been able to solve the icon size issue, it does not change the icon size. Trying to figure out how to debug.

`card_mod:
style: |
ha-tile-icon {
--mdc-icon-size: 7000000000000px;
}

card_mod:
style: |
--mdc-icon-size: 70000000px;
}`

As it seems to be in DOM "ha-svg-icon under hu-card-edit-mde #shadow-root" when inspecting the metadata i've also tried a dictionary. so maybe i'm on the right track as it atleast seems to set something.

card_mod: style: | :host { --card-mod-icon-size: 1px; } dictionary: hu-card-edit-mde::shadow ha-svg-icon: | width: 1px !important; height: 1px !important; font-size: 1px !important;

[hardy nimbus]

Is it still possible to use card_mod to pull a template/script someway or is that limited to the custom card completely?
Short answer: Not possible. Two options to make it possible: use the Decluttering card or run a dashboard that is composed totally from YAML (no Editor UI; no Sections) which would allow you to use YAML anchors. Using YAML for the Overview dashboards

I have tried --mdc-icon-size: 1000px; and some other solutions without any impact on the icon size, any tips?
Sometimes you have to add !important to make it work. Sometimes it doesn't have the desired affect. While it does make the icon bigger, it is no longer positioned properly. In this case, the container that holds the icon needs to be adjusted. You can add this under the card_mod that you already have:```yaml
ha-state-icon {
width: 75% !important
}

Haven't had the chance to find alternative icons for the bonus solutions so that's still on the TODO list.
Check out hass-fontawesome and Custom Brand Icons.

[hardy nimbus]

The idea was then to reference the card button name dynamically, this does not seem to work.
The Decluttering Card might be able to help with this. It's certainly the custom:button-card can do... Also, AFAIK, the custom:button-card is also the only card that can handle templated actions (which could possibly do away with the need for scripts.) 😉