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:
Tengo que decir que apoyo esta idea de que las etiquetas no sean rectangulares, sino que se vean como etiquetas. Sin embargo, solo usar CSS no es suficiente, al menos no esta solución. Esto solo funciona con un fondo negro donde no se ve el triángulo.
(Nota: esto es para el tipo de etiqueta con viñeta, por lo que si originalmente usas un estilo diferente, el selector CSS será distinto.)
@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; /* Es posible que necesites ajustar esto un poco para la vista móvil */
font-weight: 900;
font-size: 0.9em;
font-family: "Font Awesome 5 Free"; /* Esta es la fuente correcta */
}
O, para reducir la carga innecesaria de todo el archivo https://use.fontawesome.com/releases/v5.13.0/css/all.css, puedes eliminar esa línea @import y usar un SVG como contenido:
Para mí funcionó, pero no fue .discourse-tag.bullet::before, sino esto:
@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; /* Es posible que necesites ajustar esto un poco para la vista móvil */
font-weight: 900;
font-size: 0.9em;
font-family: "Font Awesome 5 Free"; /* Esta es la familia de fuentes correcta */
}
.extra-info-wrapper .discourse-tag.box {
background:none;
}
.discourse-tag.box {
background:none;
}
Se me olvidó mencionar que mi código es para el tipo de etiqueta: viñeta, por lo que, originalmente, si usas un estilo diferente, el selector CSS será distinto.
