watermark showing on top of other things

[thomash2]

Hi I'm trying out webrotate 360 for the first time on opencart. I noticed that the watermark is showing on top of other things, like the colorbox.

Is there something I could change in a file, perhaps in the CSS to move the watermark to a lower level so it doesn't go over the colorbox?

Thanks

 

[WebSupport]

Hi Thomas, we can help with this. It depends on your OpenCart theme, but if you send us a link to your store, we can check and tell you exactly what CSS change to make to fix this. Please just send it to support at webrotate360 dot com. And if it's a default theme, just let us know here, so we could share this with other folks.

 

[thomash2]

Hi, I tested this locally, so I'm not able to share it with you, but it's the default theme, following the installation instructions by copying the folders into the root, and the xml into the vqmod. The color box popup is also from the default theme.

Are you able check if this also happens on your demo?

Thanks

 

[WebSupport]

Yes, we altered the following file in the default theme: catalog/view/javascript/jquery/colorbox/colorbox.css

Please find a line in this file that looks like this (somewhere at the top, line 5 in our case):

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:15500; overflow:hidden;}

And make z-index look like above ie 15500

Hope this helps.

 

[thomash2]

Thanks,
This did work for me for colorbox and fancybox.

But I had a problem with a custom drop down top menu, which was behind the wr360 player. I tried increasing z-index of the drop down menu to 16000, but that did not work.

Instead, I added this and it seems to work:
.wr360_player .container { z-index:0 !important}

Will this affect the player negatively in some way? Or is it perfectly fine?

Example

Thanks
Thomas

 

[WebSupport]

Hi Thomas. This should work fine too - depends on your page layout and 360 viewer position relative to your menu. We have high z-index on the image elements and they are absolutely positioned against the container. You're basically moving the image parent (ie container) below your menu with your solution, which is fine.

PS: your 360 product view and the product itself look awesome. Thanks for sharing the link. Interesting..