Create a personalized WordPress login interface instance tutorial, wordpress instance tutorial

Create a personalized WordPress login interface instance tutorial, wordpress instance tutorial

There are two methods for personalized login interface. The first method is to replace the login background. This is a small PERSONALIZATION:

Find two images in/wp-admin/images: login-bkg-tile.gifand login-bkg-bottom_new.gif, and replace them with your own custom images (the best size is the same.

Of course, this cannot change the layout of the login box. Obviously, this is not enough for the pursuit of perfect Virgo, so the second method appears:

First, add a function in 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');

Then, put the css file in the topic folder.

The following is the CSS of the current website. For more information, see (My custom-login.css is placed in the subfile of the topic folder. Therefore, the url in the background must be written as follows .. /images/login-bg-body.jpg form, people familiar with MCS will know ".. "indicates the upper-level directory)

/* Page css */html, body, # wpbody,. form-table. pre {background: # ffffff url ("../images/login-bg-body.jpg ");? Font-size: 13px; font-family:, ;} a {text-decoration: none;} body. login, body {border: none;} h1 a {display: none;}/* css */# login {background: url (".. /images/login-bg.jpg ") no-repeat ;? Width: pixel PX ;? 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-repeat; 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;} # user_pass, # user_login, # user_email {width: pixel PX; height: 20px; margin-bottom: 10px;}/* the 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,. button-primary {background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family:, ;} form. submit input {color: #666666;} input. button-primary: active, button. button-primary: active,. button-primary: active {background: none;}/* Others */# nav {margin: 0; padding: 0; position: absolute; text-shadow: none ;}

Deliver

After seeing the results, we will find that although we cannot change the html elements of the page, the entire login page, including the login box structure, can be customized, you only need to know the css selector name for each part. Therefore, you only need to use tools such as firebug to view all css IDs or classes, and you can create a logon interface that is fully self-owned.