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

图片[1]-子比主题美化教程 – 为头像添加漂亮炫酷的头像框教程-源码库

使用教程

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)
}

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">');
})

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

 

子比主题美化教程 – 为头像添加漂亮炫酷的头像框教程-源码库
子比主题美化教程 – 为头像添加漂亮炫酷的头像框教程
此内容为免费资源,请登录后查看
0
限时特惠
138
会员免费
极速下载
安全绿色
提示:请勿商业运营,违法使用和传播!仅供研究学习使用!
免费资源
© 版权声明
1:本网站名称:源码库
2:本站永久网址:www.ymkuz.com
3:本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
4:分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
5:本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
6:本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7:如有链接无法下载、失效或广告,请联系管理员处理!
8:文章投稿-投诉建议E-mail:yunduanw@qq.com 站长QQ:99767152
THE END
点赞1222 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容