Create personalized WordPress Login Interface Example Tutorial _php example

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

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

Of course this does not change the layout of the landing box, obviously for the pursuit of the perfect Virgo is not enough, so the second approach appears:

First, add a function to the functions.php:

Custom login for Theme
//folder themes/theme_name/custom-login/
function Custom_login () {
echo ' < Link rel= "stylesheet" type= "Text/css" href= ". Get_bloginfo (' Template_directory '). '/custom-login.css '/> ';
}
Add_action (' Login_head ', ' custom_login ');

Through a simple "hook", now your theme can be opened personalized landing interface, the next thing to do is for your login interface to write CSS style, named Custom-login.css, and then put the CSS file in the theme folder on the line.

The following is the site's CSS, for your reference (because my custom-login.css is placed in the theme folder in the file, so the URL in the background to be written as. In the form of/images/login-bg-body.jpg, people who are familiar with MCS will know that "..." represents a previous level of directory.

/* page CSS/html,body, #wpbody,. form-table pre{background: #ffffff url ("... /images/login-bg-body.jpg ");? font-size:13px;
font-family: Microsoft Ya hei, song body;

A{text-decoration:none;} body.login,body{border:none;} h1 A{display:none;} * * Login Frame main part of CSS/#login {background:url (". /images/login-bg.jpg ") no-repeat;? width:650px;? height:500px;? 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:280px height:166px;? padding:45px 0px 0px 0px; Background:url () no-re Peat margin:60px 0 0 0; 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;} /* Login boxes are composed of 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 Ya hei, song body; 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 the effect picture

See the effect will be found, although we can not change the HTML elements of the page, but including the landing frame structure of the entire landing page can be customized, as long as you know each part of the CSS selector name can be. So as long as the use of Firebug and other tools to view all the CSS ID or class, you can create a completely own landing interface for the main.