I really love the new basic ui and the auto generated location and equipment tabs. What I haven’t figured out yet is how to style the background images of the oh-location-card? As my location images doesn’t fit the default size of the cards I’m looking for a way to configure the behavior.
The yaml representation which I have so far is very basic. What I want to achieve is that the image is not stretched to fill out the whole card which seems to be the default. Any ideas how to achieve this? And is there a documentation place where to look up the valid properties for an oh-location-card?
label: Home Page
- component: oh-locations-tab
- component: oh-location-card
I already tried to set different properties with a style block but wasn’t successful
you can manipulate the background image with something like this, you need to use position css whatever suits best:
what turned out to be useful is to put some brightness to the picture in case the items on the badge in white are not well readable.
thanks for your reply. I played around with position and size css and can’t get them to work. May depend that I’m not familiar with css
I have given a set of imho really nice location background images as the following one per example. They all are actually in upright format in their original. My thought was to put them as a background image where only the upper part is taken and should fill my oh-location-card.
I added some lines and text to see what part of the image is taken right now and no matter what I do it is always the center center part taken.
- component: oh-location-card
As from model-card.vue it seems to be that backgroundImageStyle must be set somehow and is then mapped to the style property of the image? But position and background-position don’t have any effect.
The other option would be to cut the images into the proper sizes. But what would that be? Also the size of an oh-location-card changes if it is clicked to show details
Any help would be appreciated or idea where to look at.
a workaround on your problem would be to work with an image program to cut the part you want to see instead of trying to make it work, specifically as the image is upright. Should be the easiest way
Some good resources for looking into CSS positioning and learn quickly:
the model-card.vue gives some further good indication:
looks like you have some similar background images…just as a reference, for the page backgrounds i was using these CSS parameters, although making this work in location cards backgrounds is more difficult for upright position images.
spreads the background nicely over the page, independent of size ( PC or Iphone ).
where can I find out easily which commands go all in the location cards?
most of the ones I try don’t change anything.
For example, I tried to give the badges in the location-cards a background so that you can see them better in pictures or to change the font color did not work. the only thing I could find that works is that you can change the icon.
similarly stupid I am at the other tabs such as devices and co. Here I would like the background image always remains unchanged. Currently, the scaling of the background image is dependent on the screen size, so it looks stupid on some devices.
Do you have an idea what I can do?