Discourse Button Styles

Yes, I’m getting that after reinstalling it however I’m not getting the option to add it as a theme component to my active / user-selectable theme.

Wait a minute, there was a typo and the about file give an error. @awesomerobot there is a fix ready on Github

2 Me gusta

Merged now, should be all set. Thanks again @dax!

3 Me gusta

Try to update the component now @dlukefinch , just click on the Check for Updates button

4 Me gusta

Boom. Sorted! Thanks guys :partying_face:

2 Me gusta

Hello guys,

A quick question. I have installed the modification and it appears to be set up correctly. However, I see that all the configuration fields are empty by default. I’m not really familiar with CSS, so anyone can provide me some default values for the configuration fields? I am using the default light theme of the discourse, but I’d only need the rounded pill buttons with the default theme colors. What fields do I need to change in order to make them with rounded corners?

Thank you so much

Only the first, global button border radius.

No need, the component is already set to use the default theme color. Leave all the other fields blank.

5 Me gusta

Exactly what I needed. Thank you so much

A couple questions:

  1. Applying any sort of rounded corner leads to a funky curved underline … is that because I’m using the Material Design theme? Is there a way to still get the rounded button rather than the funky underline? (I presume I’d have to change some CSS?)

  1. Is there a way to use this component to round off the subcategory boxes? (or is that also something I’d have to change through CSS?)

It seems as though something changed in core and buttons now require !important, I don’t have time to figure out how to submit a PR, but wanted to throw it out there.

3 Me gusta

I like this component but I have a minor issue/bug. Borders of the categories button does not look curved like as in other buttons.

IMG_20190825_195351

Seen a similar problem:
IMG_20190827_020942

4 Me gusta

First of all, I love this and it made my forum look 10 times better. But I have one problem tho and I can’t seem to find out how to fix it either

So I changed

primary button bg  to #ff6a00

primary button bg hover to #ffa954

And that works great but when I click the button then it gets blue for some reason how can I fix this?

1 me gusta

Parece que faltan algunos casos, para border-radius. Envié una PR para esto y decidí publicarla aquí también, por si acaso.

No tengo mucha práctica con CSS, así que siéntete libre de decirme si hay mejores maneras de apuntar a esos botones, y puedo hacer cambios en mi PR.

Antes:


Después:

8 Me gusta

Hice otro PR para un caso límite con el botón de “me gusta” (siéntete libre de hacer ediciones al PR)

En las publicaciones de otras personas, el botón de “me gusta” consta de dos botones. El radio del borde se agregaría para ambos botones, mientras que solo lo queremos en los lados exteriores de los dos botones.

Antes:

Después:

4 Me gusta

@awesomerobot solo quería saber si podrías echar un vistazo a la PR anterior y decirme si hay algo que necesite cambiar antes de que pueda fusionarse^^ Es para solucionar un caso especial de radio de borde con los botones de me gusta y marcar.

Tengo discourse-button-styles instalado en diferentes foros, y sería bueno tener la solución incluida automáticamente.

2 Me gusta

¡Me parece bien, gracias! Acabo de fusionarlo.

2 Me gusta

Sé que este TC es un poco antiguo y estoy reavivando un tema de hace más de 3 años, pero ahora estoy teniendo un problema posiblemente relacionado con la rareza de .double-button en torno a los “Me gusta” de las publicaciones de otras personas. Estamos usando este TC con un radio de borde de 20px.

Esta es una publicación que me gustó hace algún tiempo (el “Me gusta” no se puede deshacer ahora)

image

Esta es una publicación que me gustó hoy (el “Me gusta” se puede deshacer)

image

Ya he pasado mucho tiempo depurando una serie de otros pequeños problemas en el CSS relacionados con (creo) este TC, así que admito la derrota por ahora. Si alguien puede ayudar, preferiría que a estos “Me gusta” no les rodeara ningún botón. No los tienen en una instancia normal de Discourse.

Sí, este componente del tema es bastante antiguo y necesita algunas actualizaciones… Intentaré ocuparme de esto pronto.

Mientras tanto, puedes eliminar el fondo de ese botón con este CSS

.has-like[disabled] {
  background: transparent !important;
}
2 Me gusta

Gracias @awesomerobot, muy útil.

Hola: No puedo encontrar dos cosas:

  1. ¿Cómo cambio el color solo del botón de nuevo tema?
  2. ¿Cómo cambio el texto del botón de nuevo tema a blanco?

¿Hay alguna manera de hacer esto? Gracias.