Banner de Búsqueda Avanzada

:warning:

Este componente de tema está obsoleto y ya no debería usarse. Sus funciones ahora están en el Núcleo de Discourse; consulte nuestra documentación para obtener detalles sobre cómo configurar un banner de bienvenida:

https://meta.discourse.org/t/creating-a-banner-to-display-at-the-top-of-your-site/153718#p-762961-welcome-banner-1

:discourse2: Resumen Advanced Search Banner coloca una barra de búsqueda junto con texto opcional de encabezado y subtítulo en un banner encima de la navegación principal de la lista de temas.
:eyeglasses: Vista previa Vista previa en Discourse Theme Creator
:hammer_and_wrench: Enlace al Repositorio https://github.com/discourse/discourse-search-banner
:open_book: ¿Nuevo en los Temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Características

Por defecto, este banner aparece en todas las páginas de temas de nivel superior (latest/new/unread/top/categories… cualquier cosa en la configuración del sitio top menu), pero también se puede configurar para que solo se muestre en la página de inicio de una comunidad.

search banner example

Configuración

Nombre Descripción
show on Esto determina en qué páginas aparece el banner
plugin outlet Dónde en la página aparecerá el banner
background image light Imagen de fondo para el banner en paletas de colores claros
background image dark Imagen de fondo para el banner en paletas de colores oscuros
tile background image Repetir la imagen de fondo
show for Quién puede ver el Search Banner (conectado, desconectado o ambos)
special style Variaciones opcionales que cambian la apariencia del banner de búsqueda
Traducción Por defecto
search_banner.headline Bienvenido a nuestra comunidad
search_banner.subhead Estamos encantados de tenerte aquí. Si necesitas ayuda, por favor busca antes de publicar.
search_banner.search_button_text

Para omitir uno de la visualización, deje el campo en blanco.

Estilismo personalizado

El elemento HTML obtiene una clase llamada .display-search-banner dondequiera que aparezca este banner, y el banner en sí está envuelto con la clase .custom-search-banner, por lo que con algo de CSS deberías poder personalizar la apariencia de este banner como mejor te parezca.

Mejoras futuras

  • Añadir una opción para habilitar el banner en categorías específicas

Créditos

:sparkling_heart: Esto toma mucho prestado de @angushttps://meta.discourse.org/t/header-search-theme/67959


:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Estándar, Business y Enterprise.

83 Me gusta
[PAID] New search bar
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji
Elementary Layout Component
Searching for users on mobile
New Theme: Tag-Pages Navigation
How to add links on home page menu to other site?
Adding Search option
Header search in custom header
Can't find how to localize a theme component
Mint Theme
Creating and installing plugins?
Bug with "search_banner.search_button_text" shown in search banner theme component
Search banner requires login
Pavilion Header Search Theme Component
Help Needed for Installing Meta Branded Theme
Banner Featured Links
Search section like on Reddit?
How do I edit "Welcome to our community" and tagline on the Homepage?
Anything wrong with this component?
User card out of alignment
Search Banner image cuts off on smaller screens
Pavilion Header Search Theme Component
Where to find search bar in our settings?
Where to find search bar in our settings?
Fully Theme
Welcome Banner components
What plug-in or customization for this header?
Custom Platform
Homepage header, how to add?
How can I make the home page similar to this one?
Theme or Custom CSS on Monday’s Discourse Instance?
Community not displaying correctly - new problem - help!
Christmas Decoration Component :christmas_tree:
We're upgrading our icons to Font Awesome 6!
Search for and/or filter topics in a category using text search
Forum search bar not showing up
Pavilion Header Search Theme Component
3.5.0.beta9: Improving color management, core welcome banner, and staff action log filters
Translations of theme component sample texts
Making my discourse site look a certain way
How can I change the HTML template of advanced search?
How to change the header text on the title page
Advanced Header Search
How to make a custom search bar?
Bug in Search banner theme component
Simple modifications
How can I achieve these header and footer customisations?
Meta Branded theme and all categories header
Search in this topic filter issue with Search banner TC
Bug with "search_banner.search_button_text" shown in search banner theme component
New Theme: Tag-Pages Navigation
Customizing your site with existing theme components

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

  • top_menu (latest/categories/top/new/unread)
  • homepage
  • all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

  • everyone
  • logged_in
  • logged_out
