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

Configuration Frontend
1

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?

2

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
3

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

1 Like
4

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.

5

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
6

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.

image
image832×126 2.58 KB

With the color match.

image
image886×162 2.79 KB

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
7

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: