Este componente de tema é uma evolução de esforços anteriores com banners. O objetivo é fornecer mais facilidade e flexibilidade por meio do uso de configurações de tema.
Limitar a exibição exclusivamente para dispositivos móveis ou desktop
Limitar a exibição a páginas específicas
Opções de descarte, expansibilidade e visibilidade constante
Opção de largura total do navegador
Gerenciamento de cores
Personalização de cabeçalho e colunas usando HTML (veja abaixo para mais detalhes)
Opção de estado persistente (veja abaixo para mais detalhes)
Personalizando o conteúdo do seu banner
O conteúdo do banner é dividido no cabeçalho principal e colunas. Você pode ter até 5 colunas no seu banner, no entanto, o número recomendado é 3 ou menos devido às limitações de largura. Modelos HTML são fornecidos e podem ser personalizados para atender às suas necessidades individuais. Você também pode controlar a largura de cada coluna e adicionar qualquer imagem ou ícone Font Awesome que desejar no topo de cada coluna.
Usando a opção de estado persistente
A opção de estado persistente dependerá de até dois cookies. Esses cookies conterão um nome para o banner e um valor verdadeiro/falso relacionado ao estado do banner. Se você tiver alguma preocupação com o uso de cookies no seu site, é melhor evitar usar essa configuração. Escolher uma opção de tempo relativo para a configuração cookie_lifespan garantirá que o banner permaneça fechado/expandido/recolhido por esse período de tempo após o usuário pressionar o botão apropriado. Sem essa configuração, o banner é redefinido a cada carregamento completo da página. Se você fizer uma alteração no banner e quiser garantir que todos os usuários vejam essas alterações, mesmo aqueles que anteriormente fecharam o banner, certifique-se de alterar o “nome do cookie”. Isso essencialmente redefinirá qualquer estado persistente e permitirá que o usuário feche o banner mais uma vez.
Configurações
Nome
Descrição
mostrar para membros
Exibir o banner para usuários logados no fórum
mostrar para anônimos
Exibir o banner para usuários anônimos
exibir no mobile
Exibir o banner em dispositivos móveis
exibir no desktop
Exibir o banner em computadores desktop
exibir na página inicial
Exibir o banner na página inicial
url deve conter
Insira os caminhos que devem exibir o banner. Adicione * ao final do caminho como um curinga
descartável
Permitir que o banner seja fechado pelos usuários
recolhível
Permitir que o banner seja expandido e recolhido pelos usuários
estado recolhido padrão
Estado recolhido padrão quando a configuração de recolhimento está ativada
tempo de vida do cookie
O tempo de vida do cookie usado para lembrar se o banner foi fechado, expandido ou recolhido. Se definido como “nenhum”, NENHUM cookie será usado com este componente, e quaisquer cookies relacionados ao banner criados anteriormente serão excluídos na próxima vez que um usuário realizar um carregamento completo da página. Os valores são medidos como uma única unidade, então definir “ano” será um ano, “semana” será uma semana, etc.
nome do cookie
Quando alterações importantes são feitas no banner, você deve alterar o nome do cookie para garantir que todos os seus usuários vejam as alterações.
banner de largura total
Exibir o banner na largura total do navegador
trocar posição padrão
Se houver outro componente relacionado a banner ativo, use isso para trocar sua posição com o Versatile Banner
plugin outlet
below-site-header o coloca acima da barra lateral, above-main-container o coloca acima do conteúdo ao lado da barra lateral
imagem de fundo do banner
A URL de origem para sua imagem de fundo. Dica: Você pode fazer upload de uma imagem para seu tema principal e usar a URL dessa imagem, mas certifique-se de não usar a seção “Uploads” deste componente. Qualquer upload adicionado a este componente será excluído sempre que for atualizado.
imagem de fundo do banner escuro
A URL de origem para sua imagem de fundo quando o modo escuro do sistema é detectado.
cor de fundo
Usada no lugar de uma imagem de fundo
cor de fundo escuro
Usada no lugar de uma imagem de fundo quando o modo escuro do sistema é detectado.
cor do texto primário
A cor do texto principal do banner
cor do texto primário escuro
A cor do texto principal do banner quando o modo escuro do sistema é detectado
cor do texto secundário
A cor do texto do ícone e dos cabeçalhos de texto, e a cor de fundo do botão.
cor do texto secundário escuro
A cor do texto do ícone e dos cabeçalhos de texto, e a cor de fundo do botão quando o modo escuro do sistema é detectado.
cor do texto do link
A cor do texto dos links dentro do banner
cor do texto do link escuro
A cor do texto dos links dentro do banner quando o modo escuro do sistema é detectado.
Tradução
Padrão
close.title
Fechar o banner
close.label
Fechar
toggle.title
Expandir/Recolher o banner
toggle.collapse_label
Recolher
toggle.expand_label
Expandir
Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.
Você precisará criar um novo componente chamado “Customizações Versáteis para Banners” e adicionar o CSS acima à seção Comum. Certifique-se de adicionar o novo componente a qualquer tema ativo que use o Banner Versátil para aplicar a personalização.
Você pode nos dar um exemplo?
Por que você faria isso?
Quero dizer… toda a imagem de fundo será um link?
Se um usuário clicar em qualquer lugar no banner, será redirecionado para esse link.
Não consigo imaginar o uso disso.
Olá @tshenry, estou usando o componente de tema Versatile Banner, mas ele desaparece quando desmarco a opção “exibir no desktop”.
Na verdade, gostaria de exibir o banner apenas em dispositivos móveis.
Mas, ao desmarcar “exibir no desktop”… tanto o Versatile Banner do desktop quanto o do mobile desaparecem.
Aqui está o site, caso queira verificar: https://hec.fm
É possível exibir os links horizontalmente também no celular? Fiquei um pouco surpreso ao vê-los aparecer um abaixo do outro em vez de horizontalmente.
Obrigado por relatar isso! Desculpe pela resposta tardia. Consegui reproduzir o que você descreveu. Tenho quase certeza de que sei o que está acontecendo. Vou dar uma olhada mais tarde nesta semana e retorno para você.
A altura do banner depende principalmente do seu conteúdo, mas você pode ajustar qualquer coisa conforme necessário com seu próprio CSS. Não tenho certeza de quão bem você conseguirá ajustar três colunas horizontalmente no celular, mas certamente pode tentar com CSS personalizado também! Dê uma olhada em Making custom CSS changes on your site para algumas dicas.
Acho que estou enfrentando um bug no meu site relacionado ao tempo de vida do cookie ao manter o estado expandido/recolhido. O que eu quero é que o site lembre quando os usuários recolhem ou expandem o banner e mantenha esse estado, independentemente de onde estejam. Isso funciona conforme o esperado quando permaneço na página inicial ou clico em tópicos. No entanto, assim que acesso o painel administrativo, configurações do usuário, FAQ, Sobre, Termos de Serviço, Privacidade ou Documentação e depois retorno à página inicial, as coisas ficam estranhas: às vezes o banner aparece no estado oposto ao que foi definido, e às vezes até o ícone de seta (chevron) que indica recolher ou expandir fica na orientação incorreta.
Acabei de descobrir que o Versatile Banner não está aparecendo na página de login do nosso fórum (é um fórum privado) como costumava fazer.
A opção ‘Exibir o banner para usuários anônimos’ está marcada nas configurações do componente.
Ao analisar o HTML, há um div com a classe ‘banner-box’ dentro de uma sequência de divs com as classes ‘emberX’, mas nada dentro do div com a classe ‘banner-box’ — ao contrário do HTML para usuários logados.
Acabei de enviar uma pequena atualização para o componente.
Isso deve estar corrigido com a atualização acima. Sinto muito que tenha demorado tanto para implementar a correção. Obrigado novamente pelo seu relatório!
Você precisará adicionar /login à configuração do tema “url deve conter”. Consulte esta postagem para mais detalhes.
Isso já foi relatado uma ou duas vezes no passado. Infelizmente, nunca consegui reproduzi-lo. Vou tentar novamente, quando tiver uma oportunidade, usando exatamente os mesmos passos que você seguiu e ver se tenho mais sorte.
<script type="text/discourse-plugin" version="0.10.0">
// Adicionar o link ao cabeçalho
api.reopenWidget("banner-box-widget", {
html(attrs) {
let bannerBox = this._super();
bannerBox[0].children[1].tagName = "A";
bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
return bannerBox;
}
});
// Adicionar o link ao restante do conteúdo
api.reopenWidget("banner-content-widget", {
html(attrs) {
let bannerContent = this._super();
bannerContent.tagName = "A";
bannerContent.properties.href = "https://meta.discourse.org";
return bannerContent;
}
});
</script>
E adicionar uma regra CSS para ajustar a cor do link:
.banner-box a {
color: var(--primary);
}
A menos que haja alguma funcionalidade específica que você precise que o Versatile Banner ofereça, talvez seja melhor criar seu próprio banner HTML simples em um novo componente. Exemplo aproximado:
Adicione o seguinte à seção “Após o Cabeçalho” comum:
<a href="https://meta.discourse.org">
<div class="custom-banner">
<h2>Este é um banner personalizado!</h2>
</div>
</a>
Isso ocorre porque você está executando a versão 2.6.0.beta2 do Discourse. O commit ao qual você linkou requer a versão 2.6.0.beta3 ou superior. Você notará que o commit ao qual você linkou adicionou um arquivo discourse-compatibility para garantir que você não atualize para um commit incompatível com sua versão do Discourse.
Olá @tshenry,
Quero instalar o componente mais de uma vez para que possa usar cada instância para exibir banners diferentes em categorias distintas. Por isso, desativei a opção “mostrar na página inicial” e utilizei a condição “URL deve conter”, mas isso impede que o componente principal, que uso para exibi-lo apenas na página inicial, funcione. Você poderia me sugerir uma solução alternativa ou isso é um bug? Obrigado! (:
Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.
