实例:https://www.sooele.com/wp-login.php (每次刷新更换背景)
年曾经介绍过一个wordpress后台登陆美化,自适应其实也是不错的。相关链接
今天呢,小幻把目前自己在用的后台样式也分享一份(其实很好挖……)
老样子,小幻挖的,怎么可能会是插件,纯代码!嫌烦的请勿下看(其实超简单……)
小幻对原来的进行了下修改,将原来的白云换成了随机背景,登陆框75%左右透明吧,可以看清,但是背景对其影响较大!对背景的适应会更好嘛!
支持顶部图标自定义功能哦!
效果其一:
预览其二:
有图无真相,自己看效果!如果出来的图片不错,是不是美嗒嗒的。
效果预览地址:http://ihuan.me/wp-login.php 切换效果请使用CTRL+F5 简单刷新无效!图片服务器完全无问题,因为都是互联网大牛们的图片!
首先,先部署一下functions.php添加后台样式的使用!
将一下代码加入functions.php中
//自定义登录页面 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');
这段代码放进去,你的后台就已经可以成功自定义了!
然后,就是今天最重要的了,如果真真正正嫌烦的,不想部署的,直接引用本站css,但是需要修改上面的代码!
部署css代码,在主题目录下新建一个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:#92C1D1 url("http://tu.ihuan.me/api/me_all_pic_go") fixed center top no-repeat !important;} .login h1 a {background-image:url('images/wordpress-logo.png') !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:none;float:right;margin:0 30px 0 0px;padding:16px 0px 0 20px;} .login #nav a, .login #backtoblog a{color:#FFF!important;text-decoration:none;} .login #nav a:hover, .login #backtoblog a:hover{color:#444!important;text-decoration:none;} div.error, .login #login_error {display:none;} div.updated, .login .message {background-color: #E0FFE1;border-color: #ACE655;} .wumii-footer{display:none !important;}
将这些放上,基本就OK了!但是顶部的图像并没有加载,本博主支持我大WP。顶部用的WP的logo,大家可以自行添加修改之。
图标地址在css中设置为images/wordpress-logo.png 大家可以自己修改路径,或者将文件存在下面,顶部图标自定义。该路径意思就是在主题目录下images文件夹中wordpress-logo.png文件。
如果自己没有好的logo那就支持大WP吧!
上面是大WP自己的logo图片,大家自己另存为就好了。
这些部署完,你的后台就已经成功美化了,除了唠叨的比较多,其实很简单……
关于自适应,用基友和我说了,就弄了个自适应,如果需要可以用下!以下为自适应css(2015.04.05)
body{background: url('//tu.ihuan.me/api/me_all_pic_go');width:100%;height:100%;background-image:url('//tu.ihuan.me/api/me_all_pic_go');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url('//tu.ihuan.me/api/me_all_pic_go') 0;background-repeat:no-repeat\9;background-image:none\9;}
本文固定链接: https://ihuan.me/2592.html