🗂 Lovelace Text Divider Row

[Marcus_Lundblad (labaland)]

Thanks you! Looks good Do you know how to change the font size? and maybe even the font ?

[BaerHass]

its html, you can change however you want it

[nscherneck (Nathan Scherneck)]

This is great, thank you! Possible to reduce the top and bottom padding?

[hafa_163]

@iantrich Is there a way to change the font size without changing the theme? Maybe using card-mod? I want different font sizes for different cards. Thanks!

[mirekmal (Mirek Malinowski)]

You can try to use modified code, I provided in this post (and some modifications few posts later). It yer require to put some defaults for the component into the theme file, but it is independent from other theme elements.

[snel6424 (Colton S.)]

@BaerHass

type: custom:html-card
content: |
  <div class="separator">Text</div>
style: |
  .separator {
  display: flex;
  align-items: center;
  text-align: center;
  }

  .separator::before,
  .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #fff;
  }

  .separator:not(:empty)::before {
    margin-right: 1em;
  }

  .separator:not(:empty)::after {
    margin-left: 1em;
  }
  ha-card {
    background: none!important;
    border:none
    }

I want mine basically exactly like yours, but my separator lines and text is white. I got the text changed, but what do I need to change to edit the lines themselves?

EDIT: nevermind, figured it out, its the border-bottom: 1px solid #fff;

[penguinpatrol (C L)]

i am very new to home assistant and recently installed the custom text divider row and have been trying to edit the font size to no success i am unsure how i am doing it incorrectly i have gotten this down? any help is appreciated!

[mirekmal (Mirek Malinowski)]

You need to use card-mod to change the font, as this component does not directly controll this parameter. Al;ternatively you can replace it with customized, forked version of this component, that allows more control via themes file.

[Ildar_Gabdullin]

Should be done as:

  - type: entities
    entities:
      - type: custom:text-divider-row
        text: modded
        card_mod:
          style: |
            :host {
              --text-divider-font-size: 30px;
            }

[penguinpatrol (C L)]

i have tried this but the size is not changing no matter what number i insert

[Ildar_Gabdullin]

Why not trying with a negative value for fontsize?))

[penguinpatrol (C L)]

i am unsure what that means (im new to all this)

[Ildar_Gabdullin]

Sorry, I just wanted to express (and I did it may be not in an appropriate way) that the CSS property’s value should be reasonable.
800px is not a reasonable value - could you test with values between, let’s say, 5px…20px?
Somewhere in the middle there is a default value, so you should test with different values to see a clear difference.

[penguinpatrol (C L)]

ah i see yes i have tried many different values but non of them change anything

[Ildar_Gabdullin]

@Ildar_Gabdullin

5px…20px?

this is not what I suggested here.

[penguinpatrol (C L)]

you mean like this?

[ciddi89 (Christian)]

What I know is, it’s definitely working if you put text-divider-font-size: 20px in your theme yaml. But then all text divider will have this text size.

[Ildar_Gabdullin]

Do you have card-mod installed?

[penguinpatrol (C L)]

ah no i do not

[penguinpatrol (C L)]

i have installed it and have attempted to put the config where it needs to be (i believe this is correct?) but still no use in getting the font size to change