Crear un banner para mostrar en la parte superior de tu sitio

[Discourse]

Esta guía explica diferentes métodos para crear y personalizar banners en tu sitio de Discourse, desde banners simples que se pueden descartar hasta opciones más avanzadas.

Nivel de usuario requerido: Moderador (banner descartable), Administrador

Los banners son una forma efectiva de comunicar información importante a los visitantes de tu sitio. Esta guía te guiará a través de varios métodos para crear y personalizar banners en tu sitio de Discourse.

Banner de bienvenida

Un banner de bienvenida saluda a los miembros nuevos y recurrentes con un mensaje amigable y una barra de búsqueda prominente, lo que facilita a los visitantes encontrar rápidamente el contenido que están buscando.

Para habilitar y personalizar el banner de bienvenida, ve al área de administración y selecciona el enlace Apariencia > Banner de bienvenida en la barra lateral.

En esta área, encontrarás los siguientes ajustes:

• Habilitado en temas…: Esto te permite designar qué temas activos deben mostrar el banner de bienvenida.
• Imagen de fondo: Sube una imagen para que sirva como fondo de tu banner de bienvenida.
• Color del texto: Si el color de texto predeterminado controlado por tu paleta de colores entra en conflicto con tu imagen de fondo, puedes seleccionar un nuevo color aquí. Ten en cuenta que este ajuste solo se aplica cuando has subido una imagen de fondo.
• Visibilidad de la página: Esto determina en qué páginas se muestra el banner de bienvenida. Por defecto, se muestra en Páginas del menú superior (es decir, las páginas seleccionadas en la configuración del sitio Menú superior), pero puedes cambiarlo a:
  • Solo página de inicio: El banner de bienvenida solo se muestra en la página de inicio del sitio (es decir, la primera página listada en la configuración del sitio Menú superior).
  • Páginas de descubrimiento: El banner de bienvenida se muestra en todas las páginas del Menú superior, incluso si no se muestran en el menú superior real de tu sitio (es decir, no están seleccionadas en la configuración).
  • Todas las páginas: El banner de bienvenida se muestra en todas las páginas de tu sitio. Esto generalmente no se recomienda ya que puede causar desorden visual en las páginas de temas que distrae a los miembros de leer y participar.
• Ubicación: Esto determina dónde se muestra el banner de bienvenida en la página. Por defecto, se muestra Sobre el contenido del tema, pero también puedes seleccionar Debajo del encabezado del sitio. La diferencia es un poco sutil y se muestra en las capturas de pantalla a continuación:

También puedes personalizar el texto del banner de bienvenida para cambiar el saludo y agregar más texto explicativo al banner de bienvenida.

• Encabezado para miembros nuevos: El saludo principal mostrado a los miembros nuevos la primera vez que inician sesión en tu sitio.
• Encabezado para miembros iniciados: El saludo principal mostrado a los miembros recurrentes.
• Encabezado para visitantes anónimos: El saludo principal mostrado a los miembros anónimos (es decir, no iniciados).
• Subencabezado para miembros iniciados: Una línea de texto secundaria opcional debajo del encabezado mostrada a los miembros recurrentes.
• Subencabezado para visitantes anónimos: Una línea de texto secundaria opcional debajo del encabezado mostrada a los miembros anónimos (es decir, no iniciados).
• Texto de marcador de posición de búsqueda: El texto de marcador de posición mostrado en el campo de búsqueda del banner de bienvenida.

Banner descartable

Un banner descartable es un aviso temporal que los usuarios pueden cerrar. Así es como se crea uno:

1. Crea o navega a un tema en cualquier categoría pública. La publicación original (OP) en la parte superior del tema será la fuente de tu banner.
2. Abre las opciones de administración haciendo clic en el icono de la llave inglesa a la derecha o en la parte inferior del tema.
3. Selecciona “Fijar tema…”
4. En la nueva ventana, elige Hacer tema banner

El banner ahora aparecerá en la parte superior de tu sitio. Los usuarios verán un banner descartable. El personal también verá un enlace para editar el tema fuente.

Consejos para banners descartables efectivos:

• Mantén el texto claro y conciso
• La altura máxima es 20vh (editable mediante CSS)
• Para textos más largos, los usuarios pueden hacer desplazamiento dentro del banner
• Considera agregar un enlace a un tema público relevante para obtener más información
• Si deseas ocultar el tema utilizado como banner, puedes deslistarlo usando el menú de administración del tema

Banner permanente

Para crear un banner que siempre sea visible y no pueda ser descartado por los usuarios:

1. En las configuraciones de tu sitio, busca global_notice.
2. Ingresa tu texto de banner o HTML en este campo.

Consejos para banners permanentes:

• Este tipo de banner se utiliza típicamente para comunicaciones urgentes del sitio, pero puede usarse para cualquier mensaje permanente
• Este banner es visible para todos, incluidos los usuarios anónimos en sitios con login_required
• El banner puede eliminarse restableciendo la configuración del sitio global notice

Banners avanzados

Puedes crear banners más avanzados utilizando un componente de tema. Ten en cuenta que estos componentes de tema pueden entrar en conflicto con la función de banner de bienvenida principal.

