Jump to content


Photo
- - - - -
Resolved

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



  • Please log in to reply
11 replies to this topic

#1 maceef

maceef

    Newbie

  • Members
  • 4 posts

Posted 30 September 2012 - 07:29 PM

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="

Please Login or Register to see this Hidden Content

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

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 30 September 2012 - 11:49 PM

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

#3 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 222 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 01 October 2012 - 03:34 PM

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

Please Login or Register to see this Hidden Content

use

Please Login or Register to see this Hidden Content

You will probably need to

Please Login or Register to see this Hidden Content

for usage there too.

#4 maceef

maceef

    Newbie

  • Members
  • 4 posts

Posted 01 October 2012 - 03:49 PM

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="

Please Login or Register to see this Hidden Content

width="900" height="430"

thanks for helping out!

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 October 2012 - 04:56 PM

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:

Please Login or Register to see this Hidden Content



#6 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 222 posts
  • LocationAnn Arbor, MI
  • Framework Version:latest stable & beta releases
  • Country: Country Flag

Posted 01 October 2012 - 06:35 PM

Maceef,

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

Please Login or Register to see this Hidden Content

.

A few things:
  • You need to leave off the beginning http:// as it is added by the script, or it will fail.
  • Adding the framework's CSS file is totally unnecessary as you only need one rule to give it a transparent background (

    Please Login or Register to see this Hidden Content

    ).
    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.
  • 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:

Please Login or Register to see this Hidden Content



#7 maceef

maceef

    Newbie

  • Members
  • 4 posts

Posted 01 October 2012 - 08:47 PM

Thanx Evan, for your help!
Got it working now. Just added some extra styles fit my site.
thanx again.

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 October 2012 - 09:54 AM

The topic was marked as resolved.

#9 rishabhsoulriderin

rishabhsoulriderin

    Member

  • Members
  • 21 posts
  • LocationIndia
  • Framework Version:PageLines Framework 2.3.2

Posted 19 October 2012 - 07:45 AM

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

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 October 2012 - 11:37 PM

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

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 October 2012 - 11:37 PM

The topic was marked as resolved.

#12 rishabhsoulriderin

rishabhsoulriderin

    Member

  • Members
  • 21 posts
  • LocationIndia
  • Framework Version:PageLines Framework 2.3.2

Posted 22 October 2012 - 09:36 AM

many thanks.. will just do it





Also tagged with one or more of these keywords: Resolved