前言
wordpress子比主题(zibll)目前还没有开发用户头像框的功能,所以有位技术大佬就写了这么一个功能,实现起来也比较简单。
教程如下
- 将以下代码复制到子比主后台主题配置->自定义代码:自定义CSS代码中
/*头像框*/
.txgj {
top: 2px;
transform: scale(1.7);
width: 90px;
position: absolute;
z-index: 1;
}
.top-user-info-box-name .txgj {
left: -5px;
transform: scale(1);
top: 6px;
}
.post-meta-left .txgj {
display: none;
}
.post-meta-left .avatar-parent .txgj {
display: block;
transform: scale(1.6);
display: block;
left: 0px !important;
}
.top-user-box-drop .avatar {
border-radius: 50%;
}
.comment .gravatar img {
border-radius: 50%;
}
/*用户中心头像圆形*/
.author-header .avatar-img {
--this-size: 95px;
}
.author-header .avatar-img .avatar {
border-radius: 50px;
border: 4px solid var(--main-bg-color)
}
- 下载头像框的图片素材并上传到自己的网站。
- 最后一步,将以下代码复制到子比主后台主题配置->自定义代码:自定义JavaScript代码中
![图片[1]-子比主题(zibll)为用户头像添加漂亮炫酷的头像框教程-AA源码网 | 源码收藏](https://images.aaym.net/2023/09/d2b5ca33bd183204-950x353.png!/format/webp/lossless/true)
教程到这里就结束了,阿夜收集了一些动态头像框,有需要的可消耗“积分”下载。
温馨提示:积分可通过签到、评论等渠道免费获取~
![图片[2]-子比主题(zibll)为用户头像添加漂亮炫酷的头像框教程-AA源码网 | 源码收藏](https://images.aaym.net/2023/09/d2b5ca33bd182917.png!/format/webp/lossless/true)
优化
如果按上述步骤操作后,首页头像显示不全,可将下方CSS代码添加到主题的自定义css代码中。
本文结束END

© 版权声明
THE END
暂无评论内容