最新消息:阿啰哈,本人90后,目前单身,欢迎妹子们来撩!.(。→‿←。) 微信:frank01991

美化WordPress后台登陆界面,半透明效果、随机背景

Website 林志斌 561浏览

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

今天呢,小幻把目前自己在用的后台样式也分享一份

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

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

首先,先部署一下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了!但是顶部的图像并没有加载

图标地址在css中设置为images/wordpress-logo.png 大家可以自己修改路径,或者将文件存在下面,顶部图标自定义。该路径意思就是在主题目录下images文件夹中wordpress-logo.png文件。

via: http://ihuan.me/2592.html

转载请注明:林志斌 » 美化WordPress后台登陆界面,半透明效果、随机背景

发表评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址