Make a personalized WordPress Landing interface Example Tutorial, wordpress example Tutorial _php Tutorial

Make a personalized WordPress Landing interface Example Tutorial, wordpress example Tutorial

There are two ways to personalize the landing interface, the first is to replace the landing background, this is a small personalization 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 (the size is the best).

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 method appears:

First add a function to the functions.php:

Custom Login for theme//folder themes/theme_name/custom-login/function Custom_login () {echo '
 
   ;} Add_action (' Login_head ', ' custom_login ');

Through a simple "hook", now your theme has been able to open the personalized landing interface, the next thing to do is for your landing 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 of the CSS for your reference (because my custom-login.css is placed in the theme folder in the sub-file, so background in the URL to be written as. In the form of/images/login-bg-body.jpg, people familiar with MCS will know ".." represents the previous level of the 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, Arial;} A{text-decoration:none;} Body.login,body{border:none;} H1 A{display:none;} /* Login Box Body part 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-repe At 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;} /* The login box is 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, 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;}

Sent on

When you see the effect, you will find that although we cannot change the HTML elements of the page, the entire landing page, including the login box structure, can be customized as long as you know the CSS selector name for each section. So as long as the firebug and other tools to view all the CSS ID or class, you can create a completely self-host landing interface.

http://www.bkjia.com/PHPjc/1133115.html www.bkjia.com true http://www.bkjia.com/PHPjc/1133115.html techarticle make personalized WordPress Landing interface of the example tutorial, wordpress instance Tutorial Personalized Landing interface method There are two ways, the first is to replace the landing background, this is a small personalized bar ...

