今天在天空团博客闲逛的时候,发现Tokin做了个很nice的后台登陆界面,并分享出来了;所以呢,我也就顺手牵羊收下了,哈哈!这个方法适合开发主题的大侠,个人也做个日记以后或许会用到。
不过个人觉得Tokin做的页面左边略微空旷,然后呢我就加了两行文字,这样看起来就协调点了,所以我也分享出来吧!
实现的方法很简单就一段函数和一段CSS代码就搞定,改起来也不麻烦
第一步
把CSS追加到登陆页面,代码如下:
1 2 3 4 5 6 7 |
//自定义登录页面LOGO function custom_login_logo() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admstyle.css" type="text/css" /> <div class="slogan"> <h1> 此页面仅提供给管理员作登录后台所用。 <br>※ 如果你不是本站管理员,请速速离去。(你的IP网站后台已自动记录)</h1> </div>';} add_action('login_head', 'custom_login_logo'); |
将上面代码丢进模板函数里(functions.php),如果你的函数模板里面已经自定义过了,那就替换掉以前的,不然会报错哦!如果没有那就加到最后把。
第二步
新建一个CSS文件,把以下代码粘贴进去,重命名为:“admstyle.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 78 79 80 81 82 83 84 85 |
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://mat1.gtimg.com/www/mb/skin/2013/aboluo/apollo_130417_01.jpg) fixed center top no-repeat !important;} .login h1 a {background-image:url('images/logo.png') !important;background-size:120px;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:#FFF 0 0 5px,#FFF 0 0 10px;float:right;margin:0 30px 0 0px;padding:16px 0px 0 20px;} .login #nav a, .login #backtoblog a{color:#FFF!important;} .login #nav a:hover, .login #backtoblog a:hover{color:#000!important;} div.error, .login #login_error {display:none;} div.updated, .login .message {background-color: #E0FFE1;border-color: #ACE655;} .slogan { padding-left: 420px; padding-top: 65px; } .slogan h1 { font-size: 18px; line-height: 2em;font-family: 'PT Sans Narrow',"Microsoft YaHei", serif;font-weight:400;margin-left: -320px; margin-top: 200px; } |
好了,搞定!
背景中文字的颜色神马的自己可以再改,背景图是调用的腾讯微博的,觉得不漂亮自行修改吧,登陆框的颜色啊神马的也可以自行修改,次页面由Tokin原创,我只是转载,版权归Tokin所有!
此站是极不稳定啊,时好时坏。
@涂涂小窝 我已经习惯了,最经没时间来处理这个问题。哈哈!
怎么我修改之后无法显示啊
自从修改了。整个人都好看多了
漂亮, 回去试试···
不过可惜·只能给自己一个人YY下···
呵呵,果然也很不错,不过貌似在窄屏下,你那些文字和登陆框重叠了耶~
@买点什么好 这个左边距我写死了的,改成适合自己就行了,毕竟后台只有管理员使用!