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.
You’ll want to create a new component called “Versatile Banner Customizations” and add the above CSS to the Common section. Make sure you add the new component to any active themes that use the Versatile Banner to pick up the customization.
Can you give us an example?
Why will you do that?
I mean… all the background image will be a link?
If a user click everywhere on banner will be redirected to that link.
I can’t imagine the use.
Hi @tshenry I am using the Versatile Banner theme-component but it disappears when I uncheck “display on desktop”.
Indeed I would like to display the banner only on mobiles.
But when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.
Here is the site if you want to check : https://hec.fm
Is it possible to have the links displayed horizontally on mobile as well? I was a bit surprised to see them show up underneath each other in stead of horizontally.
Thanks for reporting this! Sorry for the delayed response. I can reproduce what you describe. I’m pretty sure I know what’s going on. I’ll take a look later this week and get back to you.
The height of the banner is primarily dependent on its content, but you can adjust anything as needed with your own CSS. I’m not sure how well you will be able to fit three columns horizontally on mobile, but you can certainly try with custom CSS as well! Have a look at Make CSS changes on Your Site for some tips.
I think I’m experiencing a bug on my site with regards to cookie lifespan in maintaining the expanded/collapsed state. What I want is for my site to remember when users collapse the banner and expand the banner, and keep it on whatever they have no matter what. And it works as expected when I stay on the home page or click on topics. However, as soon as I go to the admin panel, user settings, faq, about, tos, privacy, or docs, and then return to the home page, things get wacky, and sometimes the banner is the opposite of what it was set to, and sometimes even the chevron icon to indicate collapse or expand is in the incorrect orientation.
Just discovered that the Versatile Banner isn’t appearing on the login page for our forum (it’s a private forum) like it used to.
‘Display the banner for anonymous users’ is checked in the component settings
Looking at the html there is a div with class ‘banner-box’ inside a nest of divs with classes ‘emberX’ but nothing inside the div with class ‘banner-box’ - unlike the html for logged in users.
This should be fixed with the above. I’m really sorry it took so long to get a fix in place. Thanks again for your report!
You will need to add /login to the url must contain theme setting. See this post for more detail.
This has been reported once or twice in the past. Unfortunately I have never able to reproduce it. I’ll try again when I get a chance using your exact steps and see if I have any luck.
<script type="text/discourse-plugin" version="0.10.0">
// Add the link to the heading
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;
}
});
// Add the link to the rest of the content
api.reopenWidget("banner-content-widget", {
html(attrs) {
let bannerContent = this._super();
bannerContent.tagName = "A";
bannerContent.properties.href = "https://meta.discourse.org";
return bannerContent;
}
});
</script>
And add a CSS rule to adjust the link color
.banner-box a {
color: var(--primary);
}
Unless there’s specific functionality you need that the Versatile Banner offers, I wonder if you would be better off just making your own simple HTML banner in a new component. Rough example:
Add the following to the Common “After Header” section:
<a href="https://meta.discourse.org">
<div class="custom-banner">
<h2>This is a customer banner!</h2>
</div>
</a>
This is because you are running Discourse version 2.6.0.beta2. The commit you linked to requires 2.6.0.beta3 and above. You’ll notice that the commit you linked to has added a discourse-compatibility file to ensure you don’t update to a commit that is incompatible with your Discourse version.
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.
