The White Label WordPress plugin lets you quickly and easily add your own WordPress login CSS rules to your installation. This feature is available in both the free version of White Label and the premium White Label Pro version.
To begin, download, install and activate either version of the plugin. There is documentation available to help you install White Label or install White Label Pro. After the plugin is running, go to the Login tab. You’ll see the Custom CSS option near the bottom of the screen:
WordPress Login Custom CSS Options
You can type any CSS you want into this box. Pressing the Save Settings button will immediately apply your new CSS rules to the WordPress login screen. Your CSS rules will only apply to the WordPress login screen. They will not impact any other front-end-facing portions of your site or the WordPress admin area.
In terms of specific HTML elements, the WordPress login screen doesn’t see significant changes very often. There are only a handful of elements you need to be aware of.
body.login
The body element of the WordPress login screen has a “login” class applied to it.
div#login
There is a div element that wraps around the entire login form that is assigned the “login” id.
form#loginform
The login form itself is a form element with an id of “loginform” attached. The login form also has the “loginform” name attribute if you would like to use that as well.
div.user-pass-wrap
The elements that make up the login password are enclosed in a div element with the “user-pass-wrap” class name. There is no matching wrapper element on the login form’s username input.
p.forgetmenot
The p element surrounds the “Remember Me” checkbox with a “forgetmenot” class assigned.
div.language-switcher
For WordPress installations with multiple languages installed, the language switcher will appear on the login screen. A div with the “language-switcher” class assigned wraps around the language-switcher form.
Additional WordPress Login Options
White Label does a lot more than just letting you adjust the WordPress login CSS. You can set your own color scheme for the login elements, add a background image, upload a custom logo, and change the business name and URL settings. You can learn more by reading our WordPress login documentation.