Banner de búsqueda avanzada

[Discourse]

Note

We are planning to deprecate support for this theme component soon and advise you to use the welcome banner feature instead.

	Summary	Advanced Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-search-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Bug, UX, and Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

By default, this banner appears on all top-level topic pages (latest/new/unread/top/categories… anything in the top menu site setting) but it can also be set to only display on a community’s homepage.

Settings

Name	Description
show on	This determines which pages the banner appears
plugin outlet	Where on the page the banner will appear
background image light	Background image for the banner on light color palettes
background image dark	Background image for the banner on dark color palettes
tile background image	Repeat the background image
show for	Who can see the Search Banner (logged in, logged out, or both)
special style	Optional variations that change the appearance of the search banner

Translation	Default
search_banner.headline	Welcome to our community
search_banner.subhead	We’re happy to have you here. If you need help, please search before you post.
search_banner.search_button_text

To omit one from display, leave the field blank.

Custom styling

The HTML element gets a class named .display-search-banner wherever this banner appears, and the banner itself is wrapped with the .custom-search-banner class, so with some CSS you should be able to customize the appearance of this banner however you see fit.

Future enhancements

• Add an option to enable the banner in specific categories

Credits

This very heavily borrows from @angus’ Pavilion Header Search Theme Component

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @Moin 2025-11-10T16:26:58Z

Check document

Perform check on document:

[awesomerobot (Kris)]

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

[awesomerobot (Kris)]

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!

[AndyBr (Andy)]

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

[Arkshine]

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.

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

    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

¡Muchas gracias!

[RBoy]

¿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

[isaac (Isaac Janzen)]

.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.

[RBoy]

¡Gracias! Súper útil

@isaac

Sin embargo, diré que usar el banner de búsqueda y la búsqueda de encabezado en conjunto tiene algunos efectos secundarios negativos en la experiencia del usuario.

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

[isaac (Isaac Janzen)]

El video que enlacé arriba muestra algunos de los problemas

• 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.

[RBoy]

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

[مباركمبارك (مبارك)]

¿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?

[awesomerobot (Kris)]

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

[ecki (Bernd)]

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?

[Surbhi_Pal1 (Surbhi)]

Hola,

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

[Arkshine]

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

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

[Surbhi_Pal1 (Surbhi)]

¡Funcionó perfectamente, gracias!

[PT_LB (Paul)]

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):

Es más pronunciado en mi comunidad:

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.