Style White Label Text

Hi,

How can I style the text in a White Label Login screen? Specifically, I want to style “Lost your password?” and “← Back to [Sitename].”

Thanks,
–Eric

Hello Eric,

Thanks for asking. :slight_smile:

Please add following CSS to change font color and font size in login form. You can write your own CSS and continue with the changes in the same selector.

body.login p#nav a { color: #ddd; font-size: 18px;}

body.login p#backtoblog a { color: #ddd; font-size: 18px;}

You haven’t specified the CSS changes you are looking for. In that regards above code is to help you get started.

Thanks.

Thanks @Prasant.

I’ve added and modified the code to the style.css file in my child theme.

Specifically, I modified the code to be:

body.login p#nav a {
color: #ddd !important;
font-size: 2.1em !important;
font-weight: bold !important;
}

body.login p#backtoblog a {
color: #ddd !important;
font-size: 2.1em !important;
font-weight: bold !important;
}

Unfortunately, this css is having no effect on the White Label page, as a quick look using Chrome’s DevTools shows me.

The staging site login where you can see that this style is not being picked up is http://85a.d29.myftpupload.com/wp-admin.

Can you please advise further?

Many thanks,
–Eric

Hello Eric,

Since you are trying to change the styling of login page, adding CSS in child theme won’t reflect the changes. For that you need to setup CSS file and then link it with login page. Please refer following article that will help achieve the changes you are looking for:

Another option or rather easier workaround is to use a plugin. I came across Custom Login Page Customizer. This plugin has bunch of features but leaving aside a GUI interface to change font size. But this plugin has option to add custom CSS. I have tested this plugin on my local setup and it works absolutely fine. You can add the CSS I shared above.

You can also refer following article to get started with Custom Login Page Customizer plugin:

Thanks.

Thanks @Prasant

You’re welcome.