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

Source: Internet
Author: User

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. true 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 ...

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.