WordPress login pages. Changing design

Described how to change design WordPress login pages with “BG Captcha for WordPress” plugin in order to they correspond to the site idea. Under Wordpress login pages we understand site login page itself, user registration page and lost password recovery page. This is the second part of the post “How to setup plugin BG Captcha for WordPress“. “BG Captcha for WordPress is the plugin that have to be on each site on WordPress. 

 We can see the standard WordPress login form in the fig. 6.

wordpress login pages

Fig. 6. WordPress standard login form

User registration form and lost password recovery form look the same. Let’s see how we can make this form more attractive using “BG Captcha for WordPress” plugin. We shall start with company’s logo.

We have to prepare two company’s logo images. The first is about 250×70 pixels. The second should be double more size for retina screens. If it’s necessary, we also should prepare Wordpress login pages background image.

How to display company’s logo on WordPress login pages

  1. We should open “Login Forms Design” tab (fig. 7)
    Wordpress login pages

    Fig. 7. Company’s logo setup on WordPress login pages

  2. First, we enter logo image URL. This can be done in two ways. First – just type (paste) URL into corresponding field. After clicking the big blue button “Save Changes“at the bottom, page “Login Forms Design” will be renewed and, if there was no error, the image will appear. The second way is more simple – click on the “Select File” button and You will get standard WordPress form to choose file from site media. If the file is not exists in site media library, it is necessary to download it using the same form.
  3. If in future this image should be replaced, it is sufficient to use one of the above methods to enter URL of the new image. If you want to completely remove the company’s logo and return to the form shown in Fig. 6, it is necessary to click on the small little red minus on the left of the image.
  4. Below, enter the URL of the logo image for retina displays the same way. Image looks much bigger.
  5. Now we have to select the alignment of the logo on the form. The options are: left, right, center. Default – the center.
  6. The next step – enter the URL of the page, which visitor will be redirected to at the mouse click on the logo image. By default, the visitor vill be redirected to the site home page. You can enter any URL.
  7. And the last. We can enter the logo image Title attribute. Why do I need to enter this option? If we place mouse over the logo and leave it there, it appears in a one or two seconds like it showed in fig. 8.
    Wordpress login pages

    Fig. 8. Logo Image Title Attribute

    This is the Title attribute. We enter the site slug.

How to setup WordPress login pages background

Now we continue with background setup.

  1. We can set the background color. This can be done in two ways. If you know the hexadecimal color code, You can type it directly in to the field “Background Color” (Fig. 9.1). After clicking the big blue button “Save Changes“at the bottom, page will be renewed and the field will gain the entered color. The second way is simply click into the field “Background Color“.  Wordpress standard color selection widget will appear (Fig. 9.2).
    Wordpress login pages

    Fig. 9. Selecting background color

    Now You may choose the color using this widget.

  2. If we need a background image for WordPress login pages, it is the best moment to enter its URL. How to set the URL of the image described in p. 2 of the previous section (Fig. 10).
    Wordpress login pages

    Fig. 10. Background image setup

  3. If you have decided that we need a background image, it is now necessary to position it correctly.
  4. Background Image Repeat“. Choosing whether or not to repeat the background image, and, if so, how. Possible options – vertically and horizontally – like tile (“Seamless Tile“), only horizontally (“Repeat Horizontally“), only vertically (“Repeat Vertically“) and no repeat (“No Repeat“). Default is to repeat vertically and horizontally ( “Seamless Tile“).
  5. Background Image Expanding“. Selecting the size of the background image. Possible options are not to expand (“Disable“), expand to the height of the screen ( “Contain“), expand to the width of the screen ( “Cover“). Default is not to expand ( “Disable“).
  6. Background Attachment“. Selecting the behavior of the background image when the page is scrolled. Possible options – fix image ( “Fixed“), scroll with the page ( “Scroll“) or scroll with the element ( “Local“). Default is scroll with the page ( “Scroll“).
  7. Background Position (X)“. Selecting the horizontal alignment of the background image relatively WordPress login forms. The options are: left (“Left“), right (“Right“), center (“Center“). Default is the center ( “Center“).
  8. Background Position (Y)“. Selecting the vertical alignment of the background image relatively WordPress login forms. The options are: top (“Top“), a bottom (“Bottom“), the center (“Center“). Default – the center ( “Center“).
  9. That’s all. The background image is set and properly located. Now we have only the last detail left. We should to enter into the field “Login Pages Footer” HTML text, containing all you want to place in the very bottom of Wordpress login pages. For example, links to the confidentiality statement, rulers and conditions and copyright statement (Fig. 11).
    Wordpress login pages

    Fig. 11. Page very bottom

  10. An example of what can become a WordPress site login page with  plugin “BG Captcha for WordPress” is shown in Fig. 12
    Wordpress login pages

    Fig. 12. New login page design

    It can be compared to what it was in Fig. 6. It seems to me, that a new result is a little bit better. I think visitors will enjoy the also.

Described how to setup plugin “BG Captcha for WordPress”. Given step-by-step instruction with explanations. We have just installer Google reCaptcha to the forms, when we need it in order to to avoid spam and abuse brought by robots, and improved design Wordpress login pages. Good luck!

, ,

No comments yet.

Leave a Reply