WordPress

自定义半透明WordPress后台登陆界面

边分享了2种自定义后台登录界面的方法,这里在分享一种自定义半透明WordPress后台登陆界面。


首先打开主题目录functions.php文件,加入以下代码:


//登录界面
function diy_login_page() {
echo '' . "\n";
}
add_action( 'login_enqueue_scripts', 'diy_login_page' );

然后在当前主题目录下新建login.css文件 ,复制以下代码,加入其中:


    html{
    background: transparent;
    }
    body.login{
    background: #000 url("images/login_bg.jpg") no-repeat center top;
    }
    body.login div#login h1 a {
    display: none;
    }
    body.login div#login h1{
    display: block;
    height: 70px;
    }
    .login form,.login form .input, .login input[type="text"],.wp-core-ui .button-primary,.wp-core-ui .button-primary:hover{
    -webkit-box-shadow:none;
    box-shadow:none;
    -webkit-border-radius: 0;
    border-radius: 0;
    }
    .login form{
    background: rgba(10,35,35,.4);
    border: none;
    }
    .login form .input, .login input[type="text"]{
    background: transparent;
    border-color: #444;
    color: #eee;
    }
    .login form .input:focus{
    border-color: #666;
    }
    .login label{
    color: #999;
    line-height: 35px;
    }

    .wp-core-ui .button.button-primary{
    background: rgba(187,64,48,.7);
    border: none;
    line-height: 12px;
    padding: 10px 30px;
    }
    .wp-core-ui .button-primary:hover{
    background: rgba(0,0,0,.4);
    -webkit-transition: background 0.5s ease-out 0s;
    -moz-transition: background 0.5s ease-out 0s;
    -ms-transition: background 0.5s ease-out 0s;
    -o-transition: background 0.5s ease-out 0s;
    transition: background 0.5s ease-out 0s;
    }
    .wp-core-ui .button.button-primary,
    .login label,
    .login form .input{
    font-family: 'Microsoft YaHei';
    }
    #nav,#backtoblog{
    display: none;
    }
    /*白色*/
    body.login{
    background: #fff url("http://ww1.sinaimg.cn/large/5d2f370dgw1ebce7cxr03j21400p0n9l.jpg");
    }
    .login label{
    color: #000;
    line-height: 35px;
    }
    .login form{
    background: rgba(255,255,255,.6);
    }
    .login form .input, .login input[type="text"]{
    background: transparent;
    border-color: rgba(50,50,50,.5);
    color: #666;
    }
    .login form .input:focus{
    border-color: rgba(50,50,50,.8);
    }

整个界面可以实现半透明效果的登录,背景请修改body.login类的background中的图片!

历史上的今天:

(0)

本文由来源 幻杀博客,由 芈悦 整理编辑!

关键词:,

热评文章

发表评论