3

I have inherited a work for another developer, it is a website made with WP Bakery Page Builder and I have to fix some design issues.

The thing is that the other developer add some custom css code that I don't find in the backend.

It is generated as inlince css in the index.php. Looks like this.

<noscript><style type="text/css">body .wpex-vc-row-stretched, body .vc_row-o-full-height { visibility: visible; }</style></noscript><style type="text/css" data-type="vc_shortcodes-custom-css">.vc_custom_1530389595419{padding-top: 5% !important;padding-bottom: 5% !important;}</style>

I have problems with these vc_custom_* classes, I want to remove all of them.

Can you guys help me to find these mysterious css?

Thank you so much.

3
  • 2
    WP Bakery Page Builder allows users to add custom styles within the widget. It looks like these are the custom styles added in some widget. You can check all the widgets and their custom styles for the page where these styles are shown. Commented Jul 12, 2018 at 12:45
  • 1
    'vc' comes from Visual Composer which is how WP Bakery Page Builder was called. Inside the pages where you have your content structured with the Page Builder, check the rows/columns that have custom style set to them from the add styles tab. I don't remember how is it called exactly but open the 'edit' column/row window and it's the last tab i think. And by removing those styles the vc_custom class names will disappear Commented Jul 12, 2018 at 12:59
  • 2
    found! it was the "design options" inside the columns...how terrible is that! thank you Commented Jul 12, 2018 at 14:24

3 Answers 3

4

I had exactly the same problem. But as the previous answers have suggested, it is more a matter of codification than of code.

The solution for me was to enter:

enter image description here

And then the values that are automatically like vc_custom_ are margins, border and padding

enter image description here

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks @Jasp, it really helps!
0

You can use conditional tags to target the specific page you need to remove the styles on. You can use is_page() to target a page page (as opposed to another post type) and pass a page ID, slug, title, or no argument to target any page.

function wpse_217881_remove_scripts() {

    // Check for the page you want to target
    if ( is_page( 'About Me And Joe' ) ) {

        // Remove Styles
        wp_dequeue_style( 'parent-style' );
        wp_dequeue_style( 'child-style' );
        wp_dequeue_style( 'parent-style-css' );
        wp_deregister_style( 'parent-style' );
        wp_deregister_style( 'child-style' );
        wp_deregister_style( 'parent-style-css' );
    }
}

I'm assuming you already are, but to be explicit, you should be calling the function that dequeue/deregisters the styles from an action hook - in this instance wp_enqueue_scripts.

From the wp_enqueue_scripts docs:

Despite the name, it is used for enqueuing both scripts and styles

Comments

0

The other answers didn't help me or didn't apply.

So I found where the CSS was hidden in my case: Open the corresponding Page and look for the CSS cog wheel button at the top right corner of the WP Bakery editor:

enter image description here

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.