{"title":"Customizing your Website Login Page","id":36381,"link":"https:\/\/env.averta.net\/en\/step\/customizing-your-website-login-page\/","parent":[35058],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-36411 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/login-page-1-e1478435429184.png\" width=\"315\" height=\"461\" \/>After activating Phlox and?<a href=\"https:\/\/env.averta.net\/en\/?post_type=step&p=35041&b=35041,35041\" title=\"Installing Recommended Plugins for Phlox (DRAFT)\">Auxin?Elements plugin<\/a> on your website, you are able to customize the admin login page via the customizer. Include a login message and adding a logo above the message. Additionally, you can add a background for this page.<\/p>\n<p>After installing the plugin,?follow the below steps to personalize your login page:<\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Go to your <strong>WordPress Admin Panel<\/strong><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Click <\/span><b>Appearance<\/b><span style=\"font-weight: 400;\"> on the <\/span><b>Dashboard<\/b><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Then click <\/span><b>Customize<\/b><\/li>\n<li style=\"font-weight: 400;\">Navigate?<strong>Extras &gt; Login Page<\/strong><\/li>\n<\/ol>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>If you want to see the changes you have made, you can click on the <code>Preview login page<\/code>?at the top of the?customizer.<\/p>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/bcQS7iol000?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Login Skin<\/h3>\n<p>You?are able to choose one of the existing skins and make changes to it.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"width: 100%;\">\n<tbody>\n<tr>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36386 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/default-icon-e1478421377546.png\" alt=\"default-icon\" width=\"124\" height=\"116\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36412 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/default-preview-3.png\" alt=\"default-preview\" width=\"400\" height=\"480\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-36387\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/clean-white-icon-e1478421465717.png\" alt=\"clean-white-icon\" width=\"124\" height=\"116\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36413 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/clean-white-preview.png\" alt=\"clean-white-preview\" width=\"400\" height=\"480\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-36388\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/simple-gray-icon-e1478421518842.png\" alt=\"simple-gray-icon\" width=\"124\" height=\"116\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36414 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/simple-gray-preview.png\" alt=\"simple-gray-preview\" width=\"399\" height=\"480\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-36389\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/simple-white-icon-e1478421563301.png\" alt=\"simple-white-icon\" width=\"124\" height=\"116\" \/><\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36415 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/simple-white-preview.png\" alt=\"simple-white-preview\" width=\"400\" height=\"480\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36397 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/login-message.png\" alt=\"login-message\" width=\"297\" height=\"599\" \/>Login Message<\/h3>\n<p>Here you can write a text and it will appear under the logo.<\/p>\n<h3>Login Page Logo<\/h3>\n<p>Add a logo image?to replace WordPress default logo.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div style=\"clear: both;\"><\/div>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-36398 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/background.png\" alt=\"background\" width=\"294\" height=\"565\" \/>Login Page Background<\/h3>\n<p><span style=\"font-weight: 400;\">To?add and customize a background for the login page, enable background.?<\/span><span style=\"font-weight: 400;\">It allows you to choose a color for the background, or add an image and?specify its size. You can select a pattern for the background. Some of the?patterns will be placed over the background image, too.?<\/span><span style=\"font-weight: 400;\">You are able to change the repetition of the background. Also, the image alignment is changeable.?<\/span><span style=\"font-weight: 400;\">The background image can be either scrollable or fixed.<\/span><\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/background2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-36399\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/background2.png\" alt=\"background2\" width=\"298\" height=\"918\" \/><\/a><\/p>\n<h3>Custom Class Name<\/h3>\n<p>In addition to the previous customization options, in this section, you are able to add a custom CSS class name to the login page and add your own custom style to the page.<\/p>\n","type":"solution"}