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]

Ehi a tutti! Voglio allineare tutto il testo a sinistra, ma il tema CSS non funziona per me. Qualcuno può dirmi esattamente come fare?

[tshenry (Taylor)]

È questo quello che stavi cercando?

Se sì, ecco un po’ di CSS veloce e pratico che dovrebbe aiutarti a iniziare:

.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;
    }
  }
}

Dovrai creare un nuovo componente chiamato “Personalizzazioni versatili per banner” e aggiungere il CSS sopra alla sezione Comune. Assicurati di aggiungere il nuovo componente a tutti i temi attivi che utilizzano il Banner Versatile per applicare le personalizzazioni.

[Dhruvi_Butti]

Ha funzionato per me. Grazie mille.

[charlie788 (Charlie)]

Ciao,

È possibile rendere l’immagine di sfondo cliccabile?

Grazie per la risposta.

[SidV]

@charlie788

È possibile trasformare l’immagine di sfondo in un’immagine cliccabile?

Puoi darci un esempio?
Perché vorresti farlo?
Intendo… tutte le immagini di sfondo diventeranno link?
Se un utente clicca ovunque sul banner, verrà reindirizzato a quel link.
Non riesco a immaginare l’utilità.

[Astra]

Come posso regolare l’altezza del banner?

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

Ciao @tshenry, sto utilizzando il componente tema Versatile Banner, ma scompare quando deseleziono “mostra su desktop”. Vorrei infatti visualizzare il banner solo sui dispositivi mobili.

Tuttavia, quando deseleziono “mostra su desktop”, sia il banner Versatile per desktop che quello per mobile scompaiono.
Ecco il sito se vuoi controllare: https://hec.fm

Ho forse saltato qualcosa?

[Astra]

È possibile visualizzare i link in orizzontale anche su mobile? Sono rimasto un po’ sorpreso nel vederli uno sotto l’altro invece che in orizzontale.

[tshenry (Taylor)]

@LeCoyote

Quando deseleziono “Mostra sul desktop”… sia la Banner Versatile desktop che quella mobile scompaiono.

Grazie per aver segnalato il problema! Scusa per il ritardo nella risposta. Sono riuscito a riprodurre il comportamento che hai descritto. Sono abbastanza sicuro di aver capito cosa sta succedendo. Darò un’occhiata più avanti questa settimana e ti farò sapere.

@Astra

Come posso regolare l’altezza del banner?

@Astra

È possibile visualizzare i link anche in orizzontale su mobile? Sono rimasto un po’ sorpreso nel vederli uno sotto l’altro invece che in orizzontale.

L’altezza del banner dipende principalmente dal suo contenuto, ma puoi regolare tutto come necessario utilizzando il tuo CSS personale. Non sono sicuro di quanto sia fattibile disporre tre colonne in orizzontale su mobile, ma puoi assolutamente provare anche tu con CSS personalizzato! Dai un’occhiata a Making custom CSS changes on your site per alcuni consigli.

[MrDavis97 (Miles Davis)]

Credo di aver riscontrato un bug sul mio sito relativo alla durata dei cookie nel mantenere lo stato espanso/collassato. Ciò che desidero è che il sito ricordi quando gli utenti collassano o espandono il banner, mantenendo sempre l’ultimo stato impostato, indipendentemente dalle azioni successive. Il comportamento è corretto quando rimango sulla home page o clicco sui topic. Tuttavia, non appena vado al pannello di amministrazione, alle impostazioni utente, alle FAQ, alla pagina Chi siamo, ai Termini di servizio, alla Privacy o alla documentazione, e poi torno alla home page, le cose si complicano: a volte il banner appare nello stato opposto rispetto a quello impostato, e talvolta anche l’icona della freccia che indica l’espansione o il collasso è orientata in modo errato.

Qui, l’icona della freccia è rivolta verso l’alto:

Ma dopo aver cliccato su Documentazione e poi essere tornato alla home page, l’icona della freccia è orientata in direzione opposta.

Questo sembra un comportamento piuttosto strano…

[augustinecicc]

Ho appena scoperto che il Banner Versatile non appare più sulla pagina di accesso del nostro forum (è un forum privato) come faceva prima.

