当前位置:首页 > WordPress教程 > 正文

美化WordPress后台登陆界面,半透明效果、随机背景(新加自适应)

去年曾经介绍过一个wordpress后台登陆美化,自适应其实也是不错的。相关链接

今天呢,小幻把目前自己在用的后台样式也分享一份(其实很好挖……)

老样子,小幻挖的,怎么可能会是插件,纯代码!嫌烦的请勿下看(其实超简单……)

小幻对原来的进行了下修改,将原来的白云换成了随机背景,登陆框75%左右透明吧,可以看清,但是背景对其影响较大!对背景的适应会更好嘛!

支持顶部图标自定义功能哦!

效果其一:
2015-02预览其二:

2015-02-25

有图无真相,自己看效果!如果出来的图片不错,是不是美嗒嗒的。

效果预览地址: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;}
标签:
上一篇: 下一篇:

110 条评论

评论加载中...
  1. 66楼
    来自天朝的朋友 谷歌浏览器 Linux
    灰常记忆  

    最后的自适应放哪里??

    2020年4月11日 18:31 评论
  2. 65楼
    未知系统 谷歌浏览器 Windows 7
    币安网  

    切换效果请使用CTRL+F5 简单刷新无效!图片服务器完全无问题,因为都是互联网大牛们的图片!

    2019年10月27日 17:17 评论
  3. 161227 884810Black Ops Zombies is now available […]Take a look here[…] 323851

    2018年8月16日 00:42 评论
  4. Socer prtedictions today on which thhe picks are to
    win the Premiership.
    All mind will be onn Koman thjs summer after he was called as Copa Ameriaca lrader by Germany boss Jurgen Klopp.

    2018年8月10日 05:44 评论
  5. Actually ԝhen sⲟmeone doesn’t understand then iits up to other visitors that they wwill assist, so here it happens.

    2018年8月9日 09:46 评论
  6. 61楼
    Seychelles Opera浏览器 Windows 8
    Mitzi  

    If you are going foor best contents like I do, simply pay a visit this site everyday since it presents feature contents, thanks

    2018年8月7日 05:54 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……