小鱼标签如何自定义标签样式与颜色

BestXTools

小鱼标签如何自定义标签样式与颜色

首先，建议安装 Stylus 或类似浏览器扩展。

然后参考下面代码为网站添加自定义 CSS。

白底绿字

utags

v0.9.0 以上

body {
  --utags-text-tag-color: green;
  --utags-text-tag-border-color: green;
}

v0.8.11 以下

    :not(#a):not(#a):not(#a) .utags_text_tag:not(.utags_captain_tag,.utags_captain_tag2) {
        color: green !important;
        border: 1px solid green !important;
        background-color: unset !important;
    }

红底白字

utags

v0.9.0 以上

body {
  --utags-text-tag-color: white;
  --utags-text-tag-border-color: red;
  --utags-text-tag-background-color: red;
}

v0.8.11 以下

    :not(#a):not(#a):not(#a) .utags_text_tag:not(.utags_captain_tag,.utags_captain_tag2) {
        color: white !important;
        border: 1px solid red !important;
        background-color: red !important;
    }

特定标签使用特定样式

utags

v0.9.0 以上

.utags_text_tag[data-utags_tag="TEST"] {
  --utags-text-tag-color: white;
  --utags-text-tag-border-color: orange;
  --utags-text-tag-background-color: orange;
}

v0.8.11 以下

    :not(#a):not(#a):not(#a) .utags_text_tag[data-utags_tag="TEST"] {
        color: white !important;
        border: 1px solid orange !important;
        background-color: orange !important;
    }

BestXTools

自定义标签字体大小与图标大小颜色（v0.9.4 版本以上）

变更记录

0.9.5

增加 --utags-text-tag-border-width
增加 --utags-text-tag-font-family
增加 --utags-emoji-tag-background-color, --utags-emoji-tag-font-size, --utags-emoji-tag-border-width

CSS 样式自定义属性与其默认值

body {
  /* 图标颜色 */
  --utags-captain-tag-color: #ff6361;
  /* 鼠标移到图标上面时的颜色 */
  --utags-captain-tag-hover-color: #256cf1;
  /* 图标大小 */
  --utags-captain-tag-size: 14px;
  /* 标签文字颜色 */
  --utags-text-tag-color: red;
  /* 标签边框颜色 */
  --utags-text-tag-border-color: red;
  /* 标签背景颜色 */
  --utags-text-tag-background-color: unset;
  /* 标签文字字体大小 */
  --utags-text-tag-font-size: 10px;
  /* 标签边框宽度 */
  --utags-text-tag-border-width: 1px;
  /* 标签字体 */
  --utags-text-tag-font-family: "helvetica neue", "...";
  /* 表情符号标签背景色 */
  --utags-emoji-tag-background-color: #f8fafe;
  /* 表情符号标签字体大小 */
  --utags-emoji-tag-font-size: 12px;
  /* 表情符号标签边框宽度 */
  --utags-emoji-tag-border-width: 0;
}

举例

设置文字字体大小为 14px

body {
  /* 标签文字字体大小 */
  --utags-text-tag-font-size: 14px;
}

设置图标颜色为黑色

body {
  /* 图标颜色 */
  --utags-captain-tag-color: #000000;
}

设置表情符号标签字体大小

body {
  /* 表情符号标签字体大小 */
  --utags-emoji-tag-font-size: 16px;
}