wordpress登录美化css,wordpress后台login界面美化

更改wordpress默认的login界面,通过CSS调整布局,添加了页面背景图,好看多了,把以下代码添加至主题function.php文件中,图片上传至主题images文件夹下就行。薇晓兰后台已经自定义的修改了,界面如下。

1349faf2fabcbb2ae966fa6c925dd2ce.png

//自定义登录页面的LOGO图片

function my_custom_login_logo() {

echo '

.login {

background-attachment: fixed;

background-position: center center;

background-size: cover;

background-image: url('.get_bloginfo('template_directory').'/images/20210127.jpg);

padding-left: 30px;

padding-right: 30px;

}

#login{

width: 30.6666% !important;

margin-right: 6% !important;

margin-top: 0px !important;

margin-bottom: 0px !important;

}

.login h1 a{

background-image:url('.get_bloginfo('template_directory').'/images/wxl_blog_logo-25.png);

background-size: 150px;

background-position-y: center top;

background-repeat: no-repeat;

color: #444;

height: 43px;

font-size: 20px;

line-height: 1.3em;

margin-top: 10px;

margin-bottom: 25px;

margin-left: 110px;

padding: 0;

width: 150px;

text-indent: -9999px;

outline: 0;

display: block;

}

.login form {

margin-top: 40px;

margin-left: 0;

padding: 50px 50px 50px;

background: #fff;

box-shadow: 0 1px 3px rgba(0,0,0,.13);

}

.login #nav, .login #backtoblog {

margin-top: 0px;

background: #fff;

font-size: 16px;

padding: 0 120px;

height: 60px;

}

';

}

add_action('login_head', 'my_custom_login_logo');

//更改login-logo链接为网站首页

add_filter('login_headerurl', create_function(false,"return get_bloginfo('url');"));

bb21737a4faeecbd06e3c7d7cb5635d6.png

You might also like...