How to remove Cornerstone's styles from the head?

Hello,

How can I remove Cornerstone’s styles from the head of html?
I’m running Standalone Cornerstone.

I added filters in functions.php as stated in https://theme.co/docs/standalone-cornerstone#how-to-integrate-cornerstone-into-a-third-party-theme

Currently I have following filters without any success:
add_filter( ‘cornerstone_enqueue_styles’, ‘__return_false’ );
add_filter( ‘cornerstone_customizer_output’, ‘__return_false’ );
add_filter( ‘cornerstone_use_customizer’, ‘__return_false’ );

Looking forward to hearing from you.

Cheers.

That’s the style from the html head I would like to remove:

#cs-content .x-accordion,#cs-content .x-alert,#cs-content .x-audio,#cs-content .x-author-box,#cs-content .x-base-margin,#cs-content .x-block-grid,#cs-content .x-card-outer,#cs-content .x-code,#cs-content .x-columnize,#cs-content .x-entry-share,#cs-content div.x-feature-box,#cs-content .x-feature-list,#cs-content .x-flexslider-shortcode-container,#cs-content .x-gap,#cs-content .x-img,#cs-content .x-map,#cs-content .x-promo,#cs-content .x-prompt,#cs-content .x-recent-posts,#cs-content .x-section,#cs-content .x-skill-bar,#cs-content .x-tab-content,#cs-content .x-video{margin-bottom:;}#cs-content .x-blockquote:not(.x-pullquote),#cs-content .x-callout,#cs-content .x-hr,#cs-content .x-pricing-table{margin-top:;margin-bottom:;}@media (max-width:766.98px){#cs-content .x-pullquote.left,#cs-content .x-pullquote.right{margin-top:;margin-bottom:;}}@media (max-width:479.98px){#cs-content .x-toc.left,#cs-content .x-toc.right{margin-bottom:;}}#cs-content .x-container.width{width:;}#cs-content .x-container.max{max-width:;}#cs-content .x-accordion-heading .x-accordion-toggle.collapsed,#cs-content .x-nav-tabs > li > a,#cs-content .x-recent-posts .h-recent-posts,#cs-content .x-recent-posts .x-recent-posts-date{color:#272727;}#cs-content .x-accordion-heading .x-accordion-toggle.collapsed:hover,#cs-content .x-accordion-heading .x-accordion-toggle,#cs-content .x-nav-tabs > li > a:hover,#cs-content .x-nav-tabs > .active > a,#cs-content .x-nav-tabs > .active > a:hover,#cs-content .x-recent-posts a:hover .h-recent-posts{color:#ff2a13;}#cs-content a.x-img-thumbnail:hover{border-color:#ff2a13;}#cs-content .x-dropcap,#cs-content .x-highlight,#cs-content .x-pricing-column.featured h2,#cs-content .x-recent-posts .x-recent-posts-img:after{background-color:#ff2a13;}#cs-content .x-btn{color:#ffffff;border-color:#ac1100;background-color:#ff2a13;margin-bottom:0.25em;text-shadow:0 0.075em 0.075em rgba(0,0,0,0.5);box-shadow:0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);border-radius:0.25em;}#cs-content a.x-btn:hover{color:#ffffff;border-color:#600900;background-color:#ef2201;margin-bottom:0.25em;text-shadow:0 0.075em 0.075em rgba(0,0,0,0.5);box-shadow:0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);}#cs-content .x-btn.x-btn-real,#cs-content .x-btn.x-btn-real:hover{margin-bottom:0.25em;text-shadow:0 0.075em 0.075em rgba(0,0,0,0.65);}#cs-content .x-btn.x-btn-real{box-shadow:0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);}#cs-content .x-btn.x-btn-real:hover{box-shadow:0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);}#cs-content .x-btn.x-btn-flat,#cs-content .x-btn.x-btn-flat:hover{margin-bottom:0;text-shadow:0 0.075em 0.075em rgba(0,0,0,0.65);box-shadow:none;}#cs-content .x-btn.x-btn-transparent,#cs-content .x-btn.x-btn-transparent:hover{margin-bottom:0;border-width:3px;text-shadow:none;text-transform:uppercase;background-color:transparent;box-shadow:none;}

