好看的WordPress后台登陆样式

wordpress后台登陆样式美化,让登陆变的更有格调,一般我们都是使用插件美化或者不美化再或者换个背景即可,这里分享一段代码,让你的wordpress博客拥有与众不同的登陆样式,

图片[1]|好看的WordPress后台登陆样式|无作为

如上图所示,看上去酷酷黑黑的,而且特效也算到位了,这里分享的代码大家可以自己修改css样式,添加不同的背景或者其他的格调,

可以自己纯代码修改自己想要的样式,下面让我们来实现它吧:

修改wordpress登陆样式

实现这种特效的步骤,首先打开WordPress主题functions.php文件加入如下调用函数

//WordPress个性化后台登陆
function custom_login_logo() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admstyle.css" type="text/css" />';}
add_action('login_head', 'custom_login_logo');

然后在主题的根目录下,新建一个名为admstyle.css文件粘贴如下代码

body,textarea{font-size:14px;font-family:"Microsoft Yahei",宋体,PMingLiU,Verdana,Arial,Helvetica,sans-serif !important;}
 
 
input{font-size:14px;font-family:Tahoma,Arial,sans-serif !important;}
body{background: #282C2F !important;
 margin: 0 !important;
 padding: 0 !important;
 }
#login {
width:320px;
margin: auto;
}
.login form {
margin-left:8px;
background: #2F3336;
padding:26px 24px 46px;
font-weight:normal;
border:none;
overflow:visible ;
}
.login form .input, .login input[type="text"] {
 color: #C2C2C2 !important;
 height: 50px !important;
 width: 100% !important;
 border-radius: 4px !important;
 padding-left: 20px !important;
 border: 1px solid rgba(0,0,0,0.1) !important;
 background-color: #2A2D30 !important;
 transition: all 0.3s ease-in !important;
 outline:none;
}
.login form .input:hover, .login input:hover[type="text"] {
 
 border: 1px solid #24B999 !important;
 
}
#rememberme {
 background-color: #2A2D30 !important;
 border: 1px solid #24B999 !important;
}
 
#wp-submit {
 font-family: "Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
 font-size: 13px;
 line-height: 13px;
 color: rgba(254,254,254,0.6);
 background: rgba(0,0,0,0.1);
 padding: 14px 20px 24px;
 border: 0;
 border-radius: 4px;
 transition: background-color 0.3s ease-in;
 outline:none;
 border: 0;
 -webkit-box-shadow: none;
 box-shadow: none;
}
#wp-submit:hover {
 background: #24B999;
}

此时你刷新后台登陆,看看是不是变得和上面的延时效果一样了;当然你自己也可以修改颜色图片,这个都不影响哦。

© 版权声明
THE END
点赞+收藏,以备不时之需!
点赞21 分享
评论 共2条

请登录后发表评论

    • 头像文辉0