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

说明,本教程为WordPress网站7B2主题美化论坛圈子系列美化教程合集,并会不定时更新,总的B2主题美化教程请查看此处:https://www.qitabbs.com/tag/b2-theme-beautify

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

1.1 演示效果

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

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

1.2 实现代码

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

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

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

演示效果:

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

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

实现教程:点我前往

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

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

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

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

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

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

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

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

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

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

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

5.1 演示效果

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

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

5.2 实现代码

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

/*圈子文章卡片双排-https://www.qitabbs.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.qitabbs.com/13080.html

8.圈子新手引导特效

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

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

WordPress网站建站经验教程分享:https://www.qitabbs.com/jianzhan

插件·使用经验·技巧网站建设

WordPress6.0-cache master专家模式搜索不跳转解决方案

2022-5-29 21:46:01

经验·技巧网站建设

WordPress网站表格广告位代码美化(B2主题为例)

2022-5-31 20:37:29

13 条回复 A文章作者 M管理员
  1. IOUOPU

    谢谢分享

  2. ling

    谢谢分享

  3. fnzxl

    谢谢分享

  4. 4512643

    32453
    6666666666

  5. rmgzs1

  6. 艾奇云

    46鄃

  7. 骚凌云

    46鄃

  8. 技术宅

  9. CANYU

  10. 站长老白

  11. 站长老白

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