Format > Background - Transparency option

Hi there. Just wondering if anyone else has run into this - when right-clicking on a slide and choosing Format > Background, there is a transparency option that lets you set the slide background fill to 100% transparent. I'm not able to actually do this. When I set the color to black and set transparency to 100%, in the published output the black slide background appears. Any ideas why?

Thanks,

Stephanie

24 Replies
Jeanette Brooks

Hi Stephanie! If you've made your actual slide background transparent in Normal View, then the color that's showing through is probably the player's slide background. If you've made that transparent too, then the color you're seeing is probably the course's page background.

You can set the color of the player's slide background by going to Home > Player > Colors & Effects. Click "Show advanced color editing" and find the item called base>>slide_bg. You can select whatever color you want, and you can also choose a transparency value if you want the page background to show through.

You can set the course's page background with the "Page background" selector. 

Stephanie Harnett

Thanks Jeanette. Does this mean that if I have an irregular shape on a slide and want the slide background to be transparent (to whatever color or image is on the background of the html page in the published output), that I can't do this?In the image below I orignally had something that looked like a flipbook with shadows casting off the side of the book (for a realistic effect) but the slide background would appear creating a sort of box around that image. I ended up enlarging the flipbook image so that it filled the entire slide and lost the cool shadow effects.

Then...I encountered a problem with a border appearing around the slide only in the published output. In the example below I made the page background in the player color setup green just to visibly demonstrate where the border is. No matter what I do, I cannot seem to remove this border.

Nancy Woinoski

Hi Stephanie

There is a workaround. You need to edit the html file as follows:

var g_stfMode = "transparent";

var g_atrBgColor = "";

Also set the html background colour in Storyboard to 100% transparent as well.

I'm not sure how this will work with html5 or iOS publications but give it a try.

Stephanie Harnett

Thanks Nancy. Are your eferring to the story.html file? I tried adding those two variables into it but it didn't effect the published output. The HTML background color is set to 100% transparency.

Somewhere I thought I saw a tutorial by Jeanette that said setting the Base BG, Border and Slide_bg to 100% transaparent was all that is needed to remove that (10 pixel?) border around slide content.

Stephanie Harnett

Does it matter where in the story.html file to add those two variables? Are you adding a background image after publishing or as Javascript in the story file?

When I try your example in IE and FireFox it looks like the slide content is transparent (appears to have a black bacground and appears to be using the background with stars from the hteml file). When I try in Chrome it appears as a solid white background ove top of the black starry background and I do see a white 10 px or so border around slide content.

So in your story file you have set the slide background to transparent on the slide itself and also set 100% transparency in the player color settings for Base BG, Base Border, Base Slide_bg and HTML htmlpage_bg_color? Then in addition to that you have added the two variables to the story.html file after publishing along with a background graphic?

Nancy Woinoski
  • The black with the stars is an image called background.jpg.  I added the background image after publication by adding this line to the html file.

document.body.background = "background.jpg";

I placed this line directly under the line:

document.bgColor = g_strBgColor;

  • The variables are already in the story.html file so all you have to do is locate them and change the settings.

So open the story.html file in editor (notepad or whatever) and locate

var g_stfMode = "window";         Change "window"  to transparent

var g_atrBgColor = "#000000";    Remove the value in the brackets - in this example it is #000000

  • In the story file I set the slide background colour to transparent and also set the Base BG, Base Border, Base Slide_bg and HTML  htmlpage_bg_color to transparent.

So, from what you are saying I guess this does not work with Chrome.

Stephanie Harnett

Thanks Nancy, this worked. The string names were a little different in my story.html file (i.e.; var g_stfMode shows up as var g_strWMode). Making the changes you noted does work in Safari, IE and Firefox on the desktop but Chrome seems to ignore the background transparent tag. It also worksas HTML5 on the ipad and through the mobile viewer (except on mobile player the background image doesn't appear).

Jeanette - is this a reported bug (that changing the player settings Base BG, Base Border, Base Slide_bg all to 100% transparent doesn't remove the border that surrounds slide content)?

Thanks for all of your help today!

Stephanie

Jeanette Brooks

Hey Stephanie! Right, setting those values (base>bg, base>border, and base>slide_bg) to 100% transparent doesn't actually remove those elements, it only makes them transparent so that the Page Background color shows through. One thing that I think is odd and misleading is that after you choose a Page Background color, and then close the Player Properties manager and then reopen it, you now have an additional item in the advanced color editing list, called HTML>htmlpage_bg_color. (Which is redundant with the separate dropdown called Page Background.) And I see that if you choose that item, it also appears that you can set it to 100% transparent, which doesn't really make sense. I think this is a reported issue already, but I will double check.

Regarding using an image as the html background, even though you can do it as Nancy described by making some post-publish edits, right now it's not a supported feature. It would be cool if a future version offered the choice of not only a Page Background color but also the option of using an image instead.

Nancy Woinoski

Steve Flowers said:

Noticing the BG isn't transparent in Chrome as well. Did some digging. Looks like a relatively recent update made it so that the embed tag is required. Gonna dig through the js a bit and file a fix request. This should work.

Browser updates - they will be the death of me.
Drew .

Like all of the above this worked for me except for Chrome. 

Has anyone found a way to make it work in Chrome? 

The html5 version works in Chrome so I guess worst comes to worst I could try to modify the script to run the html5 version if the useragent is chrome, but that seems like a very last resort.

I'd be grateful for any other ideas

DREW

Jeremy Heersink

I am having the issue in chrome also.  I did something a little different though.  I added a 100% height and width div at the bottom of the file and then styled that div.  Here's the code I put in:

div id='customBG' style="position:absolute; width:100%; height:100%; overflow:none; top:0; left:0; background-image:url('bgs/autumn.jpg'); background-repeat:no-repeat; z-index:-100;"

I did have to change the g_strWMode to transparent, but didn't have to change the g_strBgColor to make it work.
EDIT: the code didn't show up, so make sure you close the tag if you use this code yourself
Jeremy Heersink

SOLVED IT!!!! YEAH!!!

Sorry, just so happy.  

In the WriteSwfObject javascript function, it's setting the wmode to opaque always if its in Chrome.  I just added below the previous line : strWMode="transparent" in the function, and it worked.  

Check out line 53 of the story_content\story.js

Drew .

Well done!

It's clear when you look at the code here. For some reason they have done this on purpose.

I have just commented out the lines starting at line 51 

/*  if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)

{

strWMode = "opaque";

} */

This solves the chrome problem, if strWMode is set to transparent in the document.

I just wonder why they have specifically done it in the first place?

Regards

DREW

David Oskorus

Hi All-

I was working through this process for a recent course where I had to have a background pattern/graphic extend seamlessly past the outer edge of the course.

Had everything working like it was described above, and thought I was good to go. Then later in the development process, went to test with a screen reader to validate the course was 508 compliant, but could never get the reader to read any of the content.

Turns out the screen reader will not see the content if strWMode="transparent" or strWMode="opaque".

Working on resolving my background issue with a different fix now. I'm able to get the pattern to line up by adding it to my Story file, and "post pub hacking" it into the html. But as of yet, not able to get rid of the 10 pixel background colored border (the green border in the above sample).

This may not be an issue for some, but worth noting if you are meeting 508 standards.