Login Page Customizer Pro

WP Login Page Customizer Pro plugin allows you to easily customize Login Screen. You can design beautiful and eye catching login page in few minutes

**WP Login Page Customizer Pro** plugin give ability to customize your WordPress login screen according to you. Create unique login design with login page customizer plugin, Almost every element on login page is customizable with login page customizer plugin. Design beautiful and eye catching login page styles in few Minutes .

Plugin allows to change background color, background image, login form color, login form font size, login form position, input field styling, button styling, logo image, link text, error messages, welcome message, google captcha, brute force settings, social login and many more…

Index:

  1.  Plugin Installation
  2.  Enable Login Page Customizer
  3.  Login Page Customizer Settings
    1. Dashboard
    2. Background Option
    3. Login Form
    4. Settings
      1. Logo Settings
      2. Input Field
      3. Button Beauty
      4. Form Footer
    5. Error Messages
    6. Welcome Messages
    7. Google Captcha
    8. Brute Force Settings
    9. Social Logins
    10. Import/Export
  4.  Frequently asked questions (FAQ)
    1. How to install Login Page Customizer in WordPress?
    2. How to get update notification of Plugin?

Here we explaining how you can installation, configuration and publishing Login Page Customizer Pro plugin.

Follow these steps to publish your Slider:

1. Plugin Installation:

Please check our tutorial for “How to Install Premium plugin to your WordPress Directory“.

After plugin installed successfully you can activate them by clicking Activate the button as appear on your screen.

activate wp login page customizer plugin

Now Plugin is successfully installed

Goto Top


2. Enable Login Page Customizer Plugin:

It’s very easy to enable Login Page Customizer.

Plugin Preview into Page:

Goto Top


3. Login Page Customizer Settings:

Through Login Page Customizer settings you can configure Background, Login Form, Logo, Input Field, Button, Form Footer (Lost password , Back to ), Error Message, Welcome Message, Google Captcha, Brute Force Settings, Social Login Settings.

Here we explaining each settings one by one according to page.

3.1. Dashboard Settings:

Using Dashboard Settings you can enable/disable Login Page Customizer Pro plugin. The other option is Remove Settings on Uninstall.

Login page customizer :- Enable/disable Login page customizer settings.

Remove Settings on Uninstall :- This option will remove all settings of this plugin upon uninstallation/delete.

Note :- Enable this option when you no login want to use this plugin. Please turn off this during update.

Custom CSS Editor :- Use this option to put your Custom CSS for the plugin.

 

3.2. Background Option:

Now time to change the login page background image or colour with Login Page Customizer. Here you can customize background Image or Color. Set its position, Size and repeatable property. Background Image also have feature of overlay colour.

Select Background :- Using this option you can select background type as background color or background image.

Choose Background Color :-  This option is visible when you selected background type as Background Color. You can change the background colour of your login page by colour picker control.

Upload Background Image :- This option is available when you selected background type as Background Image. Using this option you can choose your own background of your login page..

Background Image Option :- These options are visible when you selected background type as background image. Using these options you can manage your background image over the screen.

  1. Background Repeat: Customize the repeatable option. This option is very useful if your background image size isn’t big enough. For example, if you are using a pattern you can repeat your background image.
  2. Select Position: Customize the position of your background depends on image.
  3. Background Image Size: Customize the background image size depends on image.

Background Image Overlay Settings :- These options are visible when you selected background image. Using these options you can set overlay color on background Image.

  1. Enable Overlay Color: Switch ‘ON’ this option to enable login page background overlay.
  2. Overlay Color: Customize the colour of overlay colour by colour picker control.
  3. Overlay Color Opacity:  Customize the Opacity of the overlay color by range control.

 

3.3. Login Form:

In this section you can customize the actual login form {image or colour, width, height, radius, shadow, shadow opacity, padding and border}.

Login Form Transparent :- Use this option to make login form transparent. When you turn on this option it’s make your login form transparent and your login form background image and color will not display.

Login Background Type :-  Using this option you can select login background type as background color or background image.

Background Color :- This option use to set background color on Login Form.

Background Login Image:- This option use to set background Image on Login Form.

Login Form Position :- This option is used to set your login form position over the screen like you can float left, right or center your login form. You can also choose Floating with Customization for custom positioning your login form.

