是否早已看腻了WordPress后台登录那一成不变的样式?本站之前分享的MP6后台美化插件将后台登录样式重新设计,这次给大家带来的是浅城的天空蓝登录样式,来一睹为快:
实现的方法比较简单,首先先感谢gsky.org的代码分享~
使用方法
1、在主题目录下的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');
2、创建一个名为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://mat1.gtimg.com/www/mb/skin/jd/ax/bg.jpg) fixed center top no-repeat !important;} .login h1 a {background-image:url('/img/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:#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;}
其中需要修改的有mat1.……bg.jpg以及img/logo.png的图片地址。
这网站怎么了……是我的浏览器有问题吗= =貌似 css 出了问题。
@饭团同学x 刷新就好了……貌似在chrome下出了点问题,现在还是这样吗?
能说的详细点么?这个css放到哪个文件夹?
@PSY 主题目录下。
改好了~~~谢谢
@PSY 嘻嘻不客气的说~
博主能不能够帮忙看看我网站登录页面错位…
@苏城 我连你网站地址是什么都不知道……