[Closed] Hotspot by DevVN breaks some of Toolset blocks

[Author]

Posts

[cristianR-3]

I am trying to: use Image Hotspot by DevVN

Link to a page where the issue can be seen: hidden link

I expected to see: The page as you see it now

Instead, I got: The Toolset Container Bock gets broken if this plugin is used on the same page.

[cristianR-3]

This issue is easy to reproduce. Simply place a Toolset Container block with content inside and install configure a Hotspot widget and place it with its shortcode on the page. The Toolset container loses all its CSS attributes.

I suspect that Hotspot is loading its CSS after the Toolset style sheet and we have some class conflicts.

[Shane]

Hi Christian,

Thank you for getting in touch.

Does the same issue occur when not using the container block ? As you might be able to work around this issue by not using the container block unless it is critical to the structure of your site.

Please let me know and we can go from there.

Thanks,
Shane

[cristianR-3]

Thank you Shane for getting back to me. That is exactly how I solved this, by not using the Container Block. The thing is that the Container Block saves me from having to write custom CSS for those areas. I was just wondering if reordering how the CSS loads can solve this. Or simply add an additional class to the Container Block to avoid this.

[Shane]

Hi Cristian,

I tried to replicate the issue on my end however i'm not able to.

Is there some specific instructions for the Image Hotspot plugin as i've installed it and added a post with and image then I tried loading the image onto my page with the shortcode
[devvn_ihotspot id="129"]

However when I do my container block still displays the custom classes and ID that i've added to it.

Thanks,
Shane

[cristianR-3]

This is strange. I disable that plugin, and everything works as expected. This leads me to believe it was the plugin. What theme are you using to test? The issue is when I try to use the Container block to flow the full width of the page. Can you test that?

[Shane]

Hi Christian,

I've been testing it with the wordpress 2021 default theme, also i've tested your scenario with the Full Width container block and the container still applies the custom class and custom id that I had assigned to it.

Perhaps i'm not sure how to fully use this plugin. I've setup a test image in the plugin but when I load it on the frontend nothing appears.

Thanks,
Shane

[cristianR-3]

The plugin uses three images. One is the main image in which you overlay the targets. The targets are two images, once to show where the hotspot is located the second one is the hover state of that hotspot.

This is the website on which I noticed the issue Shane:
hidden link

If you scroll down to the area with the heading Sentinel Pro Water Softener Components, you can see how the plugin works.

[Shane]

Hi Cristian,

Would you mind allowing me to have admin access to the website so that I can have a more detailed look at this for you ?

Please where applicable please provide me with a link to an example page where I can see the issue.

I've enabled the private fields for your next response.

Thanks,
Shane

[cristianR-3]

Allow me to set up a demo site. This is currently a live site and although I have 100% trust in you it is my clients' site. But I will put one together with only the needed elements to test this issue Shane. I will have it done by this weekend.

[Shane]

Hi Cristian,

Thank you for the information.

I've enabled the private fields for your next response so that you can provide me with the login details.

Thanks,
Shane