Criando um banner para exibir no topo do seu site

[Discourse]

Este guia explica diferentes métodos para criar e personalizar banners no seu site Discourse, desde banners simples que podem ser dispensados até opções mais avançadas.

Nível de usuário necessário: Moderador (banner dispensável), Administrador

Banners são uma forma eficaz de comunicar informações importantes aos visitantes do seu site. Este guia o guiará por vários métodos para criar e personalizar banners no seu site Discourse.

Banner de boas-vindas

Um banner de boas-vindas saúda novos membros e membros que retornam com uma mensagem amigável e uma barra de pesquisa proeminente, facilitando para que os visitantes encontrem rapidamente o conteúdo que estão procurando.

Para habilitar e personalizar o banner de boas-vindas, vá para a área administrativa e selecione o link Aparência > Banner de boas-vindas na barra lateral.

Nesta área, você encontrará as seguintes configurações:

• Habilitado nos temas…: Isso permite designar quais dos seus temas ativos devem exibir o banner de boas-vindas.
• Imagem de fundo: Envie uma imagem para servir como fundo para o seu banner de boas-vindas.
• Cor do texto: Se a cor do texto padrão controlada pela sua paleta de cores conflitar com a sua imagem de fundo, você pode selecionar uma nova cor aqui. Observe que esta configuração se aplica apenas quando você enviou uma imagem de fundo.
• Visibilidade da página: Isso determina em quais páginas o banner de boas-vindas é exibido. Por padrão, ele aparece nas Páginas do menu superior (ou seja, as páginas selecionadas na configuração do site Menu superior), mas você pode alterar para:
  • Apenas página inicial: O banner de boas-vindas aparece apenas na página inicial do site (ou seja, a primeira página listada na configuração do site Menu superior).
  • Páginas de descoberta: O banner de boas-vindas aparece em todas as páginas do Menu superior, mesmo que não sejam exibidas no menu superior real do seu site (ou seja, não selecionadas na configuração).
  • Todas as páginas: O banner de boas-vindas aparece em todas as páginas do seu site. Isso geralmente não é recomendado, pois pode causar poluição visual nas páginas de tópicos, distraindo os membros da leitura e da participação.
• Localização: Isso determina onde o banner de boas-vindas aparece na página. Por padrão, ele aparece Acima do conteúdo do tópico, mas você também pode selecionar Abaixo do cabeçalho do site. A diferença é um pouco sutil e está mostrada nas capturas de tela abaixo:

Você também pode personalizar o texto do banner de boas-vindas para alterar a saudação e adicionar mais texto explicativo ao banner de boas-vindas.

• Cabeçalho para novos membros: A saudação principal exibida para novos membros pela primeira vez que eles fazem login no seu site.
• Cabeçalho para membros conectados: A saudação principal exibida para membros que retornam.
• Cabeçalho para visitantes anônimos: A saudação principal exibida para membros anônimos (ou seja, não conectados).
• Subcabeçalho para membros conectados: Uma linha secundária de texto opcional abaixo do cabeçalho exibida para membros que retornam.
• Subcabeçalho para visitantes anônimos: Uma linha secundária de texto opcional abaixo do cabeçalho exibida para membros anônimos (ou seja, não conectados).
• Texto de espaço reservado da pesquisa: O texto de espaço reservado exibido no campo de pesquisa do banner de boas-vindas.

Banner dispensável

Um banner dispensável é um aviso temporário que os usuários podem fechar. Veja como criar um:

1. Crie ou navegue até um tópico em qualquer categoria pública. A publicação original (OP) no topo do tópico será a fonte do seu banner.
2. Abra as opções administrativas clicando no ícone de chave de fenda à direita ou na parte inferior do tópico.
3. Selecione “Fixar Tópico…”
4. Na nova janela, escolha Tornar Tópico Banner

O banner agora aparecerá no topo do seu site. Os usuários verão um banner dispensável. A equipe também verá um link para editar o tópico de origem.

Dicas para banners dispensáveis eficazes:

• Mantenha o texto claro e conciso
• A altura máxima é 20vh (editável via CSS)
• Para textos mais longos, os usuários podem rolar dentro do banner
• Considere adicionar um link para um tópico público relevante para mais informações
• Se você deseja ocultar o tópico sendo usado como banner, pode deslistá-lo usando o menu administrativo do tópico

Banner permanente

Para criar um banner que esteja sempre visível e não possa ser dispensado pelos usuários:

1. Nas configurações do seu site, procure por global_notice.
2. Insira o texto ou HTML do seu banner neste campo.

Dicas para banners permanentes:

• Este tipo de banner é tipicamente usado para comunicações urgentes do site, mas pode ser usado para qualquer mensagem permanente
• Este banner é visível para todos, incluindo usuários anônimos em sites com login_required
• O banner pode ser removido redefinindo a configuração do site global notice

Banners avançados

Você pode construir banners mais avançados usando um componente de tema. Por favor, note que estes componentes de tema podem conflitar com o recurso central de banner de boas-vindas.

Banner de Link de Boas-vindas

