9 2 6

板块帖子列表顶部标签美化教程

ZAESKY
2020-2-16 5415
该帖已被设置为推荐帖

又是闲着无聊的一天,就看到帖子列表顶部的标签与主题格格不入就想着美化一下。

美化前

这个还是后来加了个card的样式,还是觉得不好看。

美化后

修改教程

找到plugin\xn_tag\hook\forum_breadcrumb_after.htm

把原来的2-7行

<style>
table.nav_tag_list {margin-bottom: 0.2rem;}
table.nav_tag_list td {padding: 0.3rem;}
table.nav_tag_list td a{margin-right: 0.5rem;}
.nav_tag_list .active {font-weight: 800;}
</style>

替换成下面的代码,或者自定义样式都行。

<style>
table.nav_tag_list {margin-bottom: 0.5rem;}
table.nav_tag_list td a{background:white;padding:0.3rem .83rem;border-radius:1rem;font-size:12px;color: #8a9aa9;}
table.nav_tag_list td a:hover{color: #0084ff;}
.nav_tag_list .active {background:#0084ff;color:#fff;font-weight:500;}
table li{float:left;margin:5px 0px;}
</style>

再找到第36行和56行a标签的前面和后面都加上li标签像这样:

就行了。

修复

如遇到标签样式出现错误重叠,请下载附件文件替换plugin\xn_tag\hook文件夹内同名文件。为了整体美观去掉了标签分类名。

如果需要标签类名请将下面代码:

<td class="text-muted text-nowrap" align="right" valign="top">
	<?php echo $tagcate['name'];?>:
</td>

添加到文件forum_breadcrumb_after.htm 第13行下面

最后于 2020-2-16 被ZAESKY编辑 ,原因: 修复BUG
本帖中包含附件 如需下载请先回复本帖!

请先登录后发表评论!

最新回复 (9)
  • ZAESKY 2020-2-16
    2

    glxhydue
    刚好在修改,你就截图了

    0
  • ZAESKY 2020-2-16
    3

    KUIUK 第一排跟第二排挤在一块了,有重合部分
    我也看到了,已修复,详情见文章。

    0
  • ZAESKY 2020-2-18
    4

    ssr 站长你好 麻烦问一下改完之后每个标签之间都有一个点该怎么修改 直接下载的附件就改了一下颜色
    给table li{float:left;margin:5px 0px;}这行代码里面加入list-style:none,就像这样table li{float:left;margin:5px 0px;list-style:none;}

    0
  • ZAESKY 2020-2-26
    5

    qidouhai 怎么设置成多彩标签
    你是指哪里的多彩标签呢,官方的插件可以支持设置颜色

    0
  • ZAESKY 2020-3-1
    6

    qqrgo 同为学生,有点不同
    加油呀,努力做自己喜欢的事

    0
  • ZAESKY 2020-3-3
    7

    3 怎么做才可以不让这个显示?
    把plugin\xn_tag\hook\thread_list_inc_subject_after.htm 里面的内容注释或删除

    0
  • ZAESKY 2020-3-6
    8

    3 大佬还有这个,怎么让他不显示?
    把plugin\xn_tag\hook\thread_subject_end.htm 文件里面的内容删除或注释。

    0
  • ZAESKY 2020-3-13
    9

    马里奥先森 站长,官方好像把 标签插件升级到 v2.6 版了,我们直接点击更新会不会 把之前修改的 全都覆盖了,那不是白干了..
    是的 ,做好备份替换下文件就行了

    0
  • ZAESKY 2020-4-21
    10

    775234257 这一块如何让他不显示
    插件里面设置

    0
返回
请先登录后发表评论!
9
6