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

[maceef 0]

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...

[Rob 547]

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;}

[evan 0]

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.

[maceef 0]

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!

[catrina 103]

If there is no pagelines-template-theme directory, it means you're not using the Base theme. You'll need to use the Base theme in order to make your adjustments. For reference: http://www.pagelines.com/wiki/How_to_Use_the_Base_Theme

[evan 0]

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; }

[maceef 0]

Thanx Evan, for your help!

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

thanx again.

[Danny+ 1,327]

The topic was marked as resolved.

[rishabhsoulriderin 0]

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

[Rob 547]

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

[Rob 547]

The topic was marked as resolved.

[rishabhsoulriderin 0]

many thanks.. will just do it