Label Card Text Color

Creating a page showing time and temperature - very easy job (I tought …)

Took me hours to

  • make a black background
  • setting the text color of the time widget to red
  • removing the border of the widget.

But now I surrender. Just changing the text color of a label widget to red.

config:
  layoutType: fixed
  fixedType: canvas
  label: SZ
  style:
    --f7-page-bg-color: black
  sidebar: true
  hideNavbar: true
  hideSidebarIcon: true
  scale: true
  imageUrl: /static/blank.png
  comment: //Damit weißer Rahmen
    verschwindet-->https://community.openhab.org/t/remove-border-from-fixed-canvas-layout/137541/5
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config:
      style:
        --f7-page-bg-color: black
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 0
            y: -113
            h: 280
            w: 1280
          slots:
            default:
              - component: oh-clock-card
                config:
                  timeFormat: HH:mm
                  timeFontSize: 300px
                  timeFontWeight: normal
                  stylesheet: |
                    .col > div {
                    color: red
                    }
        - component: oh-canvas-item
          config:
            x: 770
            y: 404
            h: 150
            w: 476
          color: red
          slots:
            default:
              - component: oh-label-card
                config:
                  item: SensorSZ_eWeLink_Temperature
                  stylesheet: |
                    .col > div {
                    color: red
                    }
                  style:
                    color: red
                  fontSize: 100px

Above I put in all attempts to change to “red”. No success. Even in the canvas-layer I tried:

--f7-text-color: red
--f7-block-text-color:red

Any idea what to try else???
Thanks for your help!!!

Peter

Your css selector is wrong. There is no div that is the child of a container with class col within the structure of the label card. If you just change the selected to span or the class .item-inner your stylesheet directive will apply to the text of the label card.

stylesheet: |
  .item-inner {
    color: red;
  }

Hello JustinG thank you for youe help in multiple layout questions. I am trying since some time to change my tablet screensaver to dark mode (black background and white text / icons). This seems to be very complex work. So my question is, how do you know what exactly to change in the stylesheet?

Thank you for your prompt replay. It works!!!

However I’m a little disappointed. I’m coming from FHEM, hoping to find in OH a bit more clear, logic system. But it seems that this was a pious wish …

Anyhow, thanks again!

Peter

The stylesheet property is simple injecting css directly into the page that is rendering the widgets. So to understand what you need in the stylesheet you have to know both the structure of the page and css.

The structure of the page can be seen by using the browser to show the source code of the page, or, even more powerfully, the browsers inspection developer option will let you explore the page structure dynamically.

CSS is an entire style language. Learning this takes time, but there are many online resources for learning the basics of CSS.

I would argue that the basic addition and editing of the built-in component is very clear and logical. It is worth noting however, that you are progression beyond the basics and into more advanced techniques. There is a required correlation between the complexity of what you are trying to accomplish and the complexity of the system you need to do that.

I feel exactly the same in terms of customising the main ui pages. But i am using openhab since many years. Change text color should be a simple thing. But i have to ask in the community for help for every different block. Sometimes i can change the color in the ui, sometimes not. Doesnt feel intuitive.

Thank you alot for your answer. I will try this!
But i think changing text and background color should be made simple because its a basic configuration. Sometimes its also in the configuration UI, but sometimes not. So its basic and at the same time not.

For exampe in the list card its not possbile to define background and text color in the configuration UI