How do I style my titles in Lovelace?

Configuration Frontend
1

I’d like to style the titles for my Lovelace UI. Right now, I’m using a markdown card as a title & divider between card sets. I’d like to style this title, e.g. no borders, a different background color, font color. What is a good way to achieve this?

This is the title I would like to style:

lovelace_style_title
lovelace_style_title822×394 16.3 KB

I tried vertical-stack-in-card but that also removes the borders of all cards in the stack. I would like to keep those borders intact.

2

I would use this

3

I tried the lovelace-card-mod, but I can’t figure out how to change the ‘markdown’-styling. It seems to me the markdown card falls in the category for ‘advanced usage’ for card-mod, since it doesn’t use the ha-card CSS. But Thomas Loven notices this type of styling “is not for the faint of heart”. It seems I’m kind of faint, because I can’t figure it out :smile:

Any pointers?

4

Alright it works with Card Mod, found a working example in Jimz011’s Github.

Code is:

  - type: markdown
    style: >
      ha-card {
        box-shadow: none;
        height: 33px;
        background: none;
        padding: 0px 0px 10px 0px;
      }
    content: '## Media'

@PeteCondliffe Thanks for your suggestion.

2 Likes