Add custom tags or notes to links such as users, posts and videos. For example, tags can be added to users or posts on a forum, making it easy to identify them or block their posts and replies. It works on X (Twitter), Reddit, Facebook, Threads, Instagram, Youtube, TikTok, GitHub, Greasy Fork, Hacker News, pixiv and numerous other websites.
< Feedback on 🏷️ UTags - Add usertags to links
最新内容请访问下面链接
最新内容请访问下面链接
discuss-cn.bestxtools.com 网站注册激活码：XBRXDL03
/* 全局样式 */
a {
--utags-text-tag-color: white;
--utags-text-tag-border-color: red;
--utags-text-tag-background-color: red;
}
/* 特定标签的样式 */
.utags_text_tag[data-utags_tag="TEST"] {
--utags-text-tag-color: white;
--utags-text-tag-border-color: orange;
--utags-text-tag-background-color: orange;
}
/* 2025 开头的标签 */
.utags_text_tag[data-utags_tag^="2025"] {
--utags-text-tag-color: white;
--utags-text-tag-border-color: red;
--utags-text-tag-background-color: rgb(12, 22, 33);
color: rgb(12, 22, 33);
}
/* 同时包含 '年' '月' '日' 的标签 */
.utags_text_tag[data-utags_tag*="年"][data-utags_tag*="月"][data-utags_tag*="日"] {
--utags-text-tag-color: white;
--utags-text-tag-border-color: green;
--utags-text-tag-background-color: green;
}
/* 同时包含 '点' '分' '秒' 的标签 */
.utags_text_tag[data-utags_tag*="点"][data-utags_tag*="分"][data-utags_tag*="秒"] {
--utags-text-tag-color: white;
--utags-text-tag-border-color: pink;
--utags-text-tag-background-color: pink;
}
/* 可自定义的样式参数 */
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;
}
支持的特殊标签有
也可以自己定义。 写法：
[data-utags_list_node*=",sb,"] {
opacity: 10%;
}
[data-utags_list_node*=",block,"] {
opacity: 5%;
display: none;
}
0.12.0 版本开始，可以在设置里面直接添加自定义样式。但还是建议使用 stylus 或者 stylis 这种专业的扩展。
自定义样式的例子请访问 👉 https://github.com/utags/utags/tree/main/custom-style-examples
这个帖子以后就不更新了。
Can you, at each items of you CSS comments, add too the translation in English ?
I test your usercript and in chinese it's a little bit difficult for me ;-)
And that's the case for the whole userscript.
Make it at least in English too:
You script seems full of possibility and have a bilingual interface should help a lot.
Hello! I'd like to ask if you've checked the CSS content in this link (https://github.com/utags/utags/tree/main/custom-style-examples).
I've added some English comments to it. Although there aren't comments for some parts, the variable names themselves can roughly convey their meanings.
If you have any questions about the meaning of a particular variable, please feel free to leave a message. If you're unsure how to achieve the desired style, please let me know your specific requirements and I'll do my best to assist you.
I'm really delighted that you're interested in this script. When I replied to you earlier, I accidentally forgot to mention you. Here I'm making it up.
I've added some English comments to it.
Fine!
And quick reply :-)
I need study them....
As i said, your script seems very powerful and offer interesting options.
I actually test it for Flickr (yet the Photo page) by adding:
// @match https://www.flickr.com/photos/*
And adapt it to my userstyle:
Flickr WideScreen - BigONE
It delete some place where i don't need tagging system and style the others to work with it.
I also make some adaptation for the Modal Add tags /settings.
A question:
How to add a particular style, par example for the "Add Tags" Modal, for all pages of any site?
I actually test it for Flickr (yet the Photo page) by adding:
// @match https://www.flickr.com/photos/*
As this user script hasn't been optimized for the flickr.com website yet, simply adding the match rule will lead to an incorrect display position of the utags button.
It requires formulating rules for each website, including where to display certain elements and the specific display positions. You can refer to the code here for setting the website rules.
It might be somewhat troublesome if you want to adapt it yourself, as it's a rather cumbersome task.
When I have some free time, I can help you adapt this website. In the future, I will adapt more websites that are in demand by users and are quite well-known. As long as users make requests, I will do my best to adapt those websites for them.
How to add a particular style, par example for the "Add Tags" Modal, for all pages of any site?
The CSS code for the "Add Tags" Modal is located here. If necessary, you can override its styles.
The CSS code for the "Add Tags" Modal is located here. If necessary, you can override its styles.
For example add this style to Stylish extension:
:not(#a):not(#a):not(#a) .utags_prompt {
background-color: yellow;
}
:not(#a):not(#a):not(#a) .utags_prompt ul li {
background-color: green;
color: pink;
}
Haa, i see now where to add my style in your userscript!
That was here, under my eyes, in the setting Modal.
Enable these option, show the form where add our styles:
A - Enable custom style for all websites
B - Enable custom style for the current website
Clever and Simple!
Here an example of compact emoji panel in the Add Tags modal.
I added it in:
A - Enable custom style for all websites
Fine ;-)
And its CSS:
/* GM UTags - MODAL ADD TAGS - COMPACT EMOJI */
.utags_select_list.utags_emoji_list {
flex-grow: 1;
list-style-type: none;
max-width: 150px;
margin:0 0 0 0!important;
padding: 10px 0 10px 0;
}
.utags_modal .utags_select_list.utags_emoji_list li {
display: block !important;
float: left !important;
max-width: 250px;
height: 16px;
align-items: center;
margin: 0;
padding: 0 2px 0 8px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
}
It requires formulating rules for each website, including where to display certain elements and the specific display positions. You can refer to the code here for setting the website rules.
:
I saw, a lot of work for you!
I am not a coder (just can modify some code or Ask to IA)
For Flick, i use CSS / Stylus: Easily install themes and skins for many popular sites and i work on it since a long time:
I have a base to adapt your script for it, slowly, yes, but i can and have the time:
My beloved retirement (if "they" do not break our social protection...) paid me for that ;-)
Here an example of compact emoji panel in the Add Tags modal.
When displaying Emoji tags in this way, using the arrow keys on the keyboard will seem a bit strange.
However, if you use the mouse, the effect is quite good.
I don't use to much keyboard shortcuts:
i am mouse centric ....
关于如何自定义标签的样式，颜色。
建议安装 stylus 插件，然后为网站添加自定义 CSS，参考下面代码。