A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Modify Your Login Page with YITH Custom Login

How to Modify Your Login Page with YITH Custom Login

The best thing about having a WordPress website is how easy it is to customize it. There’s no need to have tons of money to do it, or coding skills, or time. You just need to download and install a free theme or a plugin, and the website will look differently, or get some new functionalities.

You can do it for every page on your website. Even the login page, which is so easily taken for granted, can be modified to reflect the new design of your website. When you see how easy it is to change it, you’ll probably ask yourself why you haven’t done it before. Let’s see how you can use the YITH Custom Login Page.

Why Would You Want Create a WordPress Custom Login Page?

The default WordPress login page looks simple and reduced to the bare elements. It has two fields, a logo, a button, a couple of links, and one checkbox. Here’s what it looks like:

Log In

There’s nothing wrong with this page. It makes logging in to WordPress very straightforward — there’s almost nothing you can do wrong here because everything is easy to understand.

But it’s a missed opportunity. At the very least, you should be able to display your own logo on the login page. It wouldn’t hurt if you were able to display something else — a mascot, for example — or mess around with colors, a bit, or with the fonts.

What Can You Do With the YITH Custom Login?

YITH Custom Login

The YITH Custom Login plugin can help you change how your website’s login page looks. After you install the plugin, it will change the appearance of your WordPress login page to look like this:

YITH Custom Login Page

The login page won’t stay like that if you don’t want it to. This is the default look you get after installing and activating the plugin, but you can change it. You can, for example, change the background color on the page, or set an image for the background.

You can also exchange the parrot mascot with yours if you have one. The page is ready for your logo, and you can play around with the username and password fields to change their appearance, and how they’re labeled. Basically, this plugin gives you control over all the important elements on the login page. Let’s give it a closer look.

General Settings

Before we dive into the plugin’s general settings, let’s first make sure you know how to find the plugin. You should find the “appearance” option in the main menu, and click on “login screen” under it:

Appearance option

Once you do that, you’ll move to plugin options, and you’ll see that the general settings tab is the first one from your left.

YITH Custom Login General settings tab

The general settings tab is where you do two important things: enable the custom login plugin and set your mascot image. The settings are as straightforward as they sound, at least until you get to the point where you’re not happy with the position of your mascot — and chances are you won’t be.

Let’s go through the options on this page one by one.

  • Enable custom login: Once you install the plugin, this option will be checked by default. If at any point you want to revert to the default login page, all you need to do is uncheck this box.
  • Show mascotte image: This is the box you have to check if you want a mascot to appear on your custom login page. When the box is unchecked, the mascot will not be visible.
  • Mascotte image URL: The parrot mascot is set by default, and you don’t have to change it if you don’t want to. If you want to change it, the best way to do it would be to add the image (.png format, around 140x185px) to the Media Library and then just put a link to it into this field.
  • Custom CSS: This is the field where you change the position of the mascot. It’s the most complicated thing you can do in the general settings tab.

If you’re not happy with how the mascot looks, you need to inspect it and rummage around the code until you find the values that set its position:

Inspect Elements

You’ll only get to fiddle with the “top” and the “right” values. If you need some help with figuring out which parameters work the best for you, maybe try these for a start:

#login img.mascotte {
position:absolute;
right:-122px;
top:62px;
}

When you change them, you need to copy the whole code into the Custom CSS field. Don’t forget to save the changes after you’ve finished.

Background Settings

YITH Custom Login Background Settings Tab

The background settings tab lets you fine-tune the appearance and the behavior of the background. Here’s what will await you when you switch to this tab:

  • Background image: The field where you place the link to a background image if you plan to use one.
  • Background color: You’ll get some options for choosing the background color, so you can choose what your custom WordPress login page looks even if you don’t use a background image.
  • Background repeat: You get the standard options for the background image to repeat horizontally, vertically, or not repeat at all.
  • Background position: This option lets you set the position of the background image — you have top and bottom positions and left, right, and central alignments.
  • Background attachment: You have two behaviors to choose for your background image: it can either be fixed and always appear on the page, or it can scroll and move together with it.

It’s all pretty standard stuff for setting backgrounds. Add your own image or don’t, play around with different combinations of background image position and repeat, pick a nice color, or combine the two — it’s completely up to you. As always, remember to save any changes you want to keep.

Logo Settings

YITH Custom Login Logo Options

One of the best usages of the YITH Custom Login plugin is for adding your own logo to the plugin page instead of the WordPress logo. On the Logo options tab, you’ll find the following options.

  • Logo image: This is where you choose the image you’ll use for your logo.
  • Background color: If you upload a logo in the .png format, you can pick the color that’s shown under your logo.
  • Logo width and logo height: You can choose the size of your logo on the login page.

These four options are everything you need to set your logo on the YITH custom login page. After you’ve made the adjustments you want, remember to click the “save options” button before moving on.

Form Settings

YITH Custom Login Form Options

The form field allows for the most in-depth customization in the whole plugin. There are three groups of options under this tab:

  • The general form settings: This is where you set the width of the container, and pick the username and password placeholders.
  • Typography settings: You can choose the font, size, style, and color for text in the fields, general text, and the submit button text separately. You can also pick which color the submit button text turns to on hover.
  • Color setting: You can customize the colors of the fields’ backgrounds and borders in different situations: when focusing on them, when submitting, or when hovering over them.

If you want the form fields to be in the colors of your business’ logo, this is the place where you’ll be able to set it all. Just make sure that any change you’d like to keep is saved before closing the tab.

Let’s Wrap It Up!

Your WordPress website can be as beautiful and interesting, or as bare-bones and simple, as you want it to be. That’s the great customizability that makes building a website in WordPress such a rewarding experience. So when you think about fine-tuning your website, don’t think that you’re stuck with that same WordPress login page. With the YITH Custom Login plugin, you can add a new login page and then customize it to match your vision, or your business’ visual identity and style.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply