User styles are not applied to iframes

[Arturo Torres Sánchez]

I'm using a user style for Google products (it basically makes the black top bar dissapear). It works e.g. in Google Search, Google Reader, Google+, Google Maps, but not in Gmail, because it uses an iframe to display the page.

I've tested this same user style in Midori and it works fine.

[Onilton Maciel (oniltonmaciel)]

One thing I noticed Fogger font size and appearance is not the same that I can see in firefox or chromium. Maybe solving this will at least provide some solution in getting a prettier display for google products.

[Jacob Winski (winski)]

This is by CSS-design. CSS in a document does not apply to an iframe inside that document. This is a CSS design decision.

This does not mean that Fogger should not recursively go through all frames inside a webpage and apply CSS to each frame.

Whatever Frogger decides to do, there is a way out right now: Javascript.

Lets say you wanted the following CSS done to the frame "canvas_frame":
.myclass { background-color: "#ffffff"; }

Do the following in Javascript:
var doc = document.getElementById('canvas_frame');
var firstmyclass = doc.getElementsByClassName('myclass')[0]
firstmyclass.style.backgroundColor="#ffffff";

If there is more than one myclass, you will want to recurively go through doc.getElementsByClassName('myclass') and apply the backgroundColor.

[Arturo Torres Sánchez (r2d2.art2005)]

So, the implementation in Midori (where CSS is applied to iframes) is wrong?

I will try the Javascript.

On Thu, Sep 20, 2012 at 10:19 AM, Jacob Winski
<email address hidden>wrote:

> This is by CSS-design. CSS in a document does not apply to an iframe
> inside that document. This is a CSS design decision.
>
> This does not mean that Fogger should not recursively go through all
> frames inside a webpage and apply CSS to each frame.
>
> Whatever Frogger decides to do, there is a way out right now:
> Javascript.
>
> Lets say you wanted the following CSS done to the frame "canvas_frame":
> .myclass { background-color: "#ffffff"; }
>
> Do the following in Javascript:
> var doc = document.getElementById('canvas_frame');
> var firstmyclass = doc.getElementsByClassName('myclass')[0]
> firstmyclass.style.backgroundColor="#ffffff";
>
> If there is more than one myclass, you will want to recurively go
> through doc.getElementsByClassName('myclass') and apply the
> backgroundColor.
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/1031059
>
> Title:
> User styles are not applied to iframes
>
> Status in Fogger:
> Triaged
>
> Bug description:
> I'm using a user style for Google products (it basically makes the
> black top bar dissapear). It works e.g. in Google Search, Google
> Reader, Google+, Google Maps, but not in Gmail, because it uses an
> iframe to display the page.
>
> I've tested this same user style in Midori and it works fine.
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/fogger/+bug/1031059/+subscriptions
>

--
—Arturo Torres Sánchez

[Alba Mendez (jmendeth)]

It is unclear wether if *your* (the user) CSS should apply recursively.
It's OK, but you have to find a way to tell Fogger or Webkit that you want that behaviour.

But never, NEVER a browser should apply a webpage CSS to the iframes.
If Midori does that, it is not standards-compilant.