7b2主题美化之论坛圈子教程合集

1.圈子用户头像圆角显示

1.1 演示效果

将原方形的用户头像转为圆形

 

7b2主题美化之论坛圈子教程合集
 

 

1.2 实现代码

添加于子主题style.css或者圈子circle.css

/*圈子用户头像美化-https://www.xcbtmw.com/19796.html*/
.topic-avatar img {
border-radius: 100%;
}
 

2 圈子用户等级颜色/图标美化

演示效果:

 

7b2主题美化之论坛圈子教程合集
 

 

 

 

7b2主题美化之论坛圈子教程合集
 

 

 

实现教程:https://www.xcbtmw.com/tag/b2-theme-beautify

3.圈子话题评论时间排序

这个没啥好演示的,本站就是,教程:https://www.xcbtmw.com/16068.html

 

7b2主题美化之论坛圈子教程合集
 

 

4.圈子顶部推荐圈子、轮播模块

实现教程:https://www.xcbtmw.com/19123.html

 

7b2主题美化之论坛圈子教程合集
 

 

5.圈子电脑端发帖框隐藏

实现教程:https://www.xcbtmw.com/19608.html

 

7b2主题美化之论坛圈子教程合集
 

 

 

7b2主题美化之论坛圈子教程合集
 

 

5.圈子引用文章卡片双排

5.1 演示效果

转载自纸工厂,原演示地址:https://paper.tv/circle/96300.html

 

7b2主题美化之论坛圈子教程合集
 

 

5.2 实现代码

同上,子主题style.css或者circle.css