Hello @dasbios,

Thanks for writing in! Are you trying to bundle the Cornerstone to your own custom theme, please follow the steps mentioned here:

By the way, if you remove the Cornerstone styles from the head, all of the Cornerstone elements may no longer work or display properly. By the way, what you are trying to do, modifying the features and functions of Cornerstone, requires custom coding and it is already considered custom development. Be advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

Hello @ruenel,
Thank you for your reply.

I’m developing a custom theme for our client. It is only for one client and not for selling.

I’m using Cornerstone only as a page editor to place and structure site content, with no customization of Cornerstone features or functions. Then on Front-End, I’m serving my own CSS for HTML that Cornerstone generates, which is not cloaked with all the styling for the components the site will not need. At the same time, I’m disabling the client from using any components that are not planned to be used.

In my initial message mentioned filters do not yield the result stated in your documentation.

I was also checking your plugin code and didn’t find an appropriate apply_filter call for ‘cornerstone_enqueue_styles’, ‘cornerstone_customizer_output’ and ‘cornerstone_use_customizer’ hooks handles.

I don’t need support for custom development.

I kindly ask for the information on how to turn on the functionality that it is specified in your documentation, and it seems it’s not working as documented.

I’m using the latest version of WP and Cornerstone: 6.1.4.

Cheers.

Hello @dasbios,

The CSS that you want to remove is actually coming from the styles.php file which is in the Cornerstone folder. You may need to check the file in wp-content/plugins/cornerstone/includes/views/frontend/. You can edit this file or delete it from the folder since this is loaded dynamically.

Hope this helps.

Hello @ruenel,

You are suggesting directly modifying the Cornerstone plugin code. I would like to avoid that since we are going to have problems when an update of Cornerstone comes out, and it will overrun our changes.

Isn’t add_filter( ‘cornerstone_enqueue_styles’, ‘__return_false’ ); the filter that should do that?
Why it’s not working?
Why are the other two filters also not working?

Cheers.

Hey @dasbios,

I’ve just tried those filters that you’ve posted and they all work. Adding the following codes in the default WordPress theme removes Cornerstone’s Styling.

add_filter( ‘cornerstone_enqueue_styles’, ‘__return_false’ );
add_filter( ‘cornerstone_customizer_output’, ‘__return_false’ );
add_filter( ‘cornerstone_use_customizer’, ‘__return_false’ );

Please note though that they are for Classic Elements and not for V2 or non-Classic Elements. It’s mentioned in our doc. We don’t have an API yet for the V2 elements.

If you’re working on Classic Elements, there probably is something incorrect with your integration. Regretfully, we do not provide support for custom development so we cannot investigate your custom theme code. I’d just suggest that if you’re using a child theme, do any integration using the after_setup_theme hook like the code below.

add_filter('after_setup_theme', 'remove_cs_styles');

function remove_cs_styles() {
	add_filter( 'cornerstone_enqueue_styles', '__return_false' );
	add_filter( 'cornerstone_customizer_output', '__return_false' );
	add_filter( 'cornerstone_use_customizer', '__return_false' );
}

Just remember that we cannot extend help for that as custom development is requires deep involvement.

Thank you for understanding.

Hello @christian,

I set up an empty theme with functions.php that contains only the code from your last reply. It doesn’t work.

Just to verify, I have Cornerstone from Envato market:

Is that OK?

Cheers.

Hey @dasbios,

It’s most probably an issue with your theme. I used the default WordPress theme, Twenty Twenty-One and no code from Cornerstone was generated.

Please try out the Twenty Twenty-One theme and see if it works. If it does, it’s an issue with your theme.

If it doesn’t work with Twenty Twenty-One theme, please provide the following info so we could check your setup so maybe we can point you to the right direction.

  • WordPress Login URL
  • Admin username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

Hello @christian,

As per your instructions, Twenty Twenty-One theme is activated.

Your code is at the end of the functions.php:

add_filter('after_setup_theme', 'remove_cs_styles');

