子比主题美化教程 – 为头像添加漂亮炫酷的头像框教程

使用教程

1.将以下代码复制到主题配置->自定义代码：自定义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%;
}
/*用户中心头像圆形*/
.author-header .avatar-img {
    --this-size: 95px;
}
.author-header .avatar-img .avatar {
    border-radius: 50px;
    border: 4px solid var(--main-bg-color)
}
/*头像框*/
.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%;
}

/*用户中心头像圆形*/
.author-header .avatar-img {
    --this-size: 95px;
}

.author-header .avatar-img .avatar {
    border-radius: 50px;
    border: 4px solid var(--main-bg-color)
}
.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%;}.author-header .avatar-img {--this-size: 95px;}.author-header .avatar-img .avatar {border-radius: 50px;border: 4px solid var(--main-bg-color)}

2.下载头像框的图片素材并上传到自己的网站，记录好网址。 3.将以下代码复制到主题配置->自定义代码：自定义JavaScript代码中

//头像框
$(function () {
    $(.avatar-img ).prepend(<img src="头像框图片地址" class="txgj">);
    $(.avatar-mini ).prepend(<img src="头像框图片地址" class="txgj">);
    $(.comt-avatar mb10 ).prepend(<img src="头像框图片地址" class="txgj">);
})
//头像框
$(function () {
    $(.avatar-img ).prepend(<img src="头像框图片地址" class="txgj">);
    $(.avatar-mini ).prepend(<img src="头像框图片地址" class="txgj">);
    $(.comt-avatar mb10 ).prepend(<img src="头像框图片地址" class="txgj">);
})
//头像框$(function () {$(.avatar-img ).prepend(<img src="头像框图片地址" class="txgj">);$(.avatar-mini ).prepend(<img src="头像框图片地址" class="txgj">);$(.comt-avatar mb10 ).prepend(<img src="头像框图片地址" class="txgj">);})

4.上方代码中的图片地址改成自己的的头像框地址