Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to make a personalized WordPress login interface. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

There are two ways to personalize the login interface, the first is to replace the login background, this is a small personalized bar:

Find login-bkg-tile.gif and login-bkg-bottom_new.gif images in / wp-admin/images and replace them with your own custom images (preferably the same size).

Of course, this can't change the layout of the landing box, which is obviously not enough for the Virgo who pursues perfection, so a second method has emerged:

First add a function to functions.php:

/ / custom login for theme// folder themes/theme_name/custom-login/function custom_login () {echo';} add_action ('login_head',' custom_login')

With a simple "hook", your theme is now ready to open the personalized login interface, the next thing to do is to write a css style for your login interface, name it custom-login.css, and then put the css file in the theme folder.

The following is the css of this site for your reference. (since my custom-login.css is placed in a sub-file in the theme folder, the url in background should be written in the form of.. / images/login-bg-body.jpg, and people familiar with MCS will know ".." Represents the directory at the next level)

/ * page css * / html,body,#wpbody,.form-table. Pre {background: # ffffff url (".. / images/login-bg-body.jpg");? Font-size: 13px; font-family: Microsoft Yahi, Verdana;} a {text-decoration: none;} body.login,body {border: none;} H2 a {display: none;} / * login frame body css * / # login {background: url (".. / images/login-bg.jpg") no-repeat;? Width: 650pxscape? Height: 500pxbot? Position: relative; margin: 50px auto;} # loginform {padding-left: 110px? Float: right;? Border-left: 2px solid # e3e3d3} # loginform # user_login, # loginform # user_pass {border: 2px dotted # 666666} form {width: 280pxten? Height: 166pxscape? Padding: 45px 0px 0px 0pxtern? Background: url () no-repeat; margin: 60px 000; border: none;-moz-border-radius: 0;-webkit-border-radius: 0; border-radius: 0;-moz-box-shadow: none;-webkit-box-shadow: none; box-shadow: none;} # user_pass,#user_login,#user_email {width: 190px; height: 20px; margin-bottom: 10px;} / * Landing boxes form css * / label {font-size: 13px; color: # fff } form .forgetmenot label {font-size: 13px? Color: # 666666;}. Login # nav a {color: # 666666! important;} input.button-primary, button.button-primary, a.button-primary {background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family: Microsoft Yahei, Arial;} form. Submit input {color: # 666666;} input.button-primary: active, button.button-primary: active, a.button-primary: active {background: none } / * other * / # nav {margin: 0; padding: 0; position: absolute; text-shadow: none;}

Send in the effect picture

After seeing the effect, you will find that although we can not change the html element of the page, the entire landing page, including the landing box structure, can be customized, as long as you know the name of the css selector for each part. So as long as you use firebug and other tools to check all the css's id or class, you can create a completely self-made login interface.

This is the end of the article on "how to make a personalized WordPress login interface". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.