2

I'm currently making a custom CSS for a forum (diskusjon.no), but I've been struggling with a certain part of the page. The editor in the IPBoard-forum is a html-tag inside the original html-tag, and my CSS set through the extension Stylish doesn't reach this part of the page.

The structure is something like this:

<<html> <---lots of tags--> <iframe> <html> <body contenteditable=true>

Now my style affects everything except what's after the second html-tag, so my question is; -is it possible to reach this part of the page at all when I'm adding my CSS through Stylish. i.e. I don't have access to any of the HTML.

Here's a picture of the Google Inspector for the part I'm talking about:

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
timss
  • 9,982
  • 4
  • 34
  • 56

2 Answers2

2

Since the <iframe> tag is intended to load an external page, it will have it's own style-sheets. Then, your style cannot interfere with it.

The solution is to use javascript after the page has been loaded into the iframe. You can refer to this: How to apply CSS to iframe? question.

Community
  • 1
  • 1
moongoal
  • 2,847
  • 22
  • 23
1

Stylish treats a page the same whether it's in an iframe or not. So, the solution is just to style the iFramed bit separately.

For example, suppose you had the page jsbin.com/osajuz/edit, and it contained this iFrame:

<iframe src="http://www.drudgereport.com/"></iframe>

Then you could create a Stylish style like:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://jsbin.com/osajuz") {
    body {
        background-color: pink;
    }
}

@-moz-document url("http://www.drudgereport.com/") {
    body {
        background-color: lime !important;
    }
}

which works.

If you create the style and visit jsbin.com/osajuz, you will see something like this:

iFrame style preview

Likewise, if the frame has no URL, it is treated as a page from the same domain and URL as the containing page. Stylish rules will still apply.

For example, if you create this Stylish style:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("jsbin.com") {
    body {
        color: orange;
    }
}

@-moz-document url-prefix("http://jsbin.com/abazay/3/edit") {
    body {
        background: lime;
    }
}

and then visit jsbin.com/abazay/3/edit#preview, you will see both styles applied to both "internal" iFrames.

But note that whatever JS is operating an iFrame can override CSS styles if you are not careful. Therefore make liberal use of the !important flag to combat this problem.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • The iframe is internal, and got no URL (as seen in the picture). How could I then reach it with my CSS without using JS as mentioned? – timss Dec 02 '11 at 08:44
  • It's the same, see my updated answer. Note that you probably need to use `!important` in your styles. – Brock Adams Dec 03 '11 at 01:09
  • Thanks, I can see that the contents of the iFrames on your example are affected by my Stylish-style, but I can't port it to the page I'm working on. I still can't manage to affect the contents of the iFrame I'm trying to edit. I did a domain/url-prefix and body/body.withRTL + background: lime!important in every combination possible and it still wouldn't set the background in the editor as lime. The iFrame got it's own style-tag, but should doing !important override this? I'm confused as to how I could "reach" the body-tag inside the iFrame when doing body/body.withRTL doesn't work. – timss Dec 03 '11 at 13:40
  • Link to the page in question. If that is not possible, or it requires a login, save the HTML and CSS and JS to http://pastebin.com and link to that here. I don't know what you mean by "body/body"; that would be improper. Stylish "reaches" the iFrame body because it fires at a lower level in FF, and iFrame content looks just like a new webpage to Stylish. This is different than JS. The key is to think of the iFrame as a standalone webpage and style it with that in mind. No special CSS rules are needed. – Brock Adams Dec 04 '11 at 03:57