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

[Discourse]

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

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

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, facilitando a los visitantes encontrar rápidamente el contenido que buscan.

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 las siguientes configuraciones:

• Activado en temas…: Esto te permite designar cuáles de tus temas activos deben mostrar el banner de bienvenida.
• Imagen de fondo: Sube una imagen para que sirva como fondo para 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 color nuevo aquí. Ten en cuenta que esta configuración solo se aplica cuando has subido una imagen de fondo.
• Visibilidad de la página: Esto determina qué páginas muestran el banner de bienvenida. Por defecto, se muestra en Páginas del menú superior (lo que significa 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 seleccionadas en la configuración).
  • Todas las páginas: El banner de bienvenida se muestra en todas las páginas de tu sitio. Generalmente, esto 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 aparece el banner de bienvenida en la página. Por defecto, se muestra Encima del 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 texto más explicativo al banner de bienvenida.

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

Banner descartable

Un banner descartable es un aviso temporal que los usuarios pueden cerrar. A continuación se muestra cómo crear uno:

1. Crea o navega a un tema en cualquier categoría (público o privado). 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 ícono de la llave inglesa a la derecha o en la parte inferior del tema.
3. Selecciona “Anclar Tema…”
4. En la nueva ventana, elige Convertir en Tema de Banner
   La pancarta aparecerá ahora 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 de origen.

Consejos para banners descartables efectivos:

• Mantén el texto claro y conciso
• La altura máxima es 20vh (editable a través de CSS)
• Para texto más largo, los usuarios pueden desplazarse dentro del banner
• Considera agregar un enlace a un tema público relevante para obtener más información

Banner permanente

Para crear un banner que siempre esté visible y que los usuarios no puedan descartar:

1. En la configuración de tu sitio, busca global_notice.
2. Ingresa tu texto o HTML del banner en este campo.

Consejos para banners permanentes:

• Este tipo de banner se usa típicamente para comunicaciones urgentes del sitio, pero se puede usar para cualquier mensaje permanente
• Este banner es visible para todos, incluidos los usuarios anónimos en sitios con login_required
• El banner se puede eliminar 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 íconos de Font Awesome
• Limitar la visibilidad según los niveles de confianza del usuario
• Personalizar imágenes o colores de fondo
• Ajustar los colores del texto y los íconos

Banner Versátil

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

• Visualización del banner limitada a
  • usuarios con sesión iniciada 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 color
• Personalización de encabezado y columnas usando HTML

Personalización de banners con CSS

Puedes personalizar todos los tipos de banners usando CSS. Para obtener más información sobre cómo usar 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!