🗂 Lovelace Text Divider Row

BlackCatPeanut · May 13, 2022, 1:40pm

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!

Ildar_Gabdullin · May 27, 2022, 4:01pm

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.

BlackCatPeanut · May 27, 2022, 4:45pm

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

BlackCatPeanut · May 30, 2022, 3:38pm

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.

Ildar_Gabdullin · May 30, 2022, 6:47pm

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:
            ....

Ildar_Gabdullin · May 30, 2022, 7:28pm

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

nguedes · June 6, 2022, 7:03pm

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!

BlackCatPeanut · June 7, 2022, 7:32am

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…

nguedes · June 7, 2022, 4:20pm

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

nguedes · June 8, 2022, 9:56am

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!

Vahaldor · August 1, 2022, 9:31am

Can you paste your code here, please?

BlackCatPeanut · August 1, 2022, 10:59am

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

Vahaldor · August 1, 2022, 11:45am

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

Vahaldor · August 1, 2022, 12:22pm

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;
      }

Vahaldor · August 1, 2022, 1:48pm

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;
}

Ildar_Gabdullin · August 1, 2022, 1:49pm

What do you want to achieve by card-mod?

Vahaldor · August 1, 2022, 4:18pm

I also tried to add the variable

background: #07090e;

to themes yaml but it does not read it. It shows that variable with a different value. Not a programmer but why tracing back the inheritence using developer tools does not backwards influence the css? What are we missing?

Ryan_Grandy · August 1, 2022, 6:41pm

I have a setup which uses the markdown card and lovelace_gen to do the title with divider line and allow the background to be transparent so anything behind shows through. I’m not a code expert so I’m not sure if this is the best way, but it works pretty well for my setup.

I use lovelace_gen so all I have to do is something like:

- !include
  - "../template/headers.yaml"
  - content: "'## House'"

which uses the following code to create different header styles including the one with the divider line.

# lovelace_gen
type: markdown
style:
  .: |
    ha-card {
      box-shadow: none;
      color: {{ color|default('white') }};
      padding: 5px 5px;
      background: none;
    }
    ha-markdown {
      padding-top: {{ tPad|default('0 !important') }};
      padding-bottom: {{ bPad|default('0 !important') }};
      padding-left: {{ sPad|default('0 !important') }};
      padding-right: {{ sPad|default('0 !important') }};
    }
  ha-markdown $: |
      h2 {
        display: grid;
        grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
        align-items: center;
        text-align: center;
        grid-gap: 20px;
        width: 100%;
      }
      h2:before,
      h2:after {
          content: '';
          border-top: 2px solid;
      }
      h4 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
content: {{ content }}

Vahaldor · August 1, 2022, 7:58pm

I am trying figure out how to set it up. Looks interesting but I need to ask you for some detail.
This code is goes below a card ok?

- !include
  - "../template/headers.yaml"
  - content: "'## House'"

Please give us longer code. When I add it under card (according to the docs of the lovelace_gen), !include is not understood.

The code begining # lovelace_gen suppose to be saved as headers.yaml into …/config/www/template/headers.yaml or elsewhere? Thanks.

Vahaldor · August 1, 2022, 8:19pm

I am trying to load t he headers.yaml in configuration.yaml and went to two different errors:

view is not found as an intergration (following the docs for the lovelace_gen, in which the author shows that the yaml files should be called in configuration.yaml)
the 36th row content: {{ content }} returns error when I am checking the configuration before restart

Please, more detailed help will be appreciated!