Horizontal lines between sections

Configuration Frontend
1

I know this has been asked before, and there is a request for a border around sections already placed, but my dashboard needs a horizonal line between sections.

I took off with the idea I stole from the HA blog and started to create an appliance. Specifically my AC units. I have custom controls for various things like Mode (off, cooling, heating) and Fan (on, auto, recirc) plus the usual curent temp, temp setting, etc. So, I combined all that with a mini graph to form, for me anyway, a very useful display using sections.

It looks great, and works fine, but it’s too “noisy” because there is no separator between the two sections. It looks more like collection of buttons, lists and stuff than two separate devices.

So, while I wait for the section borders and background to be implemented, how can I put a simple horizontal line between the two sections on the dash board??

I don’t want to lose the UI editing, that is great. I’m trying to follow the roadmap of taking the various entities and forming them into ‘things’, like fridge, freezer, pressure cooker, then take them into other things like Kitchen. It would be great to get an email from the Kitchen telling me that the pressure cooker has finished with my pot of beans. Right now, the dashboard is too cluttered and lacks visual organization.

2

Might there be a possibility to create something like this with an empty card and some css using GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card ?

3

This is possible with a Markdown card. Enter three hyphens ---.

You can also use <br> to create a line break before/after if needed.

Screenshot 2025-06-11 at 20.15.09
Screenshot 2025-06-11 at 20.15.092004×1106 114 KB

4

Greg, thanks for the pointer to the markdown card. I tried it and indeed, you can put in a horizontal line, but there were problems with it. The card doesn’t seem to follow the cheatsheet it quotes. For example, it puts a very dim horizontal line surrounded with a border in the ‘card’ config. Using the ‘text’ is better, but it is still so dim it doesn’t really separate anything.

In the cheatsheet quoted, you should be able to get a bold horizontal line, but every attempt that worked in the cheatsheet example failed in the markdown card.

I can’t put examples here because the markdown interpreter keeps getting in the way. It looks like almost every implementation of markdown has quirks.

Plus, the markdown card interferes with the UI editing. Suddenly the little pencils that show up on cards for editing go away, and when you click on the card, it appears for a half-second and the goes away. I got pretty good at doing a double click to catch that pencil before it disappeared.

I’m going to try the other suggestion next to see what happens with it.

5

felixschneider I tried the card mod idea. It looks like I an do a lot to the cards within the section, but only at the card level. The section itself doesn’t seem to work with anything I tried. I put a card in there and messed with it for a while with no real success. If the section had some of the html elements, I might have been able to sneak in a horizontal line, but I haven’t figured it out yet.

Still trying though.

6

I use an empty entities card to create the white spacers. Not exactly a line but it works for me.

image
image471×247 33.2 KB

7

I have used headings and sub-headings to achieve this

8

Headings are what I am using right now. To me, they really don’t separate the different devices enough.

However, combine that with a contrasting background, and that gets the items separated. It isn’t perfect for my purposes, but it’s a heck of a lot better than what I had two days ago.

Thank all of you for the mentoring.

9

This is an option

type: entities
entities:
  - type: divider

or

1 Like
10

That GOT IT !!

However, I had to remove the header card from the section and replace it with the Text Divider Row to make it look right.

Doing the same thing with the divider worked also, but I was able to put the name in the middle of the line with the custom one.

Progress, Thank you.

11

By removing the header card and replacing it with an entities card and making the entity a text divider row, I was able to get some color into it using card mod. Now, the two AC control and information sections can be told apart. I also kept most of the UI working. I still have to edit YAML for the heading, but the rest of it is great.

This will work fine until they get back to sections and add things.

Thanks Y’all

image
image1457×698 61 KB