Making tags look like real world tags

rootsh3ll · 10월 23, 2018, 7: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 · 10월 23, 2018, 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 · 10월 23, 2018, 3: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:

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 · 10월 23, 2018, 5: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 · 10월 23, 2018, 7: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 · 10월 23, 2018, 7: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 · 10월 23, 2018, 7:11오후

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

flat edges

ChrisBeach · 10월 23, 2018, 7: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 · 10월 23, 2018, 7: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 · 7월 26, 2020, 4:10오전

솔직히 말해서, 태그가 직사각형 형태가 아니라 실제 태그 모양을 띠도록 하자는 아이디어에 동의합니다. 다만, CSS만 사용하는 것은 충분하지 않다고 생각합니다. 적어도 이 솔루션은 그렇지 않죠. 이 방법은 삼각형이 보이지 않는 검은색 배경에서만 제대로 작동합니다.

그렇지 않으면 다음과 같은 모습이 됩니다:

더 나은 방법이 필요합니다. https://codepen.io/matt-harris/pen/GqFev

HeyRR · 8월 2, 2020, 9:35오후

여기 제시된 해결책은 더 이상 작동하지 않는 것 같으며, 업데이트된 버전이 있습니다:

(참고: 이는 태그 유형이 'bullet’일 때를 위한 것입니다. 다른 스타일을 사용하는 경우 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"; /* 이것이 올바른 font-family입니다 */
}

또는 전체 https://use.fontawesome.com/releases/v5.13.0/css/all.css의 불필요한 로드를 줄이기 위해 해당 @import 줄을 제거하고 SVG를 content로 사용할 수 있습니다:

   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 · 8월 2, 2020, 10: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"; /* 이것이 올바른 font-family입니다 */
    }
   .extra-info-wrapper .discourse-tag.box {
        background:none;
    }
    .discourse-tag.box {
        background:none;
    }

HeyRR · 8월 3, 2020, 1:22오전

제 코드는 태그 유형이 bullet이므로, 다른 스타일을 사용하면 CSS 선택기가 달라진다는 점을 언급하는 것을 잊었습니다.

글		댓글	조회수
Tag Icons Theme component official , tag-icons	91	20999	3월 3, 2026
Tags display design on front page UX	42	9723	2월 24, 2018
Tag Style Tool Theme component tags	18	846	7월 13, 2026
Make tags look like clickable links Product Support	2	1030	4월 15, 2017
Discourse Popular Tag Sidebar Theme component	26	7912	1월 9, 2023

Making tags look like real world tags

Related topics