Card Mod - Style Secondary Info Text

Configuration Frontend
1

So I managed to install card mod and style the main text and overall font weight for an individual card:

  card_mod:
    style: |
      ha-card {
        color: red;
        font-weight: 800;
      }

But how can I change the color of the secondary_info element? And if I use font-weight it changes the overall font weight … what if I only want the secondary_info in bold?

  card_mod:
    style: |
      ha-card {
        color: red;
        font-weight: 800;   #CHANGES OVERALL :(
        secondary-text-color: blue;    #DOES NOT WORK
      }
2

Use F12 in chrome to see if it uses a separate variable, then apply the change on just that variable. If that’s not possible, you need to modify the style selector to only grab the secondary_info element. This will vary card by card. There’s a whole card mod thread where you can ask for help with that or look up examples where other people may have solved this problem.

3

Ok progress … correct syntax for the secondary-text-color is “–” so the following works:

  card_mod:
    style: |
      ha-card {
        color: red;
        #font-weight: 800; #Would change all text to bold
        --secondary-text-color: blue; #Changes Secondary Text to blue
        --secondary-text-font-weight: 800; #DOES NOT WORK :(
      }

Now I just need the font-weight for secondary text.

4

It’s not going to have a variable, you’re going to have to adjust the selector for that.

5

… how do I do that? Still have not figured that out …

I currently have that card output:

type: custom:auto-entities
card:
  type: entities
  title: Discord Online
filter:
  template: |-
    {% for state in states.sensor -%}
      {%- if state.entity_id | regex_match("sensor.discord_user_", ignorecase=False) -%}
        {{
          {
            'entity': state.entity_id,
            'name': state.attributes.friendly_name.split('#')[0],
            'type': "custom:secondaryinfo-entity-row",
            'secondary_info': state_attr(state.entity_id, 'game')
          }
        }},
      {%- endif -%}
    {%- endfor %}
  exclude:
    - state: offline
    - state: unavailable
show_empty: false
sort:
  method: name

Which creates that:

Bildschirmfoto 2022-01-15 um 11.38.40
Bildschirmfoto 2022-01-15 um 11.38.40858×232 19 KB

Ideally the output should be that:

Bildschirmfoto 2022-01-15 um 11.41.24
Bildschirmfoto 2022-01-15 um 11.41.24860×236 19 KB

6

Any lock with this so far @pixelwave ? I’m also trying to change what would be the font-size of the secondary text (a status displayed as text on a button card). I’m using card-mod but just like you, I’m only able to change color and not font size. let me know if you figure it out.

7

See here

1 Like
8

SUCCESS! After many try-and-error attempts this now works for me:

type: entities
entities:
  - entity: sensor.discord_user_34***
    type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            .info .secondary {
              color: red !important;
              font-weight: bold;
            }
    secondary_info:
      attribute: game

Bildschirmfoto 2022-01-19 um 15.44.29
Bildschirmfoto 2022-01-19 um 15.44.291428×840 69.9 KB

2 Likes
9

Also works if you put it on top like this … then it is valid for all “multiple-entity-row” elements:

type: entities
card_mod:
  style:
    multiple-entity-row:
      $:
        hui-generic-entity-row:
          $:
            .info.pointer .secondary: |
              .info .secondary {
                color: red !important;
                font-weight: bold;
              }
entities:
  - entity: sensor.discord_user_345507118276673547
    type: custom:multiple-entity-row
    secondary_info:
      attribute: game
10

… now I only need to figure out how this works for “secondaryinfo-entity-row”.

After inspection the name is the same for the subelements… but somehow this does not work:

type: entities
card_mod:
  style:
    secondaryinfo-entity-row:
      $:
        hui-generic-entity-row:
          $:
            .info.pointer .secondary: |
              .info .secondary {
                color: red !important;
                font-weight: bold;
              }
entities:
  - entity: sensor.discord_user_34***
    type: custom:secondaryinfo-entity-row
    secondary_info: test
11

… I noticed there is one additional wrapper. So this works but only briefly. The text flickers red and then goes back to normal state?

type: entities
card_mod:
  style:
    secondaryinfo-entity-row:
      $:
        hui-sensor-entity-row:
          $:
            hui-generic-entity-row:
              $:
                .info.pointer .secondary: |
                  .info .secondary {
                    color: red !important;
                    font-weight: bold;
                  }
entities:
  - entity: sensor.discord_user_34***
    type: custom:secondaryinfo-entity-row
    secondary_info: test
12

Is it possible to change the color of the secondary text based on a condition?

How to do that?

13

Go to the hide card mod thread , there are tons of examples.