🗂 Lovelace Text Divider Row

Share your Projects! Dashboards & Frontend
21

You should be able to use card-modder then

22

Well I could hack the js file for the card too but thought it would be pretty simple to have an option in the card instead of doing that or using yet another custom-card.

24

@iantrich would be great if we could adjust the font-size as this row can take up a bit of real estate

25

Can you submit a feature request to the repo?

1 Like
26 
/local/custom_ui/text-divider-row.js:1:1 SyntaxError: redeclaration of const LitElement

I’m getting this error.

27

@Abeksis are you using an older version? You probably have another card that was conflicting with LitElement import. Grab the newest version and clear your browser cache

28

I took off yours exactly two hours ago - I did not know it existed and so I had nothing else. As for the cache - I already did not help.

29

What other custom cards are you using? Can you also double check that your js file matches that found here: https://github.com/custom-cards/text-divider-row/blob/master/dist/text-divider-row.js

1 Like
30

It’s a great Lovelace card.

It worked perfectly when the ‘entities’ card but it’s not working correctly with ‘glance’ card that has ‘entity-button’. Is this a limitation?

54%20PM

  - id: 9999  
    type: glance
    # title: Switches
    columns: 3
    entities:
      - type: 'custom:text-divider-row'
        text: Switches
      - type: entity-button
        entity: switch.ge_12722_onoff_relay_switch_switch_3
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: entity-button
        entity: switch.ge_12722_onoff_relay_switch_switch_2
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: entity-button
        entity: switch.ge_12722_onoff_relay_switch_switch_4
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: entity-button
        entity: switch.leviton_dzs151lz_switch_switch
        tap_action:
          action: toggle
        hold_action:
          action: more-info
      - type: entity-button
        entity: switch.ge_12722_onoff_relay_switch_switch
        tap_action:
          action: toggle
        hold_action:
          action: more-info
31

It’s a row element. Rows go in the entities card

32

Oh ok. Thank you for the tip.

I changed my setup little bit and added a one-row element. Now it worked correctly. Is there an option to reduce gap above ‘text’?

12%20AM

33

Have you tried using card-modder?

34

Great card. Thanks for developing it!

1 Like
35

Could someone give some examples of how to use card-modder with the Divider Row. I’m just getting started with Lovelace and I’ve tried card-modder on a couple of other cards with mixed success, but I can’t work out what styles I can modify for the divider. Nothing seems to have any impact…

36 
                - type: 'custom:card-modder'
                    card:
                      type: 'custom:text-divider-row'
                      text: Network
                    style:
                      font-size: 10px
                      --secondary-text-color: '#2980b9'
37

Great, thanks very much jcreynolds, quite simple really, once you know :+1:

38

1.0.4 Release:

  • Fix for Home Assistant Cast
39

Version 1.4.0 Released with new theme variables

name Default Description
text-divider-color secondary-text-color Divider color
text-divider-font-size 14px Font size
text-divider-line-size 1px Line size
1 Like
40

How do I use this variables? I’m trying like this but it’s not working! :frowning:

text: House Locations
type: 'custom:text-divider-row'
text-divider-font-size: 20px

Last time I edit the source code to tweak it but I lost with the updates! And now looks like won’t need to do that anymore! :wink:

41

It is a theme variable