编辑functions.php
文件,加入以下代码
1 2 3 4 5 | //登录界面 function diy_login_page() { echo '<link rel="stylesheet" href="' . get_bloginfo( 'template_directory' ) . '/login.css" type="text/css" media="all" />' . "\n"; } add_action( 'login_enqueue_scripts', 'diy_login_page' ); |
在当前模板目录下新建login.css
,内容如下
login.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | html{ background: transparent; } body.login{ background: #000 url("images/login_bg.jpg") no-repeat center top; } body.login div#login h1 a { display: none; } body.login div#login h1{ display: block; height: 70px; } .login form,.login form .input, .login input[type="text"],.wp-core-ui .button-primary,.wp-core-ui .button-primary:hover{ -webkit-box-shadow:none; box-shadow:none; -webkit-border-radius: 0; border-radius: 0; } .login form{ background: rgba(10,35,35,.4); border: none; } .login form .input, .login input[type="text"]{ background: transparent; border-color: #444; color: #eee; } .login form .input:focus{ border-color: #666; } .login label{ color: #999; line-height: 35px; } .wp-core-ui .button.button-primary{ background: rgba(187,64,48,.7); border: none; line-height: 12px; padding: 10px 30px; } .wp-core-ui .button-primary:hover{ background: rgba(0,0,0,.4); -webkit-transition: background 0.5s ease-out 0s; -moz-transition: background 0.5s ease-out 0s; -ms-transition: background 0.5s ease-out 0s; -o-transition: background 0.5s ease-out 0s; transition: background 0.5s ease-out 0s; } .wp-core-ui .button.button-primary, .login label, .login form .input{ font-family: 'Microsoft YaHei'; } #nav,#backtoblog{ display: none; } /*白色*/ body.login{ background: #fff url("http://ww1.sinaimg.cn/large/5d2f370dgw1ebce7cxr03j21400p0n9l.jpg"); } .login label{ color: #000; line-height: 35px; } .login form{ background: rgba(255,255,255,.6); } .login form .input, .login input[type="text"]{ background: transparent; border-color: rgba(50,50,50,.5); color: #666; } .login form .input:focus{ border-color: rgba(50,50,50,.8); } |
补充一下,这个css是两个版本的,全文粘贴过去是白色版本的,如果想要黑色的需要删除 /*白色*/
往后的部分.
请问,要是好几张背景图片自己切换该怎么弄,谢谢
这个单用CSS没法解决需要js控制
懒得码 网上找找现成的吧
啊
博主用的是什么代码高亮插件
插件是 wp-syntax 样式是自己写的
最新版本的wp可以使用吗
可以
搜藏了
默認的不美觀,這個修改就格調弄得完全不同。
不显示图片问题,求解决啦,博主自己的登陆界面也不显示。。。
我的是故意不显示的,请查看文章结尾的补充部分.
哈,没看到这个,,谢谢!解决了!
可以交换链接吗?我的博客已经加上您的了。
已添加.
谢谢,很喜欢!
博主,请问为什么登陆界面的背景图片不显示呢?
图片要自己找
我找了图片,也按照代码中的位置加进去了,但是就是不显示,,求救,很喜欢这篇文章中的效果的样子。。
url(“images/login_bg.jpg”) 把这个换成http开头的绝对路径 试下,主要是我不知道你遇到了什么问题.
我试了,不过我看到您的也是不显示的,您可以自己试试看。
这个后台很漂亮!
这个不错,支持了!
呵呵 多用户的时候挺好的,一个人想折腾也能有折腾
再加个自动获取什么图片网站的图片就酷了~
壁纸这个东西还是看个人喜好放吧. 众口难调.
获取后给自己看?还不如直接上图片站看