修改WordPress后台登陆样式

作者 : NSTUN 本文共1771个字,预计阅读时间需要5分钟 发布时间: 2020-03-1 共129人阅读

 

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

修改WordPress后台登陆样式-弄事堂-NSTUN

 

如上图所示,看上去酷酷黑黑的,这里分享的代码大家可以自己修改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;
 outlinenone;
}
.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;
 outlinenone;
 border: 0;
 -webkit-box-shadow: none;
 box-shadow: none;
}
#wp-submit:hover {
 background: #24B999;
}

 

此时你刷新后台登陆,就可以看到效果;当然你自己也可以修改颜色图片,这个都不影响哦。

 

 

NSTUN - 版权声明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
3. 本站提供的源码、软件、文档等其他资源,都不包含技术服务请大家谅解!
4. 如有链接无法下载、非对应文件或失效,请联系管理员处理!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
6. 请联系管理员nstuni@163.com


弄事堂-NSTUN » 修改WordPress后台登陆样式

发表评论

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00