Transparent Playbar in HTML5

[Kristen2810]

Hi,

I am working in CP7 on an HTML5 course. I have created custom navigation, so I'm not using the playbar. However, in order to get the Closed Captioning to show up above my custom nav, I turned on the playbar, turned off all of the buttons, and made everything transparent.

Everything looks great if you watch the SWF version on a PC, but if you open the HTML5 version there is a thin, gray vertical bar that shows up in the bottom center area of the project (so it's clearly my transparent playbar).

Has anyone tried this before as a workaround to getting the Closed Captioning to show up higher than normal so it doesn't overlay on your custom nav? And is there anything I could do to remove that thin vertical line? I've tried changing the colors to match the background, but it still shows up in that same gray color.

Thanks,

Kristen

[TLCMediaDesign]

Can you post a screen shot. I just tried what you said and I have no thin bar.

[Lilybiri]

Kristen, why don't you create a custom CC button as well?

http://blog.lilybiri.com/toggle-shape-buttons

I would now replace the advanced by a shared action, can be used in any project.

[Kristen2810]

I did create a custom CC button using a shape button. However, I need the actual captioning itself to show above my custom buttons (not overlay on top of them). Since you can't move the captioning to a certain place on the screen, I turned on the playbar and made it transparent. When I did this, the captioning displays just above my custom nav. Now, it's no longer hidden when the learner turns on the CC.

The problem is in my HTML5 version. A tiny sliver of that invisible CP playbar is showing itself (even though I have no buttons active). It does not show up in the SWF version.

[Kristen2810]

Here is a screen shot of it from my phone...see the gray vertical bar at the bottom? That doesn't show up in the swf version of this course...only on the HTML5 version.

[TLCMediaDesign]

It's pretty easy to move the Closed Caption in HTML 5 output. In the index.html file, find <div id='cc' style='left:0px; and replace it with <div id='cc' style='left:0px; top:240px;

You'll need to adjust the 240px until you get it where you want it.

[Kristen2810]

Thanks. However, I'm publishing directly to Adobe Connect from Captivate. So I never publish the files out to my desktop or hard drive.

[TLCMediaDesign · Accepted solution]

Test the output on your hard drive until you get it right by using the method I suggested. Then when you have the correct number, edit the HTML5DivStruct.txt file in the location below, You would add the top:240px; to the file in the same place. It would always publish your project the same then. Make a backup file and or just remove the added code when you no longer need it.

C:\Program Files\Adobe\Adobe Captivate 7 x64\Templates\Publish\HTML5DivStruct.txt

[Kristen2810]

Thank you! That worked beautifully!!

[TLCMediaDesign]

You're quite welcome!