🗂 Lovelace Text Divider Row

now I understand, thanks a lot

Hi!
I’ve been using this text divider for well over a year, but somehow it’s stopped working (can’t really say when but recentlyish?).
I’ve tried removing the js and replace with a new one, tried removing it from resources (via the home assistant configuration/lovelace setting place).
The code seems to work (doesn’t show up in red) but there’s just nothing there :frowning:

cards:
  - text: text goes here
    type: 'custom:text-divider-row'
  - cards:
      blaba....

Couldn’t figure out the formating above but the spacing is correct in real life.
I can’t seem to find any errors in the homeassistant log- could errors end up somewhere else?
Thanks for your time // Martin

Edit: it started working again for some unknown reason. Well, good enough for me.

Seems the transparent background issue has returned since updating to HA 12.4. Why can’t I make it transparent again? Thoughts?

1 Like

Can confirm that the transparent background issue persists.
Changing the background-card-color: card-background-color: changes the background now instead of paper-card-background-color:.

Love this card to break up my mobile view using the Mushroom theme.

Looking for some help on the text background. It doesn’t quite match the background and looks to default to the card background colour.

I’m struggling to figure out how to remove the entities box and not have the text background the pure white:

Here is the code I’m using:

type: entities
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
      card-background-color: '#FAFAFA';
    }
entities:
  - type: custom:text-divider-row
    text: Text

I’ve messed around with different values for card-background-color and also gave paper-card-background-color a go too. I’ve tried HEX and RGBA colours. Seen a few posts trying to use just the text-divider-row card without the entities card but this seemed the best way to achieve the look by using card_mod. Thanks for any help!

Seems like a “guessing” - no wonder it make take a lot of time and may not provide a positive result (((.
Each element has a set of supported CSS-properties, some of them may be assigned to supported variables.
We should not “guess” - we should open the Code Inspector (or how is it called in a browser) and see what properties are used for an element.
Check this link.
Probably you need to give a transparent background to a label (see an example with “background-color”).

If you got a lot of text-divider-row in your HA setup - then probably you should use a card-mod-theme for all text-divider-row instances with a corrected style.
IMHO the background for the label should be transparent w/o any card-mod… But for now it could be a good workaround.

Good advice, thanks for the response! Always forget about the good old inspector…

That link is exactly what I’m trying to achieve so what I have done is overwrite my block with the extract from that link:


However it isn’t updating the styling despite it showing the paint brush at the bottom.
Shall I uninstall and reinstall the card-mod addon?

UPDATE: Found a workable solution within the entities card styling:

type: entities
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
      --ha-card-background: #fafafa
    }
entities:
  - type: custom:text-divider-row
    text: Rooms

I’m now playing around with your suggestion of editing the theme rather than applying to every text-divider row…but it may not work as it would affect those entities cards I’m not using with the text divider row. I will update if I figure it out…

UPDATE 2: Definitely need to do something at the theme level as I need to have two different colours based on LIGHT or DARK modes.

Because you are trying to apply a card-mod style to a card which DOES NOT have a ha-card element.
Read docs for card-mod on GitHub.
The card is supposed to be used inside the Entities card - which DOES have a ha-card element , so the card-mod style may be applied.

This “brush” is not related to card-mod.

The card-mod style in the example you provided is not related to to styling the “text-divider-row”.
It MAY affect - nothing more.
Probably by this style you defined the “--ha-card-background” variable (undefined by default) and this variable is used then by the “text-divider-row”.
What you really need is:

  1. Place the “text-divider-row” inside Entities card (as it supposed to be used).
  2. Apply a card-mod style to the “text-divider-row”:
      - type: custom:text-divider-row
        text: modded
        card_mod:
          style:
            ....
1 Like

In some cases you DO NOT need a custom theme to handle “light/dark mode”.
Read this.

1 Like

Hi,
This is a great custom card which I use around my Lovelace to group information.

Currently is showing the line through the divider:

and I have it configured like:

   cards:
      - type: custom:vertical-stack-in-card
        title: Non-rechargeable batteries
        cards:
          - type: custom:text-divider-row
            text: Temperature Sensors
            cards: null
          - type: entities
            entities:
              - entity: sensor.living_room_temp_battery
                name: Living Room (Xiaomi)
                type: custom:bar-cardtype or paste code here

I’ve gone through this thread but can’t seem to make it without the line again.

Any help is appreciated.

Thanks!

I found similar and its because it is an entities row item rather than a card in itself. It is designed to be used within the Entities card. I used card-mod to hide the Entities card background and then adjust the background of the Text Divider element…

Thanks @BlackCatPeanut! I’ll follow that path - a few things have to be changed… :thinking:

Hi @BlackCatPeanut
so following the info and links (thanks @Ildar_Gabdullin ) I’ve managed to end in something like this:

With code:

    cards:
      - type: entities        
        entities:          
          - type: custom:text-divider-row
            text: strikethrough
            card_mod: 
              style: |
                .text-divider {
                  
                }
                .text-divider span {
                  color: orange !important;
                  background-color: none !important;
                  padding-left: 32px !important;
                  padding-right: 32px !important;
                }

Which is still with the line dividing the text.Should be a simple formatting line - can anyone help on this?

Thanks!

Can you paste your code here, please?

I’ve gone in a different direction for this card so unfortunately no longer use it as I described before. Sorry :frowning:

ok, so then could you tell us your method how to get a divider with a title without all the problems we are discussing here? Thank you

I opened the .js file and hardcoded the background color of my theme. Sure, I could put a var there, but I cannot find what variable is the background from the theme.yaml file. Adding the color in the format #07090e to span worked for me.

      .text-divider span {
        color: var(--divider-color);
        font-size: var(--font-size);
        background: #07090e;
        padding: 1px 1em;
      }

image

1 Like

No, it does not work. I also tried to add

style: |
  .text-divider span {
    background: #07090e !important;
  }

below the type: custom:text-divider-row but the result still inherit something from somewhere and I cannot find where. The inherrited properties are:

.text-divider span {
    color: var(--divider-color);
    font-size: var(--font-size);
    background: var(--background);
    padding: 1px 1em;
}

What do you want to achieve by card-mod?