Botón de encabezado de nuevo tema

:discourse2: Resumen New Topic Header Button agrega un conveniente botón ‘Nuevo Tema’ en la cabecera de todas las páginas
:eyeglasses: Vista previa Vista previa en Discourse Theme Creator
:hammer_and_wrench: Repositorio https://github.com/discourse/discourse-new-topic-button-theme-component
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Funcionalidades

Un componente de tema sencillo para agregar el botón + Nuevo Tema en la cabecera. El botón se mostrará en cada página, incluso dentro de los temas.

Capturas de pantalla:

Escritorio:

Móvil:

Configuración:

Nombre Descripción
new topic button icon Elige un icono para el botón. Puedes usar cualquier nombre de icono gratuito de FontAwesome 6 como music o star.
new topic button text Ingresa el texto que deseas que use el botón. También puedes dejarlo vacío si solo quieres usar un icono.
new topic button title Ingresa el título que deseas que use el botón. Si se deja vacío, el título será el mismo que el texto del botón.
hide default button Ocultar el botón predeterminado “Nuevo tema” en las listas de temas.
show to anon Mostrar el botón a visitantes no registrados y redirigirlos al inicio de sesión al hacer clic.

:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Estándar, Empresarial y Enterprise.

57 Me gusta

Pretty awesome. Now we’re talking!

FYI, we pushed the button yesterday and it was our 2nd biggest day in registrations for the past 30 days. Not sure if it was coincidence or not, but I have a feeling it’s a good way to onboard new users. Will keep an eye on the metrics

(Realizing now it must have been a coincidence, because the button only appears for users who have already logged in. Nonetheless, activity does seem to be higher)

5 Me gusta

Hi,

Is it possible to change the color of the button, but not change the color of all buttons in the site?

If so, which is the css code for the button only?

thanks!

1 me gusta

Use this code, changing the color obviously.

#new-create-topic {
    background-color: red;
}
3 Me gusta

Hm, how about showing the new topic button for everyone and make it act like the default Reply-to-topic button, i.e. as the user to login/sign up if they’re not logged in?

In fact, this might be something to consider for the default new topic button too, but I guess this feature would be most effective in this theme component…

4 Me gusta

Inviting every random visitor to create a new topic… will end in tears :sob:

Nothing kills a site quicker than a page full of low-value or gibberish topics.

7 Me gusta

Well, they can’t create that topic unless they sign up. And encouraging people to sign up is obviously a good thing (and is being done by default via the sign-up button and the reply-to-topic button). So I don’t really see why the new topic button should cause any problems.

6 Me gusta

Is it possible to hide the button on mobile but show the floating button?

To hide the button on mobile add

.header-buttons #new-create-topic {
    display:none;
}

in your mobile > CSS tab

The floating button you are referring is the one used on the Material Design Theme component? If so you need to copy and paste the part of CSS relative to the floating button (New Topic Fab) from material-design-stock-theme/desktop/desktop.scss at main · discourse/material-design-stock-theme · GitHub to your mobile > CSS tab (deleting the lines that start with @include [...]).

However your requests are going off topic, it’s better if you open another topic.

4 Me gusta

Thanks, sorry for the offtopicing :slight_smile:

1 me gusta

Esto está bien, pero tiene dos inconvenientes desde mi punto de vista.
El primero es la ubicación del botón en la barra superior. Ya tenemos otras cosas añadidas a la barra superior y esto la hace un poco abarrotada.
El segundo es el hecho de que aparezca en cada página, incluso donde resulta un poco ilógico (por ejemplo, en mi página de perfil o en la lista de grupos).
El caso de uso principal, desde mi punto de vista, es facilitar ligeramente a los usuarios evitar respuestas fuera de tema al ver un hilo. El lugar donde creo que es realmente necesario y útil es al ver un tema/hilo y, idealmente, me gustaría que apareciera tanto en la parte superior (en línea con el título del tema) como en la parte inferior, junto al botón azul principal de Responder.
Una solución intermedia sería mostrarlo en la posición actual, pero solo en las páginas /t/xxx.
¿Es esto posible?

No quiero mostrarlo en dispositivos móviles, ¿cómo lo hago?

También quiero mostrarlo a los usuarios no registrados; al hacer clic en el botón se les pedirá que inicien sesión

Oh, qué pena. No sé qué significa “posición incorrecta” (en mi sitio de pruebas parece estar bien), pero asumí que el botón funcionaría, y ahora veo que no. Parece que no es tan sencillo como pensaba. :frowning_face:

1 me gusta

Crea un nuevo componente del tema y agrega esto en la pestaña Móvil > CSS:

.mobile-view #new-create-topic {
    display: none;
}
4 Me gusta

buena idea, ¿lo lograste?

¿Alguien puede ayudarme a saber qué CSS debo usar para que este botón + Nuevo Tema se vea y funcione exactamente como el colorido botón “Responder” de mi sitio? (Es decir, el estado normal, así como los estados al pasar el cursor y al hacer clic - activo?)

Aquí tienes una explicación visual de lo que me gustaría hacer…

¿cambiar su clase a btn-primary?
(no estoy seguro de si puedes tener dos elementos btn-primary en una página)
Si quieres una solución puramente CSS, inspecciona el estilo del botón azul primario (en todos sus estados) y replícalo.

Gracias por este componente @Joe.
Funciona perfectamente con una pequeña excepción :slight_smile:
En móviles, todavía tengo dos botones: el nuevo y el predeterminado + Nuevo tema.

Hice que el predeterminado desapareciera modificando la siguiente definición de estilo:


Ahora funciona bien en ordenadores de sobremesa y en móviles, pero sería ideal que tu componente se encargara de esto. Especialmente porque, por alguna razón, si algún administrador desactiva tu componente, ningún botón + Nuevo tema será visible.

4 Me gusta

@Johani He creado una solicitud de extracción con el cambio mencionado anteriormente.

¿Podrías revisarla, por favor?

2 Me gusta

¡Gracias por el componente! Creo que siempre puede haber casos de uso válidos para mantener la opción de crear un nuevo tema presente en el encabezado. Sin embargo, tengo dificultades con un detalle de la implementación y me pregunto cómo lo resuelven otros:

Actualmente, el componente refleja la categoría en la que se encuentra el usuario y abre el editor con esa categoría predefinida. Pero no tiene en cuenta si el usuario tiene permisos de escritura en esa categoría específica. Por lo tanto, predefinirá la categoría en el editor (aunque el usuario no podría seleccionar esa categoría manualmente de otra manera) y provocará un error al intentar guardar el tema.

El botón “Nuevo tema” predeterminado aborda esto deshabilitándose en categorías como esas. Pero creo que no sería tan intuitivo replicar este comportamiento, porque la idea del botón en el encabezado es tener un acceso global para crear nuevos temas. Y entonces sería extraño que a veces no funcione.

¿Cuál podría ser un buen enfoque general para esto? ¿O cómo lo manejan otros que utilizan este componente? ¿Simplemente eliminar por completo la predefinición?

3 Me gusta