8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png
板块帖子列表顶部标签美化教程
ZAESKY 4月前

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

美化前

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

本帖中包含附件
最新回复 (75)
  • glxhydue
    4月前 2
    0


  • KUIUK
    4月前 3
    0


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

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

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

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


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

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

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

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

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


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

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

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

  作者最近主题   
  给网站增加每日bing美图