Float Settings :- This option is visible when you select Login Form Position as Floating. You can align login form to left, right or center using this option.

Form Margin Left :- This option is visible when you select Login Form Position as Floating with Customization. This option can used for custom positioning of your login screen. Think this option as margin from left side for login form.

Form Margin Top :- This option is work with all there positioning options. Use this option to margin your Login Form to the Top .

Login From Width & Height :- These options are used to set width and height of the login form. You can increase or decrease Login Form width and height using these options.

  1. Form Width: Customize the width of your form by range control.
  2. Form Minimum Height: Customize the minimum height of your form by range control.

Form Padding Left & Right :- Customize the padding of your form by range control.

Login Form Border & Border Radius Setting :- These option are used to set border and Border Radius  for the login screen.

  1. Form Radius: Customize the radius of your form by range control.
  2. Form Border Size: Customize the border of your form by range control.
  3. Form Border Style: Customize the border styling option.
  4. Form Border Color: Customize the border color.

If you don’t want Border on Login Form make this option to size zero. Same as border radius.

Login Form Shadow Option :- This option is used to apply shadow of login form. You can also enable /disable this option using below setting.

Redirect URL :- This is the redirect URL after user login. You can specify the link where you have to go after login.

Note:- Redirect URL not work for Admin. And also if you enter a link that is not accessible according user role, after login page not found will display. For example if you enter link of theme page and some one login as subscriber then he will login but page not found will display.

Identify your site by changing the default WordPress logo on login page with Login Page Customizer Pro. Here you can change the Image logo {image, width, height, padding, URL and Title} or choose Text logo {text, color, font size, padding}.

Go to Admin Dashboard Login Page Customizer Settings ▸ Logo Settings.

Logo Settings :- Using this option you can set logo image or logo text. You can also disable logo by selecting ‘None’ option.

Logo Image  Settings :- These options are visible if you selecting Logo Type as Logo Image.

  1. Upload Logo: Upload your logo image.
  2. Logo Width: Customize the width of your logo by range control.
  3. Logo Height: Customize the height of your logo by range control.
  4. Logo Spacing Top: Customize the padding-top of your logo by range control.
  5. Logo Spacing Bottom: Customize the padding-bottom of your logo by range control.
  6. Logo URL: Customize the logo redirect URL by input the URL into the text field.
  7. Logo Hover Title: Customize the logo Hover Title by input the text into the text field.

Text Logo Settings :-  These options are visible if you selecting Logo Type as Logo Text.

  1. Logo Text: Input the text of your Business Name.
  2. Logo Text Color: Customize the colour of logo text by colour picker control.
  3. Logo Font Size: Customize the size of your logo by range control.
  4. Logo Spacing Top: Customize the padding-top of your logo by range control.
  5. Logo Spacing Bottom: Customize the padding-bottom of your logo by range control.

 

3.4.2 Input Field:

In this section you can customize Input Text Field {width, text color, label color and background color, font size}, Remember me{text color, font size}, Link Shadow {text color}.

Go to Admin Dashboard Login Page Customizer Settings ▸ Input Field.

Login Box Color Option :- Use these option to set Color option.

  1. Input Field Label Color: Customize the text color of labels by color picker control.
  2. Input Field Background Color: Customize the background color of input fields by color picker control.
  3. Input Field Text Color: Customize the text color of input fields by color picker control.
  4. Remember me Label Color: Customize the text color of remember me label by color picker control.
  5. Enable Link Shadow: Check this option to enable Link Shadow Color.
  6. Link Shadow Color: Customize the link shadow color of lost password and back to site label by colour picker control.

Front View :

Font Size & Border Radius Option :-  Using these option you can customize Font Size and Border Radius of Input Field and ‘Remember Me’ Text.

  1. Input Label Font Size: Customize the size of input label of the form by range control.
  2. Input Text Font Width: Customize the size of input fields of the form by range control.
  3. Remember Field Size: Customize the size of remember me label of the form by range control.
  4. Input Border Radius: You can set radius of the text fields of the form by range control.

Input Field Label & Placeholder :-  Use these option to change Input Field labels and Input Box Placeholders.

