How to make content in flybox 100% opaque with partially transparent background

So the Flybox is set up where .wpFlyoutDiv is the whole container and the setting that applies the background is above that. The problem you’re having is that if you set it at either of those locations it will to apply to all the children below it, including text and buttons. Instead of making the divs less opaque, try making the background opaque and not the div. Below is the code I would try using in “Background color (if visible)” setting for 80%:

rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)";

Explanation:
-start with rgb(0,0,0); becuase “background: ” is already set in the code and this will be the fallback for browsers without rgba().
-rgba() is rgb color 0-225 and a is the opacity, accepted by most current browsers, but not IE 5-8. The CC is the opacity 00-FF, and the rest of the 000000 is the color
-filter:progiD… is the same as rgba() but for IE 5-7. The CC is the opacity 00-FF, and the rest of the 000000 is the color
–ms-filter:… is for IE 8.
These only affect the background and not the entire div.

Try that and let me know how it works. If it does not work then maybe try one piece of the above first and see where it doesn’t work. I am pretty sure I typed it in correctly though.

Wow. Thanks for the detailed answer and explanation! I updated the code with your suggestions and everything looks perfect. THANK YOU SO MUCH!!

Hi Cyle – I just noticed that the “Background Color (if visible):” field is not big enough to hold all the text that you suggested. Would it be possible for you to make the field bigger? Looks like it saved the first 161 characters or so. In my case, I need 253 characters.

No prob if this isn’t possible. Just wanted to check.

Thanks!
Jane

Turns out the 161st character of the code you entered is probably a double quotation mark. The double quotation marks are messing up the way it loads the option on the backend. I was never planning to put more than a color in the background field, but can see where it may be handy so I will fix this in a future update. For you though and until then change the double quotes to single quotes and let me know if that fixes it. My mistake, I should have realized it when I told you the code!

rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)';

Hi Cyle – Thanks for your quick feedback on this. The updated string you suggested is retained. (and a “\” is added before each single quote character to result in this:

rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000);-ms-filter: \’progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC000000)\’;

My flybox looks great, so all is good as far as that goes.

Thanks for your help with this!

OK Great!!