HELP! How to change the background color of a fixed grid page?

Add-ons UIs
, , ,
1

I can’t change the background color of my fixed grid page.
This is my yaml:

config:
  layoutType: fixed
  screenWidth: 881
  screenHeight: 661
  colNum: 14
  label: tablet screen size test 1
  style:
    background-color: "#ff3b30"
blocks: []
masonry: null
grid:
  - component: oh-grid-item
    config:
      x: 0
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: oh-label-card
          config: {}
  - component: oh-grid-item
    config:
      x: 0
      y: 8
      h: 2
      w: 2
    slots:
      default:
        - component: oh-label-card
          config: {}
  - component: oh-grid-item
    config:
      x: 12
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: oh-label-card
          config: {}

In run mode (on pc, page editor) and on the tablet itself there is no visible background color, only the area around the screen is red but not on the screen:

image
image1917×941 7.03 KB

With responsive layout I have no problem with background color only with fixed layout. What am I missing?
Thanx.

2

I believe what you are looking for is set by an f7 variable. Instead of

background-color: "#ff3b30"

try

--f7-page-bg-color: "#ff3b30"
1 Like
3

Thank you, this works.

4

Dear justin, do you know if there is a similar command for the text color of the fixed grid page?

5

If you mean can you theme all the text in each of the widgets in the page, then just setting color in the page config should work.

6

What command should I use to insert an image as a background?

7

Just use background or background-image