让标签看起来像真实世界的标签

rootsh3ll · 2018 年10 月 23 日 07:40

I was looking for having CSS for tags like this: 18%20PM

But my current tags look like this:

See txpower and alfa are tags.

Here’s the CSS I am using:

.discourse-tag.box {
    border: 1px solid #595959;
    border-radius: 3px;
    background-color: transparent;
    padding: 1px 6px;
    font-weight: bold;
}

For the sake of differentiability, I wanted my tags to look like real tags, but CSS from the internet is breaking the discourse’s CSS in unimaginable ways. and I just can’t get it right. Can anyone help with the CSS changes I need?

dax · 2018 年10 月 23 日 12:25

I was looking to use something similar years ago, you can try to use this and customize it as you wish

.discourse-tag.box {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-color: #bfbfbf !important;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  margin: 0 10px 0 0;
}
.discourse-tag.box::before {
  position: absolute;
  content: '';
  background: #fff;
  border-radius: 100%;
  height: 6px;
  left: 10px;
  width: 6px;
  top: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
}
.discourse-tags .discourse-tag.box::after {
  position: absolute;
  content: '';
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #bfbfbf;
  border-top: 14px solid transparent;
  right: 0;
  top: 0;
}
a.discourse-tag.box {
    color: #fff !important;
}

Almost certainly if you have plugins that add elements to the title, as the voting plugin you will need to make corrections.

rootsh3ll · 2018 年10 月 23 日 15:13

Awesome! I made some edits like colours and width equal to category and here is my CSS for that:

.discourse-tag.box {
    position: relative;
    display: inline-block;
    text-decoration: none;
    background-color: #646464 !important;
    border-radius: 3px 0 0 3px;
    height: 21px;
    line-height: 21px;
    padding: 0 13px 0 22px;
    margin: 0 10px 0 0;
}
.discourse-tag.box::before {
    position: absolute;
    content: '';
    background: #000;
    border-radius: 100%;
    height: 6px;
    left: 8px;
    width: 6px;
    top: 8px;
    box-shadow: inset 0 1px rgba(0,0,0,0.25);
}
.discourse-tags .discourse-tag.box::after {
  position: absolute;
  content: '';
  background: black;
  border-bottom: 11px solid transparent;
  border-left: 10px solid #646464;
  border-top: 10px solid transparent;
  right: 0;
  top: 0;

}
a.discourse-tag.box {
    color: #d4d4d4 !important;
}

Note that I disabled my earlier CSS Completely as it was conflicting with the newer one. and made it honor the black theme

Here is what it looks like:

53%20PM

Although I did want to have the triangle on the left hand side which is more real-like and gives a sense of real tag. which is tied from the triangular end and flat on the other end. But nevermind. I’ll learn some CSS and would post update to it.

Thanks a lot for your code @dax! You are awesome!

terraboss · 2018 年10 月 23 日 17:36

Nice CSS code snippet Thanks!

I experienced a minor issue with my css code: Not sure why, but with Safari and Chrome (!) …

… on my iPhone 8+, all of the tags have a thin line on the right next to the flap.
… on my iPad mini 4, only some thin lines will appear on the right next to the flap. (e.g. tags with 2 characters)
… on my Mac everything is just fine

It seems, the “after” css container is repeating itself. How can I fix this?

I made them a litte bit thinner …

See CSS Code

.discourse-tag.box {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    background-color: #e28a54 !important;
    border-radius: 3px 0 0 3px;
    height: 20px;
    line-height: 20px;
    padding: 0 13px 0 21px;
    margin: 0 10px 0 0;
}
.discourse-tag.box::before {
    position: absolute;
    content: '';
    background: #ffffff;
    border-radius: 100%;
    height: 6px; 
    left: 7px;
    width: 6px;
    top: 7px;
    box-shadow: inset 0 1px rgba(0,0,0,0.25);
}
.discourse-tags .discourse-tag.box::after {
  position: absolute;
  content: '';
  background: white;
  border-bottom: 11px solid transparent;
  border-left: 10px solid #e28a54;
  border-top: 10px solid transparent;
  right: 0;
  top: 0;

}
a.discourse-tag.box {
    color: #fff !important;
}

dax · 2018 年10 月 23 日 19:06

Just delete the line border-radius: 3px 0 0 3px;
This fix the thin line problem on IOS (and Chrome) for short tags (thanks to @simon that help me to debug with his Mac).

I will update the code above

PS. I have no Iphone, so check if the fix works even there

rootsh3ll · 2018 年10 月 23 日 19:09

That’s exactly my issue. In some lines with 2 tags, I see a flap on my iOS device, both safari and chrome. But seems to work fine on on MacOS.