/*圈子文章卡片双排-https://www.xcbtmw.com/19796.html*/
.topic-file-box, .topic-card-box { width: auto;}
.topic-card-box li { margin-right: 12px; width: 45%; display: inline-block;}
@media screen and (max-width:768px){.topic-card-box li { width: 80%; 
 

 

6.圈子名称、圈友修改

演示效果

 

7b2主题美化之论坛圈子教程合集
 

 

修改教程:B2主题设置——常规设置——名称及链接

 

7b2主题美化之论坛圈子教程合集
 

 

7.圈子点赞、评论图标修改美化

7.1 效果演示

如图,帖子左下角的点赞、右下角的评论以及右上角的圈子话题

 

7b2主题美化之论坛圈子教程合集
 

 

 

7b2主题美化之论坛圈子教程合集
 

 

7.2 实现代码

首先,需要引入阿里巴巴图标,教程:https://www.xcbtmw.com/13080.html

美化左下角点赞:circle-topic-footer.php文件(主题文件目录),找到如下代码处(搜topic-footer-left)

<!--点赞美化-https://www.xcbtmw.com/19796.html-->
<div class="topic-footer">
<div class="topic-footer-left">
<button :class="['text',{'picked b2-color':item.meta.vote.isset_up}]" @click="postVote(ti,'up',item.topic_id)"><svg class="icon" aria-hidden="true"><use xlink:href="修改的图标代码:#icon-xcbtmw-dianzan1"></use></svg><b v-text="item.meta.vote.up"></b></button>
<button :class="['text',{'picked b2-color':item.meta.vote.isset_down}]" @click="postVote(ti,'down',item.topic_id)"><svg class="icon" aria-hidden="true"><use xlink:href="修改的图标代码:#icon-xcbtmw-dianzan1-copy"></use></svg></button>
 

替换成上面的代码即可,注意需要修改的点赞图标位置是:#icon-dianzan1,找到你喜欢的,替换即可

美化右下角评论:同文件,代码搜,相同的方法替换即可

<span v-else><?php echo __('参与讨论','b2'); ?></span>
 

美化圈子右上角:circle-topic-content.php文件夹,代码位置为

<b class="circle-hash">
<svg width="16" height="16" viewBox="0 0 36 36"><g fill-rule="evenodd"><path d="M18 0c9.941 0 18 8.059 18 18 0 2.723-.604 5.304-1.687 7.617v6.445a2.25 2.25 0 0 1-2.096 2.245l-.154.005-6.446.001A17.932 17.932 0 0 1 18 36C8.059 36 0 27.941 0 18S8.059 0 18 0z" fill-opacity=".1"></path><path d="M23.32 7.875c.517 0 .948.18 1.293.54.296.294.444.632.444 1.015a.589.589 0 0 1-.037.202l-.258 2.17c0 .18.087.27.259.27h.96c.592 0 1.097.185 1.516.557.419.372.628.828.628 1.369 0 .54-.21 1.003-.628 1.386a2.166 2.166 0 0 1-1.515.574h-1.478c-.197 0-.308.09-.333.27l-.517 3.684c-.025.158.049.237.221.237h1.22c.591 0 1.096.191 1.515.574.419.384.628.845.628 1.386 0 .54-.21 1.003-.628 1.386a2.166 2.166 0 0 1-1.515.574h-1.7c-.172 0-.27.08-.296.237l-.273 2.062c-.05.495-.283.912-.702 1.25a2.282 2.282 0 0 1-1.478.507c-.518 0-.949-.18-1.294-.54-.295-.294-.443-.632-.443-1.015 0-.067.012-.135.037-.202l.236-2.062c.025-.158-.049-.237-.221-.237h-3.732c-.198 0-.296.08-.296.237l-.31 2.062a1.96 1.96 0 0 1-.721 1.25c-.407.338-.88.507-1.423.507-.517 0-.948-.18-1.293-.54-.296-.294-.444-.632-.444-1.015v-.202l.274-2.062c.025-.158-.062-.237-.259-.237h-.739a2.166 2.166 0 0 1-1.515-.574c-.419-.383-.628-.845-.628-1.386 0-.54.21-1.002.628-1.386a2.166 2.166 0 0 1 1.515-.574h1.257c.172 0 .27-.079.295-.237l.48-3.684c.025-.18-.06-.27-.258-.27h-.924a2.166 2.166 0 0 1-1.515-.574c-.419-.383-.628-.84-.628-1.37 0-.529.21-.985.628-1.368a2.166 2.166 0 0 1 1.515-.575h1.515c.197 0 .308-.09.333-.27L13.01 9.6c.074-.474.314-.88.72-1.217.407-.338.881-.507 1.423-.507.518 0 .949.18 1.294.54.27.294.406.62.406.98v.237l-.294 2.17c-.025.18.061.27.259.27h3.769c.172 0 .27-.09.295-.27l.295-2.203c.074-.474.314-.88.72-1.217.407-.338.881-.507 1.423-.507zm-3.316 7.875h-3.49c-.157 0-.256.071-.296.213l-.014.077-.45 3.956c-.02.145.029.228.144.249l.064.005h3.524c.134 0 .22-.059.26-.176l.016-.078.484-3.956c.02-.166-.037-.26-.17-.284l-.072-.006z" fill-rule="nonzero"></path></g></svg>
</b>
 

将这堆替换为一个阿里巴巴图标(自选一个即可)

<svg class="icon" aria-hidden="true"><use xlink:href="修改的图标代码:#icon-xcbtmw-dianzan1"></use></svg>
 

8.圈子新手引导特效

教程:https://www.xcbtmw.com/21591.html

 

7b2主题美化之论坛圈子教程合集
 

WordPress网站建站经验教程分享(老白牛逼):https://www.xcbtmw.com/jianzhan   

给TA打赏
共{{data.count}}人
人已打赏
B2美化教程技术教程

WordPress网站表格广告位代码美化

2025-1-15 16:14:29

B2美化教程技术教程

WordPress网站添加每日60s读懂世界新闻-自动发布-7b2主题

2025-1-15 16:28:50

40 条回复 A文章作者 M管理员
  1. 别说违心话.

    牛逼啊,这教程太实用了!

  2. 资深拖延症患者

    这个教程太实用了!感谢分享!

  3. hildishness

    实用的教程!太棒了!666

  4. 与之二三事

    太棒了,学到了很多实用技巧

  5. 亚比~囧囧囧

    不错的教程,实用性强!加油啊!

  6. 〖夜神鈅〗

    不错不错,实用教程666

  7. 南卉

    这内容真不错,学习到很多技巧了666

  8. 暮倦

    技术干货满满,赞赞赞

  9. Midnight

    太实用了,感谢分享!666

  10. 微信用户

    太实用了,感谢分享666

  11. 心岛初晴°

    教程真丰富,受益匪浅啊666

  12. 浅黛っ

    好东西,必须试试666

  13. Warmheart暖心

    不错的教程666

  14. 萌面人

    非常实用的教程666

  15. 香薰恋乆

    教程真的很实用,感谢分享!期待更多内容

  16. 困成憨包😴

    很实用的教程666

  17. single

    很实用的教程!点赞点赞

  18. 微信用户30

    教程真不错,学习了!666

  19. 欠迩的太多

    很实用的教程 赞赞赞

  20. gfdsd

    很实用,赞赞赞

  21. q.w.q

    非常实用的教程,值得学习一下 666

  22. 沉香如屑

    这个教程太赞了!完全可以照着做了 继续分享这种干货

  23. 休止

    很实用的教程呢 赞

  24. 桃扇骨

    不错呀,简单易懂563

  25. 半生.

    很实用的教程啊 期待后续更新 赞一个

  26. 晚风撩人

    很实用的教程666

  27. 括叶作舟

    太棒了,受益良多

  28. 繁华若梦

    很实用的教程!赞赞赞

  29. 浊酒

    好教程,值得一看 试试效果吧

  30. 闭眼⼊你梦

    这个教程太实用了,感谢分享 试试

  31. 尽鹤

    很实用的教程666

  32. 南瘾浪

    牛逼,学习了很多技巧

  33. Tears°

    真不错,学习到了很多技巧

  34. 全是爱%

    很实用的教程666

  35. 美丽玉兔

    棒极了,教程很实用!

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索