Change state name and text color

Configuration Frontend
1

Hey guys! How do i change the text and the color in the second row.

card_mod:
  style: |
    ha-card {
      background-color:
        {%- set sensor = states('sensor.0007_state') %}
        {%- if sensor == 'open' %}#ff1c1c
        {%- elif sensor == 'tilted' %}#FF5E13
        {%- else %}#006400
        {%- endif %};
      color:
        {{ '#000000' if is_state('sensor.0007_state', 'tilted') else '#ffffff' }}
      }

The first row of the label shows the friendly name and the second row shows the condition. I will rename the state from „tilted“ to „Gekippt“, „open“ to „Geöffnet“ and „closed“ to „Geschlossen. And if the door is „Geöffnet“ (=open), i would like to change the state color to black.

I tried:

  • color:
  • primary-text-color:
  • secondary-text-color:
  • paper-item-icon-color:
  • icon_color:
  • hs_color:
  • label-badge-text-color:

Bild
Bild828×428 84.4 KB

3

Pushing pushing

4

You’re missing the ; at the end of the color line.

5

Thank you! I misunderstood you or that doesn’t work for me. Is that what you mean, @petro :

card_mod:
  style: |
    ha-card {
      background-color:
        {%- set sensor = states('sensor.0007_state') %}
        {%- if sensor == 'open' %}#ff1c1c
        {%- elif sensor == 'tilted' %}#FF5E13
        {%- else %}#006400
        {%- endif %};
      color:
        {{ '#000000' if is_state('sensor.0007_state', 'tilted') else '#ffffff' }};
      }
6

Yes that’s what I mean, now you just need to find the text attribute. I don’t believe color is it. But the reason all your testing was failing was because you’re missing the ;.

7

Ok, thank you! Now i´m able to change the primary text color. But i didn´t know the name for the second row. I can´t change the state color in the second row.

8

Use chromes developer tools to inspect the element and figure out what color the text is using. It’ll also be listed in a theme, but you’ll have to guess.

9

The chrome developer tools shows “secondary-text-color”. But it doesn´t work.

10

make sure you have a semi colon at the end of every css style

11

It´s –secondary-text-color:

type: button
tap_action:
  action: none
entity: sensor.0007_state
show_state: true
show_icon: false
icon_height: 45px
hold_action:
  action: none
name: GartentĂźr
show_name: true
card_mod:
  style: |
    ha-card {
      background-color:
        {%- set sensor = states('sensor.0007_state') %}
        {%- if sensor == 'open' %}#ff1c1c
        {%- elif sensor == 'tilted' %}#FF5E13
        {%- else %}#006400
        {%- endif %};
      --secondary-text-color: {{ '#000000' if is_state('sensor.0007_state', 'tilted') else '#ffffff' }};
      color:
        {{ '#000000' if is_state('sensor.0007_state', 'tilted') else '#ffffff' }};
      }
1 Like
12

Hi, Is it possible to have a different --secondary-text-color for multline secondary text? Please see my card details below.

type: custom:mushroom-template-card
primary: Browserless
secondary: >-
  {{ state_attr('switch.rajannas_docker_browserless', 'status') | title }}

  {{ 'Update-Ready' if not state_attr('switch.rajannas_docker_browserless',
  'uptoDate') else state_attr('switch.rajannas_docker_browserless', 'uptoDate')
  | title }}
icon_color: ''
fill_container: false
multiline_secondary: true
tap_action:
  action: more-info
hold_action:
  action: none
double_tap_action:
  action: call-service
  service: button.press
  target:
    entity_id: button.rajannas_docker_browserless_restart
picture: >-
  http://192.168.1.112:80/state/plugins/dynamix.docker.manager/images/Browserless-icon.png
icon: ''
entity: switch.rajannas_docker_browserless
card_mod:
  style: |
    ha-card {
      --secondary-text-color: {{ 'green' if is_state_attr('switch.rajannas_docker_browserless', 'status', 'started') else 'red' }};
      }

For my 1st secondary text, the card mode query below works.

card_mod:
  style: |
    ha-card {
      --secondary-text-color: {{ 'green' if is_state_attr('switch.rajannas_docker_browserless', 'status', 'started') else 'red' }};
      }

But I want the 2nd secondary text line below to show the text in Orange when it says ‘Update-Ready’ other wise in Green if value returns ‘Up-To-Date’

 {{ 'Update-Ready' if not state_attr('switch.rajannas_docker_browserless',
  'uptoDate') else state_attr('switch.rajannas_docker_browserless', 'uptoDate')
  | title }}

image