Is it possible, to change the pages background color?
I don’t want to switch my OS GUI to a dark mode to achieve this, but just have a configured for single pages.
1 Like
You can do that in the Code tab within your page settings via CSS, like:
config:
label: "YOURPAGE"
sidebar: true
style:
background: "linear-gradient(to top left,#151924 0%,#393F4D 100%)"
This procedure does work perfectly fine on any additonal page I create, but I am failing on the default “overview” page. How can I set the background color of this page? The only way I have found so far is to adopt the overall openhab theme to “dark” but if possible I would like to avoid that.
Correct, this seems to have no effect on the default page. Not sure why though.
i believe it is not possible to change the default overview page. You can make any of your page your overview page and url link directly to it as a workaround. The default overview page cannot be deleted though.
Many thanks guys, will do it the way Jan suggested (was thinking about that too before, but still had some hope that there is also an easy solution for the default overview page)
How is this done?
just create your own page and use this URL as your stating point in your browser.
like: http://192.168.178.xx:80xx/#!/page/whateverpage
Ok, that’s what you meant. Thank you!
I’m trying to change the background color without success:
Rainer’s code:
config:
label: "YOURPAGE"
sidebar: true
style:
background: linear-gradient(to top left,#151924 0%,#393F4D 100%)
doesn’t seem to work with my pages; neither with linear-gradient nor a simple color name like yellow (lines 4&5). Any ideas why?
config:
label: simple_test_page
sidebar: true
style:
background: yellow
blocks:
- component: oh-block
config:
backgroundImage: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.de%2Fpin%2F690669292826722110%2F&psig=AOvVaw1IIUHYalwPxbZ08UDNCCJg&ust=1612549717867000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOD53ZTu0O4CFQAAAAAdAAAAABAD
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
slots:
default:
- component: oh-label-card
config:
title: Hello
background: blue
label: Label
item: Netatmoaussen_Temperatur
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-list-card
config: {}
slots:
default:
- component: oh-list-item
config:
title: Hello2
background: blue
masonry: null
All this gets is:
Not so important, more curiosity: Is there a way to use pictures as background like you can with the oh-location-cards? I copied the code to line 9, but I guess that’s not possible for entire pages.
You have to set the style in quotes (due to the hashtag needed for the hex values)…
background: "linear-gradient(to top left, #151924 0%, #393F4D 100%)"
…or use rgb(a) values instead…
background: linear-gradient(to top left,rgb(21,25,36) 0%, rgb(57,63,77) 100%)
background: center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg")
1 Like
Very strange, I just don’t get it to run. Apart from a simple name like ‘red’ I tried both your versions but the background-color of the page doesn’t change. They do work, however, in the background of a label-item:
Here’s the code:
config:
label: simple_test_page
sidebar: true
style:
background: linear-gradient(to top left,rgb(21,25,36) 0%, rgb(57,63,77) 100%)
blocks:
- component: oh-block
config:
backgroundImage: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pinterest.de%2Fpin%2F690669292826722110%2F&psig=AOvVaw1IIUHYalwPxbZ08UDNCCJg&ust=1612549717867000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCOD53ZTu0O4CFQAAAAAdAAAAABAD
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
slots:
default:
- component: oh-label-card
config:
title: Hello
background: linear-gradient(to top left,rgb(21,25,36) 0%, rgb(57,63,77) 100%)
label: Label
item: Netatmoaussen_Temperatur
slots: null
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-list-card
config: {}
slots:
default:
- component: oh-list-item
config:
title: Hello2
style:
background: blue
slots: null
masonry: null
Does it have something to do with the position of the command?
line 4/5 - config and style vs line 22 - directly config, no style
I tried line4 without config without success, so probably not …
The same problem with the background image: This code (rest as above) doesn’t change anything:
config:
label: simple_test_page
sidebar: true
style:
background: center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg")
blocks:
- component: oh-block
config:
In case I / we get this to work, I’d have a follow-up question: How can the colors of title areas as indicated with the green arrow be changed?
Save the page and have a look at it in live view - it might possible that the styles won’t get applied within the “run mode” preview, which would be a small bug. → You could open a issue at the openhab-webui github repo then
I don’t think this is possible in the pre-defined oh-label-card component.
You could do this in a custom-widget by using a pattern like this:
component: f7-card
slots:
default:
- component: f7-card-header
config:
style:
background: green
slots:
default:
- component: Label
config:
text: Header text
- component: f7-card-content
config:
style:
background: lightgreen
slots:
default:
- component: Label
config:
text: Content area
Yes, now it works, so it’s a bug. I’ll report it.
The f7 card is nice, thank you.
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:
config:
label: Home Page
style:
background: linear-gradient(to bottom right,#ccccff 0%,#0066ff 100%)
displayModelCardsTo:
- role:administrator
- role:user
allowChatInputTo:
- role:administrator
- role:user
locations:
- component: oh-locations-tab
config:
cardOrder:
- EG
No background at “homepage”
vs. background when opening overview directly:
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.
thanks for the information, good to know.
Building on your example I’m getting closer to the look I’d like to achieve:
However, there two problems:
- there’re some white space left
- the color of the header and the label card are defined idtentically ("#e6e6e6") but look differently (label card is brighter).
Here’s the code (I tried to make it simpler (like in your other example) but failed miserably ;-), but probably not relevant for the current problem )
component: f7-card
slots:
default:
- component: f7-card-header
config:
style:
background: ="#e6e6e6"
slots:
default:
- component: Label
config:
text: Strom
- component: oh-label-card
config:
item: openWBVerbindung_openWB_EVU
action: analyzer
actionAnalyzerItems:
- openWBVerbindung_openWB_EVU
trendItem: openWBVerbindung_openWB_EVU
icon: oh:energy
style:
background: ="#e6e6e6"
- component: oh-list-card
config:
accordionList: true
noChevron: true
slots:
default:
- component: f7-list-item
config:
accordionItem: true
style:
background: ="#e6e6e6"
slots:
content:
- component: oh-list-item
config:
title: Garage/Zoe
- component: oh-label-item
config:
icon: oh:battery
iconUseState: true
item: openWBVerbindung_OpenWBLP1SoC
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
icon-f7: square_arrow_right
iconColor: '=(items.openWBVerbindung_openWBLP1angeschlossen.state === "0") ?
"gray" : ((items.openWBVerbindung_openWBLP1ladend.state
=== "1") ? "green" : "orange")'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
height: auto
- component: oh-label-item
config:
item: openWBVerbindung_openWBLP1ladeleistung
default:
- component: f7-accordion-content
slots:
default:
- component: f7-list-item
config:
accordionItem: true
slots:
content:
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: openWBVerbindung_openWB_LP1_lademodus
actionCommand: ="2"
icon-f7: sun_max
iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "2") ?
"blue" : "grey"'
text: PV
textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "2") ?
"blue" : "grey"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: openWBVerbindung_openWB_LP1_lademodus
actionCommand: ="0"
icon-f7: timer
iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "0") ?
"blue" : "grey"'
text: Sofort
textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "0") ?
"blue" : "grey"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: openWBVerbindung_openWB_LP1_lademodus
actionCommand: ="4"
icon-f7: pause_circle
iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "4") ?
"blue" : "grey"'
text: Standby
textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "4") ?
"blue" : "grey"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: openWBVerbindung_openWB_LP1_lademodus
actionCommand: ="3"
icon-f7: stop_circle
iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "3") ?
"blue" : "grey"'
text: Stop
textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "3") ?
"blue" : "grey"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: oh-button
config:
class:
- margin
- display-flex
- flex-direction-column
action: command
actionItem: openWBVerbindung_openWB_LP1_lademodus
actionCommand: ="1"
icon-f7: sun_haze
iconColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "1") ?
"blue" : "grey"'
text: Min+PV
textColor: '=(items.openWBVerbindung_openWB_LP1_lademodus.state === "1") ?
"blue" : "grey"'
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
font-size: 8px
height: auto
- component: f7-list-item
config:
accordionItem: true
slots:
default:
- component: oh-slider-item
config:
title: Sofortladen - Stärke
item: openWBVerbindung_openWB_LP1_sofortladensollstromstaerke
min: 6
max: 32
step: 1
label: true
scale: true
unit: A
- component: f7-list-item
config:
accordionItem: true
slots:
default:
- component: oh-slider-item
config:
title: Sofort bis SoC
item: openWB_LP1_DirectChargeSoc
min: 0
max: 100
step: 5
label: true
scale: true
scaleSteps: 10
scaleSubSteps: 1
- component: f7-list-item
config:
accordionItem: true
slots:
content:
- component: oh-label-item
config:
title: kWh heute
item: openWBVerbindung_openWBLP1Tagesladung
icon: oh:energy
- component: oh-label-item
config:
item: openWBVerbindung_openWBLP1ladeleistung
title: "lädt:"
action: analyzer
actionAnalyzerItems:
- openWBVerbindung_openWBLP1ladeleistung
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 …
So no boredom ahead