Brand Colors on the Login Page
Restyles the login screen with your own background, button and link colors.
Opens WPIDE on
Code
add_action( 'login_enqueue_scripts', function () {
$background = '#f3f4f6';
$accent = '#1d4ed8';
$text = '#111827';
printf(
'<style>
body.login{background:%1$s;}
.login #nav a,.login #backtoblog a{color:%3$s;}
.login #nav a:hover,.login #backtoblog a:hover{color:%2$s;}
.wp-core-ui .button-primary{background:%2$s;border-color:%2$s;}
.wp-core-ui .button-primary:hover,.wp-core-ui .button-primary:focus{background:%3$s;border-color:%3$s;}
.login input[type=text]:focus,.login input[type=password]:focus{border-color:%2$s;box-shadow:0 0 0 1px %2$s;}
</style>',
esc_attr( $background ),
esc_attr( $accent ),
esc_attr( $text )
);
} );Notes
Edit the three color variables.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.