Questo componente tema è un’evoluzione dei precedenti tentativi di creare banner. L’obiettivo è fornire maggiore facilità e flessibilità attraverso l’uso delle impostazioni del tema.
Limita la visualizzazione agli utenti loggati o agli utenti anonimi
Limita la visualizzazione esclusivamente a dispositivi mobili o desktop
Limita la visualizzazione a pagine specifiche
Opzioni di chiusura, espansione e visualizzazione permanente
Opzione per la larghezza completa del browser
Gestione dei colori
Personalizzazione dell’intestazione e delle colonne utilizzando HTML (vedi sotto per maggiori dettagli)
Opzione di stato persistente (vedi sotto per maggiori dettagli)
Personalizzazione del contenuto del banner
Il contenuto del banner è suddiviso in un’intestazione principale e in colonne. È possibile avere fino a 5 colonne nel banner, tuttavia il numero consigliato è di 3 o meno a causa delle limitazioni di larghezza. Sono forniti modelli HTML che possono essere personalizzati in base alle proprie esigenze. È inoltre possibile controllare la larghezza di ciascuna colonna e aggiungere qualsiasi immagine o icona Font Awesome in cima a ciascuna colonna.
Utilizzo dell’opzione di stato persistente
L’opzione di stato persistente si basa su un massimo di due cookie. Questi cookie conterranno un nome per il banner e un valore vero/falso relativo allo stato del banner. Se si hanno preoccupazioni riguardo all’utilizzo dei cookie sul proprio 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/compresso per tale periodo di tempo dopo che l’utente ha premuto il pulsante appropriato. Senza questa impostazione, il banner si resetta con ogni caricamento completo della pagina. Se si apportano modifiche al banner e si vuole assicurarsi che tutti gli utenti vedano le modifiche, anche quelli che avevano precedentemente chiuso il banner, assicurarsi di modificare il “nome del cookie”. Questo essenzialmente resetterà qualsiasi stato persistente, consentendo poi all’utente di chiudere nuovamente il banner.
Impostazioni
Nome
Descrizione
mostra per i membri
Mostra il banner agli utenti loggati nel forum
mostra per anonimi
Mostra il banner agli utenti anonimi
visualizza su mobile
Mostra il banner sui dispositivi mobili
visualizza su desktop
Mostra il banner sui computer desktop
visualizza nella homepage
Mostra il banner nella homepage
l’url deve contenere
Inserisci i percorsi che dovrebbero visualizzare il banner. Aggiungi * alla fine del percorso come carattere jolly
disattivabile
Consenti agli utenti di chiudere il banner
comprimibile
Consenti agli utenti di espandere e comprimere il banner
stato compresso predefinito
Stato compresso predefinito quando l’impostazione comprimibile è abilitata
durata del cookie
La durata del cookie utilizzato per ricordare se il banner è stato chiuso, espanso o compresso. Se impostato su “nessuno”, 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 unità singola, quindi impostare “anno” sarà un anno, “settimana” sarà una settimana, ecc.
nome del cookie
Quando vengono apportate modifiche importanti al banner, è necessario modificare il nome del cookie per assicurarsi che tutti gli utenti vedano le modifiche.
banner a larghezza intera
Visualizza il banner alla larghezza completa del browser
inverti posizione predefinita
Se è attivo un altro componente relativo ai banner, usa questa opzione per scambiarne la posizione con Versatile Banner
plugin outlet
below-site-header lo posiziona sopra la barra laterale, above-main-container lo posiziona sopra il contenuto accanto alla barra laterale
immagine di sfondo del banner
L’URL sorgente per la tua immagine di sfondo. Suggerimento: puoi caricare un’immagine nel tuo tema principale e utilizzare l’URL da quello, ma assicurati di non utilizzare la sezione “Uploads” di questo componente. Qualsiasi caricamento aggiunto a questo componente verrà eliminato ogni volta che viene aggiornato.
immagine di sfondo del banner scura
L’URL sorgente per la tua immagine di sfondo quando viene rilevata la modalità scura del sistema.
colore di sfondo
Utilizzato al posto di un’immagine di sfondo
colore di sfondo scuro
Utilizzato al posto di un’immagine di sfondo quando viene rilevata la modalità scura del sistema.
colore del testo primario
Il colore principale del testo del banner
colore del testo primario scuro
Il colore principale del testo del banner quando viene rilevata la modalità scura del sistema
colore del testo secondario
Il colore del testo delle intestazioni con icone e testo, e il colore di sfondo dei pulsanti.
colore del testo secondario scuro
Il colore del testo delle intestazioni con icone e testo, e il colore di sfondo dei pulsanti quando viene rilevata la modalità scura del sistema.
colore del testo dei link
Il colore del testo dei link all’interno del banner
colore del testo dei link scuro
Il colore del testo dei link all’interno del banner quando viene rilevata la modalità scura del sistema.
Traduzione
Predefinito
close.title
Chiudi il banner
close.label
Chiudi
toggle.title
Espandi/Comprimi il banner
toggle.collapse_label
Comprimi
toggle.expand_label
Espandi
Ospitato da noi? I componenti tema sono disponibili per l’uso sui nostri piani Pro, Business ed Enterprise.
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.
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à.
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
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.
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.
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:
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.
Ho appena spinto un piccolo aggiornamento per il componente.
Questo dovrebbe essere risolto con quanto sopra. Mi scuso davvero per averci messo tanto a implementare una correzione. Grazie ancora per la tua segnalazione!
Dovrai aggiungere /login all’impostazione del tema “url deve contenere”. Consulta questo post per maggiori dettagli.
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.
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.
<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>
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.
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! (:
Ospitato da noi? I componenti tema sono disponibili per l’uso sui nostri piani Pro, Business ed Enterprise.
Ospitato da noi? I componenti tema sono disponibili per l’uso sui nostri piani Pro, Business ed Enterprise.
