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?
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.
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
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:
I have to say that I support this idea of tags not being rectangular but looking like tags. However, just using CSS is not enough, at least not this solution. This only works on a black background where the triangle is not seen.
This solution here seems no longer works, there is an updated version:
（Note that this is for tag type - bullet, so originally if you use a different style, the css selector will be different.)
@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; /* You might need to fix this a little for mobile view */
font-weight: 900;
font-size: 0.9em;
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
}
Or to reduce unnecessary load of whole https://use.fontawesome.com/releases/v5.13.0/css/all.css, you can remove that @import line and use SVG as content:
For me, it worked, but it wasn’t .discourse-tag.bullet::before but this:
@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; /* You might need to fix this a little for mobile view */
font-weight: 900;
font-size: 0.9em;
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
}
.extra-info-wrapper .discourse-tag.box {
background:none;
}
.discourse-tag.box {
background:none;
}
Thanks!
