Home>Support>Vantage Premium+SiteOrigin: Custom CSS & Theme Customizer CSS renders out of order

Vantage Premium+SiteOrigin: Custom CSS & Theme Customizer CSS renders out of order

By Jonathan Turk, 9 years ago. Last reply by SiteOrigin, 8 years ago.

With Vantage Premium and a handful of siteorigin plugins, I am having trouble with the CSS from the theme customizer appearing AFTER the CSS from Appearance->Custom CSS.
This is a problem because the Theme customizer CSS will override any custom CSS (without an !important flag), which effectively ends the chain at the Theme’s built-css rather than my custom CSS

In my output pages’ source I see the following:

...
<head>
...
<style id='vantage-custom-css' class='siteorigin-custom-css' type='text/css'>
.../*my css*/
</style>
<style type="text/css" id="customizer-css">
.../*theme-built-css*/
</style>
...

Unfortunately the url I’m working is internal to our network, so I can’t include a link for sourcereference.

I have attempted some of my own troubleshooting and edits, but to no avail.

I have found a function called “css()” in the ‘vantagepremiumextrascustomizercustomizer.php’ file, which appears to control printing of the Theme-built customizer-css. If I comment this out, the style tag from the theme customizer (

<style id="customizer-css">...</style>
) does not get written to the page.
It appears this method is called from a function in premium/inc/customizer.php, line 533-540:
function vantage_customizer_style() {
...
echo $builder->css();
}

and again, I can comment this out and the theme-customizer-generated styles do not write to the page.
This function is registered with wp_head() using the following (line 542 of the same file):
add_action('wp_head', 'vantage_customizer_style', 20 /*20 represents the priority according to wordpress codex*/);

I found a function
function siteorigin_custom_css_display() { ... }
in the vantagepremiumextrascsscss.php file, which also appears to write the custom css content with the following code:
	echo "<style id='" . sanitize_html_class($theme) . "-custom-css' class='siteorigin-custom-css' type='text/css'>n";
	echo siteorigin_custom_css_clean( $custom_css , '\') . "n";
	echo "</style>n";

and registers it with
add_action('wp_head', 'siteorigin_custom_css_display', 15 /*15 represents the priority according to wordpress codex*/ );

Now, I’m not entirely familiar with the priorities, so first I tried changing the add_action line to change this function’s priority to 25 (meaning AFTER the $builder->css(); executes), but it does not change the order of elements on the pages.
Confused, I tried commenting out the ‘echo’ lines, but this did NOT appear to have any effect on rendered pages.

I’m still digging through the files, but haven’t found anything that seems to be related just yet.
Any help would be appreciated.

Thanks!

– Turk

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 28 days ago Jonathan Turk

    EDIT:

    So it appears that ‘siteorigin_custom_css_display()’ not the function used to print custom css to the rendered pages. Will need to keep looking.

  2. 9 years, 28 days ago Jonathan Turk

    SOLVED!
    I found the function that renders the CSS to the page. It’s in \wp-content\plugins\so-css\so-css.php on line 70

    ...
		echo "<style id='" . sanitize_html_class($this->theme) . "-custom-css' class='siteorigin-custom-css' type='text/css'>\n";
		echo self::sanitize_css( $custom_css ) . "\n";
		echo "</style>\n";
	...

    If I comment this out, the custom CSS will not render to the pages.
    This function appears to register with the following from line 31 of the same page:

    add_action( 'wp_head', array($this, 'action_wp_head'), 20 );

    so I edited this priority to read:

    add_action( 'wp_head', array($this, 'action_wp_head'), 25/*customizer-css is 20*/ );

    Resolved!

  3. 9 years, 27 days ago Andrew Misplon
    Hi, I Work Here

    Hi Jonathan

    Thanks for the update. Appreciate all the effort.

    Just on a quick skim read of your work…this change isn’t update safe right? You’ve edited the plugin file directly?

    I can’t seem to replicate the problem you’re getting. In local testing my Custom CSS comes before the Customizer CSS. I see they are both 20 but I’m not seeing the same order you are. Not quite sure why that is.

    To make this edit update safe we could instead add the following in a child theme functions.php file:

    function vantage_child_remove_parent_actions() {
    remove_action('wp_head', 'vantage_customizer_style', 20);
}
add_action( 'after_setup_theme', 'vantage_child_remove_parent_actions', 0 );

/**
 * Display the styles
 */
function vantage_child_customizer_style() {
	global $siteorigin_vantage_customizer;
	if ( empty( $siteorigin_vantage_customizer ) ) return;

	$builder = $siteorigin_vantage_customizer->create_css_builder();

	// Add any extra CSS customizations
	echo $builder->css();
}
add_action( 'wp_head', 'vantage_child_customizer_style', 30 );

    Give a try if you’re keen.

  4. 9 years, 27 days ago Andrew Misplon
    Hi, I Work Here

    Removing the Customizer styles at 20, adding them back at 30. Seems to work ok locally on my side.

    Vanilla child theme if you need one:

    https://siteorigin.com/wp-content/uploads/2015/03/vantage-child-starter.zip

  5. 8 years, 9 months ago Jonathan Turk

    Having just updated to Version: 2.4.4, I was excited to give this another try.

    I updated my theme, and it again reordered the CSS so the customizer CSS comes after my custom CSS. Andrew, I tried adding the functions you mentioned in your first post, to the end of my Functions.php file, but it did not alter the order the CSS is printed to the page.

    If I re-do my previously mentioned alterations, the order corrects itself. Ideas?

  6. 8 years, 9 months ago Jonathan Turk

    ***** EDIT: If I re-do my previous alterations the order DOES NOT correct itself.

  7. 8 years, 9 months ago SiteOrigin
    Hi, I Work Here

    Hi Jonathan

    Another direction to take might be to increase the specificity of each rule added to Appearance > Custom CSS. We wouldn’t mind assisting with that. If you post the contents of Custom CSS here or pastebin.com we could assist further.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More