119 2 6

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

ZAESKY
2020-2-16 5846
最新回复 (119)
  • lenling
    2020-2-26
    20

    还不错

    0
  • qidouhai
    2020-2-26
    19

    ZAESKY 你是指哪里的多彩标签呢,官方的插件可以支持设置颜色
    哦,好吧,哈哈,你不说我还没有看见

    0
  • ZAESKY 楼主
    2020-2-26
    18

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

    0
  • qidouhai
    2020-2-26
    17

    怎么设置成多彩标签

    0
  • vippai
    2020-2-25
    16

    0
  • 马里奥先森
    2020-2-21
    15

    感谢站长分享

    0
  • 78727704
    2020-2-21
    14

    学习了

    0
  • kenobi
    2020-2-20
    13

    大佬牛逼

    0
  • kelao
    2020-2-19
    12

    这个不错!

    0
  • ZAESKY 楼主
    2020-2-18
    11

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

    0
  • ssr
    2020-2-18
    10

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

    0
  • 无聊
    2020-2-17
    9

    0
  • 汉克
    2020-2-17
    8

    hh

    0
  • KUIUK
    2020-2-16
    7

    哈哈

    0
  • ZAESKY 楼主
    2020-2-16
    6

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

    0
  • ZAESKY 楼主
    2020-2-16
    5

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

    0
  • KUIUK
    2020-2-16
    4


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

    0
  • glxhydue
    2020-2-16
    3


    0
  • ZAESKY 楼主
    2020-2-16
    2

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

    美化前

    这个还是后来加了个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
    本帖中包含附件 如需下载请先回复本帖!
    2

请先登录后发表评论!

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