板块帖子列表顶部标签美化教程
ZAESKY 7月前 技术分享
877 2 84

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

美化前

这个还是后来加了个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行下面

最后于 7月前 被ZAESKY编辑 ,原因: 修复BUG
本帖中包含附件 如需下载请先回复并刷新本帖!
最新回复 (84)
  • glxhydue
    7月前 2
    0


  • KUIUK
    7月前 3
    0


    第一排跟第二排挤在一块了,有重合部分

  • ZAESKY
    7月前 4
    0
    glxhydue
    刚好在修改,你就截图了
  • ZAESKY
    7月前 5
    0
    KUIUK 第一排跟第二排挤在一块了,有重合部分
    我也看到了,已修复,详情见文章。
  • KUIUK
    7月前 6
    0
    哈哈
  • 汉克
    7月前 7
    0
    hh
  • 无聊
    7月前 8
    0
  • ssr
    7月前 9
    0

    站长你好 麻烦问一下改完之后每个标签之间都有一个点该怎么修改 直接下载的附件就改了一下颜色

  • ZAESKY
    7月前 10
    0
    ssr 站长你好 麻烦问一下改完之后每个标签之间都有一个点该怎么修改 直接下载的附件就改了一下颜色
    给table li{float:left;margin:5px 0px;}这行代码里面加入list-style:none,就像这样table li{float:left;margin:5px 0px;list-style:none;}
  • kelao
    7月前 11
    0
    这个不错!
  • kenobi
    7月前 12
    0
    大佬牛逼
  • 78727704
    7月前 13
    0
    学习了
  • 马里奥先森
    7月前 14
    0
    感谢站长分享
  • vippai
    6月前 15
    0
  • qidouhai
    6月前 16
    0
    怎么设置成多彩标签
  • ZAESKY
    6月前 17
    0
    qidouhai 怎么设置成多彩标签
    你是指哪里的多彩标签呢,官方的插件可以支持设置颜色
  • qidouhai
    6月前 18
    0
    ZAESKY 你是指哪里的多彩标签呢,官方的插件可以支持设置颜色
    哦,好吧,哈哈,你不说我还没有看见
  • lenling
    6月前 19
    0
    还不错
  • 9xiaoyuns
    6月前 20
    0


    四个并排不到一起改哪里。。。

  • 3
    6月前 21
    0
    ,,
  • 718853634
    6月前 22
    0
    希望对我有用
  • qqrgo
    6月前 23
    0
    同为学生,有点不同
  • ZAESKY
    6月前 24
    0
    qqrgo 同为学生,有点不同
    加油呀,努力做自己喜欢的事
  • 3
    6月前 25
    0

    怎么做才可以不让这个显示?

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

    大佬还有这个,怎么让他不显示?


  • ZAESKY
    6月前 28
    0
    3 大佬还有这个,怎么让他不显示?
    把plugin\xn_tag\hook\thread_subject_end.htm 文件里面的内容删除或注释。
  • qqrgo
    6月前 29
    0
    来领附件了
  • KUIUK
    6月前 30
    0

    我这个标签一点击就出现两个空格,这个应该怎么修改

  • wer43210
    6月前 31
    0
    正需要这个呢
  • 风轻云淡
    6月前 32
    0
    看看
  • haidishayu
    6月前 33
    0
    正需要这个呢
  • sqxxz
    6月前 34
    0
    谢谢分享
  • 启辉儿
    6月前 35
    0
  • 马里奥先森
    6月前 36
    0
    站长,官方好像把 标签插件升级到 v2.6 版了,我们直接点击更新会不会 把之前修改的 全都覆盖了,那不是白干了..
  • ZAESKY
    6月前 37
    0
    马里奥先森 站长,官方好像把 标签插件升级到 v2.6 版了,我们直接点击更新会不会 把之前修改的 全都覆盖了,那不是白干了..
    是的 ,做好备份替换下文件就行了
  • 马里奥先森
    6月前 38
    0
    ZAESKY 是的 ,做好备份替换下文件就行了
    挺久没去官方后台看,一看就发现有更新了
  • aixiu
    6月前 39
    0
    谢谢分享
  • 王宝义
    6月前 40
    0
  • 1349920358
    6月前 41
    0
    我看看
  • free
    6月前 42
    0
  • 去玩儿过
    6月前 43
    0
  • 1373937439
    5月前 44
    0
  • pipi
    5月前 45
    0
    1111111
  • lumingjin
    5月前 46
    0
    kk
  • qwerty
    5月前 47
    0
    fsdafdsf
  • qwert
    5月前 48
    0
    wqdw
  • jiesamu
    5月前 49
    0
    666
  • wen9
    5月前 50
    0
    顶一下
返回