Banner de enlace de bienvenida

Este componente te permite agregar texto personalizado y de 1 a 4 enlaces a tu banner. Ofrece varias opciones de personalización, incluyendo:

• Elegir dónde mostrar el banner (página de inicio, listas de temas o todas las páginas)
• Agregar enlaces con iconos de Font Awesome
• Limitar la visibilidad según los niveles de confianza del usuario
• Personalizar imágenes de fondo o colores
• Ajustar colores de texto e iconos

Banner versátil

Uno de los componentes más populares y bien mantenidos, el Banner versátil ofrece opciones de personalización extensas a través de la interfaz, incluyendo:

• Visualización del banner limitada a
  • usuarios iniciados o anónimos
  • dispositivo móvil o de escritorio
  • página de inicio, lista de temas o todas las páginas
• Opciones descartables, expandibles o persistentes
• Configuración de ancho completo del navegador
• Gestión de colores
• Personalización de encabezados y columnas usando HTML

Personalizar banners con CSS

Puedes personalizar todos los tipos de banners usando CSS. Para obtener más información sobre el uso de CSS para personalizar tu sitio de Discourse, consulta la Guía para principiantes sobre el uso de temas de Discourse.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

Enlace Apariencia > Temas y componentes en la barra lateral.

No pude encontrar esta opción… ¿Es una nueva función en la versión Beta?

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

No pude encontrar esta opción… ¿Es una nueva función en la versión Beta?

Actualización: después de actualizar de la 3.4.6 a la 3.5.0, se hizo visible:

[RBoy]

@Discourse

js.welcome_banner.search — El texto de marcador de posición que se muestra en el campo de búsqueda del banner de bienvenida.

Hay un error en la compilación 3.6.0.beta1-dev (e44347414a)

Cambiar este texto del sitio no tiene ningún efecto en el texto de la barra de búsqueda, que siempre muestra Search. Probado en Windows 10 x64 con Chrome.

[awesomerobot (Kris)]

Trabajando en una solución aquí: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

[RBoy]

¡Increíble, gracias, eso lo solucionó!

[tknospdr (David Muszynski)]

Tengo un problema con la imagen de fondo del banner de bienvenida.
Estoy usando Cloudflare R2 S3 buckets para el almacenamiento de objetos en el sitio en cuestión.
Cuando subo una imagen de fondo en la sección de administración, se muestra correctamente, si hago clic para mostrarla a tamaño completo funciona. Y si hago clic derecho y muestro la imagen en una nueva pestaña funciona y usando la URL del bucket público:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Lo que inyecta en el CSS es esta URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Tengo otro sitio que usa almacenamiento local y la imagen de fondo del banner funciona correctamente.

¿Es un error en el código o estoy haciendo algo mal?

Después de investigar un poco más, parece que este CSS controla la imagen de fondo:

Si reemplazo manualmente la URL en el inspector, funciona.
Intenté anularlo con:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

Pero eso no está funcionando. Sigue pareciendo un error.

[yuriy (Yuriy Kurant)]

@tknospdr, ¿no entiendo del todo qué problema estás experimentando?

He revisado tu sitio https://eu.technospider.com y veo que la imagen de fondo se muestra como se esperaba:

[tknospdr (David Muszynski)]

Creo que finalmente logré que funcionara la anulación de CSS. El problema es que no debería necesitar una anulación.

Parece que el código del banner está utilizando el activo incorrecto si estás alojando con Cloudflare S3.

[yuriy (Yuriy Kurant)]

¿cuál es exactamente tu anulación?

Por nuestra parte, podríamos asegurarnos de aplicar solo una ruta de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg en CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Creo que esta regla te funcionaría sin necesidad de ninguna anulación.

[tknospdr (David Muszynski)]

@yuriy

¿Cuál es exactamente tu override?

Todo mi override es:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

Por nuestro lado, podríamos asegurarnos de aplicar solo una ruta de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg en CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Creo que esta regla te funcionaría sin necesidad de overrides.

En la interfaz de usuario, lo único que puedo hacer es subir una imagen, así que creo que se necesita un cambio de código para poder eliminar mi declaración de override de CSS.
Estaría encantado de probar cualquier corrección que implementes.

[Frenky]

Hola a todos,

con la última actualización de Discourse, el componente de tema Advanced Search Banner ya no es compatible y aparentemente tampoco se mantiene. En su lugar, ahora existe la extensión oficial Welcome Banner.

El problema es que con el nuevo componente actualmente solo se puede seleccionar una única imagen de fondo. Con el componente antiguo Advanced Search Banner, era posible definir diferentes imágenes de fondo para el modo claro y el modo oscuro, lo cual era ideal para diferentes diseños y temas, por supuesto.

Mi pregunta a la comunidad:

• ¿Existe alguna manera de replicar esta funcionalidad en el Welcome Banner?

• ¿Quizás alguien ya ha implementado una extensión o una solución alternativa para utilizar diferentes imágenes de fondo para el modo claro y el modo oscuro?

• ¿Está planeado que los desarrolladores implementen esto en el futuro?

¡Agradecería cualquier indicio, consejo o idea!

¡Gracias de antemano!