Transparent PNGs not transparent when used with the Coolwater theme

Permalink Browser Info Environment
G'day Jordan,

I thought I would contact you with an issue I am having, even though everything is pointing at the theme.

Basically when I use Simple Image Gallery with the theme Coolwater, the lightbox transparent PNGs loose their transparency, when I change to the Green Salad theme, it works OK.

Here is a link to the support stream (with attached files etc)

http://www.concrete5.org/index.php?cID=432902...

Hopefully you can add some additional insight? Thanks.

Cheers,
Brett...

Type: Discussion
Status: New
BrettDashwood
View Replies:
jordanlev replied on at Permalink Reply
jordanlev
Hi Brett,
I'm really sorry but I have no idea why or how that's happening. I took a quick look at the site you linked to in that other thread, but it would take me a long time to unwind all the things that are going on with it. I think your best bet is to just spend a bunch of time doing trial-and-error experiments with Firebug or Web Inspector, and see how changing various style rules in the theme's css affect the lightbox.
Or you could try going into the theme's CSS and just commenting out / deleting things and then reloading the page and seeing if the lightbox works again. I took a quick look and it doesn't seem that the theme's CSS is that complicated, so this might be a fruitful endeavour.

Another thing to try is see if you have any custom styles in your theme (via Dashboard -> Themes -> CoolWater -> Customize)... perhaps there is a bad style rule in there (either something that overrides fancybox styles, or a typo that's causing a bunch of other problems)?

If changing the theme fixes the problem, then it's definitely a conflict between the theme styles and the fancybox styles... so that's where you'll want to focus your efforts.

Otherwise, it might be easiest to switch to a different image lightbox effect or gallery.

Sorry, wish I had a better answer for you :(

Good luck,
Jordan
BrettDashwood replied on at Permalink Reply
BrettDashwood
Thanks for the reply Jordan.

I have gone through a fair bit with Chrome Web Developer Tools now and when I 'Validate Local CSS' when the erroneous lightbox is open, it finds two warnings:

URI : TextArea
44      Property -moz-opacity is an unknown vendor extension
207      Property -ms-interpolation-mode is an unknown vendor extension


-moz-opacity looks like it is from the C5 core, but the second one is from the fancybox css. I doubt this would have ever been added to Chrome's CSS support (and being CSS it should just be ignored if not implemented/supported by the browser...right?) however as it to do with stretched images (and I'm guessing that is our issue here) I found this line and commented it out. It went away as a warning (obviously), but unfortunately did not solve the issue.

...and this error:

URI : TextArea
43    div#ccm-overlay    Parse Error opacity=70)


Which I am guessing is in core too.

...however I did the same thing with the Green Salad theme active with the lightbox working correctly and it came up with the same warnings and errors (in fact two extra errors).

With all ofthese to do with fill and opacity I was sure this was going to be it...but no.

Any other thoughts?
jordanlev replied on at Permalink Reply
jordanlev
Sorry man, I have no idea. Those validation warnings definitely aren't the problem though (you're correct that invalid css selectors are just ignored by browsers).

You might want to try the Fancybox forums:https://groups.google.com/forum/?fromgroups#!forum/fancybox...
BrettDashwood replied on at Permalink Reply
BrettDashwood
Thanks Jordan. I had a look through the forums and nothing was jumping at me on a peruse and a search, so I went back and searched other add-ons and I decided to go with the core team "Gallery Block" add-on.

To be perfectly honest I like the Fancybox implementation better however to the customer there will only be a minor difference.

Thanks for your help trying to sort this out.

BTW, I did try your Sortable Fancybox Gallery too, but that had the same issue (as you probably would have expected). When you;re next in the code for that one, I did notice that one difference between the Simple and Sortable add-ons was that Simple had a "None" option for the caption, and Sortable doesn't. It would be good if it did.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.