今天给大家分享一个WordPress网站B2主题美化修改教程:给用户加上动漫卡通头像框/头像挂饰,并分享一些头像素材,详细的修改教程如下
效果图
教程
添加js代码
将下列代码放入子主题child.js
文件中(图片地址自己更换)。
$(function(){
$('.avatar-parent').prepend('<img src="https://p0.meituan.net/dpgroup/240f1dfa30b57e744cdbbfbb3b679c25476735.png" class="txgj">');
})
添加css代码
将下列代码放入子主题style.css样式中
.txgj {
top: -2px;
transform: scale(1.7);
width: 90px;
position: absolute;
}
.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%;
}
强制刷新即可看到效果
素材在底部可以下载到。