Banner di Ricerca Avanzata

[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)]

Ho appena apportato un piccolo aggiornamento che aggiunge uno stile opzionale a questo componente, ti fornisce una barra di ricerca grande senza testo del titolo:

Questo può essere abilitato da una nuova impostazione “stile speciale”. Tutto ciò che fa è abilitare un piccolo CSS aggiuntivo.

Potrei aggiungere altre opzioni anche in futuro!

[AndyBr (Andy)]

Come posso cambiare il colore del testo di benvenuto in questo componente aggiuntivo?

[Arkshine]

Non esiste un’impostazione per questo. Tuttavia, puoi aggiungerla con un po’ di CSS:

Aggiungi quanto segue al tuo tema o a un nuovo componente del tema, e modifica a tuo piacimento.

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

[AndyBr (Andy)]

Grazie mille!

[RBoy]

C’è un modo per nascondere l’icona di ricerca (usando CSS o altro)? Ho un problema in cui l’icona di ricerca viene duplicata quando viene utilizzata in combinazione con questo componente: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

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

dovrebbe visualizzare solo un’icona di ricerca. Dirò però che l’uso del banner di ricerca e della ricerca nell’intestazione in modo tangenziale ha alcuni effetti collaterali negativi sull’esperienza utente.

Raccomanderei di usarne solo uno o l’altro.

[RBoy]

Grazie! Molto utile

@isaac

Dirò però che usare il banner di ricerca e la ricerca nell’intestazione in modo tangente ha alcuni effetti collaterali negativi sull’UX.

Potresti elaborare, quali effetti collaterali sull’UX?

[isaac (Isaac Janzen)]

Il video che ho linkato sopra mostra alcuni dei problemi :)\n\n- menu a discesa di ricerca sovrapposti\n- stati strani aperti e chiusi dei menu a discesa di ricerca\n- l’icona di ricerca è un link alla ricerca avanzata in un campo di ricerca e non nell’altro\n- ecc.

[RBoy]

Capito. Quindi finché non sono sulla stessa pagina, dovrebbe andare bene.

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

Qualcuno può aiutarmi? Ho installato questo tema sul mio Discourse ma l’immagine viene tagliata sul lato destro, affinché l’immagine si adatti completamente devo impostare il font del sito su “Più piccolo”. Ho due diverse installazioni di Discourse e in una di esse l’immagine ha funzionato normalmente, nell’altra l’immagine perché viene tagliata?

[awesomerobot (Kris)]

puoi includere uno screenshot? questo renderà molto più facile capire il problema

[ecki (Bernd)]

Ho lo stesso problema che browser/modalità diverse mostrano parti diverse di quell’immagine. L’ho risolto rendendola extra larga, in modo che il lato destro venga visualizzato solo in alcune condizioni. Ma non è così facile per le immagini simmetriche. Immagino che un po’ più di CSS (senza cercare una sovrascrittura del componente thome) aiuterebbe in questo.

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

Sono riuscito a risolvere parte del problema, ho disabilitato il componente tema negli altri temi e l’ho lasciato solo a 1, per quanto incredibile possa sembrare, l’immagine era “normale” con la dimensione del carattere su “normale” solo perché sul cellulare appare solo un lato dell’immagine, c’è qualcosa che posso fare per farla apparire completamente anche sul mio cellulare?

[Surbhi_Pal1 (Surbhi)]

Ciao,

C’è un modo per rimuovere lo spazio tra il banner di ricerca e l’intestazione?

[Arkshine]

Ciao, puoi usare questo CSS in un nuovo componente del tema:

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

[Surbhi_Pal1 (Surbhi)]

Ha funzionato perfettamente, grazie!

[PT_LB (Paul)]

Sembra che Discourse abbia lo stesso problema che ho nella mia community, l’overlay impiega del tempo per coprire ciò che si trova sotto il sottostrato di ricerca (Discover):

È più evidente nella mia community:

Mi chiedo se qualcuno abbia trovato una soluzione, potenzialmente un ritardo nella visualizzazione dell’overlay? Potrebbe portare a una cattiva esperienza.