子比主题-添加炫酷个性的头像框

网上也看了很多教程,要不就是头像框不好看,要不就是要付费下载,太麻烦了,我这里将找到的资源分享一下

如果也想魔改动态头像框的童鞋,可以自取

效果预览

图片[1]-子比主题-添加炫酷个性的头像框

自定义css

主题设置 -> 全局&功能 -> 自定义代码

将以下CSS代码填写到,自定义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)
}

头像框素材

资源包素材如下:

图片[2]-子比主题-添加炫酷个性的头像框

蓝奏云下载地址,密码:6cb9

将资源包放到你服务器上,选一款你使用的头像框,记好路径,并配置到自定义js中

自定义js

主题设置 -> 全局&功能 -> 自定义代码

将以下js代码填写到,自定义javascript代码

//头像框
$(function () {
    $('.avatar-img ').prepend('<img src="头像框图片地址" class="txgj">');
    $('.avatar-mini ').prepend('<img src="头像框图片地址" class="txgj">');
    $('.comt-avatar mb10 ').prepend('<img src="头像框图片地址" class="txgj">');
})
- - - - - 本页内容已结束,喜欢请分享 - - - - -

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
你这么聪明,说什么都对!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容