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:
Je dois dire que je soutiens cette idée d’étiquettes qui ne sont pas rectangulaires mais qui ressemblent à de vraies étiquettes. Cependant, l’utilisation du seul CSS ne suffit pas, du moins pas avec cette solution. Cela ne fonctionne que sur un fond noir où le triangle n’est pas visible.
(Notez que cela concerne le type de balise - puce, donc si vous utilisez un style différent à l’origine, le sélecteur CSS sera différent.)
@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; /* Vous devrez peut-être ajuster cela légèrement pour la vue mobile */
font-weight: 900;
font-size: 0.9em;
font-family: "Font Awesome 5 Free"; /* C'est la bonne famille de polices */
}
Ou, pour réduire le chargement inutile de tout le fichier https://use.fontawesome.com/releases/v5.13.0/css/all.css, vous pouvez supprimer la ligne @import et utiliser un SVG comme contenu :
J’ai oublié de mentionner que mon code est pour le type de balise - puce, donc à l’origine, si vous utilisez un style différent, le sélecteur CSS sera différent.
