sundry

home page  »  file  »  sundry  »  [11kb only] Wordpress customized background login page modification and beautification

[11kb only] Wordpress customized background login page modification and beautification

explain

Because I just moved from Typecho to WordPress, I have been struggling with various transplants these days. Record the interesting process today.

Preview

Detailed steps

Modify functions.php under the theme directory
add to

 //Custom background login function custom_login() {  echo ' '; echo ' ';  echo ' ';  }  add_action('login_head', 'custom_login');

Extract and upload the files in the attachment to the theme directory/indo_login

Then refresh OK

Each document code is attached at the end

 /* base css */ *{ margin: 0; padding:0; } body{ font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif;  background:url( https://api.isoyu.com/bing_images.php ); } ul,li{ list-style:none; } a{ transition:all 0.5s; } a,a:hover,a:active,a:focus,a:visited{ text-decoration: none; border:0; outline:0 none; } input:focus, button:focus{ outline:0 none; }  /* login */  #login {    position:relative; top:150px; background:#fff;      width:340px;    margin: 0 auto;  padding: 10px 10px 50px 10px;    border-radius:8px;    }    #login h1{ margin-top:20px; }  .login h1 a{    background: #fff url( https://api.isoyu.com/ARU_GIF_S.php ) no-repeat;  background-size:cover;  margin:0 auto;  width:100px;  height:100px;   border:2px solid #e67e22; border-radius:50%; }   #login #loginform{ margin-top:0; box-shadow:none;    border: none; } .ds-login{ display:none; } #user_login{ margin-bottom:0; } #user_pass{ margin-bottom:30px; } #user_login,#user_pass{ border:0; border-bottom:1px solid #e1e1e1; box-shadow: none; font-size:15px; font-weight: normal; padding:10px 0; transition:all 0.5s; // margin:-40px 0 0 0; } #login #loginform input:focus{ border-bottom:1px solid #e67e22; } /**Tips**/ .updated, .login .message {    background:#fff;    border: none;    text-align: center;  color:#999;   }       #loginform, #registerform, #lostpasswordform{    background:transparent;    border:none;    }    /**Buttons**/ .submit{ overflow:hidden; }   .button-primary,.submit .button-primary,#login form .submit input {    width:100px;    height:32px;    line-height:32px;    font-weight: normal;    border:none; background:#E28D41; box-shadow: none; text-shadow:none; transition:all 0.3s; }  #login form .submit input:active,  #login form .submit input:hover{ background:#ECAF79; box-shadow: none; text-shadow:none; border:none; } .login #nav{ margin:0; margin-top:-21px; float:left } #backtoblog{ float:right; margin-top:-20px; }

 window.onload = function(){ //Add placeholder var name = document.getElementById("user_login"); var psw = document.getElementById("user_pass"); Name. setAttribute ("placeholder", "Please enter the user name"); Psw. setAttribute ("placeholder", "Please enter password"); //Hide label var form = document.getElementById("loginform"); var labels = form.getElementsByTagName("label"); var userlabel = form.getElementsByTagName("label")[0]; var passlabel = form.getElementsByTagName("label")[1]; userlabel.removeChild(userlabel.firstChild); passlabel.removeChild(passlabel.firstChild); }

[cide]//api.isoyu.com/ARU_GIF_S.php[/code]

 //api.isoyu.com/ARU_GIF_S.php

Compressed package download

reminder: The content here requires Comment article Post merge Refresh To view.

end of document

WordPress will not change back to the original after upgrading, because we have not made any changes to WordPress's own files.
The code comes from Zui Qingfeng, and the daily bing and Aru facial expression package comes from Ji Changxin API https://api.isoyu.com/demo/

fabulous ( thirty-five )

This article is written by Ji Changxin Author, article address: https://blog.isoyu.com/archives/wordpress-login.html
use Knowledge Sharing Attribution 4.0 International License Agreement. Unless the reprint/source is indicated, they are all original or translated by this website. Please sign your name before reprinting. Last editing time: March 22, 2018 at 11:09 pm

Popular articles

Comments:

13 comments, 0 visitors, 0 bloggers
  1.  Tourists
    Tourists Published on:

    Thank you very much. It's just time to use it

  2.  tourist
    tourist Published on:

    Thank you very much. It's just time to use it

  3.  one billion three hundred and twenty-one million six hundred and thirty thousand three hundred and fifty
    one billion three hundred and twenty-one million six hundred and thirty thousand three hundred and fifty Published on:

    Thank you very much. It's just time to use it

    •  Ji Changxin
      Ji Changxin Published on:

      Good morning!

  4.  one billion three hundred and twenty-one million six hundred and thirty thousand three hundred and fifty
    one billion three hundred and twenty-one million six hundred and thirty thousand three hundred and fifty Published on:

    look at

    •  Ji Changxin
      Ji Changxin Published on:

      Continue to strike/smile manually

    •  Ji Changxin
      Ji Changxin Published on:

      Good morning!

  5.  Ji Changxin
    Ji Changxin Published on:

    test data

  6.  Yi ancient and modern
    Yi ancient and modern Published on:

    This is nice

  7.  September
    September Published on:

    This theme is much more beautiful and smooth than before

    •  Ji Changxin
      Ji Changxin Published on:

      Do you want to hit people like this?, I have used that theme for two or three years

Post reply

[Required]

I am a human?

Please wait three seconds after submission to avoid unsubmission and repetition