Roots Custom Login Page

The most complete and easy to use plugin to customize the WordPress login page.

Created by wp roots

Download the plugin

After purchasing the plugin you can download it from your Downloads in the Codecanyon Account.

Install The plugin

Go to your website’s admin panel. Click the Plugins menu and then click on Add new. After the page loads, click on Upload Plugin. Select the archive you have just downloaded from Codecanyon and click Install now.

Managing the login templates

The templates can be managed just like any normal posts or pages. You can add/edit/trash the accordions.

Add / Edit

The templates have a total of 80 options. Each option is independent of each other. you can create a template by using just one of them or any combination of the 80 options.

Background Setup

  • Background Image setup an image as the page’s background using the WordPress media library.
  • Background Image Repeat select the repeat option for the background image.
  • Background Image Position Horizontal select the horizontal position of the image.
  • Background Image Position Vertical select the vertical position of the image.
  • Background Color set a color as page background by using the bootstrap color picker. Supports RGBA.
  • Background Video setup an video as the page’s background using the WordPress media library.
  • Background Video Opacity set the opacity of the background video (range 0-1).

Box Setup

  • Box Background Image set an image as background for the box using the WordPress media library.
  • Box Background Image Repeat select the repeat option for the background image.
  • Box Background Image Position Horizontal select the horizontal position of the image.
  • Box Background Image Position Vertical select the vertical position of the image.
  • Box Background Color set a color as box background by using the bootstrap color picker. Supports RGBA.
  • Box Border Type select the type of border you want for the box.
  • Box Border Width set the width of the border.
  • Box Border Color select the color of the border by using the bootstrap color picker. Supports RGBA.
  • Box Border Radius set the border radius (in px).
  • Box Entrance Effect select one of the 38 predefined entrance effects.

Form Setup

  • Form Background Image set an image as background for the form using the WordPress media library.
  • Form Background Image Repeat select the repeat option for the background image.
  • Form Background Image Position Horizontal select the horizontal position of the image.
  • Form Background Image Position Vertical select the vertical position of the image.
  • Form Background Color set a color as form background by using the bootstrap color picker. Supports RGBA.
  • Form Border Type select the type of border you want for the form.
  • Form Border Width set the width of the border.
  • Form Border Color select the color of the border by using the bootstrap color picker. Supports RGBA.
  • Form Border Radius set the border radius (in px).
  • Form Entrance Effect select one of the 38 predefined entrance effects.

Logo Setup

  • Logo Image set an image as to replace the default WordPress logo in the login page by using the WordPress media library.
  • Logo Url set a custom URL for the logo.
  • Logo Entrance Effect select one of the 38 predefined entrance effects.

Label Setup

  • Font Color select the color of the text by using the bootstrap color picker. Supports RGBA.
  • Font Size set the size of the font.
  • Font Weight set the weight of the font.
  • Font Family select the font family.
  • Label Custom CSS set custom CSS for the labels (for advanced users).

Fields Setup

  • Corners Radius Set the corner radius of the fields.
  • Border Thickens set the thickness of the border.
  • Normal Input Text Color Set the color of the text.
  • Selected Input Text Color set the color of the selected text.
  • Normal Input Background Color set the background color for the input fields.
  • Selected Input Background Color set the background color for the selected input fields.
  • Input Border Color set the border color.
  • Field Custom CSS set custom CSS codee for the input fields. (for advanced users)

"Remember me"/"Forgot password"/"Back to website" Setup

  • Hide “Remember me” set to hide the Remember me link
  • Hide “Forgot password” set to hide the Forgot password link
  • Hide “Back to website” set to hide the Back to website link
  • Font Color Set the font color.
  • Font Weight set the font weight.
  • Font Size set the font size.

Submit Button Setup

  • Color set the color of the submit button.
  • Mouse Over Color set the color of the submit button on mouse over.
  • Mouse Pressed Color set the color of the submit button on mouse click.
  • Text Color set the color of the submit button’s label.
  • Text Mouse Over Color set the color of the submit button’s label on mouse over.
  • Text Mouse Pressed Color set the color of the submit button’s label on mouse click.
  • Submit Button Label set a custom text for the submit button.

Social Media Links

  • Facebook set the facebook URL.
  • LinkedIn set the LinkedIn URL
  • Twitter set the Twitter URL
  • Google Plus set the Google Plus URL
  • Email set the Email
  • Container CSS set custom CSS for the links’ container.

Custom Content

  • Left Side Content add custom content to display on the left side of the page.
  • Right Side Content add custom content to display on the right side of the page.
  • Center Bottom Content add custom content to display below the login form.

Info Text Setup

  • Info Text Border Type set the border type for the info text box.
  • Info Text Border Width set the border width for the info text box.
  • Info Text Border Color set the border color for the info text box.
  • Info Text Border Radius set the border radius for the info text box.
  • Info Text Color set the color of the info text.
  • Info Text Mouse Over Color set the mouse over color for the info text.
  • Info Text Box Background Color set the background color for the info box.

Error Message Setup

  • Error Text Border Type set the border type for the error text box.
  • Error Text Border Width set the border width for the error text box.
  • Error Text Border Color set the border color for the error text box.
  • Error Text Border Radius set the border radius for the error text box.
  • Error Text Color set the color of the error text.
  • Error Text Mouse Over Color set the mouse over color for the error text.
  • Error Text Box Background Color set the background color for the error box.

Thanks for purchasing

If you enjoy using this plugin do not forget to go to codecanyon and give a 5 star rating.