Búsqueda avanzada de encabezados

[Discourse]

	Summary	Advanced Header Search removes the search icon from the header menu and creates a search bar that is placed in the middle of the header area.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-header-search
	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

Note

This theme component is only required when sites want to support external searches. Otherwise, you may update the Search experience setting to Search field in site header to move site search to the header.

Features

Settings

Name	Description
extra search icons	Add extra icons to the search bar (for example to trigger an external search).
svg icons

Optionally show external search icons

Use the extra_search_icons to show additional icons in the search bar.

This setting supports the following params:

• prefix: the prefix to the search URL when clicking the respective icon
• icon: icon to show, from the Font Awesome set (may need to be added to the svg icons setting as well)
• target: optionally set to “_blank” to open the link in its own tab/window by default
• showInCategories: category IDs where the given icon should be shown exclusively (by default, icon is shown everywhere)
• excludeFromCategories: category IDs where the given icon should not be shown

Credits

Thanks to @Johani for the search panel javascript code

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

Last edited by @lindsey 2025-02-28T14:39:07Z

Check document

Perform check on document:

[awesomerobot (Kris)]

Acabo de hacer una actualización del componente, esto hará que el icono de búsqueda predeterminado aparezca en el móvil:

UX: hide on mobile, show default icon (#7)

[miss]

Esto funciona bien ahora.

@JammyDodger

@awesomerobot

Gracias.

[alanost (Alan)]

Hola, en primer lugar, un componente temático realmente bueno. Me funciona muy bien.
Tengo una pequeña sugerencia de mejora. La barra de búsqueda ciertamente no debería mostrarse en un foro que requiere inicio de sesión, ya que de todos modos no se puede usar.

[alanost (Alan)]

Estaría muy feliz si alguien pudiera solucionar este error. Sé que no afecta a muchos, pero me encanta este componente temático y este problema me impide usarlo

[awesomerobot (Kris)]

He acabo de hacer una actualización que ocultará la barra de búsqueda de los usuarios que no han iniciado sesión cuando se requiera el inicio de sesión

UX: hide from logged out users when relevant

[awesomerobot (Kris)]

También he añadido una actualización que utiliza los colores del encabezado (primario y de fondo del encabezado) para la entrada

UX: use header colors for search input, fix button

[manuel (Manuel Kostka)]

El componente parece deshabilitar el nuevo header-sidebar-toggle.

[keegan (Keegan George)]

¡Gracias por identificar esto @manuel!

Acabo de lanzar una corrección

FIX: Sidebar toggle disappearing (#10)

[manuel (Manuel Kostka)]

Otro pequeño error que encontré: puedo usar el atajo predeterminado “/” para ingresar al campo de búsqueda. Pero no expandirá el menú desplegable que muestra los resultados. Necesitaría hacer clic manualmente en el campo de entrada para que eso suceda, lo que hace que el atajo de teclado sea un tanto inútil.

[manuel (Manuel Kostka)]

El uso del componente deshabilita nuevamente el interruptor de encabezado y barra lateral. Supongo que se debe a que la configuración de la barra lateral cambió.

[jordan.vidrine]

Esto debería solucionarse con esta última PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

[ozkn (Mathx)]

@jordan.vidrine Hola, ¿puedo usar este componente como predeterminado en el encabezado móvil?

[jordan.vidrine]

Lo había considerado antes de lanzar, pero no hay suficiente espacio en el encabezado móvil para que esto funcione correctamente.

[bquast (Bastiaan Quast)]

Gracias por el gran componente.

¿Hay alguna forma de personalizar el color del borde del cuadro de búsqueda?

Para mí es como gris, me encantaría que fuera blanco #FFFFFF

[jordan.vidrine]

Puedes personalizar este color añadiendo algo de CSS a un componente temático local si has creado uno para añadir CSS personalizado.

Si aún no has hecho esto, visita /admin/customize/themes y haz clic en componentes, luego en instalar.

Cuando aparezca la ventana modal, selecciona Crear Nuevo, luego ponle un nombre a tu componente. Serás llevado a la nueva página del componente donde podrás seleccionar el tema al que aplicarlo. Deberás aplicarlo al tema instalado.

Para añadir el CSS, haz clic en Editar CSS/HTML y añade el CSS a la página common y guarda.

Deberías hacer algo como esto:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}

[bquast (Bastiaan Quast)]

Gracias @jordan.vidrine por las detalladas instrucciones.

Recientemente, con la ayuda de otras buenas personas en este foro, aprendí a agregar CSS personalizado.

[Canapin (Coin-coin le Canapin)]

Esto podría ser de ayuda para futuras modificaciones
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
Explica cómo encontrar qué elemento apuntar con CSS.

[satonotdead]

¿Puedo eliminar esa línea y usar media queries para deshabilitarla hasta los 768px sin romper nada?

Me gustaría eliminar el botón (porque tenemos chats y video allí) en tabletas y veo que el cuadro de búsqueda encaja muy bien.

[volanar]

Todo está bien, pero en la versión móvil hay que cambiar a la búsqueda estándar, porque se ve terrible

vs