# جعل العلامات تبدو مثل العلامات في العالم الحقيقي
**URL:** https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237
**Category:** UX
**Created:** [23 أكتوبر 2018، 7:40ص UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237 "2018-10-23T07:40:38Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [23 أكتوبر 2018، 7:40ص UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/1 "2018-10-23T07:40:38Z")
I was looking for having CSS for tags like this: 
But my current tags look like this:
See `txpower` and `alfa` are tags.
Here’s the CSS I am using:
```plaintext
.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?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [23 أكتوبر 2018، 12:25م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/2 "2018-10-23T12:25:13Z")
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.
---
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [23 أكتوبر 2018، 3:13م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/3 "2018-10-23T15:13:31Z")
Awesome! I made some edits like colours and width equal to category and here is my CSS for that:
```plaintext
.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 🙂
> [@rootsh3ll](#):
>
> .discourse-tag.box { border: 1px solid #595959; border-radius: 3px; background-color: transparent; padding: 1px 6px; font-weight: bold; }
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! 😄
---
### Author:  [@terraboss](https://meta.discourse.org/u/terraboss)
#### Post date: [23 أكتوبر 2018، 5:36م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/4 "2018-10-23T17:36:03Z")
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;
> }
>
> ```
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [23 أكتوبر 2018، 7:06م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/5 "2018-10-23T19:06:28Z")
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
---
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [23 أكتوبر 2018، 7:09م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/6 "2018-10-23T19:09:12Z")
> [@terraboss](#):
>
> - … 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
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;
> }
---
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [23 أكتوبر 2018، 7:11م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/7 "2018-10-23T19:11:18Z")
Commenting the code did help. but we loose the beauty of the tag.
look:
flat edges 😑
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [23 أكتوبر 2018، 7:12م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/8 "2018-10-23T19:12:58Z")
Alternatively, to restyle the bullet to a tag icon:
```css
.discourse-tag.bullet::before {
font-size: 1.0em;
top: 0em;
margin-right: 3px;
content: "\f02b";
color: #ccc;
}
```
for:
---
### Author:  [@rootsh3ll](https://meta.discourse.org/u/rootsh3ll)
#### Post date: [23 أكتوبر 2018، 7:16م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/9 "2018-10-23T19:16:46Z")
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**
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [26 يوليو 2020، 4:10ص UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/10 "2020-07-26T04:10:37Z")
يجب أن أقول إنني أؤيد فكرة أن تكون التسميات غير مستطيلة الشكل بل تبدو كتسميات. ومع ذلك، فإن استخدام CSS فقط لا يكفي، على الأقل ليس هذا الحل. هذا يعمل فقط على خلفية سوداء حيث لا يظهر المثلث.
وإلا، يمكن رؤية ما يلي:
هناك حاجة إلى طريقة أفضل للقيام بذلك. [https://codepen.io/matt-harris/pen/GqFev](https://codepen.io/matt-harris/pen/GqFev)
---
### Author:  [@HeyRR](https://meta.discourse.org/u/HeyRR)
#### Post date: [2 أغسطس 2020، 9:35م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/11 "2020-08-02T21:35:41Z")
يبدو أن هذا الحل لم يعد يعمل، وهناك إصدار محدث:
(لاحظ أن هذا خاص بنوع الوسم - نقطة، لذا إذا كنت تستخدم نمطًا مختلفًا في الأصل، فسيكون محدد CSS مختلفًا.)
```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 كمحتوى:
```css
content: url('data:image/svg+xml; utf8, ');
```
يمكنك العثور على جميع ملفات SVG هنا:
> **[GitHub - Rush/Font-Awesome-SVG-PNG: Font Awesome split to individual SVG and PNG files...](https://github.com/Rush/Font-Awesome-SVG-PNG)**
>
> Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [2 أغسطس 2020، 10:46م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/12 "2020-08-02T22:46:24Z")
بالنسبة لي، لقد عمل، لكنه لم يكن `.discourse-tag.bullet::before` بل هذا:
```css
@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"; /* هذا هو family الخط الصحيح*/
}
.extra-info-wrapper .discourse-tag.box {
background:none;
}
.discourse-tag.box {
background:none;
}
```
---
### Author:  [@HeyRR](https://meta.discourse.org/u/HeyRR)
#### Post date: [3 أغسطس 2020، 1:22ص UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/13 "2020-08-03T01:22:48Z")
لقد نسيت أن أذكر أن كودي مخصص لنوع الوسم - النقطة، لذا إذا استخدمت نمطًا مختلفًا، فسيكون محدد CSS مختلفًا.