They are but only if you have defined themesā¦
The thing is if you add a theme and there are missing variables it will get the missing ones from the default theme. Depending on how you have themes configured that may be either dark or light theme.
1 Like
Hi, Iāve been scratching my head for last 45 mins why this doesnāt work for me. For some reason the margin is not changing. I replaced the text in the js file, also tried removing the lovelace resource and readding. I can make the text size change and the colours change but the margin will not change. Any ideas?!
Did you removed or renamed text-divider-row.js.gz prior to making change? If it stays in the resource folder, HA apparently takes original component from the archiveā¦
EDIT: well, if other settings works for you, but marginā¦ the I have no idea 
Perhaps some global theme settings (did you tried same with standard HA themes?) or any card mod interfering?
Urgh, you are right, I did not remove the archive - I just renamed the js file onlyā¦ guess I need to learn to read. Thanks for getting back and helping me, also for making these awesome changes 
Now works.
glad to hear 
Please tell me, I have a code like this
- type:'custom:auto-entities'
show_empty: false
card:
type: entities
entities:
- type: 'custom:text-divider-row'
text: Motion Sensors
text-divider-color: '#1A89F5'
text-divider-font-size: 28px
filter:
include:
- entity_id: sensor.*battery*
state: < 40
sort:
method: state
numeric: true
But not the color of the text, not its size do not change, tell me what am I doing wrong?
Those are theme options and should as such should be in your theme
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ā¦
