OH3 Location card text - drop shadow?

Setup, Configuration and Use Items & Sitemaps
1

Loving the auto-creation of Location tab in OH3 when you properly build the semantic model!

I’ve added background pictures to my location cards but the title text is sometimes hard to see when the background behind is light. The “Invert Title Text” option doesn’t help, as the exact background colour varies depending on how the image is positioned (varies by device).

Something that would really help here is to have an option for Drop Shadow on title text, maybe with an option to specify the drop shadow colour.

Is the Location card user-customisable somehow (even if coding is required)?

2

In those cases you can make the image a little darker with a CSS filter in the backgroundImageStyle property:

        - component: oh-location-card
          config:
            backgroundImage: /static/cardbkg/living.jpg
            backgroundImageStyle:
              filter: brightness(60%)

I don’t think you can change the CSS of the title label, but adding a property to do so isn’t out of the question.

1 Like
3

Good suggestion, but that will only be viable if the image doesn’t have much dynamic range. In my images, that will turn many dark areas black, which will look odd.

Should I raise this as an Issue in Github?