Versatile Banner

I’m afraid installing this component multiple times will not work. Your best option at this point is likely to pay someone to build you a custom solution via the marketplace

I have only had time to address bug reports on this component for the past while, but in the next year or two, I plan to do a major overhaul that will hopefully facilitate even more versatility.

4 Me gusta

I’m using the component settings to only show the banner on specific pages. I came across two glitches in the css:

  • the banner adds a top margin on pages where it’s not supposed to be shown
  • the banner is displayed unstyled while the page is loading

To supress both I have to declare .banner-box {display: none;} and then add display declarations for the specific pages where it’s supposed to show.

2 Me gusta

hello @tshenry
is it possible to make the icons bigger?

1 me gusta

Siento que esto podría ser una FAQ más general, pero me pregunto cómo entregar diferentes gráficos para usuarios de escritorio y móviles.

1 me gusta

¿Dónde esperas que aparezcan estos gráficos? Definitivamente hay formas de mostrar cosas condicionalmente según el estado de escritorio/móvil, pero el enfoque a seguir dependerá de lo que estés intentando hacer.

1 me gusta

Estoy usando un banner versátil para entregar un mensaje navideño, incluyendo un gráfico, así que quiero poder hacer esto dentro del contexto del banner versátil.

1 me gusta

Hmm, en ese caso, podrías agregar algo como lo siguiente a una de las configuraciones de “contenido” del Versatile Banner:


<div class="xmas-banner-image"></div>

Y luego agregar algo de CSS a tu tema principal o a un nuevo componente. Aquí tienes un ejemplo en el que puedes reemplazar LINK_TO_MOBILE_IMAGE con el enlace de imagen real:

.mobile-view .xmas-banner-image {
  background-image: url("LINK_TO_MOBILE_IMAGE");
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.desktop-view .xmas-banner-image {
  background-image: url("LINK_TO_DESKTOP_IMAGE");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

Tendrás que experimentar con el CSS, pero espero que esto te sirva de punto de partida.

3 Me gusta

Muy bien. Tenía la sensación de que iba a necesitar una solución CSS. Gracias por tomarse el tiempo de proporcionar un punto de partida.

3 Me gusta

Me gustaría usar esto para apuntar específicamente a “/latest?assigned=”, para usarlo junto con el plugin Discourse Assign, para poder agregar un botón para temas asignados a Todos, Yo y Nadie.

Sin embargo, esto no funciona; supongo que es el “?”, ya que “/latest” funciona. ¿Alguna sugerencia sobre cómo hacer que este banner solo se muestre en estas páginas/vistas?

Además, incluso con solo “/latest” seleccionado, el banner también se muestra en la página de inicio. ¿Cómo puedo evitar que esto suceda? No vi la casilla para mostrar en la página de inicio en la configuración.

Finalmente, ¿hay alguna forma de hacer que el ícono sea clicable? Parece que solo el texto debajo del ícono lo es.

1 me gusta

Estas serían personalizaciones más complejas que necesitarías agregar a un componente separado. Aquí tienes un ejemplo de cómo reabrir uno de los widgets y ajustar el comportamiento: Versatile Banner - #158

Para los iconos, supongo que también podrías intentar una solución CSS. Potencialmente podrías agregar un elemento de anclaje a la configuración del contenido de la columna y estilizarlo para que se superponga a la imagen.

3 Me gusta

¡Muchas gracias! Estoy seguro de que podré resolverlo a partir de aquí.

2 Me gusta

¿Hay alguna forma de previsualizar un banner versátil sin habilitar primero el tema? :thinking:

Me gustaría ver cómo queda antes de presentarlo al mundo (y luego encontrar un error embarazoso) :slight_smile:

2 Me gusta

Mantengo un droplet de desarrollo para cambios. $5 al mes y puedo ver si algo sale mal antes de que rompa algo, jajaja.

Supongo que puedes hacer lo mismo en localhost. Dicho esto, voy a hacer una máquina virtual para eso y ahorrar los $5 al mes, jajaja.

5 Me gusta

Hmm, no lo había pensado :thinking:

Y además del anuncio de hoy, podría hacer precisamente eso, pero en una Raspberry Pi :smiley:

5 Me gusta

¿Alguien ha podido hacer que este banner funcione encima del componente de la barra de búsqueda?

Hasta ahora, solo he podido ponerlo debajo de la barra de búsqueda :sneezing_face:

1 me gusta

Tengo ambos instalados en mi sitio de prueba, y puedo intercambiar la posición marcando la configuración swap default positioning en Versatile Banners. ¿Podría eso funcionar para ti también?

2 Me gusta

Hmmm… esto es raro… tal vez pienses que es una configuración para el componente de la barra de búsqueda… tengo marcada la opción “below-site-header” para mi barra de búsqueda.

¿Cuáles son las configuraciones de tu barra de búsqueda?

1 me gusta

Con below-site-header para el Banner de Búsqueda, puedo alternar el Banner Versátil arriba o abajo usando la configuración swap default positioning (intercambiar posición predeterminada).

Si tengo el punto de conexión del Banner de Búsqueda configurado en above-main-container (arriba del contenedor principal), entonces el Banner Versátil siempre está encima, ya sea que marque o no el intercambio.

(Los cambios se muestran al actualizar la página)

4 Me gusta

Acabo de lanzar mi foro y todavía estoy en el plan alojado.
Me encanta este banner, solo tengo una pregunta…
Me encantaría tener un modo oscuro y un modo claro (es decir, diferentes esquemas de color y diferentes imágenes/colores de fondo), ¿hay alguna configuración que me esté perdiendo o alguna forma de lograr esto?

4 Me gusta

Instalé el componente de tema dos veces, y nombré uno Luz y el otro Oscuro, y luego adjunté el de Luz a mi tema de Luz, y el de Oscuro a mi tema Oscuro. :+1:

Sin embargo, el de Luz no cambia la paleta de colores cuando se establece el id del esquema de color del modo oscuro predeterminado, por lo que no es 100% perfecto.

1 me gusta