WordPress教程-登录页面美化

 285 2019-10-05 11:50:06 艾奇站长网

TAG:登录页WordPress

WordPress登录的初始页面感觉非常的丑,而又不想使用主题自带的登录页面,所以把Blog的登录页面进行了美化,觉得挺好看的,于是分享给大家美化方法。


登录页面的美化效果


WordPress教程-登录页面美化(图1)


首先打开你主题的functions.php文件,在最后添加上以下代码:

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

在新建admin-style.css并添加以下代码,然后上传至functions.php同目录下,刷新你的登录页面看看,是不是变美了!

body {
    font-family:"Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif;
    width:100%;
    height:100%;
    background:url(https://blog.ccswust.org/images/登录背景图.jpg) no-repeat;
    -moz-background-size:cover;
    /*背景图片拉伸以铺满全屏*/
    -ms-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
}
/*顶部的logo*/
.login h1 a {
    background:url(https://blog.ccswust.org/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)
    }
}


猜你喜欢
Discuz 数据库表清理说明,令你的网站速度更上一层楼

Discuz 数据库表清理说明,令你的网站速度更上一层楼

教程资讯 181 2019-10-07

一、非异常变动与站点管理下,请勿清理。毕竟论坛发展壮大运营起来积分信息还是比较重要的,切记清理请慎重(表前缀默认为:pr...

TAG:Discuz数据库

百度站长工具里的LOGO权限快速开启必有绝招

百度站长工具里的LOGO权限快速开启必有绝招

教程资讯 133 2019-09-30

无论是针对seo从业者还是普通用户,带有百度站点LOGO的网站和没有百度站点LOGO的网站,带有百度站点LOGO的网站都...

TAG:站长工具LOGO

织梦DedeCMS如何去掉首页域名后面的index.html

织梦DedeCMS如何去掉首页域名后面的index.html

教程资讯 170 2019-09-30

今天我的一朋友和我做友情连接的时候对我 说请把你的域名尾巴去掉,那样影响权重的,我这才知道网站首页默认是带index.h...

TAG:织梦DedeCMS

帝国CMS批量设置正文第一张图片为缩略图方法

帝国CMS批量设置正文第一张图片为缩略图方法

教程资讯 187 2019-11-19

执行以下脚本的时候请 先备份数据库!文本存放的新闻正文字段不可用!新闻正文字段作为主表的情况用以下语句:update&n...

TAG:帝国CMS缩略图