wordpress后台登陆样式美化,让登陆变的更有格调,一般我们都是使用插件美化或者不美化再或者换个背景即可,这里分享一段代码,让你的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
- 最新
- 最热
只看作者