How can I edit the style of a page?

Setup, Configuration and Use Items & Sitemaps
1

Hello fellow users of OpenHAB.

I am trying to adjust the stylesheet of my Overview Page, however haven’t been able to get it done. I want to reduce the padding and get rid of the rounded corners of my objects, however I can’t get it to run. I know I should be overriding my Framework7 variables, but where should I put the style definition line if I want to adjust all objects of the class “Card”?

Even if i put the style property directly within the config of the object I want to change:
–f7-card-expandable-border-radius: 0px;
the rounded corners remain. It also didn’t work when I put it in the config at the top of the code of my overview page.

Does anyone of you know how this could be done?

2

For this I’d use the direct stylesheet property and not just the config style object. It goes right in the page config, and then takes a (multiline) string of standard css. For example, I want all the cell components on my overview page to expand more fully:

config:
  stylesheet: |
    .oh-cell {
      --f7-card-expandable-tablet-width: 100%;
    }
  ...
1 Like
3

Thank you, that was the tip I was looking for! :slight_smile: I was putting the property “style” instead of “stylesheet” for the page, which obviously didn’t work. Now it’s finally customizable ;] Thank you a 100 times :slight_smile: