Banner versatile

[Discourse]

	Riepilogo	Versatile Banner aggiunge un banner personalizzabile al tuo sito.
	Anteprima	Anteprima su Discourse Theme Creator
	Collegamento al Repository	https://github.com/discourse/discourse-versatile-banner
	Nuovo a Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Poiché questo è un componente del tema #ufficiale mantenuto dal team di Discourse, le richieste di #supporto, segnalazioni di bug, problemi di ux e richieste di #funzionalità possono essere inviate nelle rispettive categorie qui su Meta, contrassegnate con l’etichetta appropriata del componente del tema. Clicca su un link sottostante per crearne uno.

 Supporto  Bug  UX  Funzionalità

Funzionalità

Questo componente del tema è un’evoluzione dei precedenti sforzi relativi ai banner. L’obiettivo è fornire maggiore facilità e flessibilità attraverso l’uso delle impostazioni del tema.

Di seguito sono riportati alcuni punti salienti delle funzionalità:

• Limitare la visualizzazione agli utenti connessi o agli utenti anonimi
• Limitare la visualizzazione esclusivamente a dispositivi mobili o desktop
• Limitare la visualizzazione a pagine specifiche
• Opzioni per la chiusura, l’espansione e la visualizzazione sempre attiva
• Opzione per la larghezza completa del browser
• Gestione dei colori
• Personalizzazione dell’intestazione e delle colonne utilizzando HTML (vedi sotto per ulteriori dettagli)
• Opzione per lo stato persistente (vedi sotto per ulteriori dettagli)

Personalizzazione del contenuto del banner

Il contenuto del banner è suddiviso nell’intestazione principale e nelle colonne. Puoi avere fino a 5 colonne nel tuo banner; tuttavia, il numero consigliato è 3 o meno a causa delle limitazioni di larghezza. Sono forniti modelli HTML che possono essere personalizzati per soddisfare le tue esigenze individuali. Puoi anche controllare la larghezza di ogni colonna e aggiungere qualsiasi immagine o icona Font Awesome desideri nella parte superiore di ciascuna colonna.

Utilizzo dell’opzione per lo stato persistente

L’opzione per lo stato persistente si basa su fino a due cookie. Questi cookie conterranno un nome per il banner e un valore vero/falso relativo allo stato del banner. Se hai preoccupazioni riguardo all’uso dei cookie sul tuo sito, è meglio evitare di utilizzare questa impostazione. Scegliere un’opzione di tempo relativo per l’impostazione cookie_lifespan garantirà che il banner rimanga chiuso/espanso/collassato per quella durata dopo che l’utente ha premuto il pulsante appropriato. Senza questa impostazione, il banner si ripristina ad ogni caricamento completo della pagina. Se apporti una modifica al banner e vuoi assicurarti che tutti gli utenti vedano tali modifiche, anche quelli che avevano precedentemente chiuso il banner, assicurati di modificare il “nome del cookie”. Ciò ripristinerà essenzialmente qualsiasi stato persistente, consentendo poi all’utente di chiudere il banner una volta ancora.

Impostazioni

Nome	Descrizione
show for members	Visualizza il banner per gli utenti connessi al forum
show for anon	Visualizza il banner per gli utenti anonimi
display on mobile	Visualizza il banner sui dispositivi mobili
display on desktop	Visualizza il banner sui computer desktop
display on homepage	Visualizza il banner nella homepage
url must contain	Inserisci i percorsi che devono visualizzare il banner. Aggiungi * alla fine del percorso come carattere jolly
dismissible	Consenti agli utenti di chiudere il banner
collapsible	Consenti agli utenti di espandere e collassare il banner
default collapsed state	Stato di collasso predefinito quando l’impostazione collapsible è abilitata
cookie lifespan	La durata del cookie utilizzato per ricordare se il banner è stato chiuso, espanso o collassato. Se impostato su “none”, NON verranno utilizzati cookie con questo componente e eventuali cookie precedentemente creati relativi al banner verranno eliminati la prossima volta che un utente esegue un caricamento completo della pagina. I valori sono misurati come singola unità, quindi impostare “year” corrisponderà a un anno, “week” a una settimana, ecc.
cookie name	Quando vengono apportate modifiche importanti al banner, devi modificare il nome del cookie per garantire che tutti i tuoi utenti vedano le modifiche.
full width banner	Visualizza il banner con la larghezza completa del browser
swap default positioning	Se è attivo un altro componente relativo al banner, utilizza questa opzione per scambiare la sua posizione con Versatile Banner
plugin outlet	below-site-header lo posiziona sopra la barra laterale, above-main-container lo posiziona sopra il contenuto a lato della barra laterale
banner background image	L’URL sorgente per l’immagine di sfondo. Suggerimento: puoi caricare un’immagine nel tuo tema principale e utilizzare l’URL da essa, ma assicurati di non utilizzare la sezione “Uploads” di questo componente. Tutti i caricamenti aggiunti a questo componente verranno eliminati ogni volta che viene aggiornato.
banner background image dark	L’URL sorgente per l’immagine di sfondo quando viene rilevata la modalità scura di sistema.
background color	Utilizzato al posto di un’immagine di sfondo
background color dark	Utilizzato al posto di un’immagine di sfondo quando viene rilevata la modalità scura di sistema.
primary text color	Il colore del testo principale del banner
primary text color dark	Il colore del testo principale del banner quando viene rilevata la modalità scura di sistema
secondary text color	Il colore del testo dell’icona e delle intestazioni di testo, e il colore di sfondo del pulsante.
secondary text color dark	Il colore del testo dell’icona e delle intestazioni di testo, e il colore di sfondo del pulsante quando viene rilevata la modalità scura di sistema.
link text color	Il colore del testo dei collegamenti all’interno del banner
link text color dark	Il colore del testo dei collegamenti all’interno del banner quando viene rilevata la modalità scura di sistema.

