How to change text in a custom:text-divider-row

Hello,

I’m bulding a text divider row with the following code:

type: entities
entities:
  - type: custom:text-divider-row
    text: Monitoraggio dispositivi
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
      border: none;
    }
    .text-divider span {
        color: #8Ab4f8 !important;
        font-size: 14px !important;
          }

Well, it changes the features in ha-card but not those one in text-divider span.

Where am I wrong?

This should work for you…

type: entities
entities:
  - type: custom:text-divider-row
    text: Monitoraggio dispositivi
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
      border: none;
      --text-divider-color: #8Ab4f8;
      --text-divider-font-size: 14px;     
       }
2 Likes

YES!! Finally I get how to do for the future. Thank you.

1 Like

Sorry but I noted that around the text there is still the background:

image

It’s a different black respect the total black background, but I’d like to delete it this one also.

By “background: none” on the Entities card level you made the whole card transparent - now you see a “view background” color (black, I guess).
The “divider-row” color uses some “card’s color” for a text label: it is not “line on the left, some text, line on the right” - it is “one long line + an overlaying text in a rectangle”.
If you need this “rectangle” to be of some particular color - then you need to style THIS “rectangle” as well.
Here is a link to a PROPER place where you should have started asking card-mod related questions. As for that “rectangle” - check the 1st post in the mentioned thread → link at the bottom → styles for text-divider-row.

1 Like

I should have pointed you to the main card_mod thread as Ildar mentioned above.

We can finish this thread out with the following code. You cannot make the rectangle transparent because the line will be visible through the lettering. The background color of the rectangle will have to match the the card’s native background color.

background-color: #111111 !important; this is where you would adjust the color to match the card background.

With the rectangle background set to transparent.

With the color match.

type: entities
entities:
  - type: custom:text-divider-row
    text: Monitoraggio dispositivi
    card_mod:
      style: |
       .text-divider span {
          background-color: #111111 !important;
          padding: 2px !important;
            }
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
      border: none;
      --text-divider-color: #8Ab4f8;
      --text-divider-font-size: 14px;    
       }
1 Like

Thank you very much to both of you.

With your support I understand even more the logic behind HA.

PS: anyway it worked again :wink: