Este componente del tema es una evolución de los esfuerzos anteriores con banners. El objetivo es proporcionar mayor facilidad y flexibilidad mediante el uso de configuraciones del tema.
Limitar la visualización a usuarios registrados o anónimos
Limitar la visualización exclusivamente a móviles o escritorio
Limitar la visualización a páginas específicas
Opciones desechables, expandibles y siempre visibles
Opción de ancho completo del navegador
Gestión de colores
Personalización de encabezados y columnas usando HTML (ver más abajo)
Opción de estado persistente (ver más abajo)
Personalizar el contenido de tu banner
El contenido del banner se divide en el encabezado principal y las columnas. Puedes tener hasta 5 columnas en tu banner, sin embargo, se recomienda 3 o menos debido a las limitaciones de ancho. Se proporcionan plantillas HTML que pueden personalizarse para satisfacer tus necesidades individuales. También puedes controlar el ancho de cada columna y agregar cualquier imagen o icono de Font Awesome que desees en la parte superior de cada columna.
Usar la opción de estado persistente
La opción de estado persistente dependerá de hasta dos cookies. Estas cookies contendrán un nombre para el banner y un valor verdadero/falso relacionado con el estado del banner. Si tienes alguna preocupación sobre el uso de cookies en tu sitio, lo mejor es evitar usar esta configuración. Elegir una opción de tiempo relativo para la configuración cookie_lifespan asegurará que el banner permanezca cerrado/expandido/colapsado durante ese período de tiempo después de que el usuario presione el botón correspondiente. Sin esta configuración, el banner se reinicia con cada carga completa de la página. Si realizas un cambio en el banner y quieres asegurarte de que todos los usuarios vean esos cambios, incluso aquellos que habían cerrado previamente el banner, asegúrate de cambiar el “nombre de la cookie”. Esto esencialmente reiniciará cualquier estado persistente y permitirá que el usuario cierre el banner una vez más.
Configuraciones
Nombre
Descripción
mostrar para miembros
Mostrar el banner para usuarios conectados al foro
mostrar para anónimos
Mostrar el banner para usuarios anónimos
mostrar en móvil
Mostrar el banner en dispositivos móviles
mostrar en escritorio
Mostrar el banner en computadoras de escritorio
mostrar en página de inicio
Mostrar el banner en la página de inicio
la URL debe contener
Ingresa las rutas que deben mostrar el banner. Agrega * al final de la ruta como un comodín
desechable
Permitir que los usuarios cierren el banner
colapsable
Permitir que los usuarios expandan y colapsen el banner
estado colapsado predeterminado
Estado colapsado predeterminado cuando la configuración colapsable está habilitada
vida útil de la cookie
La vida útil de la cookie utilizada para recordar si el banner ha sido cerrado, expandido o colapsado. Si se establece en “ninguna”, NO se usarán cookies con este componente, y cualquier cookie relacionada con el banner creada anteriormente se eliminará la próxima vez que un usuario realice una carga completa de la página. Los valores se miden como una sola unidad, por lo que establecer “año” será un año, “semana” será una semana, etc.
nombre de la cookie
Cuando se realizan cambios importantes en el banner, debes cambiar el nombre de la cookie para asegurarte de que todos tus usuarios vean los cambios.
banner de ancho completo
Mostrar el banner con el ancho completo del navegador
intercambiar posición predeterminada
Si hay otro componente relacionado con banners activo, usa esto para intercambiar su posición con Versatile Banner
salida del plugin
below-site-header lo coloca encima de la barra lateral, above-main-container lo coloca encima del contenido al lado de la barra lateral
imagen de fondo del banner
La URL de origen para tu imagen de fondo. Consejo: Puedes subir una imagen a tu tema principal y usar la URL de esa, pero asegúrate de no usar la sección “Subidas” de este componente. Cualquier carga agregada a este componente se eliminará cada vez que se actualice.
imagen de fondo del banner oscuro
La URL de origen para tu imagen de fondo cuando se detecta el modo oscuro del sistema.
color de fondo
Se usa en lugar de una imagen de fondo
color de fondo oscuro
Se usa en lugar de una imagen de fondo cuando se detecta el modo oscuro del sistema.
color de texto principal
El color de texto principal del banner
color de texto principal oscuro
El color de texto principal del banner cuando se detecta el modo oscuro del sistema
color de texto secundario
El color de texto del icono y los encabezados de texto, y el color de fondo del botón.
color de texto secundario oscuro
El color de texto del icono y los encabezados de texto, y el color de fondo del botón cuando se detecta el modo oscuro del sistema.
color de texto de enlace
El color de texto de los enlaces dentro del banner
color de texto de enlace oscuro
El color de texto de los enlaces dentro del banner cuando se detecta el modo oscuro del sistema.
Traducción
Predeterminado
close.title
Cerrar el banner
close.label
Cerrar
toggle.title
Expandir/Colapsar el banner
toggle.collapse_label
Colapsar
toggle.expand_label
Expandir
¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Pro, Business y Enterprise.
Deberás crear un nuevo componente llamado “Personalizaciones versátiles de banners” y agregar el CSS anterior a la sección Común. Asegúrate de añadir el nuevo componente a cualquier tema activo que utilice el banner versátil para que se aplique la personalización.
¿Podrías darnos un ejemplo?
¿Por qué harías eso?
Quiero decir… ¿todas las imágenes de fondo serán enlaces?
Si un usuario hace clic en cualquier lugar del banner, será redirigido a ese enlace.
No logro imaginar el uso.
Hola @tshenry, estoy utilizando el componente de tema Versatile Banner, pero desaparece cuando desmarco la opción “mostrar en escritorio”. De hecho, me gustaría mostrar el banner solo en dispositivos móviles.
Sin embargo, al desmarcar “mostrar en escritorio”, tanto el Versatile Banner de escritorio como el móvil desaparecen.
Aquí está el sitio por si quieres revisarlo: https://hec.fm
¿Es posible que los enlaces se muestren horizontalmente también en móviles? Me sorprendió un poco ver que aparecían uno debajo del otro en lugar de horizontalmente.
¡Gracias por reportarlo! Disculpa la demora en la respuesta. He podido reproducir lo que describes. Estoy bastante seguro de lo que está ocurriendo. Lo revisaré más adelante esta semana y te responderé.
La altura del banner depende principalmente de su contenido, pero puedes ajustar cualquier cosa según sea necesario con tu propio CSS. No estoy seguro de qué tan bien podrás ajustar tres columnas horizontalmente en el móvil, pero ¡definitivamente puedes intentarlo con CSS personalizado! Consulta Making custom CSS changes on your site para algunos consejos.
Creo que estoy experimentando un error en mi sitio relacionado con la duración de las cookies al mantener el estado de expandido/colapsado. Lo que deseo es que mi sitio recuerde cuándo los usuarios colapsan o expanden el banner, y que mantenga esa configuración sin importar nada. Funciona como se espera cuando me quedo en la página de inicio o hago clic en temas. Sin embargo, en cuanto voy al panel de administración, configuración de usuario, preguntas frecuentes, acerca de, términos de servicio, privacidad o documentación, y luego regreso a la página de inicio, las cosas se vuelven extrañas: a veces el banner aparece en el estado opuesto al configurado, y a veces incluso el ícono de la flecha que indica colapsar o expandir está en la orientación incorrecta.
Acabo de descubrir que el Banner Versátil ya no aparece en la página de inicio de sesión de nuestro foro (es un foro privado), como solía hacerlo.
La opción “Mostrar el banner para usuarios anónimos” está marcada en la configuración del componente.
Al revisar el HTML, hay un div con la clase ‘banner-box’ dentro de una serie de divs con clases ‘emberX’, pero el div con la clase ‘banner-box’ está vacío, a diferencia del HTML de los usuarios que han iniciado sesión.
Acabo de subir una pequeña actualización al componente.
Esto debería estar corregido con la actualización anterior. Siento mucho que haya llevado tanto tiempo implementar la solución. ¡Gracias de nuevo por tu reporte!
Necesitarás agregar /login a la configuración del tema la URL debe contener. Consulta esta publicación para más detalles.
Esto se ha reportado una o dos veces en el pasado. Lamentablemente, nunca he podido reproducirlo. Lo intentaré de nuevo cuando tenga la oportunidad, siguiendo tus pasos exactos, a ver si tengo suerte.
Estoy usando un banner versátil y trato de convertirlo en un enlace gigante que redirija a otro sitio web. ¿Cómo puedo hacerlo?
Intenté cambiarlo mediante un script: api.changeWidgetSetting('banner-content-widget', 'href', '<sitio_web>'), pero el banner versátil dejó de funcionar.
<script type="text/discourse-plugin" version="0.10.0">
// Agregar el enlace al encabezado
api.reopenWidget("banner-box-widget", {
html(attrs) {
let bannerBox = this._super();
bannerBox[0].children[1].tagName = "A";
bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
return bannerBox;
}
});
// Agregar el enlace al resto del contenido
api.reopenWidget("banner-content-widget", {
html(attrs) {
let bannerContent = this._super();
bannerContent.tagName = "A";
bannerContent.properties.href = "https://meta.discourse.org";
return bannerContent;
}
});
</script>
Y añadir una regla CSS para ajustar el color del enlace:
.banner-box a {
color: var(--primary);
}
A menos que necesites funcionalidades específicas que ofrece el Banner Versátil, me pregunto si no te convendría más crear tu propio banner HTML sencillo en un nuevo componente. Ejemplo aproximado:
Añade lo siguiente a la sección común “Después del encabezado”:
<a href="https://meta.discourse.org">
<div class="custom-banner">
<h2>¡Este es un banner personalizado!</h2>
</div>
</a>
Esto se debe a que estás ejecutando la versión 2.6.0.beta2 de Discourse. El commit al que has enlazado requiere la versión 2.6.0.beta3 o superior. Notarás que el commit al que has enlazado ha añadido un archivo discourse-compatibility para asegurarse de que no actualices a un commit incompatible con tu versión de Discourse.
¡Hola @tshenry!
Quiero instalar el componente más de una vez para que cada instancia pueda mostrar banners diferentes según la categoría. Por ello, desactivé la opción “Mostrar en la página de inicio” y utilicé la condición “La URL debe contener”, pero esto impide que funcione la instancia principal que uso para mostrarlo únicamente en la página de inicio. ¿Podrías sugerirme una solución alternativa o se trata de un error? ¡Gracias! (:
¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Pro, Business y Enterprise.
