WordPress-B2主题美化用户等级与会员图标

B2的主题有两类。

1. 用户等级
2. 会员等级

简单点说，一个积分会员的等级，一个是付费会员的等级。

当然还有一个认证等级，这个在头像右下角有认证标示，这里也就不做介绍了。

我们将这两个等级的图标该一下，我不喜欢折腾这些，所以也就没有改，但这个教程还是要记录发给大家。

效果图

教程

需要修改B2主题目录下的Modules>Common>User.php文件，这个文件好像不能放在子主题（没测试自己可以放一下）。

查找：

<b>'.$name.'</b><i>'.$lv.'</i>

替换成

<i><img src="/你图片存储的目录/'.$lv.'.png" style="height: 16px; object-fit: unset;" title="'.$name.'"></i>

等级图片的储存目录，就是填写你的等级图片路径，等级图片自己在网上根据需要找找。

CSS美化代码

/*用户等级会员图标*/
	.user-s-info-desc {
	font-size: 13px;
	margin-top: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	width: 100%;
	background:  var(--main-bg-color);
	padding: 10px;
	color: #bcbcbc;
	height: 45px;
	line-height: 20px;
	text-align: center;
	box-sizing: border-box;
	border-top: 1px solid var(--body-bg-color);
}
.lv-icon.user-vip i {
    width: 100%;
    height: 15px;
    display: inline-block;
    margin-right: 3px;
    border: 0px solid var(--body-bg-color);
    border-radius: 100%;
    vertical-align: 0px;
    display: unset;
}
.lv-icon.user-lv i {
    background-color: unset;
    font-size: unset;
    height: 16px;
    line-height: 16px;
    padding: 0px;
    margin-left: 0px;
}
.author-widget-content .w-a-info .w-a-name .w-a-lv {
    display: flex;
}
.w-a-info i img {
    width: unset;
    height: unset;
    display: block;
    margin-right: 8px;
}
.content-user-lv > span {
    margin-right: 8px;
}
.w-a-info .picture img {
    width: 50px;
    height: 50px;
    display: block;
    margin-right: 8px;
}
.lv-icon {
    margin-right:5px;
    margin-top: 0px;
    font-size: large;
}
.lv-icon.user-vip {
    margin-right: 0px;
}