I’d like the homepage (the one that appears when clicking on the OH-symbol to the top left) to have a background, too.
I can set a background to the ‘overview’-page and it works when this page is opened directly. But when I open the homepage where it’s integrated, there’s no background.
I tried to set a background to the homepage itself, too. But that doesn’t have any effect:
its not possible to have a custom background on the overview page unfortunately. I am not sure if this has already been requested as enhancement request. In summary there are some restrictions on backgrounds in general e.g. vs. widgets. I hope this will be picked up by the development team over time.
At least you’re trying to do something for yourself and this is generally a good thing.
But you’re fighting symptoms rather than solving the cause. The most important thing here is to understand what you do and how everything works together - especially if you like to build up the UI out of custom components.
You should consider, that you might invest hours, days or even weeks for a single widget - and that should be something that you would like to do. A basic understanding of the YAML-structure, the F7-Framework and especially CSS is crucial, if you want to go that route.
I would recommend you, beginning with the creation of a much smaller widget, like rebulding the oh-label-card for example to get an idea what is happening in there.
It’s hard to figure out, which ‘white space’ you’re referring to. You’re writing left but the arrow in your image is pointing at the card background, which is visible on three of the four sides.
Most of the component have a padding / margin to prevent collisions with elements around them and making it usable and good looking on multiple devices and in most of the common use-cases. As you’re using cards in cards here this padding / margin gets multiplied.
But I don’t think this is the real problem here… You just want the whole card to be coloured in this lightgray color. Why not applying the background-color to the f7-card element then, instead of doing it in every component?!
Each component inside that card, which not accept css styles like ‘background’ (like the oh-label-card for example) have to be treated separately. To see the available config parameters for that component you could either use the editor-tooltips or read the docs → oh-label-card - Label Card | openHAB
That is the obvious solution to what I want to achieve. I just didn’t think of it because I tried to transfer your other tip (title colors) to this question, which wasn’t a good idea of mine. That just proves your first point that I should try to “understand what I do and how everything works together”
However, I think by now I achieved most of what I wanted in the area of UI; thanks to your great help!
My next topics are:
graphs (which I managed quite well so far),
the integration of Fritz-Phone-book. I’ll need to find a way to transform an expression like this ({“localNumber”:“4xxxxxxx34”,“remoteNumber”:“017xxxxx0”,“date”:“2021-03-25T09:01:00+01”,“type”:1,“duration”:3},) into a readable table. And it’d be nice to get the phonebook- caller name (might be a challenge because the thread TR-064 Thing Action phonebookLookup not working - #38 by cweitkamp confused me a little; but maybe I’ll understand it better when:
get more familiar with the OH-rules. At the moment I’m exporting things to node-red, work there and export the results back into OH. Probably not very efficient …
and by then maybe my ordered zzh (zigbee-adapter) might get delivered (it’s stuck at customs thanks to Brexit …) which will enable me to implement a few ideas …
Is it possible to us an expression to change the background colour based on an item state?
I tried this YAML code I know how to do, but it didn’t work
’ =(items.XXX.state == “ON”) ? “colour 1”: “colour 2” ’
And it is possible to use both colour AND image, then make the image transparent?
I’m trying to colourise a jpeg image with a conditional colour.
setting opacity: 50% will make the entire page transparent.
style:
background: center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg")
background-color: red
background-opacity: 50%
No. Still doesn’t work. Maybe something to do with the Page not accepting an expression?
I am trying to put this in the config of the page. I know I have it in the right place, because if I just choose a static colour without an expression it works.
add a space character before : (should work without also, but anyway…)
just for testing purpose, replace with this line: '=("1" == "1") ? "red" : "blue"'
background should now be red
and with this line: '=("1" == "2") ? "red" : "blue"'
should now be blue
i don´t think this is currently possible! See a post i had about a similar request. I have added a feature request, would be great if you comment in this feature request as well. THe more people want it, the better this is for priority for the great developers.
config:
label: Audio
style:
background: center / cover no-repeat url(IkeaSYMFONISKSpeakerZonePlayer_CurrentAlbumCoverArtURL.state)
The state in this item is http://10.0.0.32:1400/getaa?s=1&u=x-sonos-spotify%3aspotify%253atrack%253a2fXKyAyPrEa24c6PJyqznF%3fsid%3d9%26flags%3d8224%26sn%3d2
And this works if I paste this url directly in to the background url field.
Thanks. This works as an expression and does give me the correct string now.
But it won’t work in the config of a page. So same problem as before for using it as a background.