WordPress 美化后台登录页面

Tuesday, August 17th, 2010 at 01:47 久酷

万戈老兄还有小邪都在美化后台登录页面，咱也不落后了，来玩玩！

先来看看我的后台登录页面，地址是：http://www.jiucool.com/wp/wp-login.php无视IE，非IE均可(Opera、firefox OR chrome)

截图(点击查看大图)：

其中借用了冰剑同学博客的背景图一用，看起来比原来的好看些了吧！

好了，下面来看步骤（部分直接调用的小邪的）：

第一步,将下面代码拷贝到主题的function.php里

function custom_login() {
  echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/mylogin_jiucool.css" />'."\n";
}
add_action('login_head', 'custom_login');

下面是mylogin_jiucool.css代码（注意其中值为0的属性不能删掉！）：

#login{
	margin:12em auto 8em auto;
	background:none no-repeat scroll center top #fff;
	border-radius:11px;
	-moz-border-radius:11px;
	-webkit-border-radius:11px;
	-moz-box-shadow:0 4px 18px #C8C8C8;
	border:1px solid #E5E5E5;
	font-weight:normal;
	}
form {
	-webkit-box-shadow: #C8C8C8 0px 0px 0px;
	border-radius: 0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0 0px 0px #C8C8C8;
	background:none repeat scroll 0 0 #FFFFFF;
	border:0;
	font-weight:normal;
	margin-left:18px;
	margin-right:18px;
	margin-top:8px;
	padding:16px 16px 40px;
}
#login_error .message {
	-moz-border-radius:3px;
	border-style:solid;
	border-width:1px;
	margin:10px 8px 16px 8px;
	padding:12px;
}
h1 {
	display: none;
}
.login #nav a {
	color: #000 !important;
}
.login {
	background:url("http://www.jiucool.com/wp/wp-content/themes/green-bamboo/bg_night.jpg") no-repeat scroll center top #191931;
	height:959px;
}
.login #backtoblog a {
	color:#fff;
}
#backtoblog {
	background: #191931;
	border-bottom:0;
	height:30px;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}
.button-primary {
	background: #AAA !important;
	border-color: #999 !important;
	text-shadow: none !important;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}

以上代码直接ctrl+c crtl+v 可用！

标签:WordPress, wordpress登录美化, 后台, 后台美化, 美化分类：WordPress

No related posts.

21 Responses to “WordPress 美化后台登录页面”

chin says:

June 26, 2011 at 15:38

其实觉得那个倒无所谓了。

[Reply]
豌豆尖 says:

May 7, 2011 at 08:53

挺漂亮的，有空试试

[Reply]
Paran says:

March 9, 2011 at 00:30

我换上了哈哈

[Reply]
WordPress 美化后台登录页面 « 可可 i'm keke says:

March 8, 2011 at 01:15

[...] 文章部分内容转载自：久酷 » 转载请注明来源：可可 i'm keqin »《WordPress 美化后台登录页面》 » 本文链接地址：http://www.keke.im/index.php/archives/239 » 订阅本站：http://feed.keke.im « 上一篇：用winwebmail 轻松搭建邮件服务器技巧 [...]
柠檬 says:

February 13, 2011 at 20:01

哈哈，搞定了，多谢指点啊

[Reply]
三人行 says:

August 30, 2010 at 22:53

这个功能不错，拿去用用。

[Reply]
小姚 says:

August 23, 2010 at 12:05

博主博客不错，看起来很清爽啊。回应回访啊

[Reply]
HJin_me says:

August 18, 2010 at 12:32

IE6用户表示浏览正常～～～～～

[Reply]