119 2 6

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

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

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

美化前

这个还是后来加了个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
本帖中包含附件 如需下载请先回复本帖!
最新回复 (119)
  • kkapi
    1天前
    120

    感谢分享!

    0
  • qweqweqwe321
    5月前
    119

    学会了

    0
  • aixi
    9月前
    118

    kankan

    0
  • xiucheng
    10月前
    117

    哈哈哈哈哈

    0
  • 4078499
    2022-7-4
    116

    ?正需要

    0
  • only
    2022-6-1
    115

    感谢分享

    0
  • only
    2022-6-1
    114

    感谢分享

    0
  • 双鱼织梦
    2022-5-6
    113

    白嫖拉

    0
  • xzw12345
    2022-4-19
    112

    1

    0
  • meirenr
    2021-12-17
    111

    谢谢楼主分享

    0
  • enmeng
    2021-10-17
    110

    ?

    0
  • bskr
    2021-10-12
    109

    不错,谢谢楼主分享

    0
  • 2002829
    2021-8-7
    108

    ?

    0
  • 2677961672
    2021-7-21
    107

    非常好看

    0
  • admin_
    2021-6-25
    106

    顶一下

    0
  • llx023
    2021-6-5
    105

    谢谢

    0
  • 首码空投网
    2021-4-18
    104

    感谢

    0
  • 小鹿
    2021-4-16
    103

    0
  • fybo
    2021-4-11
    102

    谢谢谢谢

    0
  • 66889999
    2021-4-10
    101

    0
  • wanglixiang
    2021-4-7
    100

    收到

    0
  • xiaoluobo
    2021-4-4
    99

    谢谢楼主分享

    0
  • ssxq
    2021-4-2
    98

    学习

    0
  • 秋秋
    2021-4-1
    97

    666

    0
  • xingkong
    2021-3-14
    96

    0
  • tl4423
    2021-2-26
    95

    66666666

    0
  • Charm
    2021-1-6
    94

    111

    0
  • 935200
    2020-11-11
    93

    6666

    0
  • anyiwl
    2020-11-10
    92

    看看

    0
  • mjj
    2020-11-6
    91

    学习一下

    0
  • xiangxi
    2020-11-6
    90

    感谢老大

    0
  • wbsliang
    2020-10-21
    89

    谢谢!!

    0
  • wbsliang
    2020-10-21
    88

    谢谢

    0
  • chifu
    2020-10-16
    87

    顶一下

    0
  • yz086
    2020-9-4
    86

    先回复并刷新

    0
  • gua
    2020-8-30
    85

    6666

    0
  • 一只猫
    2020-8-10
    84

    奈斯

    0
  • 511716154
    2020-8-5
    83

    看一下

    0
  • MoGuyule
    2020-7-30
    82

    这个不错!

    0
  • mailes
    2020-7-27
    81

    感谢 找了好久了!

    0
  • 1597016898
    2020-7-20
    80

    谢谢

    0
  • 271110
    2020-7-20
    79

    哈哈哈

    0
  • 过眼云烟
    2020-7-8
    78

    好东西

    0
  • 1164688800
    2020-7-4
    77

    ZAESKY 插件里面设置

    你好,怎么把这个放在前面不放在后面

    0
  • 1164688800
    2020-7-4
    76

    怎么办这个标签换个位置放在前面

    0
  • 1164688800
    2020-7-4
    75

    uuuuuuuuuuu

    0
  • alanye
    2020-7-1
    74

    0
  • 阿新
    2020-6-22
    73

    顶一下

    0
  • xiaohai921
    2020-6-16
    72

    感谢站长分享

    0
  • larry
    2020-6-13
    71

    试试

    0

请先登录后发表评论!

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