[OH3] Pages background color

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.

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%)

https://developer.mozilla.org/en-US/docs/Web/CSS/background

background: center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg")

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” :wink:
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 :wink: