[OH3] Pages background color

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:

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%

try with additional space character and different " and ’

' =(items.XXX.state == "ON") ? "colour 1" : "colour 2"'

No, doesn’t work

'=(items.XXX.state == "ON") ? "colour 1" : "colour 2"'

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.

can you post a little bit more of your code?

All of the below comes frome the Code tab of the page I am editing:

config:
  label: Heating Controls
  sidebar: true
  style:
    background: '=(items.TadoHeating_AtHome.state == "ON") ? "red": "blue"'
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:HeatingControlsCell
                config:
                  item: TadoHeating_AtHome
  - component: oh-block
    config:
      title: Stats
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:widget_TadoHeatingPower
                config: {}
              - component: widget:widget_RoomTemperatures
                config: {}
              - component: oh-label-cell
                config:
                  subtitle: Water tank
                  footer: '=(items.WaterTankSensor_Temperature.state >= "70") ? "Good for a bath": (items.WaterTankSensor_Temperature.state >= "66") ? "Ok for a bath": (items.WaterTankSensor_Temperature.state >= "60") ? "Ok for dishes": " "'
                  item: WaterTankSensor_Temperature
                  icon: '=(items.WaterTankSensor_Temperature.state < "50") ? "oh:temperature_cold": (items.WaterTankSensor_Temperature.state >= "50" && items.WaterTankSensor_Temperature.state < "70") ? "oh:temperature": "oh:temperature_hot"'
                  on: true
                  color: '=(items.WaterTankSensor_Temperature.state < "50") ? "blue": (items.WaterTankSensor_Temperature.state >= "50" & items.WaterTankSensor_Temperature.state < "66") ? "yellow": (items.WaterTankSensor_Temperature.state >= "66" & items.WaterTankSensor_Temperature.state < "68") ? "orange": (items.WaterTankSensor_Temperature.state >= "68" & items.WaterTankSensor_Temperature.state < "70") ? "deeporange": (items.WaterTankSensor_Temperature.state >= "70" & items.WaterTankSensor_Temperature.state < "72") ? "pink": (items.WaterTankSensor_Temperature.state >= "72") ? "red": "white"'
                  action: analyzer
                  actionAnalyzerItems:
                    - WaterTankSensor_Temperature
                  actionAnalyzerCoordSystem: time
                  expandable: false
              - component: widget:widget-cell-Outside
                config: {}
  - component: oh-block
    config:
      title: TRVs
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:Temperature Cell
                config:
                  location: Sitting room
                  temperature: SittingRoomTRV_Temperature
                  target: SittingRoomTRV_TargetTemperature
                  heatp: SittingRoomTRV_HeatingPower
                  open: WindowSensorSittingroom_OpenClose
                  hvac: SittingRoomTRV_HVACMode
              - component: widget:Temperature Cell
                config:
                  location: Kitchen
                  temperature: KitchenTRV_Temperature
                  target: KitchenTRV_TargetTemperature
                  heatp: KitchenTRV_HeatingPower
                  open: DoorSensorFrontdoor_OpenClose
                  hvac: KitchenTRV_HVACMode
                  open2: DoorSensorBackDoor_OpenClose
              - component: widget:Temperature Cell
                config:
                  location: Hall
                  temperature: HallTRV_Temperature
                  target: HallTRV_TargetTemperature
                  heatp: HallTRV_HeatingPower
                  open: DoorSensorFrontdoor_OpenClose
                  hvac: HallTRV_HVACMode
              - component: widget:Temperature Cell
                config:
                  location: Bath room
                  temperature: BathroomTRV_Temperature
                  target: BathroomTRV_TargetTemperature
                  heatp: BathroomTRV_HeatingPower
                  hvac: BathroomTRV_HVACMode
                  open: DoorSensorBackDoor_OpenClose
              - component: widget:Temperature Cell
                config:
                  location: Back room
                  temperature: BackRoomTRV_Temperature
                  target: BackRoomTRV_TargetTemperature
                  heatp: BackRoomTRV_HeatingPower
                  open: WindowSensorBackroom_OpenClose
                  hvac: BackRoomTRV_HVACMode
              - component: widget:Temperature Cell
                config:
                  location: Long bedroom
                  temperature: LongBedRoomTRV_Temperature
                  target: LongBedRoomTRV_TargetTemperature
                  heatp: LongBedRoomTRV_HeatingPower
                  hvac: LongBedRoomTRV_HVACMode
  - component: oh-block
    config:
      title: Automations
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: oh-label-cell
                config:
                  label: 1hr Boost
                  action: rule
                  actionRule: 3ed8fa18ff
                  icon: f7:flame
                  color: red
                  on: red
              - component: oh-label-cell
                config:
                  label: Dry clothes
                  action: rule
                  actionRule: c8f8f2fb81
                  icon: f7:flame
                  color: red
                  on: red
              - component: oh-label-cell
                config:
                  icon: f7:snow
                  color: lightblue
                  label: Cool down
                  action: rule
                  on: "true"
                  actionRule: 7ddeffbb40
              - component: oh-label-cell
                config:
                  color: orange
                  label: Run schedule
                  action: rule
                  actionRule: 33e1fa3804
                  on: "true"
                  icon: F7:calendar
  - component: oh-block
    config:
      title: Operation Mode and Timers
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:widget_TRVTimer
                config:
                  location: Sitting Room
                  duration: SittingRoomTRV_TimerDuration
                  endtime: SittingRoomTRV_OverlayEndTime
                  zoneop: SittingRoomTRV_ZoneOperationMode
              - component: widget:widget_TRVTimer
                config:
                  location: Kitchen
                  duration: KitchenTRV_TimerDuration
                  endtime: KitchenTRV_OverlayEndTime
                  zoneop: KitchenTRV_ZoneOperationMode
              - component: widget:widget_TRVTimer
                config:
                  location: Bath room
                  duration: BathroomTRV_TimerDuration
                  endtime: BathroomTRV_OverlayEndTime
                  zoneop: BathroomTRV_ZoneOperationMode
              - component: widget:widget_TRVTimer
                config:
                  location: Hall
                  duration: HallTRV_TimerDuration
                  endtime: HallTRV_OverlayEndTime
                  zoneop: HallTRV_ZoneOperationMode
              - component: widget:widget_TRVTimer
                config:
                  location: Back room
                  duration: BackRoomTRV_TimerDuration
                  endtime: BackRoomTRV_OverlayEndTime
                  zoneop: BackRoomTRV_ZoneOperationMode
              - component: widget:widget_TRVTimer
                config:
                  location: Long bedroom
                  duration: LongBedRoomTRV_TimerDuration
                  endtime: LongBedRoomTRV_OverlayEndTime
                  zoneop: LongBedRoomTRV_ZoneOperationMode
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: widget:widget_LaunchMyTado
                config: {}
masonry: []

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. :slight_smile:

interesting. in that case wrap your content into an f7-block container

OK.

Here’s another one then -

Is it possible to use a url from an item state?

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.

You have to use the right syntax to access it, which would be:

background: ="center / cover no-repeat url(" + items.IkeaSYMFONISKSpeakerZonePlayer_CurrentAlbumCoverArtURL.state + ")"

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.