B2主题VIP用户等级美化

适用于WordPress网站B2主题美化，针对设置的VIP用户，分别在文章、侧栏、圈子以及评论区等页面进行美化

效果图

教程

以下代码放置于css文件中即可，有文字美化与图标美化两种，其中文字美化如下（这里只写了两种VIP等级的美化，其他大家自行设计）

文字美化

/*VIP用户等级文字美化- https://www.xingkongweb.com/60269.html*/
.lv-icon.b2-vip0 b {
color: #607a87 !important;
background: linear-gradient(90.34deg, #e8eff0 0.27%, #e8eff0 99.7%);
padding: 0 5px;
border-radius: 3px;
}
.lv-icon.b2-vip1 b {
color: #6C4A20 !important;
background: linear-gradient(90.34deg, #FFD2A2 0.27%, #FFE2C2 99.7%);
padding: 0 5px;
border-radius: 3px;
}

图标美化

/*VIP用户等级图标美化- https://www.xingkongweb.com/60269.html*/
/*会员标志*/
.lv-icon.user-vip {
height: 18px;
line-height: 18px;
padding: 0;
padding-left: 20px;
} 
/*用户侧边栏面板显示问题*/
.user-w-lv {
display: flex;
height: 22px;
flex-wrap: wrap;
}
.b2-vip0{
background-image: url(图标地址1-https://www.superbed.cn/item/6254e242239250f7c5f2270b);
background-repeat: no-repeat;
background-size: contain;
}
.b2-vip1{
background-image: url(图标地址2-https://www.superbed.cn/item/6254e251239250f7c5f24224);
background-repeat: no-repeat;
background-size: contain;
}

建议将突破下载出来保存在服务器本地。避免对方图片失效。

圈子评论区美化

原文教程里面没有圈子评论区VIP用户的美化，设置教程为修改文件：b2/TempParts/circle/circle-comments.php

将32行左右原代码（只有VIP的文字）：

 <span v-text="list.comment_author.vip" :class="'author-vip b2-'+list.comment_author.vip" v-if="list.comment_author.vip"></span>

修改为（加上了VIP的图标）：

<span v-text="list.comment_author.vip" :class="'lv-icon user-vip b2-'+list.comment_author.vip" v-if="list.comment_author.vip"></span>

如果要取消显示，把此处删除或者注释掉就行，我自己的就是注释掉的。