Wordpress text widget overrides CSS styling Cornerstone Global Block

Hi,

I use a Cornerstone Global Block shortcode in a Wordpress text widget.
Global block works fine in the builder. Shortcode works inside the widget and shows on front-end, however the CSS styling gets overridden. How can I make sure the correct css is loaded?

Thx in advanced!

Hello Marco,

Thanks for writing to us.

Global Blocks shortcode work fine with the builder and in the sidebar text widget as well. It might be the issue of custom CSS code or it may be any plugin CSS overriding the styling of the sidebar layout.
Please disable temporarily all the third-party plugin and clear your browser cache. If you are using any third-party cache plugin please please purge all the cache and then check it again

To learn more CSS customization and styling you need to learn CSS and learn how to use the browser’s element inspector.


https://www.w3schools.com/css/

I recommend the following troubleshooting procedures you must do before posting a new thread.

  1. TESTING FOR THEME RELATED ISSUE
  2. TESTING FOR PLUGIN CONFLICT

Thanks

Hi PrakashS,

Thx for your reply.

I disabled all the plugins and changed to the twentyTwenty theme. Still the same problem. See screenshot.

Grtz Marco

Hi Marco,

While trying to inspect your website found that the Coming Soon page is activated.
To examine your website please deactivate the Coming Soon page or share your credentials to access those pages to examine the issue.

Alternatively, please try the HTML widget instead of Text widget and check whether it is working or not.

Please remember that we don’t offer any support to the custom codes and issues related to the custom codes.

Thanks

Hi, I tried with the html widget but same result. no styling.

Hey @Marco,

I have logged in and looked for the page or post to compare the shortcode in the content and in the sidebar. I did not found anything. I only see the test page. Can you please point us to the page where the shortcode is added in the sidebar so that we can investigate further?

Thank you in advance.

Hi,

See this page: https://jorislammers.shop/shop/
The global block is left in de sidebar.

Thx!

Hello @Marco,

I have investigated this issue and checked your shop page. Since you are using a standalone Cornerstone, you will be inserting the global block shortcode like this way:

<div id="cs-content" class="cs-content">[cs_gb id=6971]</div>

We would love to know if this has worked out for you.

Hi Ruenel,

Yeah, that was the problem. It works fine now. Thx a lot!

Grtz, Marco

Glad we could help,

Cheers!

Hi Friech,

One thing:
The checkout WooCommerce page is still overriding the styles. The card page and all the other pages work fine.

Is there a fix for this small problem?

Would be great :slight_smile: Thx!

Hey @Marco,

I have checked your checked out page and I could not find the global block. Can you point us we can check it?
This is the only we see in the checkout page.

Thanks.

Hi,

Your right, I deleted it but I will put it back. See screen. The review is coded directly the two security logo’s above is with the Global Block shortcode.


Cart page is correct.


Checkout page is not correct.

When the page is loading you see the correct style, when the page is fully loaded the style gets overidden.

Grtz Marco

Hi @Marco,

I checked the Cart Page, Checkout Page, and seems its loading with the proper output. Can you please let me know the steps to replicate the issue at our end.

Please also mention the name and the version of the browser, the device, and the operating system you are using to see the website. it helps us to diagnose the issue.
If you find that your CSS code is overridden, please add !important to the specific attributes to set priorities.

Thanks

Hi Tristup,

The problem is just under the ‘Bestelling plaatsen’ button on the checkout page. The global block styling gets overruled.

The code is inside a text widget so I don’t know where to add the !important…?

I’m using Mac OSX Catalina 10.15.6 , Safari version 13.1.2

Thx!

Hello @Marco,

I am using the same OS and browser version. It seems that you are using CloudFlare. This could just be a caching issue. Can you please login to your CloudFlare account and purge your site cache? I would also recommend that you go to CloudFlare > Speed and disable the minification of JS and CSS.

Please let us know how it goes.

Hi Ruenel,

I always pause Cloudflare during development so no caching involved. No caching plugin active.

I cleared the browser cache but the styling stil gets overruled after 1 sec. Also tested with Safari on mobile, Chrome OSX Privat mode. Same problem. You see the correct styling and gets overruled after 1 sec.

Very strange…

Hey Marco,

I see the issue and it’s because Cornerstone doesn’t load the Global Block styles and scripts in the Checkout page. I’ll post this in our issue tracker to be queued for investigation by our development team.

For now, you need to copy the generated styles of the global block by first adding the global block in a test page the inspecting the page using the browser’s element inspector.

What you need to copy is the style block. Insert it in the Text widget.

image

image

The Global Block in the Checkout page is now fixed.

Hope that helps.

Hi,

Thx for the quick fix. When do you think you have a solution for this issue?

Hello Marco,

There is no ETA when the fix will be available. Please check the Changelog in our Themeco Docs when an update is available to see it the fix is included.

Thanks