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...
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 |
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:
-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:
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?
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?
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...
You might want to try the Fancybox forums:https://groups.google.com/forum/?fromgroups#!forum/fancybox...
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.
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.
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