wordpress程序知更鸟主题模板登录页面美化WordPress程序后台登录页面美化

是不是厌倦了知更鸟哪单调的登陆界面,今天麻花它就来分享一下知更鸟美化后台登录界面的简易教程,其它WordPress主题模板也可以参考下,基本通用。

演示

首先,打开你的主题文件夹的”functions.php”,拉倒最后面,在最后一行添加如下代码:

/** * WordPress登录界面美化**/

函数自定义_登录_样式(){

回送链接=’样式表’ id=’ WP-admin-CSS ‘ href=’ .get _ bloginfo(‘ template _ directory ‘),’/admin样式。“CSS”类型=“文本/CSS”/“;

}

add _ action(“log in _ head”、“custom _ log in _ style”);

然后在主题根目录再新建一个css文件,命名为“admin-style.css”,css内容如下:

正文{

字体系列:“微软牙黑”,Helvetica,阿里亚尔,卢西达格兰德,塔霍马,无衬线;

宽度:100%;

高度:100%;

背景:网址。infinitynewtab。网站/无限墙纸/2_14.jpg)不重复;

-moz-background-size:封面;/*背景图片拉伸以铺满全屏*/

-ms-background-size:封面;

-webkit-background-size:封面;

背景尺寸:封面;

}

/*顶部的徽标*/。登录h1 a {

背景:网址(图片/标志。png)不重复;

背景尺寸: 220像素50像素;

宽度: 220像素;

高度: 50px .

padd : 0;

margin: 0 auto 1em

border:无

-网络套件-动画: DropIn 1s线性;

动画: dropIn 1s线性;

}

/*登录框表单*/。登录表单。登录。消息{

背景: # fff

背景: rgba(255,255,255,0.3);

边界半径: 3px

border: 1px固体# fff

border: 1px固体rgba(255,255,255,0.4);

-网络套件-动画: FadeIn 1s线性;

动画: fadeIn 1s线性;

}

/*登录框输入框*/。登录标签{

color: # 000

}。登录。消息{

color: # 000

}

#user_login{

font-size : 18px

行高:32px;

}

/*返回博客与忘记密码链接*/

# backtoblog a,#nav a {

颜色: #fff!重要的;

显示:内嵌块;

-WebKit-动画: rtol 1s线性;

动画: rtol 1s线性;

}

/*掉落的动画效果*/

@-网络套件-关键帧dropIn {

0% {

-web kit-transform : translate 3d(0,-100px,0)

}

100% {

-web kit-transform : translate 3d(0,0,0)

}

}

@关键帧dropIn {

0% {

transform: translate3d(0,-100px,0)

}

100% {

transform: translate3d(0,0,0)

}

}

/*逐渐出现的动画效果*/

@-网络套件-关键帧fadeIn {

从{

opa city 3360 0;

-webkit-transform:比例尺(。8) translateY(20px)

}

至{

opa city 33601;

-webkit-transform:比例尺(1)翻译(0)

}

}

@关键帧渐隐{

从{

opa city 3360 0;

变换:比例(。8)translateY(20px)

}

至{

opa city 33601;

变压器:比例尺(1)平移(0)

}

}

/*从右往左的动画效果*/

@-网络工具包-关键帧rtol {

从{

-网络套件-transform : translate(80px,0)

}

至{

-web工具包-transform : translate(0,0)

}

}

@关键帧rtol {

从{

transform: translate(80px,0)

}

至{

transform: translate(0,0)

}

}

你可以自由修改第5行的背景图片和第14行的标识图片。修改好后保存即可,如果你是在本地修改的上传到当前主题的目录即可。有了这个就简单了多了,赶紧去试试吧各位站长!

人已赞赏
源码蜘蛛

WordPress程序模板插件免费纯代码实现自助应用朋友链功能

2020-6-7 0:02:20

源码蜘蛛

设置密码后如何取消windows10计算机系统

2020-6-7 0:02:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索