Icons For Input Field :- Use these option to set icons in input boxes

 

3.4.3 Button Beauty:

In this section you can customize the actual login button itself.

Go to Admin Dashboard Login Page Customizer Settings ▸ Button Beauty.

Button Color Option :- These options are used to customize the color of your Login Button.

  1. Button Background Color: Customize the background color of login/register/forget form button by color picker control.
  2. Button Border Color: Customize the border color of login/register/forget form button by color picker control.
  3. Button Color (Hover): Customize the hover background color of login/register/forget form button by color picker control.
  4. Button Border (Hover): Customize the hover border color of login/register/forget form button by color picker control.
  5. Button Text Color: Customize the text color of login/register/forget form button by color picker control.
  6. Button Text Shadow: Customize the button text-shadow color of login/register/forget form button by color picker control.

Button Size Option :- These options are used to customize size, padding and radius of your Login Button.

  1. Button Size: Customize the size of the button by range control.
  2. Button Top Padding: Customize the top padding of the button by range control.
  3. Button Bottom Padding: Customize the bottom padding of the button by range control.
  4. Radius: Customize the radius of the button by range control.
  5. Text Size: Customize the text size of the button by range control.

 

After the login Button, here is form footer. You can customize the Lost Password {text, display,  text color, text hover color, text size and background color}, Back To Site {display,  text color, text hover color, text size and background color} and Copyright Footer Text{display, text, show love}.

Go to Admin Dashboard Login Page Customizer Settings ▸ Form Footer.

Lost Password Text Settings : Use this option to styling “Lost Password Text”.

    1. Lost Password Text Display: Enable / Disable “Lost your password” text. After disable, all the customization options related to “Lost your password” text will not apply.
    2. Lost Password Text: Customize the “Lost your password” text.
    3. Lost Password Text Color: Customize the text color of lost password by color picker control.
    4. Lost Password Text Hover Color: Customize the hover text color of lost password by color picker control.
    5. Text Font Size: Customize the size of text by range control.
    6. Enable Lost Text Background Color: Check this option to enable the background color of lost password text.
    7. Lost Text Background Color: Customize the background color of lost password text by color picker control.

“Back To” Site Text :- Use this option to styling “Back To” Site Text.

  1. Enable “Back To” Text: Enable / Disable “Back To” site text. After disable, all the customization options related to “ Back To” site text will not apply.
  2. “Back To” Text Color: Customize the text color of “Back To” text by color picker control.
  3. “Back To” Text Hover Color: Customize the hover text color of “Back To” text by color picker control.
  4. “Back To” Text Font Size: Customize the size of text by range control.
  5. Enable “Back To” Text Background: Check this option to enable the background color of “Back To” text.
  6. “Back To” Text Background Color: Customize the background color of “Back To” text by color picker control.

Copyright Footer Text :- Using these options footer text on your login page.

You can show some love to this plugin by turn on “Show Some Love” option. This will place a small link to our company. This help others to learn about our company.

  1. Enable Copyright Note: You can enable this option to show your copyright note.
  2. Copyright Note: Customize the copyright note. You can use this option to show your copyright note.
  3. Show some Love: Enable / Disable “Powered by WebHunt Infotech” text.
  4. Love Position: Change the “WebHunt Infotech” Branding position left or right.

3.5 Error Messages:

One of the main feature of the Login Page Customer Pro. You can change every error message that user will get depending on the outcome of login attempts, registration attempts or forget attempts. So it’s a really really creative.

Go to Admin Dashboard ▸ Login Page Customizer Pro ▸ Error Messages : Customize Your Error messages and preview it at login page .

  1. Enable Error Messages : Switch ‘ON’ this option to enable Error Messages Option.
  2. Incorrect Username Message: Customize the Incorrect Username Error Message.
  3. Incorrect Password Message: Customize the Incorrect Password Error Message.
  4. Invalid Email: Customize the Invalid Email Error Message.
  5. Empty Username Message: Customize the Empty Username Error Message.
  6. Empty Password Message: Customize the Empty Password Error Message.
  7. Empty Email Message: Customize the Empty Email Message.
  8. Username Already Exist Message: Customize the Username Already Exist Error Message.
  9. Email Already Exist Message: Customize the Email Already Exist Error Message.
  10. Forget Password Message: Customize the Forget Password Error Message.
  11. Login with Email Message: Customize the Error Message when force user to login with Email instead of username.

