Protected Content Conflicts with WPBakery Visual Composer "Tour" Element

I'm currently using the Vellum Theme for a project. Vellum comes with WPBakery Visual Composer, which we use extensively.

Recently we noticed that when we try to embed the "tour" element into a page, that the element displayed oddly. (It had not done so previously). To troubleshoot this problem, we methodically disabled and re-enabled the plugins on the site until we found the culprit.

It appears that "Protected Content" is the problem plugin. The attached images show the "tour" element with Protected Content de-activated (tour element displays properly) and with Protected Content activated (tour element messed up).

As we need to use Protected Content … the only choice we have is to not use the WPBakery "Tour" element anywhere in the site (which is unfortunate) or somehow try to fix the issue in Protected Content.

Any insight here would be much appreciated.

Thanks -Jeff

  • Jeff
    • Site Builder, Child of Zeus

    I have enabled support access – if someone could possibly take a quick look.

    A sample of the WPBakery Visual Composer “tour” element is displayed on the page “testimonials”

    When looking at the CSS that is being applied to the “tour” element, I’m seeing styles that are defined in “Protected Content”. I can only assume that there is some form of class conflict occuring.

  • Jeff
    • Site Builder, Child of Zeus

    It looks like Protected Content also conflicts with WPBakery “Accordian” elements. Odd styling when PC is enabled – reverts to normal when PC is disabled.

    As we need to have BOTH PC and WPBakery and these elements in our design – I’m wondering if there is a workaround.

    Thoughts?

  • Jeff
    • Site Builder, Child of Zeus

    OK – so there is a style conflict between “Protected Content” (PC) and WPBakery (WPB). At least a couple of the WPB elements break. (Accordion and Tour elements, for sure). [And – it’s not just minor style changes – it’s a mess – the elements are virtually unusable after PC is enabled.]

    As WPB is included in numerous ‘premium’ themes, I think it’s important that WPMU Dev try to get this resolved. As I don’t fully understand all the dependencies etc in PC – my workaround was to use CSS to override and revert the elements back to the proper style that was included with the original theme. (A bit of a headache).

    Since it’s been 11 days and no one has responded to this thread after @calvin did on March 6 – I’ve simply applied my css workaround and am carrying on. BUT, I do notice that there have been other threads over the past several months that also mention style conflicts with PC. The issue has obviously not been fixed. I do understand that its a difficult undertaking with a plugin like PC (which, by the way, is amazing) .. but I for one would sure like to see some focus on this.

    Just my 2 pennies worth.

    Thanks – Jeff

  • Tyler Postle
    • CGO

    Hey Jeff,

    So sorry for such a delay here! Really glad that you got it sorted out on your own with some CSS, good stuff :slight_smile:

    We will definitely still be looking into this, especially since the cause – as you mentioned – is likely conflicting elsewhere too.

    Let us know if you have any further questions and glad you’re liking Protected Content!

    Cheers,

    Tyler

  • Jose
    • Bruno Diaz

    Hi there Jeff,

    Hope you are doing great.

    The style issues caused by PC are mainly because some images, scripts, and css files get protected and not loaded when it should.

    We just release a new version with some improvements on this regard.

    Please let me know if you have the chance to test the latest version and if you are still experiencing problems.

    Thanks in advance,

    Jose

  • Jeff
    • Site Builder, Child of Zeus

    Hi @jose,

    Thanks for the update on this. I just installed the PC 1.1.1.2 update and tested.

    We created a new page and added two of the three WPBakery elements that were known to be problems. (Tabs, Tour, Accordion) and the problem remains (unfortunately).

    If we disable PC, the problem is resolved. I have attached two screen shots to illustrate.. the first one is with Protected Content activated, the second is with it deactivated. (As you can see – PC scrambles the style in a nasty way).

    We worked through that issue with the Accordion element by writing over-riding CSS.

  • Jose
    • Bruno Diaz

    Hey Jeff,

    Thanks for the feedback.

    I was able to recreate the issue on my own environment and spotted the issue :slight_smile:

    Protected content is loading a css file for the library jQuery UI. It is overriding or adding some styles to visual composer elements.

    I’ll send all the information to the lead developer so that he can decide which is the best workaround here.

    At a first glance, it seems that we could load the CSS file only for the admin side. Not totally sure, but I think that it is not necessary in the front end.

    I’ll keep you posted.

    Cheers!

    Jose

  • Jeff
    • Site Builder, Child of Zeus

    Hello @jose,

    Just installed PC 1.1.1.3 – that appears to fix the issue. All the WPBakery elements that were previously problematic when PC was activated are now behaving properly!

    Thanks very much for the help getting this resolved!

    I’m going to mark this resolved.

    -j

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.