WordPress

利用CSS美化WordPress网站登录界面

利用CSS美化WordPress网站登录界面-优次元

WordPress默认初始登录界面非常的丑,所以不想使用,于是百度一下,找到了一些美化登录界面代码,这里优次元分享给需要的博猪!


前段时间分享了 :为WordPress添加超萌猫头鹰输密码手捂眼睛登录界面 需要的可以看看!上图是利用这2中方法整理出来的界面。
本次教程使用方法如下,首先在主题function.php文件相应位置添加如下代码:


//WordPress 登录界面美化 
function custom_login_style() {  
    echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/css/admin-style.css" type="text/css" />';  
}  
add_action('login_head', 'custom_login_style');

然后新建admin-style.css文件,添加以下代码至其中,放到主题css目录即可,最后刷新以下登录界面看看效果吧!


body{  
    font-family: "Microsoft YaHei", Helvetica, Arial, Lucida Grande, Tahoma, sans-serif;  
    width:100%;  
    height:100%;  
    background: url(http://ww1.sinaimg.cn/large/612ce624ly1fyv0xbije9j211y0lctb5.jpg) no-repeat;  
    -moz-background-size: cover;    /*背景图片拉伸以铺满全屏*/  
    -ms-background-size: cover;  
    -webkit-background-size: cover;  
    background-size: cover;  
}  
  
/*顶部的logo*/  
.login h1 a {  
    background:url(images/logo.png) no-repeat;  
    background-size: 220px 50px;  
    width: 220px;  
    height: 50px;  
    padding: 0;  
    margin: 0 auto 1em;  
    border: none;  
    -webkit-animation: dropIn 1s linear;  
    animation: dropIn 1s linear;  
}  
  
/*登录框表单*/  
.login form, .login .message {  
    background: #fff;  
    background: rgba(255, 255, 255, 0.3);  
    border-radius: 3px;  
    border: 1px solid #fff;  
    border: 1px solid rgba(255, 255, 255, 0.4);  
    -webkit-animation: fadeIn 1s linear;  
    animation: fadeIn 1s linear;  
}  
  
/*登录框输入框*/  
.login label {  
    color: #000;  
}  
.login .message {  
    color: #000;  
}  
#user_login{  
    font-size: 18px;  
    line-height: 32px;  
}  
  
/* 返回博客与忘记密码链接 */  
#backtoblog a, #nav a {  
    color: #fff !important;  
    display: inline-block;  
    -webkit-animation: rtol 1s linear;  
    animation: rtol 1s linear;  
}  
  
/*掉落的动画效果*/  
@-webkit-keyframes dropIn {  
    0% {  
        -webkit-transform: translate3d(0, -100px, 0)  
    }  
    100% {  
        -webkit-transform: translate3d(0, 0, 0)  
    }  
}  
@keyframes dropIn {  
    0% {  
        transform: translate3d(0, -100px, 0)  
    }  
    100% {  
        transform: translate3d(0, 0, 0)  
    }  
}  
  
/*逐渐出现的动画效果*/  
@-webkit-keyframes fadeIn {  
    from {  
        opacity: 0;  
        -webkit-transform: scale(.8) translateY(20px)  
    }  
    to {  
        opacity: 1;  
        -webkit-transform: scale(1) translateY(0)  
    }  
}  
@keyframes fadeIn {  
    from {  
        opacity: 0;  
        transform: scale(.8) translateY(20px)  
    }  
    to {  
        opacity: 1;  
        transform: scale(1) translateY(0)  
    }  
}  
  
/*从右往左的动画效果*/  
@-webkit-keyframes rtol {  
    from {  
        -webkit-transform: translate(80px, 0)  
    }  
    to {  
        -webkit-transform: translate(0, 0)  
    }  
}  
@keyframes rtol {  
    from {  
        transform: translate(80px, 0)  
    }  
    to {  
        transform: translate(0, 0)  
    }  
}

历史上的今天:

(4)

本文由来源 Svlik科技资讯,由 芈悦 整理编辑!

关键词:,

热评文章

评论:

6 条评论,访客:6 条,博主:0 条
  1. 一朵时光红
    一朵时光红发布于: 

    鉴于本插件使用的人数越来越多,反馈样式失效问题比较多,于是本次做了如下一些小更新,最新版2.0.2版本,现在即可下载体验:
    1、移除谷歌字体样式,提高浏览器兼容性
    2、css样式及js本地化到插件目录,你再也不担心站长提供的免费CDN不稳定了…虽然站长表示很无赖,贴钱让大家用o(╥﹏╥)o…
    3、使用方式没有变化,参考下文,此版本加入了一个简单的配置项目

  2. 太阳黑子
    太阳黑子发布于: 

    谈到球员的状态,天津台记者表示:“不瞒大家说,天海球员的状况非常不利,现在很多球队还在备战,但是天海的备战受到了疫情的严重干扰,球员从外地回天津后遭到了举报,所以天海队目前在俱乐部的基地进行隔离,整个球队无法举行集体训练,都是球员在分头单独训练,光是训练上天海就已经落后中超诸队了。”

  3. 太阳黑子
    太阳黑子发布于: 

    北京时间3月13日,天津天海官方宣布,与万通投资控股有限公司达成协议,将天海俱乐部全部股权转让给对方。天津台记者方毅心接受了北京体育广播的电话专访,他详细介绍了万通收购天海的经过,并透露曾有高端女装宝姿和北京军工北京企业想接手天海,最终万通经过加时赛胜出

  4. 清美电影
    清美电影发布于: 

    南宁市体育场,揭幕战在广州恒大淘宝U19三队(以下简称恒大队)和越南南定之间举行,赛前举行了简短隆重的开幕仪式。越南南定是首届赛事的冠军球队,两支队伍曾在第二届中国-东盟城市足球邀请赛上有过交锋,当时广州恒大淘宝青年队0比3负于全主力出战的越南南定一线队,恒大“复仇”成功还是越南南定延续他们国家队的战绩高歌猛进?本场比赛引起了网友们的高度关注。上半场比赛双方互交白卷,下半场恒大队员利用体能、身体、

  5. 清美电影
    清美电影发布于: 

    南宁市体育场,揭幕战在广州恒大淘宝U19三队(以下简称恒大队)和越南南定之间举行,赛前举行了简短隆重的开幕仪式。越南南定是首届赛事的冠军球队,两支队伍曾在第二届中国-东盟城市足球邀请赛上有过交锋,当时广州恒大淘宝青年队0比3负于全主力出战的越南南定一线队,恒大“复仇”成功还是越南南定延续他们国家队的战绩高歌猛进?本场比赛引起了网友们的高度关注。上半场比赛双方互交白卷,下半场恒大队员利用体能、身体、

    • 太阳黑子
      太阳黑子发布于: 

      北京时间3月13日,天津天海官方宣布,与万通投资控股有限公司达成协议,将天海俱乐部全部股权转让给对方。天津台记者方毅心接受了北京体育广播的电话专访,他详细介绍了万通收购天海的经过,并透露曾有高端女装宝姿和北京军工北京企业想接手天海,最终万通经过加时赛胜出

发表评论