Lovelace Special rows (divider) define style globally

Configuration Frontend
1

Hi all!
Since 0.75.0b0 there are special rows in the entities card
Auswahl_137

If i use the dividers and style them to my needs, there’s a lot of code to write/change in the ui-lovelace.yaml for every divider.

      - type: entities
        title: Switches
        show_header_toggle: false
        entities:
          - switch.mcp23017_test_01
          - switch.mcp23017_test_02
          - switch.mcp23017_test_03
          - switch.mcp23017_test_04
          - switch.mcp23017_test_05
          - type: divider
            style:
              height: 1px
              width: 80%
              margin-left: auto
              margin-right: auto
              background: '#62717b'
          - switch.tpad_screen
          - switch.tpad_vlc
          - type: divider
            style:
              height: 1px
              width: 80%
              margin-left: auto
              margin-right: auto
              background: '#62717b'
          - switch.sg90_servo
          - input_number.sg90_servo

Is there any way to define the styles globally, so i don’t have to edit every divider on change?

Thanks in advance!

2

Hi, i’m running the same versione (beta) but i have problems with divider, could you help me?
my config is:

 - type: entities
    entities:
      - switch.apertura_cancello_tmpl
      - switch.apertura_ped_cancello_tmpl        
      - type: divider
        style:
          height: 1px
          width: 80%
          margin-left: auto
          margin-right: auto
          background: '#62717b'

but got error “object at position 2 is missing entity field”

3

Looks like your indentation is wrong. Does this work without the divider?

4

Maybe this is the problem:
k%C3%A9p

5

:ok_hand: it was the problem. this morning i tried also updating to new versione and it fixed.
than you guy

1 Like
6

Where is the exact documentation for divider? it says I can use CSS, yet I can’t use the same as I used for Hline:

width: 100
height: 1
backgroundcolor: white
bordertop: none
backgroundimage: linear-gradient(to right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.02))
7

The documentation is here and examples in the Gallery.

8

It is a pretty deficient, i would not say it is a documentation. The gallery is a blank page for me, tried in different browsers.

9

Works for me in Firefox 61.0.1 on Ubuntu without issues.

Auswahl_139
Auswahl_139853×474 27.7 KB

The last line as code:
background: center / contain url("/images/divider.png") no-repeat

10

Okay this one works:
background: linear-gradient(to right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.02))

1 Like
11

Simply shows nothing for me! :neutral_face:

13

For this i’m asking in this topic! :grinning:

1 Like
14

There might be a better way to do it with input_text or something else, but you can do it with secrets.yaml

in secrets.yaml

divider: 
  height: 1px
  width: 80%
  margin-left: auto
  margin-right: auto
  background: '#62717b'

in ui-lovelace.yaml

  - type: entities
    title: Switches
    show_header_toggle: false
    entities:
      - switch.mcp23017_test_01
      - switch.mcp23017_test_02
      - switch.mcp23017_test_03
      - switch.mcp23017_test_04
      - switch.mcp23017_test_05
      - type: divider
        style: !secret divider
      - switch.tpad_screen
4 Likes
15

That’s nice :blush:
Thanks for this!

16

Also, most folks use themes, and you can use the theme colors rather than hard coding colors inside your yaml. Here is a sample code:

  - type: divider
	style:
	  height: 3px
	  width: 100%
	  margin-left: auto
	  margin-right: auto
	  background: "var(--dark-primary-color)"

Specify the variable name instead of hard-coding the color value. It will then automatically pickup the color from the theme and apply it.

For those who use themes, you can pickup names from here: https://github.com/skalavala/smarthome/blob/master/packages/frontend_themes.yaml

1 Like
17

OP asked a while ago, but this maybe of use to you, dear reader from the future!

You can also use YAML anchors. This way you only define the first divider’s style once (&divider_style), then paste the placeholder name (*divider_style), like so:

      - type: entities
        title: Switches
        show_header_toggle: false
        entities:
          - switch.mcp23017_test_01
          - switch.mcp23017_test_02
          - switch.mcp23017_test_03
          - switch.mcp23017_test_04
          - switch.mcp23017_test_05
          - type: divider
            style: &divider_style
              height: 1px
              width: 80%
              margin-left: auto
              margin-right: auto
              background: '#62717b'
          - switch.tpad_screen
          - switch.tpad_vlc
          - type: divider
            style: *divider_style
          - switch.sg90_servo
          - input_number.sg90_servo

To keep things tidy, you could even define these styles as dummy custom YAML entries at the top of your file (outside of the Lovelace views section), then apply them wherever you need:

styles:
  divider: &divider_style
    height: 1px
    width: 80%
    margin-left: auto
    margin-right: auto
    background: '#62717b'

views:
  - title: switchboard
    cards:
      - type: entities
        title: Switches
        show_header_toggle: false
        entities:
          - switch.mcp23017_test_01
          - switch.mcp23017_test_02
          - switch.mcp23017_test_03
          - switch.mcp23017_test_04
          - switch.mcp23017_test_05
          - type: divider
            style: *divider_style
          - switch.tpad_screen
          - switch.tpad_vlc
          - type: divider
            style: *divider_style
          - switch.sg90_servo
          - input_number.sg90_servo
13 Likes
18

Best thing I found today!

1 Like
19

Same here! Thank you!