3.6 Welcome Message:

Same as error log messages you can customize the welcome messages as you want to show users. You can show welcome message to login page, registration page, lost password and logout page.

Welcome Message :

  1. Welcome Message on Lost Password: Customize the Welcome Message on Lost Password Form.
  2. Welcome Message on Login Page: Customize the Welcome Message on Login Form.
  3. Welcome Message on Registration: Customize the Welcome Message on Registration Form.
  4. Logout Message: Customize the Logout Message.

Message Box Styling : These option are used to styling of welcome message box.

  1. Message Field Background Color: Customize the background colour of Welcome Message Color by colour picker control.
  2. Message Field Border: Customize the border of the Welcome Message like. (1px solid #00a0d2;)

Note :- Please enter the border css same as give in example. Just change the size and color of border.

3.7 Google Captcha:

Google Captcha is used mostly to block spammers and bots to get login. You can enable Google Captcha use this page. Befour enable this option, you need to get the API Keys. Click here to know how to get API keys.

3.8 Brute Force Settings:

Everybody needs a control of their Login page. This Plugin will help you to track your login attempts by each user. You can limit the login attempts for each user. Brute force attacks are the most common way to gain access to your website. This plugin acts as a shield against these hacking attacks and gives you control to set the time between each login attempts.

Under the Limit Login Attempts settings. You can find the 4 following tabs.

  1. Settings
  2. Failed Login Attempt Details
  3. Blacklist
  4. Whitelist

Under the Brute Force Settings, you can find the following settings.

  1. Enable Protection: Switch ‘ON’ this option to Enable Brute Force Protection.
  2. Max Retries: Maximum failed attempts allowed before lockout.
  3. Lockout Time: After a first lockout how many time required that user will be lock and unable to login? Set the time here in minutes.
  4. Max Lockouts: Max failed attempts, to apply Extend Lockout time.
  5. Extend Lockout: Extend Lockout time after Max Lockouts.  Set the time here in Hours.
  6. Reset Retries: Set the time to Reset Failed login entries.
  7. Email Notification: Email notification after the number of failed attempts. Set on Zero ( 0 ) to disable email notifications.

Under the Failed Login Attempts Logs, you can find the login failed attempts detail. Here you can find the detail with:

  1. IP: The IP address of the user.
  2. Attempted Username: Which username he tries to login to your site.
  3. Last Failed Attempt: The date when he last tries to login to your site.
  4. Failed Attempts Count: Number of failed login attempts.
  5. Lockouts Count: Number of lockouts.
  6. URL Attacked: Which URL he use to login on your site.

Blacklist: You can add the IP address or IP range to the blacklist. The user will no longer able to login. After clicking on Blacklist Button, all the tries that user do to login (Username, Password etc) data will be removed from Attempt Detail tab and IP address added to the blacklist.

Whitelist: You can add the IP address or IP range to the whitelist. The user will no longer face the limitation restriction. After clicking on Whitelist Button, all the tries that user do to login (Username, Password etc) data will be removed from Attempt Detail tab and IP address added to the whitelist.

3.9 Social Login:

Today, there are a lot of websites, the number of accounts of each site also rising. The user doesn’t want to create an account on each website and remembers the credential for that. Choose the best way to log them to your site without any another credential is that, log in via their social media account! Yes, this is useful because users can easily create an account through social media instead of filling up the registration form, so it makes registration and login faster.

Login Page Customizer Pro plugin have Social Login that allows your user to log in via their social media account.

Under the Social Login Redirects settings. You can find the 3 Social Medias.

  1. Facebook
  2. Twitter
  3. Google Plus

Let’s integrate Facebook login with Login page Customizer Pro.

Following are the steps to Create an app on Facebook to use Facebook Login in a web application.

Step 1:

  1. You must register your website with Facebook at https://developers.facebook.com/apps/.
  2. Click Add a new App from My app and fill out the required informational fields. After you have created the App ID please select a product type here. In our case, we use Facebook login.
  3. Select the platform for this app: Here we use “web”.
  4. Enter your web URL here and save the settings.

Step 2:

  1. Go to settings ▸ Basic from the left side menu.
  2. Here you find the App ID and App Secret.
  3. Copy that ID and Secret and use it in plugin settings.

Step 3:

  1. Go to App review from the left side menu.
  2. Here you need to check the option ‘Make “You App” Public?’
  3. After that select the category and press confirm button.

Step 4:

  1. Go to Facebook Login ▸ Settings from the left side menu.
  2. Add valid OAuth redirect URIs here.
  3. Save changings and enjoy.

Let’s integrate Twitter login with Login page Customizer Pro.

Following are the steps to create an app on Twitter to use Twitter Login in a web application.

Step 1:

  1. You must register your website with Twitter at https://apps.twitter.com/.
  2. Click on Create New App Button and fill out the required informational fields.
  3. Callback URL is very important in twitter application. Here you’ll add the copies URL from twitter callback description from the plugin.
  4. Click on “Create your Twitter application”.

Step 2:

  1. Go to “Keys and access token” tab
  2. Copy that Key and Token and use it in plugin settings.
  3. Save changings and enjoy.

Let’s integrate Google Plus login with Login page Customizer Pro.

Following are the steps to Create an app on Gplus to use GPlus Login in a web application.

Step 1:

  1. You must register your website with Google at https://console.developers.google.com/.
  2. Click on Create Project and fill out the required informational fields.
  3. Click on credentials from the left side menu and create credentials here.

Step 2:

  1. Go to OAuth consent screen tab.
  2. Fill out the required informational fields save the settings.
  3. Go to Credentials tabs and click on OAuth Client ID from Create Credential dropdown.
  4. Select Application Type: in our case, we use “Web Application” and fill out the required informational fields.
  5. Authorized redirect URIs is very important for google application. Here you’ll add the copies URL from gplus callback description from the plugin.
  6. Save the settings.

Step 3:

  1. After saving the settings a popup will occur with OAuth Client Copy the Client ID and Client Secret from here and use it in plugin setting.
  2. Save the settings in the plugin and enjoy.

3.10 Import /Export :

Export Plugin Settings :- You can export plugin settings by click to Export button. This will create a .json file.

Note :-  This will export only plugin settings. You need to re-upload media file to new server. For example Images.

Import Plugin Settings : This option is used to import plugin settings.

Note :-  Use plugin latest version on both server when you import or export the plugin settings.

Goto Top


4. Frequently asked questions (FAQ):

1. How to install WP Login Page Customizer in WordPress?

### Install Plugin Using WordPress Plugin Search

  1. Go to the ‘Add New’ in the plugins dashboard
  2. Search for ‘WP Login Page Customizer’
  3. Click Install Now button
  4. Then click Activate Plugin button
  5. Now plugin is Activated
  6. You will see plugin option on WordPress left menu

### Install Plugin using the WordPress Admin Plugin Uploader

1. First download the ZIP file from WordPress.
2. Log in to your website administrator panel.
3. Go to the ‘Add New’ in the plugins dashboard, click “Upload Plugin”.
4. Upload ‘wp-login-page-customizer’ ZIP file by choosing it from your computer.
5. Click **Install Now** button.
6. Then click **Activate Plugin** button.
7. You can see the slider plugin installed on WordPress left menu.

### Using FTP

1. First you will need to download the plugin. (it will be a zip file).
2. Next, you need to extract the zip file on your computer.
3. Login to your FTP
4. Access the path /wp-content/plugins/ for your server directory.
3. Upload the extracted folder to the **/wp-content/plugins/** folder on your web server.
4. Activate the plugin in the Plugin dashboard
5. You can see the plugin is installed and option will display on WordPress left menu.

Goto Top

2. How to get update notification of Plugin?

When we release new updates of the WP Login Page Customizer Free plugin, you will find update notification on your WordPress admin panel.

Goto Top


IMPORTANT: If you found a bug in Login Page Customizer plugin or have any problem/question concerning the plugin, please post your query into Login Page Customizer plugin Support Forum. If you do not find a solution there, do not hesitate to contact us at webhuntinfotech (at) gmail (dot) com.
Thanks For Reading This Document.

WebHunt Infotech