Creando 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 su 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 su sitio. Esta guía le mostrará varios métodos para crear y personalizar banners en su sitio de Discourse.

Banner de bienvenida

Un banner de bienvenida recibe 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, vaya al área de administración y seleccione el enlace Apariencia > Banner de bienvenida en la barra lateral.

En esta área, encontrará las siguientes configuraciones:

• Habilitado en temas…: Esto le permite designar cuáles de sus temas activos deben mostrar el banner de bienvenida.
• Imagen de fondo: Suba una imagen para que sirva como fondo para su banner de bienvenida.
• Color del texto: Si el color de texto predeterminado controlado por su paleta de colores entra en conflicto con su imagen de fondo, puede seleccionar un color nuevo aquí. Tenga en cuenta que esta configuración solo se aplica cuando ha 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 puede cambiar 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 su 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 su 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 se muestra el banner de bienvenida en la página. Por defecto, se muestra Encima del contenido del tema, pero también puede 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 puede personalizar el texto del banner de bienvenida para cambiar el saludo y agregar más texto explicativo al banner de bienvenida.

• Encabezado para nuevos miembros: El saludo principal que se muestra a los nuevos miembros la primera vez que inician sesión en su 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 explica cómo crear uno:

1. Cree o navegue a un tema en cualquier categoría (pública o privada). La publicación original (OP) en la parte superior del tema será la fuente de su banner.
2. Abra 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. Seleccione “Anclar tema…”
4. En la nueva ventana, elija Convertir en banner de tema

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

Consejos para banners descartables efectivos:

• Mantenga el texto claro y conciso
• La altura máxima es de 250px (editable a través de CSS)
• Para texto más largo, los usuarios pueden desplazarse dentro del banner
• Considere 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 su sitio, busque global_notice.
2. Ingrese el texto o HTML de su banner en este campo.

Consejos para banners permanentes:

• Este tipo de banner se utiliza normalmente para comunicaciones urgentes del sitio, pero se puede utilizar 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

Puede crear banners más avanzados utilizando un componente de tema. Tenga 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 le permite agregar texto personalizado y de 1 a 4 enlaces a su banner. Ofrece varias opciones de personalización, que incluyen:

• 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 o colores de fondo
• Ajustar los colores del texto y los iconos

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, que incluyen:

• 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 descartable, expandible o persistente
• 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

Puede personalizar todos los tipos de banners usando CSS. Para obtener más información sobre cómo usar CSS para personalizar su sitio de Discourse, consulte 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!