WP Login Page Customizer Documentation




Custom Login Page (Free) plugin allows you to easily customize Login Screen. You can design beautiful and eye catching login page in few minutes

**Custom Login Page** 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, welcome message, google captcha and many more…

Plugin Download: Custom Login Page

Index:

  1.  Plugin Installation
  2.  Enable Custom Login Page
  3.  Custom Login Page Settings
    1. Dashboard
    2. Background Option
    3. Login Form
    4. Settings
      1. Logo Settings
      2. Input Field
      3. Button Beauty
      4. Form Footer
    5. Welcome Message
    6. Google Captcha
    7. Import/Export
  4.  Frequently asked questions (FAQ)
    1. How to install Custom Login Page in WordPress?
    2. How to get update notification of Plugin?

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

Follow these steps to publish your Slider:

1. Plugin Installation:

### Install Plugin Using WordPress Plugin Search

  1. Go to Admin Dashboard >> Plugins >> Add New
  2. In Search box search for ‘Custom Login Page’.
  3. From Search result look for plugin and 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

Or

You can simple download plugin from WordPress and upload it on your WordPress & Activate plugin.

activate wp login page customizer plugin

Now Plugin is successfully installed

Goto Top


2. Enable Custom Login Page Plugin:

It’s very easy to enable Custom Login Page.

Plugin Preview into Page:

Goto Top


3. Custom Login Page Settings:

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

You can also Import/Export Plugin Settings using Import/Export page options.

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

3.1. Dashboard Settings:

Using Dashboard Settings you can enable/disable Custom Login Page 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 uninstall/deleting the plugin.

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 color with Login Page Customizer. Here you can customize background Image or Color. Set its position, Size and repeatable property. Background Image also having feature of overlay color.

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 color of your login page by color 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 color of overlay color by color 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 color, 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 the 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 login form by range control.
  2. Form Border Size: Customize the border of your login form by range control.
  3. Form Border Style: Customize the border styling option.
  4. Form Border Color: Customize the border color.

Note :- If you don’t want border on Login Form make this option to size zero. Same for 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 redirect user 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. 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 color of logo text by color 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 color 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. 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 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. On Login Page: Customize the Welcome Message on Login Form.
  3. 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 color of Welcome Message Color by color 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.5 Google Captcha:

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

3.6 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 Custom Login Page in WordPress?

### Install Plugin Using WordPress Plugin Search

  1. Go to the ‘Add New’ in the plugins dashboard
  2. Search for ‘Custom Login Page’
  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 Custom Login Page Free plugin, you will find update notification on your WordPress admin panel.

Goto Top


IMPORTANT: If you found a bug in Custom Login Page plugin or have any problem/question concerning the plugin, please post your query into Custom Login Page 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


Share this post:


Leave a Reply

Your email address will not be published. Required fields are marked *