L’opzione ‘Mostra il banner per gli utenti anonimi’ è selezionata nelle impostazioni del componente.

Analizzando l’HTML, c’è un div con la classe ‘banner-box’ all’interno di una serie di div con le classi ‘emberX’, ma il div con classe ‘banner-box’ è vuoto, a differenza dell’HTML per gli utenti connessi.

Avete idea di cosa potrebbe non funzionare?

[tshenry (Taylor)]

Ho appena spinto un piccolo aggiornamento per il componente.

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

@LeCoyote

Quando deseleziono “visualizza su desktop”… sia la Versatile Banner desktop che quella mobile scompaiono.

Questo dovrebbe essere risolto con quanto sopra. Mi scuso davvero per averci messo tanto a implementare una correzione. Grazie ancora per la tua segnalazione!

@augustinecicc

Ho appena scoperto che la Versatile Banner non appare più nella pagina di accesso del nostro forum (è un forum privato) come faceva prima.

Dovrai aggiungere /login all’impostazione del tema “url deve contenere”. Consulta questo post per maggiori dettagli.

@MrDavis97

Credo di aver riscontrato un bug sul mio sito relativo alla durata del cookie nel mantenere lo stato espanso/ridotto.

Questo è stato segnalato una o due volte in passato. Purtroppo non sono mai riuscito a riprodurlo. Riproverò appena avrò occasione, seguendo esattamente i tuoi passaggi, per vedere se riesco a individuarlo.

[Dimitri_Nightmare (chris)]

Sto usando il versatile banner e provo a trasformarlo in un link gigante che reindirizzi a un altro sito web. Come posso farlo?

Ho provato a modificarlo tramite uno script: ‘api.changeWidgetSetting(‘banner-content-widget’, ‘href’, ‘<sito_indirizzo>’)’ ma il versatile banner smette di funzionare.

[augustinecicc]

@tshenry

Dovrai aggiungere /login all’impostazione del tema “url must contain”. Consulta questo post per maggiori dettagli.

Grazie, è fantastico. Ora funziona perfettamente!

[tshenry (Taylor)]

Potresti fare qualcosa del genere:

<script type="text/discourse-plugin" version="0.10.0">
  // Aggiungi il link all'intestazione
  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;
    }
  });
  
  // Aggiungi il link al resto del contenuto
  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 aggiungi una regola CSS per regolare il colore del link:

.banner-box a {
    color: var(--primary);
}

A meno che tu non abbia una funzionalità specifica che richiede il “Versatile Banner”, mi chiedo se non ti convenga creare direttamente un semplice banner HTML in un nuovo componente. Esempio approssimativo:

Aggiungi quanto segue alla sezione comune “Dopo l’intestazione”:

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>Questo è un banner personalizzato!</h2>
  </div>
</a>

e quanto segue alla sezione comune “CSS”:

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

Questo ti fornirà un banner semplice completamente cliccabile:

[mercury233]

Sto installando questo componente da git, ma sembra che non abbia ottenuto l’ultimo codice: FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub non è stato aggiornato sul mio sito https://ygobbs.com/.

[tshenry (Taylor)]

Questo è dovuto al fatto che stai eseguendo la versione 2.6.0.beta2 di Discourse. Il commit a cui hai fatto riferimento richiede la versione 2.6.0.beta3 o superiore. Noterai che il commit a cui hai fatto riferimento ha aggiunto un file discourse-compatibility per assicurarsi che tu non aggiorni a un commit incompatibile con la tua versione di Discourse.

[mercury233]

wow, è incredibile che Discourse trovi una versione più vecchia per me invece di impedirmi di installare il componente. Grazie!

[gassim (Al-Gassim Sharaf Addin)]

Ciao @tshenry

Vorrei installare il componente più di una volta, in modo da poter utilizzare ciascuna istanza per mostrare banner diversi per diverse categorie. Di conseguenza, ho disattivato l’opzione “Mostra nella homepage” e ho utilizzato la condizione “L’URL deve contenere”, ma questo impedisce il funzionamento dell’istanza principale che uso per mostrarlo solo nella homepage. Potresti suggerirmi una soluzione alternativa o si tratta di un bug? Grazie! (: