Okay
  Public Ticket #268696
Latest Version of Visual Composer has JS conflict
Closed

Comments

  • Jason started the conversation

    Hi there - about to buy another license for Salient, but I wanted to use the latest version of Visual Composer instead of the included.

    I checked the box to disable Salient's Visual Composer.

    I then installed the Visual Composer plugin.

    I've turned off all other plugins.

    When I go to add element:

    http://cl.ly/image/3T3S2k3V0X00

    If I switch to the 2013 theme - it all works as expected.

    Specifically - I'd prefer to use the Salient version - it looks nice! But the newest Virtual Composer has additional settings for how to change things depending on device size (Bootstrap 3) 

    The front end editing is also pretty sweet! 

  •   Jason replied privately
  •  8,839
    Tahir replied

    Hey Jason!

    You wil have to change the "WPBakery" Folder name inside the theme folder as well since the Visual Composer plugin check for the folder and loads the theme one first. 

    Thanks


    ThemeNectar Support Team 

  • Jason replied

    Tahir:

    Hmm that didn't work:

    http://cl.ly/image/0U3L0k2A263K

    Inside the theme folder, I've renamed wpbakery as well as the js_composer folder inside the wpbakery folder, and even tried renaming the nectar-vc-addons.

    It's still able to load the modal -but everything inside is still not coming into view:

    http://cl.ly/image/0Y3O0x0u012o

    If I were to click into the modal area - it would actually select that component -- so still some kind of CSS conflict, I'm not seeing any js errors in the console. 

    And as you can see - Visual Composer is the only active plugin - so it's not a conflict with another plugin:

    http://cl.ly/image/2U0j1E0a0a0A

  • Jason replied

    OK I hunted it down for ya. It's this bit in your CSS:

    .wpb-content-layouts li {

    opacity: 0; 

    -webkit-transition-property: -webkit-transform!important;

    -moz-transition-property: -moz-transform!important;

    -ms-transition-property: -ms-transform!important;

    -o-transition-property: -o-transform!important;

    transition-property: transform!important;

    /* background-color: #222527!important; */

    border: none!important;

    margin: 0px 0px 2px 2px!important;

    text-align: center;

    }

    Once you disable the Opacity and the background color - it works as expected.

    Any danger in deleting this from the CSS File?

    Will you consider making an update to fix this - as well as having to rename the folder in the theme? It's sorta silly to have that box in the settings - but it doesn't work unless you also rename the folder ....

  • Jason replied

    Oops -forgot to say that's in nectar-meta.css

  •  1,070
    ThemeNectar replied

    Hey Jason! That css fix was added in 4.5+ 

    Also I've noted to put some logic in place to automatically rename the folder when toggling that option :)