子比主题-用户头像增加头像框美化教程

文章最后更新时间:2024-07-07 16:10:34

效果图

图片[1]|子比主题-用户头像增加头像框美化教程|阿呆日记

教程如下:

1.将以下代码复制到子比主后台主题配置->自定义代码:自定义CSS代码中

/*头像框*/
.txgj {
    top: 2px;
    transform: scale(1.7);
    width: 90px;
    position: absolute;
    z-index: 1;
}

.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代码

下面是头像框素材

图片[2]|子比主题-用户头像增加头像框美化教程|阿呆日记
子比主题-用户头像增加头像框美化教程|阿呆日记
子比主题-用户头像增加头像框美化教程
此内容为免费资源,请登录后查看
星元0
仅供学习和研究使用,请在下载后24小时内删除
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容