前言
有没有很多人都和我一样,觉得wordpress默认的后台登陆页面做的太丑了,强迫症的我当然受不了,于是就四处的寻找修改后台登陆页面的插件,后来想了下改一个页面就用插件会不会太过于大材小用了,所以我就想着利用CSS来实现修改后台登陆页面的布局,废话少说,下面上代码!
演示图
CSS代码
body,textarea {
font-size:14px;
font-family:"Microsoft Yahei",Arial,sans-serif !important;
}
input {
font-size:14px;
font-family:Tahoma,Arial,sans-serif !important;
}
body {
background:#92C1D1 url(背景图片url) fixed center top no-repeat !important;
}
.login h1 a {
background-image:url('LOGO图片url') !important;
background-size:170px 35px;
background-position:top center;
background-repeat:no-repeat;
width:170px;
margin:auto;
margin-top:35px;
height:35px;
text-indent:-9999px;
overflow:hidden;
padding-bottom:15px;
display:block;
}
#login {
width:320px;
background:rgba(0,0,0,0.2);
padding:0 20px 100% 12px;
margin:auto;
top:0px;
right:15%;
position:fixed;
box-shadow:0px 0px 5px 0px #333;
}
.login form {
margin-left:8px;
padding:26px 24px 46px;
font-weight:normal;
background:rgba(255,255,255,0.2);
border:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:#000 0 0px 10px -1px;
}
#loginform {
-webkit-border-radius:0px;
border-radius:0px;
}
.login form .input,.login input[type="text"] {
color:#555;
font-weight:200;
font-size:24px;
line-height:1;
width:100%;
padding:5px;
margin-top:2px;
margin-right:6px;
margin-bottom:16px;
border:1px solid #FFF;
background:#FFF !important;
outline:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.login form .input,.login input[type="text"] {
font-size:17px;
padding-bottom:11px;
padding-top:11px;
text-indent:3px;
}
.login form .input,.login input[type="text"] {
border:2px solid #DCE4EC;
}
input.button-primary {
margin-top:8px;
border:#000;
font-weight:bold;
text-shadow:#FFF 0 0px 10px;
}
.login .button-primary {
font-size:14px!important;
line-height:22px;
padding:8px 117px;
border-radius:0px;
}
input.button-primary {
background:rgba(255,255,255,0.5);
color:#000;
}
input.button-primary:hover,input.button-primary:focus {
background:rgba(255,255,255,0.8);
color:#000;
}
input.button-primary:active {
background:rgba(255,255,255,0.2);
color:#000;
}
.login form .forgetmenot {
font-weight:normal;
float:none;
margin-top:-10px;
}
.login #nav,.login #backtoblog {
text-shadow:#FFF 0 0 5px,#FFF 0 0 10px;
float:right;
margin:0 30px 0 0px;
padding:16px 0px 0 20px;
}
.login #nav a,.login #backtoblog a {
color:#FFF!important;
}
.login #nav a:hover,.login #backtoblog a:hover {
color:#000!important;
}
div.error,.login #login_error {
display:none;
}
div.updated,.login .message {
background-color:#E0FFE1;
border-color:#ACE655;
}
使用方法
将以上CSS代码写入一个 xinadmin.css
文件,上传到主题目录下的css文件夹中
将以下代码加入到主题的 functions.php
文件里
//自定义登录页面
function custom_login_logo() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/css/xinadmin.css" type="text/css" />';}
add_action('login_head', 'custom_login_logo');
然后就大功告成了!注意替换CSS代码里面的图片url地址!