How to set transparent iframe background for project within a project?

[kevinc13836104]

Hello,

Right now I have a published HTML5 CP project zipped up and added as a web object to a 2nd HTML5 CP project. When in the 2nd project, I'd like the background on the first to be transparent. When previewing the 2nd project, I've used the browser inspector to try all manner of "background: none transparent" to no avail.

I also tried added a 1x1 transparent image as the tiled background to the 1st project—showed promise because the transparency was there in Captivate itself, but when published just reverts to a white frame on top of the 2nd project.

Any advice?

[Stu_M_ · Accepted solution]

Hi there,

You could try this:

To start with - in your 1st Captivate Project, make sure there aren't any images set to fill the background. By default it looks like Captivate 9 inserts a subtle "BG.jpg" textured background. Delete this (in the properties panel on the master slide view).

Then:

• In the published files of your 1st Captivate Project (that will be inserted as a web object in your 2nd), navigate to the directory: ../assets/css
• Locate the CPLibraryAll.css file and open it in a text editor
• Add the following lines of CSS to the bottom of the file to override the style of the background:

.cpMainContainer,.cpDocument,.cp-movie,.project,.cp-frameset,.projectBorder {
background-color:transparent!important;
}
#projectBorder{
background-color:transparent!important;
}
body {
background-color:transparent!important;
}

Some of that code might be redundant. It's a quick and dirty fix so I wasn't being very thorough. I tested this out and it worked. Here are some before and after screenshots:

Maybe there is a simpler way of achieving this in Captivate itself. If there is, I'm not sure how to do it.

If anyone reading this wants to make the background of the loading animation iframe transparent as well, check out this post I made recently.

(Note: I'm using Captivate 9)

[kevinc13836104]

Thank you so much, Stu! That worked perfectly in CP10. I did have to edit AdobeCaptivate.ini so that elements could be on top of the web object, then counter-intuitively put the object at the top of the timeline i.e. in front of everything else.

Last hurdle is figuring out how to hide the web object on-demand since it's set to show for rest of project (can't paste on each slide where I need it because the loading is so slow & noticeable unfortunately).

Thanks again!

[Stu_M_]

My pleasure!

[heiligm]

This also worked for me but I encountered an issue.  I have a one slide Captivate 9 file that I use as site navigation.  It's a map with stars on it.  The stars are buttons and have mouse over features, and the on-click action is to navigate to a URL.  The On-Click works but when I apply your code, I loose the state view mouse over effect.  Any suggestions?