Apart from that, can you change the direction of the triangle in the Tag, like this: I tried my beginner CSS skills but couldn’t achieve that. Can you help me out with that?

I changed color of my code to Red (my theme color) and it looks awesome as yours
But using colours on tags drives focus on tags constantly rather than the titles which are more important. So I’d still keep the tags in kind of background and content in front.

Here is what it looks like:
Just in case somebody else want a red tag on black theme. here is my CSS code for that:

CSS for Red Tag on Black Background

.discourse-tag.box {
position: relative;
display: inline-block;
text-decoration: none;
font-weight: normal;
background-color: #9c0c16 !important;
border-radius: 3px 0 0 3px;
height: 20px;
line-height: 20px;
padding: 0 13px 0 21px;
margin: 0 10px 0 0;
}
.discourse-tag.box::before {
position: absolute;
content: ‘’;
background: #000;
border-radius: 100%;
height: 6px;
left: 7px;
width: 6px;
top: 7px;
box-shadow: inset 0 1px rgba(0,0,0,0.25);
}
.discourse-tags .discourse-tag.box::after {
position: absolute;
content: ‘’;
background: #000;
border-bottom: 11px solid transparent;
border-left: 10px solid #9c0c16;
border-top: 10px solid transparent;
right: 0;
top: 0;

}
a.discourse-tag.box {
color: #fff !important;
font-weight: bold;
}

rootsh3ll · 2018 年10 月 23 日 19:11

Commenting the code did help. but we loose the beauty of the tag.
look:

flat edges

ChrisBeach · 2018 年10 月 23 日 19:12

Alternatively, to restyle the bullet to a tag icon:

.discourse-tag.bullet::before {
  font-size: 1.0em;
  top: 0em;
  margin-right: 3px;
  content: "\f02b";
  color: #ccc;
}

for:

rootsh3ll · 2018 年10 月 23 日 19:16

That’s also quite cool.
It is space saver and doesn’t drive focus away from the main content!
Thanks for sharing

For people who might discover issue. Just change the tag type from box to bullet in Admin > Settings

AntiMetaman · 2020 年7 月 26 日 04:10

我得说，我支持这种标签不应是矩形而应看起来像标签的想法。然而，仅靠 CSS 是不够的，至少这个方案不行。这只有在黑色背景上才有效，此时三角形不可见。

否则，你会看到这种情况：

我们需要一个更好的实现方法。https://codepen.io/matt-harris/pen/GqFev

HeyRR · 2020 年8 月 2 日 21:35

此处的解决方案似乎已不再适用，有一个更新版本：

（请注意，这是针对标签类型为“项目符号”的情况，因此如果您原本使用的是其他样式，CSS 选择器会有所不同。）

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.discourse-tag.bullet::before {
    top: 0em;
    margin-right: 5px;
    content: "\f02b";
    color: #bbbdbb;
    background: none;
    height: 16px; /* 您可能需要针对移动视图对此进行微调 */
  
    font-weight: 900;
    font-size: 0.9em;
    font-family: "Font Awesome 5 Free"; /* 这是正确的字体族 */
}

或者，为了减少加载整个 https://use.fontawesome.com/releases/v5.13.0/css/all.css 带来的不必要开销，您可以移除该 @import 行，并使用 SVG 作为内容：

   content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="10" width="10" ><path fill="grey" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>');

您可以在这里找到所有 SVG：

AntiMetaman · 2020 年8 月 2 日 22:46

对我来说，它起作用了，但不是 .discourse-tag.bullet::before，而是这个：

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
    .discourse-tag.box::before {
        top: 0em;
        margin-right: 5px;
        content: "\f02b";
        color: #bbbdbb;
        background: none;
        height: 16px; /* 您可能需要为移动视图稍作调整 */
      
        font-weight: 900;
        font-size: 0.9em;
        font-family: "Font Awesome 5 Free"; /* 这是正确的字体族 */
    }
   .extra-info-wrapper .discourse-tag.box {
        background:none;
    }
    .discourse-tag.box {
        background:none;
    }

HeyRR · 2020 年8 月 3 日 01:22

我忘了提到，我的代码是针对标签类型为“项目符号”的。因此，如果您最初使用的是其他样式，CSS 选择器会有所不同。

话题		回复	浏览量
Tag Icons Theme component official , tag-icons	91	19105	2026 年3 月 3 日
Tags display design on front page UX	43	9347	2018 年2 月 25 日
Tag not shown correctly UX fixed , tags	2	150	2026 年4 月 2 日
Tag Style Tool Theme component tags	13	267	2026 年3 月 9 日
Make tags look like clickable links Support	4	987	2019 年5 月 27 日

让标签看起来像真实世界的标签

相关话题