function remove_cs_styles() {
	add_filter( 'cornerstone_enqueue_styles', '__return_false' );
	add_filter( 'cornerstone_customizer_output', '__return_false' );
	add_filter( 'cornerstone_use_customizer', '__return_false' );
}

Also, all plugins except the Cornerstone are deactivated.

Still not working.

I’m sending you access information in Secure Note.

Looking forward to hearing from you.
Cheers.

Hey @dasbios,

Upon further testing, I have replicated the issue with the latest Cornerstone version 6.1.4 which is also the version you’re using.

Please uninstall the latest Cornerstone version in your site and install the previous version 6.0.8. You can download the previous version in your license page.

image

I’ll post this case in our issue tracker so this will be queued to be investigated by our development team.

Thanks.

Hello @christian,

I’m glad you could replicate the issue.

I checked the changelog, and there are 4 versions between 6.0.8 and 6.1.4 with quite some bug fixes and enhancements.

So I would rather not downgrade.

When do you plan to have a patch?

Cheers.

Hey @dasbios,

We don’t have any ETA but rest assured that our developers will check on the said issue. I highly suggest checking our updates from time to time.

Thank you for understanding.

Hello @marc_a,

Not ideal to choose between downgrading 5 versions and not having ETA or staying on the latest version and not having that functionality.

Looking forward to a quick patch of the plugin.

Till then, I came up with this rather hacky workaround that is tested with the latest version of Cornerstone 6.1.4, and it does not include any modification of the plugin.

I’m posting this for the future me or anyone having the same issue.

/**
* Remove Cornerstone's head inline styles
* This is a workaround for not working Cornerstone hooks in versions 6.1.0+  (current version 6.1.4)
*/
function cornerstone_remove_css_scripts() {
	if ( !function_exists('CS') ) return;

	remove_filters_with_method_name('wp_enqueue_scripts', 'registerStyles', 200);
	remove_filters_with_method_name('wp_enqueue_scripts', 'outputStyleTag', 9999);
}
add_action('wp_enqueue_scripts', 'cornerstone_remove_css_scripts');


/**
 * Allow to remove method for an hook when, it's a class method used and class don't have global for instanciation !
 * @link: http://hookr.io/plugins/search-by-sku-for-woocommerce/0.6.1/files/wp-filters-extra/
 */
function remove_filters_with_method_name( $hook_name = '', $method_name = '', $priority = 0 ) {
	global $wp_filter;
	// Take only filters on right hook name and priority
	if ( ! isset( $wp_filter[ $hook_name ][ $priority ] ) || ! is_array( $wp_filter[ $hook_name ][ $priority ] ) ) {
		return false;
	}
	// Loop on filters registered
	foreach ( (array) $wp_filter[ $hook_name ][ $priority ] as $unique_id => $filter_array ) {
		// Test if filter is an array ! (always for class/method)
		if ( isset( $filter_array['function'] ) && is_array( $filter_array['function'] ) ) {
			// Test if object is a class and method is equal to param !
			if ( is_object( $filter_array['function'][0] ) && get_class( $filter_array['function'][0] ) && $filter_array['function'][1] == $method_name ) {
				// Test for WordPress >= 4.7 WP_Hook class (https://make.wordpress.org/core/2016/09/08/wp_hook-next-generation-actions-and-filters/)
				if ( is_a( $wp_filter[ $hook_name ], 'WP_Hook' ) ) {
					unset( $wp_filter[ $hook_name ]->callbacks[ $priority ][ $unique_id ] );
				} else {
					unset( $wp_filter[ $hook_name ][ $priority ][ $unique_id ] );
				}
			}
		}
	}
	return false;
}

@marc_a do you see any potential problem with that approach or inconsistency with what the problematic Cornerstone hooks should do?

I appreciate your support.

Cheers.

Hi @dasbios,

I have checked your solution in my local environment and it does not create any problem with the activated TwentyTwenty theme. Still, I would request you go by the suggestion given by my colleague Christian to avoid any unrecognized problem with the code.

Thanks

Great.
Thank you for your support.

I’m looking forward to the Cornerstone patch.

Have a great day.

Hi @dasbios,

You are most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.