Skip to main content
Inspiring
October 25, 2017
Answered

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

  • October 25, 2017
  • 1 reply
  • 2609 views

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?

This topic has been closed for replies.
Correct answer Stu_M_

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)

1 reply

Stu_M_
Stu_M_Correct answer
New Participant
October 25, 2017

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)

New Participant
March 2, 2018

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?