定制WordPress登录界面样式

将在下面的例子中展示如何修改。

首先在functions.php中添加一个函数:

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
echo ‘<link rel=”stylesheet” type=”text/css” href=”‘ . get_bloginfo(‘template_directory’) . ‘/custom-login/custom-login.css” />';
}
add_action(‘login_head’, ‘fb_custom_login’);

这个函数通过login_head钩子来向login-head中注入一个CSS文件载入。这样的话,只有当使用特定主题时才会载入这个CSS,并显示自定义的登录界面。

  • 自定义的样式表名为custom-login.css,放在模板的/custom-login文件夹下。

    接下来定制CSS文件:

    html {
    background-color: #fff;
    }

    #login form {
    padding-top: 100px;
    }
    #login form .submit input {
    border-color: #bcb38f !important;
    color: #777 !important;
    }
    #login form .submit input:hover {
    border-color: #bcb38f !important;
    color: #bcb38f !important;
    }
    #login h1 {
    display: none;
    }
    .login #nav a {
    color: #777 !important;
    }
    .login #nav a:hover {
    color: #bcb38f !important;
    }

    #wphead img, #wphead h1 {
    display: none;
    }
    #wphead {
    height: 100px;
    }
    #wphead-info {
    padding-top: 27px;
    }

    #footer {
    display: none;
    }
    #footer_custom {
    clear: both;
    text-align: center;
    width: 500px;
    margin: auto;
    height: 100px;
    }
    #footer_custom .docs {
    padding-top: 0px;
    line-height: 100%;
    }
    #footer_image {
    border:none;
    }

    以上就是定制wordpress登录界面的例子。例子中的CSS很不错,你可以以此为基础,创建你自己的样式。


  • 标签:  |  |  |  | 
    将此文分享到:


    转载请注明来自风腾网-wordpress企业主题,本文地址:http://fengten.com/3498.html
    除非注明,风腾网-wordpress企业主题文章均为原创,转载请注明出处和链接!
    友荐云推荐

    相关文章

    *

    *

    顶部 友荐云推荐