Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved <iframe> and CSS: how to change the background color?

Question

Posted · Report post

I want to use <iframe> in my page to show the result of a sportsteam. The backgound of that site is 'white' but i want it to be transparant to match my site.

In the instructions it says that you can refer to a CSS on you site to adjust the colors. Simple question. What is the location of the CSS i use in the pages or is there a simple way to make the background transparant.

This is the link i'am using now (and it is not working!)

<iframe src="http://west.basketba...ijd/uitslag.pl?&CSS=/wp-content/themes/pagelines-template-theme/style.css&szn_Naam=2012-2013&cmp_ID=95&plg_ID=244&org_ID=2&LVactie=Wedstrijdgegevens+tonen&Sorteer=wed_Datum&menubalk=off&statistieken=off&title=off&hal=off&tijd=off" width="900" height="430" >

thanks for any help...

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

hi there, i was wondering if you could help. I would like to my header background colour black to match the look and feel of my site. Could you tell me what to do? i inserted the body { background-color: black; } in my header script and the same thing appeared on my header. Many thanks, Rishabh

Share this post


Link to post
Share on other sites

Posted · Report post

I've never done this before, but you might want to wrap the iframe inside a div, then style the div to have the color or transparency you want.

So, <div class="myiframe"><iframe.... and close it with </iframe></div>

You can use something like:

.myiframe {background-color:transparent;}

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi. This topic is marked Resolved. Please open a new topic of your own. We'll be happy to reply there.

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

many thanks.. will just do it

Share this post


Link to post
Share on other sites

Posted · Report post

Maceef,

If the page you are including in your iframe allows for an external stylesheet to be linked from the query string, you will at least need to link to it with a full url, not a relative one. So instead of


&CSS=/wp-content/themes/pagelines-template-theme/style.css

use

&CSS=http://YOURFULLURLdotWHATEVER/wp-content/themes/pagelines-template-theme/style.css

You will probably need to encode the url for usage there too.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the tip but it does noet work (strangely enough)

Looking at the FTP side there is no pagelines-template-theme directory.

So setting it to the right one (just pagelines) with or without http does not work

here's the complete code! mayby you can spot the fault.

iframe src="http://west.basketba...l=off&tijd=off" width="900" height="430"

thanks for helping out!

Share this post


Link to post
Share on other sites

Posted · Report post

Maceef,

After a quick test I was able to get it to work using a quick test file. See here.

A few things:

  1. You need to leave off the beginning http:// as it is added by the script, or it will fail.
  2. Adding the framework's CSS file is totally unnecessary as you only need one rule to give it a transparent background (see my test file).
    As of v2.3 the framework has gone to 100% LESS, so there isn't any styles in the pagelines/style.css file anyways. Even if there were, those css rules would be using selectors that are specific to pagelines, not the page you are trying to load inline.
  3. URL to stylesheet doesn't appear to need to be encoded.

Hope that all makes sense. Again, here is the one line of css you need to include in the stylesheet you link:


body { background-color: transparent; }

Share this post


Link to post
Share on other sites

Posted · Report post

Thanx Evan, for your help!

Got it working now. Just added some extra styles fit my site.

thanx again.

Share this post


Link to post
Share on other sites