Apply custom stylesheet to Pro/Cornerstone for WP Auth Check

[thisisbbc]

Hey there,

Wondering if there’s a way to add a custom stylesheet (or some sort of inline CSS) to Cornerstone/Pro?

The reason why I’m asking this is because the #wp-auth-check-form that pops up when your session timeouts is outside of the login iframe. Hence, while our custom login.css stylesheet is loaded, the pop up isn’t centered.

On admin pages, this is fixed using a custom admin.css stylesheet, but since the Pro builder is “outside” of the admin, this stylesheet isn’t loaded.

Here’s how we load our custom stylesheets for the login and modal login pages:

// =================================================
// Load WP Admin CSS, Login CSS and custom product page CSS
// =================================================
add_action('admin_enqueue_scripts', 'nh_admin_css');
add_action('login_enqueue_scripts', 'nh_login_css' );
add_action('wp_enqueue_scripts', 'nh_custom_css', 99);

function nh_admin_css() {wp_enqueue_style('admin-styles', get_stylesheet_directory_uri() . '/assets/css/admin.css');}
function nh_login_css() {wp_enqueue_style('login-styles', get_stylesheet_directory_uri() . '/assets/css/login.css');}
function nh_custom_css() {
    if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
        if (is_product()) {
			//Single-product page
            wp_enqueue_style('nh-custom-style', get_stylesheet_directory_uri() . '/assets/css/nh-products.css');
        } elseif (is_shop()) {
			//Shop page
		}
    }
}

In our admin.css file, here’s the bit that reposition the modal window:

#wp-auth-check-wrap #wp-auth-check {width: 360px;height: 475px;padding: 0;border-radius: 5px;top: 50%;transform: translatey(-50%);background: #111;overflow: hidden;}
#wp-auth-check-wrap #wp-auth-check-form {overflow: hidden;}

Is there an action for the Pro builder we can use to inject this CSS?

I have provided screenshots to illustrate the issue.

Thanks!

[friech]

Hi @thisisbbc,

Thank you for writing in, try adding your custom CSS into Theme Options > CSS or in the Header > CSS area.

Hope it helps,
Cheers!