17 Me gusta

Acabo de hacer una pequeña actualización que añade un estilo opcional a este componente, te da una barra de búsqueda grande sin texto de título:

Esto se puede habilitar con una nueva configuración de “estilo especial”. Todo lo que hace es habilitar un pequeño CSS adicional.


¡Es posible que añada más opciones aquí en el futuro!

8 Me gusta

¿Cómo cambio el color del texto de bienvenida en este complemento?

1 me gusta

No hay una configuración para eso. Sin embargo, puedes añadirla con algo de CSS:

Añade lo siguiente a tu tema o a un nuevo componente temático, y cambia como desees. :+1:

.search-banner > .custom-search-banner {
    /* title */
    h1 {
        color: #286989;
    }

    /* description */
    p {
        color: #286989
    }
}
3 Me gusta

¡Muchas gracias!

2 Me gusta

¿Hay alguna forma de ocultar el icono de búsqueda (usando CSS o de otra manera)? Tengo un problema en el que el icono de búsqueda se duplica cuando se usa junto con este componente: Advanced Header Search - #56 by RBoy

1 me gusta
.search-input .search-icon:first-child {
  display: none;
}

solo debería mostrar un icono de búsqueda. Sin embargo, debo decir que usar el banner de búsqueda y la búsqueda del encabezado de forma conjunta tiene algunos efectos secundarios negativos en la experiencia del usuario.

Recomendaría usar solo uno u otro.

4 Me gusta

¡Gracias! Súper útil

¿Podrías dar más detalles, qué efectos secundarios en la experiencia del usuario?

1 me gusta

El video que enlacé arriba muestra algunos de los problemas :slight_smile:

  • menús desplegables de búsqueda superpuestos
  • estados extraños abiertos y cerrados de los menús desplegables de búsqueda
  • el icono de búsqueda es un enlace a la búsqueda avanzada en una entrada de búsqueda y no en la otra
  • etc.
2 Me gusta

Entendido. Entonces, siempre que no estén juntos en la misma página, debería estar bien.

2 Me gusta

¿Alguien puede ayudarme? Instalé este tema en mi Discourse pero la imagen se corta en el lado derecho, para que la imagen encaje completamente tengo que configurar la fuente del sitio en “Más pequeño”. Tengo dos instalaciones diferentes de Discourse y en una de ellas la imagen funcionó normalmente, en la otra, ¿por qué se corta la imagen?

2 Me gusta

¿Puedes incluir una captura de pantalla? Esto hará que sea mucho más fácil entender el problema.

2 Me gusta

Tengo el mismo problema de que diferentes navegadores/modos muestran diferentes partes de esa imagen. Lo resolví haciéndola extra ancha, de modo que el lado derecho solo se muestre en algunas condiciones. Pero eso no es tan fácil para imágenes simétricas. Supongo que algo más de CSS (sin buscar una sobrescritura de componente thome) ayudaría con eso.

Logré resolver parte de ello, deshabilité el componente de tema en los otros temas y lo dejé solo en 1, por increíble que parezca, la imagen estaba “normal” con el tamaño de fuente en “normal” solo por el teléfono celular que solo aparece un lado de la imagen, ¿será ¿Hay algo que pueda hacer para que aparezca completamente en mi teléfono celular también?

Hola,

¿Hay alguna forma de eliminar el espacio entre el banner de búsqueda y el encabezado?

1 me gusta

Hola, puedes usar este CSS en un nuevo componente de tema:

.custom-search-banner-wrap {
    margin-top: 0;
}
3 Me gusta

¡Funcionó perfectamente, gracias!

2 Me gusta

3 publicaciones se dividieron en un nuevo tema: ¿Puedo agregar saltos de línea al texto del subencabezado del banner de búsqueda?

Parece que Discourse tiene el mismo problema que tengo en mi comunidad, la superposición tarda un tiempo en cubrir lo que hay debajo de la superposición de búsqueda (Discover):
2024-07-05 14.42.23

Es más pronunciado en mi comunidad:
2024-07-05 14.49.53

Me pregunto si alguien ha encontrado una solución para eso, ¿potencialmente un retraso en la visualización de la superposición? Podría llevar a una mala experiencia.

1 me gusta