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 
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:
- Place the ā
text-divider-rowā inside Entities card (as it supposed to be used). - Apply a card-mod style to the ā
text-divider-rowā:
- type: custom:text-divider-row
text: modded
card_mod:
style:
....
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ā¦
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 
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;
}
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?