Read the statement by Michael Teeuw here.
Remove I frame border
-
@stephanvdplas said in Remove I frame border:
@barnosch said in Remove I frame border:
should ne something like this in your
/css/custom.css file.MMM-iFrame { //exact name of the module border: none; //or border: 0px; }
I tried your suggestion, but still a border is shown. Is there any other option?
MMM-Iframe:
{ module: 'MMM-iFrame', header: 'Speelt nu', position: 'bottom_left', // This can be any of the regions. config: { // See 'Configuration options' for more information. // url: ["http://server.vdplas.net:9000/material/?player=dc:a6:32:18:b6:fd&layout=desktop&action=expandNowPlaying/true&css=msk--np-only&js=msk--np-only&single=true&theme=Black"], // as many URLs you want or you can just ["ENTER IN URL"] if single URL. url: ["http://server.vdplas.net:9000/material/?player=dc:a6:32:18:b6:fd&layout=desktop&action=expandNowPlaying/true&css=msk--np-only&js=msk--np-only&single=true&theme=Black"], // as many URLs you want or you can just ["ENTER IN URL"] if single URL. updateInterval: 500 * 60 * 1000, // rotate URLs every 30 seconds width: "700", // width of iframe height: "260", // height of iframe frameWidth: "100" // width of embedded iframe, height is beeing calculated by aspect ratio of iframe } },
-
@stephanvdplas if the border is INSIDE the frame, then u cannot change it. that is the point of frame. inline embedded frame of original content
-
@sdetweil said in Remove I frame border:
@stephanvdplas if the border is INSIDE the frame, then u cannot change it. that is the point of frame. inline embedded frame of original content
There is certainly no border in the content. At least not what I see when using differen devices with this same URL
Also the border appears directly, whereas the content is loaded in 5 seconds
-
@stephanvdplas awesome. I’m not sure of the css, but I want to teach you how you can find and resolve it yourself for any content
see
https://forum.magicmirror.builders/post/90135using the browser developers window, you can examine AND set styles on the element content. once you know what you need, then you can copy/paste that into custom.css
I ‘think’ the example css provided is too vague, and the actual element doesn’t inherit from the content selected
in css, the stuff before the { is called the selector clause. it selects the content that the stuff AFTER the { will be applied to.
I use thise cheat sheet to hemp me remember all the possibilities
https://www.w3schools.com/cssref/css_selectors.phpin MagicMirror the outer block is given the module name as a class
so
.MMM-iFrame
is correct, but, that element is a div
and there are a couple more div elements inside, so I don’t think border:none is inherited.I ‘think’ the selector clause needs the specific element iframe added
.MMM-iFrame iframe {
but if you use the developers window you will know for sure
-
<iframe src="https://server.vdplas.net:8999/material/?player=dc:a6:32:18:b6:fd&layout=desktop&action=expandNowPlaying/true&css=msk--np-only&js=msk--np-only&single=true&theme=Black" width="675" height="250" scrolling="no"></iframe> iframe[Attributes Style] { width: 675px; height: 250px; } user agent stylesheet iframe { overflow-clip-margin: content-box !important; overflow: clip !important; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; }
Here indeed I see a border. Still no clue where it comes from.
-
@sdetweil I found it!
In custom.css I place the following section:
iframe{ border:0 ; /*transform: scale(0.5) ; */ /*margin-bottom: 200px;*/ }
(source: https://github.com/AgP42/MMM-iFrame-Ping/blob/master/MMM-iFrame-Ping.css)
Thanks for your support!
-
@stephanvdplas please be careful…
the selector clause WILL ALWAYS select ALL elements that match across the entire web page…
so, you should focus on THIS module
.MMM-iFrame iframe{ border:0 ; }
that means ALL iframe tags <iframe
inside class .MMM-iFramebut not any OTHER module