Remove border from fixed canvas layout

I use a fixed canvas page to fill a “magic mirror”. Unfortunately, a white border is created around the page. Is there a way to remove this?

FWIW. Consider interrogating (F12 → inspect html section) and perhaps you can overide it via a CSS in your static html directory. Check also UI Page - Can You Remove Margin? - #9 by Tallman

Thank you for the hint!

the code form @JustinG did the trick:

  stylesheet: |
    .oh-canvas-layout-container div img {
      visibility: hidden;

but it also removes the album cover in the top right (Rock Antenne). Is there a way to remove only the white borders?

Perhaps borders and picture, are part of the same entity (aka. background picture)… try to inspect via F12 (firefox) & check the entities and find your way to (if any) the css to be overriden.

That’s strange, I wonder why. As along as the album cover is a widget on the canvas, I don’t think there’s a reason that hiding the background image should result in any change, there.

There is completely different way to do this other than the css that hides the element.

The border itself is not actually part of the layout page at all, and therefore cannot be impacted by css. The layout page has an <img> element that is used if the user sets a background image for the layout. If the user does not define a background image then the <img> element persists but without a source image and most modern browsers have a feature where an image element without a source is rendered as a blank box with a thin outline. So the problem here is that the browser is adding that border not OH.

That means that the only solution is to actually have a background image. But, if you don’t want to see a background image on your page then you just have to be a little creative. Just create a small, image in a format that allows transparency (e.g., png) and make sure the whole image is just transparent pixels. Save that image to the [OH_CONF]/html directory. Now you can set that transparent image as the background of the layout by referencing /statc/[name of image file]. For example:

1 Like

Thank you, @JustinG! The Wallpaper is the better and more easier solution and has no side effects to the ohther img widget :slight_smile: