Add iframe-specific CSS class?

⚙️ Web integration
1

We’re building a new site for KGLT and having fun messing with your Web-integration CSS in our iframe-embedded version of Spinitron: https://kgltradio.com/listen/playlists/

But we’d like KGLT’s page at Spinitron’s site to NOT have that CSS. Right now it does: https://spinitron.com/KGLT/

IOW, we want the CSS applied only when iframe-embedded at KGLT’s site. I thought the layout=1 handled that, but there seems be no diff whether or not you add that param to the URL. (Unless we’re doing it wrong.)

Maybe you could add an iframe-only class to the the body tag so we can style pages for our site but leave them in their original Spinitron styles at yours, w/ some JS like:

if ( window.location !== window.parent.location ) {
 	document.body.classList.add( 'spiniframe' );
}

(Or: window.self !== window.top ). Thanks for considering, and for the radio/audio glory that is Spinitron.

1 Like
2

Hi Barrett, thanks for joining the forum.

If you have saved a custom layout in Spinitron then you activate it with layout=1. I don’t think that’s what you need. (Style rules saved in Spinitron are always applied.)

If you want to apply styles to the Spinitron calendar in an iframe, there are several ways to do it described here.

If you don’t understand or have problems, feel free to call me if you prefer.

3

Ah, ?bodyclass=. That works great! Thanks for the lightning quick replay/solution. Case closed.

1 Like