Support » Plugin: Ninja Forms - The Easy and Powerful Forms Builder » Solution to page load rendering problem – css stylesheet not loading on header

  • Resolved Vicky

    (@vickymedrano)


    Solution for those having the following problem

    When loading the page that contains the form, the initial rendering (the way it looks) is missing the css styling and then when the page finishes loading the right css styling shows up and all is good. It’s like a glitch and you can check it out by doing an F12 con chrome’s browser. The problem is due to ninja forms not loading the css stylesheets on the header but on the body part of the html document, so browser shows the glitch till it catches up.

    The patch goes in your theme’s funtions.php file, usually located at/wp-content/themes/your-theme-name

    Do a back up of the existing file just in case, and paste this code at the very end of whatever is there.
    Make sure the “add_action(‘wp_enqueue_scripts’, ‘enqueue_this_ninja_script’);” is the last line, don’t add a blank space case it will case an error.

    Hope this was helpful, I had to write it myself cause I couldn’t find the right solution anywhere, although this link was a start
    Note: this text editor is a bit too small I hope it respects the text hierarchy after publishing.

    // Load Ninja forms css files on header instead of body * fixing the current problem *
    function deregister_this_ninja_script () {
    wp_deregister_script( ‘ninja-forms-display’ );
    wp_deregister_script( ‘jquery-qtip’ );
    wp_deregister_script( ‘jquery-rating’ );
    wp_enqueue_style( ‘ninja-forms-display’, NINJA_FORMS_URL .’css/ninja-forms-display.css?nf_ver=’ . NF_PLUGIN_VERSION );
    }
    add_action(‘wp_deregister_script’, ‘deregister_this_ninja_script’);

    function enqueue_this_ninja_script () {
    wp_enqueue_style( ‘ninja-forms-display’, NINJA_FORMS_URL .’css/ninja-forms-display.css?nf_ver=’ . NF_PLUGIN_VERSION );
    wp_enqueue_style( ‘jquery-qtip’, NINJA_FORMS_URL .’css/qtip.css’ );
    wp_enqueue_style( ‘jquery-rating’, NINJA_FORMS_URL .’css/jquery.rating.css’ )

    }
    add_action(‘wp_enqueue_scripts’, ‘enqueue_this_ninja_script’);

    https://wordpress.org/plugins/ninja-forms/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Vicky

    (@vickymedrano)

    IMPORTANT NOTICE

    The hierarchy of the above text has been modified by this editor so the code won’t work like that, see this links for some reference to accomodate it for it to work:

    https://github.com/wpninjas/ninja-forms/issues/929

    wp_enqueue_script()

    Vicky

    (@vickymedrano)

    UPDATE

    a little cleaner:

    // Load Ninja forms css files on header instead of body * fixing the current problem * first remove them then add where it should be
    function deregister_this_ninja_script () {
    wp_deregister_script( ‘ninja-forms-display’ );
    wp_deregister_script( ‘jquery-qtip’ );
    wp_deregister_script( ‘jquery-rating’ );
    }
    add_action( ‘wp_deregister_script’, ‘deregister_this_ninja_script’ );

    function enqueue_this_ninja_script () {
    wp_enqueue_style( ‘ninja-forms-display’, NINJA_FORMS_URL .’css/ninja-forms-display.css’ );
    wp_enqueue_style( ‘jquery-qtip’, NINJA_FORMS_URL .’css/qtip.css’ );
    wp_enqueue_style( ‘jquery-rating’, NINJA_FORMS_URL .’css/jquery.rating.css’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_this_ninja_script’ );

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Solution to page load rendering problem – css stylesheet not loading on header’ is closed to new replies.