WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 修改WordPress默认后台登录样式 天空蓝代码分享

修改WordPress默认后台登录样式 天空蓝代码分享

PCDotFan10年前

是否早已看腻了WordPress后台登录那一成不变的样式?本站之前分享的MP6后台美化插件将后台登录样式重新设计,这次给大家带来的是浅城的天空蓝登录样式,来一睹为快:

修改WordPress默认后台登录样式 天空蓝代码分享-WP酷

实现的方法比较简单,首先先感谢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的图片地址。

#后台美化#天空蓝
7
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (8)
再想想
  • 饭团同学x

    这网站怎么了……是我的浏览器有问题吗= =貌似 css 出了问题。

    10年前
    • WP酷

      @饭团同学x 刷新就好了……貌似在chrome下出了点问题,现在还是这样吗?

      10年前
  • PSY

    能说的详细点么?这个css放到哪个文件夹?

    10年前
    • WP酷

      @PSY 主题目录下。

      10年前
  • PSY

    改好了~~~谢谢

    10年前
    • WP酷

      @PSY 嘻嘻不客气的说~

      10年前
  • 苏城

    博主能不能够帮忙看看我网站登录页面错位…

    8年前
    • WP酷

      @苏城 我连你网站地址是什么都不知道……

      8年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
多说CSS样式分享 蓝色高阴影大头像右置
10年前
WordPress让所有链接在新窗口中显示
10年前
在WordPress主题中使用Font Awesome
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1