Can't disable Station Header w/ CSS

⚙️ Web integration
1

The Web Integration Guide > IFrame section mentions how to use CSS to Hide (display: none) the station header, but I just can’t seem to get this to work!

Is there something wrong with the CSS code on the Guide page that is causing it to not function correctly?
The web inspector shows that the Internal style code is not even being utilized when displaying the <div> containing the Station Header, and a Spinitron CSS is instead being used.

Here is my page: https://web.ece.ucsb.edu/~demis/

IFrame at the bottom.

The IFrame code I used (added ?bodyclass=showiframe): <iframe class="spin-iframe" id="spin-show" src="https://spinitron.com/KCSB/show/171162/The-Better-Way-Gospel-Hour/?bodyclass=showiframe&player=0"></iframe>

The CSS added to the page’s <head><style>, from the Web Integration Guide:

body.showiframe .view-page .head.station {
            display: none !important;
        }

(I have tried many attempts at higher specificity etc., no avail.)

Safari Web Inspector doesn’t show this rule in the inheritance chain, instead shows this (display is inherited from a Spinitron stylesheet):

Untitled
Untitled896×196 48.7 KB

Let me know if I’m making some n00b CSS mistake, or if something else has changed in the Spinitron code.

(I ultimately want Only the playlist links showing in the IFrame)

Thanks!

2

Hi @demisjohn and thanks for joining the forum.

It looks like you put that rule in the style sheet of the containing page. That won’t affect anything inside the iframe. It’s a property of iframes: as far as styles and JS go, the containing page and the contained page are as separate from each other as if they were different browser windows.

I updated the web integration guide to make this more clear. I also added a couple of paragraphs on how to use the css query parameter, which I think had been missing here. And I coded examples of how to use it in this jsfiddle.

Makes sense?

3

Ah, yes thank you for updating the guide pages - it makes sense now.

If I understand correctly, an example of using the "css parameter" to link to, for example, a style sheet stored at http://web.ece.ucsb.edu/~demis/iframe.css would be like so:

<iframe src="https://spinitron.com/WZBC/?css=https%3A%2F%2Fweb.ece.ucsb.edu%2F%7Edemis%2Fiframe.css"></iframe>

(Encoded using this URL-encoder.)

Update: important to make sure the external stylesheet is also coming from HTTPS, or browser will block the SS as “mixed content”.

4

Yes, that looks about right. If it works then that’s the proper test.

And yes, we need to use HTTPS for almost everything now.

1 Like