Text size and Backgroundimages

Add-ons UIs
1

I am starting to design some pages in openHAB 3 and it is hard to bring all the things together.

1.) Is it possible to change the style of an block title within a layout page? Size, bold, …

2.) Is it possible to set a background picture for a layout page. Xmas is near and i like to have some winterwonderland as background of my xmas page

Unfortunately i found a lot of information but not regarding my two questions.

2
  1. for an oh-label-card you can set the background color, font size and font weight in the settings dialog or you enter it directly in yaml code editor.
component: oh-label-card
  config:
    background: red
    fontSize: "34"
    fontWeight: bold
    style:
      color: gray
      text-align: right
  1. if you have a “canvas” layout (fixed layout), you can define an oh-image card at the size of your page and have other widgets on top of that image card
3

@Oliver2 thanks for your hint, but that does not work for a whole page.

My idea ist to set a background image and put some card in front of it

config:
  label: XMas
  sidebar: true
blocks:
  - component: oh-block
    config:
      title: Draußen
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default: []
  - component: oh-block
    config:
      title: Wohnzimmer
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default: []
masonry: []
grid: []
canvas: []
4

With this seting you can change some styles of oh-block label.

config:
  label: XMas
  sidebar: true
  style:
    text-align: center
    font-size: 40px
    font-weight: 800

This does not affect “XMas” but the other labels (“Draußen”).
Probably “XMas” cannot be changed. These are Navbar styles

1 Like
5

That works like a charm. Thanks a lot.

Now i try to get the background image … Weekend is near

6

Hi,

i have a widget, where i would like to also integrate a backgoundimage. Do you hava a solution to add a background image to a widget…

Thanks and regards
danyo

7

for oh-cell you can use the background slot:

component: oh-cell
config:
  title: Test
slots:
  background:
    - component: oh-icon
      config:
        icon:

oh-label-card:

component: oh-label-card
config:
  background: ='url(path_to_image)'
8

Hi thanks,

do you also now, how to make this dynamic?
This do not work :frowning:

If i say

background-image: url(/static/bad.jpg)

it is working… But not with

background-image: url('/static/' + props.bgimage + '.jpg')


I have already defined bgimage under props.... :-(


component: f7-card
config:
  style:
    noShadow: false
    class:
      - padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    background-image: url('/static/' + props.bgimage + '.jpg')
    background-size: 100% 100%
    height: 200px

Any Ideas, suggestions, anything :slight_smile:

Thanks, Danyo

9 
background-image: ='url(/static/' + props.bgimage + '.jpg)'