[Resolved] Custom CSS not applying

[Author]

Posts

[marcelO-2]

I am trying to: Use WPBakery to add custom CSS to a Content Template

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

I expected to see: The changes made by the custom css I have added to this Content Template, using WPBakery

Instead, I got:

[Mohammed]

Hi Marcelo,

On my localhost, I was able to add custom CSS to my content template that is designed using WPBakery.

Please try the following:
Disable all plugins except for Toolset and WPBakand activate Twentyineteen theme.
If the issue disappeared, then the issue is not a Toolset one. you will need to activate the plugins one by one to figure out which one causes this conflict and also you will need to check with the currently active theme.

In case the issue existed after doing the previous step, then it would be an exceptional case in your website.
If so, please prepare a duplicate of your website, upload it an uploading platform and share the download link in the next private reply.
You can use the Duplicator plugin to prepare a copy of your website.

Thanks.

[marcelO-2]

If I use "Stop using WPBakery Page Builder for this Content Template", and the CSS is in there, it works.

When I put the CSS in WPBakery Page Settings CSS, the CSS is not provided to the live page. (I tried adding comments and these comments do not appear when I use WPBakery Page Settings CSS)

[marcelO-2]

Plugin Versions:

WPBakery Page Builder 5.7
Toolset Views 2.7.3

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Marcelo

I just tested this locally and it worked as expected. I created a Content Template and designed the template with WPBakery, and in the page settings area of WPBakery I added some custom CSS (a red border), which was applied when I viewed one of the posts on the front end (screenshot).

You are sure that the CSS is not being added to the page (rather than styles which you think should work being overwritten elsewhere)? You have checked using your browser dev tools?

If so can you perform the tests that Mohammed suggested, disabling non-Toolset plugins (other than WPBakery itself) and checking if the custom CSS is still missing? I would start with any WP Bakery extensions or similar, but you may need to disable them all and switch theme to twentynineteen to completely rule out compatibility conflicts.

Let me know what you find.

[marcelO-2]

I don't think it's a Plugin conflict, because when I use WPBakery to apply Page-specific CSS, the CSS applies.

The problem only presents when I'm using WPBakery to edit a Content Template, and only when I'm adding custom CSS.

If I make the Template using WPBakery, and then turn WPBakery editing off and place the CSS in the default CSS editor, the CSS applies.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

OK, but that's not what I experience, as described in my last reply.

Can I get access to your site to do some testing? I may need to take a copy, depending on what I find.

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

Can you also confirm a content template I should try editing?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I can't get past my profile page which requires 2FA.

Could you please make a duplicate of your site and I will install it locally for testing: hidden link

I'll set another private reply so you can share the packages via dropbox or similar.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I looked at your site and I can see what you describe, that the custom CSS added using WP Bakery to the talent template doesn't get added on the front-end.

I triple-checked that it does work on my own site with just Types, Views and WP Bakery installed.

I reviewed all of the WP Bakery settings and the Toolset settings that could affect this and found nothing to explain why it isn't working on your site.

Which means the next step is to rule out any conflict arising from other plugins or your theme.

Could you please try disabling the non-Toolset plugins and switching theme to twentynineteen then trying again? If the issue disappears then it should be possible to determine the source of any conflict by a process of elimination.

Let me know how that goes so I can see how to proceed.

[marcelO-2]

The plugin causing the problem is Yoast SEO Premium.

When that plugin is inactive, the CSS is inserted into the Post.

What shall we do now?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Thanks for that info, I have tested and confirmed the same on my local site (it happens with the free version of Yoast).

I've escalated this so that it can be looked at further by my colleagues and I'll keep you posted with any developments.

In the meantime to avoid temporarily disabling Yoast or stopping designing the template with WPBakery, you should be able to add your CSS directly to a text module inside style tags, something like

<style type="text/css">
body {
  border: 10px solid red;
}
</style>

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Just a quick update to say that this issue is now fixed with the current version of Views, 2.8.0.1, if you could update and let me know if you still experience the problem, thanks.