Banner de Pesquisa Avançada

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

Acabei de fazer uma pequena atualização que adiciona um estilo opcional a este componente, ele fornece uma barra de pesquisa grande sem texto de título:

Isso pode ser ativado por uma nova configuração de “estilo especial”. Tudo o que isso faz é ativar um pequeno CSS adicional.

Talvez eu adicione mais algumas opções aqui no futuro também!

[AndyBr (Andy)]

Como altero a cor do texto de boas-vindas neste complemento?

[Arkshine]

Não há configuração para isso. No entanto, você pode adicioná-la com um pouco de CSS:

Adicione o seguinte ao seu tema ou a um novo componente de tema e altere como desejar.

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

[AndyBr (Andy)]

Muito obrigado!

[RBoy]

Existe uma maneira de ocultar o ícone de pesquisa (usando CSS ou de outra forma)? Estou tendo um problema em que o ícone de pesquisa está sendo duplicado quando usado em conjunto com este componente: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

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

deve exibir apenas um ícone de pesquisa. No entanto, devo dizer que usar o banner de pesquisa e a pesquisa no cabeçalho em conjunto tem alguns efeitos colaterais negativos de UX.

Eu recomendaria usar um ou outro.

[RBoy]

Obrigado! Super útil

@isaac

Eu direi, no entanto, que usar o banner de pesquisa e a pesquisa no cabeçalho em conjunto tem alguns efeitos colaterais ruins de UX.

Você poderia elaborar, quais efeitos colaterais de UX?

[isaac (Isaac Janzen)]

O vídeo que linkei acima mostra alguns dos problemas :)\n\n- dropdowns de pesquisa sobrepostos\n- estados estranhos de abertura e fechamento dos dropdowns de pesquisa\n- o ícone de pesquisa é um link para pesquisa avançada em um campo de pesquisa e não no outro\n- etc

[RBoy]

Entendido. Desde que não estejam na mesma página, tudo bem.

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

Alguém pode me ajudar? Instalei este tema no meu Discourse, mas a imagem está cortando um pedaço no lado direito, para que a imagem caiba completamente tenho que definir a fonte do site como “Menor” Eu tenho duas instalações diferentes do Discourse e em uma delas a imagem funcionou normalmente, na outra a imagem por que está cortada?

[awesomerobot (Kris)]

você pode incluir uma captura de tela? isso tornará muito mais fácil entender o problema

[ecki (Bernd)]

Eu tenho o mesmo problema que navegadores/modos diferentes mostram partes diferentes dessa imagem. Eu resolvi tornando-a extra larga, então o lado direito só aparece em algumas condições. Mas isso não é tão fácil para imagens simétricas. Acho que mais CSS (sem procurar por uma substituição de componente thome) ajudaria com isso.

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

Consegui resolver parte, desativei o componente de tema nos outros temas e deixei apenas em 1, por incrível que pareça, a imagem ficou “normal” com o tamanho da fonte em “normal” apenas por causa do celular que só aparece um lado da imagem, será que tem algo que eu possa fazer para que apareça completamente no meu celular também?

[Surbhi_Pal1 (Surbhi)]

Olá,

Existe alguma forma de remover o espaçamento entre o banner de pesquisa e o cabeçalho?

[Arkshine]

Olá, você pode usar este CSS em um novo componente de tema:

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

[Surbhi_Pal1 (Surbhi)]

Funcionou perfeitamente, obrigado!

[PT_LB (Paul)]

Parece que o Discourse tem o mesmo problema que tenho em minha comunidade, a sobreposição leva algum tempo para cobrir o que está sob a sobreposição de pesquisa (Discover):

É mais pronunciado em minha comunidade:

Gostaria de saber se alguém encontrou uma solução para isso, potencialmente um atraso para exibir a sobreposição? Pode levar a uma má experiência.