Criando um banner para exibir no topo do seu site

[Discourse]

Este guia explica diferentes métodos para criar e personalizar banners em 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 maneira eficaz de comunicar informações importantes aos visitantes do seu site. Este guia irá guiá-lo através de vários métodos para criar e personalizar banners em seu site Discourse.

Banner de boas-vindas

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

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

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

• Ativado nos temas…: Isso permite que você designe quais dos seus temas ativos devem exibir o banner de boas-vindas.
• Imagem de fundo: Carregue uma imagem para servir como plano de 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 sua imagem de fundo, você pode selecionar uma nova cor aqui. Observe que esta configuração só se aplica quando você carregou uma imagem de fundo.
• Visibilidade da página: Isso determina em quais páginas o banner de boas-vindas é exibido. Por padrão, ele é mostrado em Páginas do menu superior (o que significa as páginas selecionadas na configuração do site Menu superior), mas você pode alterar para:
  • Somente página inicial: O banner de boas-vindas é exibido 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 é exibido em todas as páginas do Menu superior, mesmo que não estejam visíveis no menu superior real do seu site (ou seja, não selecionadas na configuração).
  • Todas as páginas: O banner de boas-vindas é exibido em todas as páginas do seu site. Isso geralmente não é recomendado, pois pode causar poluição visual em páginas de tópicos, distraindo os membros da leitura e participação.
• Localização: Isso determina onde o banner de boas-vindas aparece na página. Por padrão, ele é exibido em 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 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 mostrada aos novos membros na primeira vez que eles fazem login no seu site.
• Cabeçalho para membros logados: A saudação principal mostrada aos membros recorrentes.
• Cabeçalho para visitantes anônimos: A saudação principal mostrada aos membros anônimos (ou seja, que não fizeram login).
• Subcabeçalho para membros logados: Uma linha de texto secundária opcional abaixo do cabeçalho mostrada aos membros recorrentes.
• Subcabeçalho para visitantes anônimos: Uma linha de texto secundária opcional abaixo do cabeçalho mostrada aos membros anônimos (ou seja, que não fizeram login).
• Placeholder de pesquisa: O texto de placeholder mostrado 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 ou privada). A postagem original (OP) no topo do tópico será a fonte do seu banner.
2. Abra as opções de administração clicando no ícone de chave inglesa à direita ou na parte inferior do tópico.
3. Selecione “Fixar Tópico…”
4. Na nova janela, escolha Tornar Tópico como 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 fonte.

Dicas para banners dispensáveis eficazes:

• Mantenha o texto claro e conciso
• A altura máxima é de 250px (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

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, pesquise por global_notice.
2. Insira seu texto ou HTML do banner neste campo.

Dicas para banners permanentes:

• Este tipo de banner é normalmente 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 criar banners mais avançados usando um componente de tema. Observe que esses componentes de tema podem entrar em conflito com o recurso principal de banner de boas-vindas.

Welcome Link Banner

Este componente permite que você adicione texto personalizado e de 1 a 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 ou cores de fundo
• Ajustar cores de texto e ícone

Versatile Banner

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

• Exibição do banner limitada a
  • usuários logados 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 banner usando CSS. Para mais informações sobre como usar CSS para personalizar seu site Discourse, consulte o Guia para iniciantes sobre como usar 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.