Este componente permite que você adicione texto personalizado e 1-4 links ao seu banner. Ele oferece várias opções de personalização, incluindo:

• Escolher onde exibir o banner (página inicial, listas de tópicos ou todas as páginas)
• Adicionar links com ícones Font Awesome
• Limitar a visibilidade com base nos níveis de confiança do usuário
• Personalizar imagens de fundo ou cores
• Ajustar cores de texto e ícones

Banner Versátil

Um dos componentes mais populares e bem mantidos, o Banner Versátil oferece extensas opções de personalização através da interface, incluindo:

• Exibição do banner limitada a
  • usuários conectados ou anônimos
  • dispositivo móvel ou desktop
  • página inicial, lista de tópicos ou todas as páginas
• Opções dispensável, expansível ou persistente
• Configuração de largura total do navegador
• Gerenciamento de cores
• Personalização de cabeçalho e colunas usando HTML

Personalizando banners com CSS

Você pode personalizar todos os tipos de banners usando CSS. Para mais informações sobre o uso de CSS para personalizar seu site Discourse, veja o Guia para iniciantes sobre o uso de Temas Discourse.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

Link Aparência > Temas e componentes na barra lateral.

Não consegui encontrar essa opção… É um novo recurso na versão Beta?

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

Não consegui encontrar essa opção… É um recurso novo na versão Beta?

Atualização: após atualizar da versão 3.4.6 para a 3.5.0, ela ficou visível:

[RBoy]

@Discourse

js.welcome_banner.search — O texto de espaço reservado exibido no campo de pesquisa do banner de boas-vindas.

Há um bug na build 3.6.0.beta1-dev (e44347414a)

Alterar este texto do site não tem efeito sobre o texto na barra de pesquisa, que ainda exibe sempre Search. Testado no Windows 10 x64 rodando Chrome

[awesomerobot (Kris)]

Trabalhando em uma correção para isto aqui: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

[RBoy]

Incrível, obrigado - isso corrigiu!

[tknospdr (David Muszynski)]

Estou com um problema com a imagem de fundo do meu banner de boas-vindas.
Estou usando buckets S3 do Cloudflare R2 para armazenamento de objetos no site em questão.
Quando faço upload de uma imagem de fundo na seção de administração, ela aparece corretamente, se eu clicar para exibi-la em tamanho real, funciona. E se eu clicar com o botão direito e mostrar a imagem em uma nova aba, funciona e usando o URL do bucket público:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

O que ele injeta no CSS, no entanto, é este URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Tenho outro site que usa armazenamento local e a imagem de fundo do banner funciona corretamente.

Isso é um bug no código, ou estou fazendo algo errado?

Depois de investigar um pouco mais, parece que este CSS controla a imagem de fundo:

Se eu substituir manualmente o URL no inspetor, funciona.
Eu tentei substituir isso com:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

Mas isso não está funcionando. Ainda parece um bug.

[yuriy (Yuriy Kurant)]

@tknospdr, não estou entendendo bem qual problema você está enfrentando?

Verifiquei seu site https://eu.technospider.com e vejo que a imagem de fundo está sendo renderizada como esperado:

[tknospdr (David Muszynski)]

Acho que finalmente consegui o CSS override funcionando. O problema é que ele não deveria precisar de um override.

Parece que o código do banner está usando o asset errado se você estiver hospedando com Cloudflare S3.

[yuriy (Yuriy Kurant)]

Qual exatamente é o seu override?

Do nosso lado, poderíamos garantir que aplicamos apenas um nome de caminho de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg em CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Acredito que esta regra funcionaria para você sem exigir nenhum override?

[tknospdr (David Muszynski)]

@yuriy

Qual exatamente é o seu override?

Meu override completo é:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

Do nosso lado, poderíamos garantir que aplicamos apenas um nome de caminho de URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg em CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Acredito que esta regra funcionaria para você sem exigir nenhum override?

Na interface do usuário, tudo o que posso fazer é carregar uma imagem, então acredito que uma alteração de código é necessária para poder remover minha declaração de override de CSS.
Ficarei feliz em testar quaisquer correções que você implementar.

[Frenky]

Olá a todos,

Com a atualização mais recente do Discourse, o componente de tema Advanced Search Banner não é mais suportado e aparentemente também não está mais sendo mantido. Em vez disso, agora existe a extensão oficial Welcome Banner.

O problema é que, no componente novo, atualmente só é possível selecionar uma única imagem de fundo. Com o componente antigo Advanced Search Banner, era possível definir diferentes imagens de fundo para o modo Claro e para o modo Escuro, o que era ideal para diferentes layouts e temas, é claro.

Minha pergunta para a comunidade:

• Existe alguma maneira de replicar essa funcionalidade no Welcome Banner?

• Alguém já implementou alguma extensão ou solução alternativa para usar imagens de fundo diferentes para os modos Claro e Escuro?

• Está planejado que os desenvolvedores implementem isso futuramente?

Ficarei feliz com quaisquer indicações, dicas ou ideias!

Agradeço antecipadamente!