Traduzione	Predefinito
close.title	Chiudi il banner
close.label	Chiudi
toggle.title	Espandi/Collassa il banner
toggle.collapse_label	Collassa
toggle.expand_label	Espandi

Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Pro, Business ed Enterprise.

[Dhruvi_Butti]

Hey people! I want to make all the text left-aligned but the CSS theme is not working for me. Can anyone tell me how exactly can we do it?

[tshenry (Taylor)]

Is this along the lines of what you are after?

If so, here’s some quick and dirty CSS that will hopefully get you started:

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

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.

[Dhruvi_Butti]

This worked for me. Thank you so much.

[charlie788 (Charlie)]

Hello,

Is it possible to transform the background image into a clickable image ?

Thank you for your response.

[SidV]

@charlie788

Is it possible to transform the background image into a clickable image ?

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.

[Astra]

How can I adjust the height of the banner?

[LeCoyote (https://hec.fm)]

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

Did I miss something ?

[Astra]

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.

[tshenry (Taylor)]

@LeCoyote

when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.

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.

@Astra

How can I adjust the height of the banner?

@Astra

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.

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.

[MrDavis97 (Miles Davis)]

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.

Here, the chevron icon is up:

But after clicking on docs, and then returning to the homepage, the chevron icon is in the opposite orientation.

This seems like pretty strange behavior…

[augustinecicc]

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.

Any idea what could be going wrong?

[tshenry (Taylor)]

I just pushed a small update to the component.

Fix show/hide on mobile/desktop behavior and remove ember selectors

@LeCoyote

when I uncheck the “display on desktop”… both desktop and mobile Versatile Banner disappear.

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!

@augustinecicc

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.

You will need to add /login to the url must contain theme setting. See this post for more detail.

@MrDavis97

I think I’m experiencing a bug on my site with regards to cookie lifespan in maintaining the expanded/collapsed state.

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.

[Dimitri_Nightmare (chris)]

I’m using versatile banner and i try to turn the banner into a giant link that redirect to another website
how can i do that ?

try to change-it via un script : '“api.changeWidgetSetting(‘banner-content-widget’, ‘href’, '<site_adresse>” but the versatille banner stop working

[augustinecicc]

@tshenry

You will need to add /login to the url must contain theme setting. See this post for more detail.

Thanks, that’s great. It’s working perfectly now!

[tshenry (Taylor)]

You might be able to do something like:

<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>

and the following to the Common “CSS” section:

 .custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

That would give you a simple banner that’s fully clickable:

[mercury233]

I’m installing this component from git, but it seems that I didn’t got the latest codes, FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub wasn’t updated in my site https://ygobbs.com/.

[tshenry (Taylor)]

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.

[mercury233]

wow it is amazing that discourse will find elder version for me instead of preventing me to install the component. Thank you!

[gassim (Al-Gassim Sharaf Addin)]

Hi @tshenry
I want to install the component more than once so that I can use each component to give different categories different banners; therefore, I disabled the show on homepage and used the URL must contain, but this stops the main one which I use to display it in the homepage only. Would you either give me a different solution or is this a bug? Thanks! (: