Personalizza il branding del tuo sito

[Discourse]

Questo è un tutorial non tecnico che ti guiderà nella personalizzazione del branding e dell’aspetto del tuo sito Discourse.

Livello utente richiesto: Amministratore

Vuoi personalizzare il branding del tuo sito, ma non sai da dove iniziare? Continua a leggere per scoprirlo!

La procedura guidata di configurazione

Discourse è molto personalizzabile! Un buon punto di partenza per le personalizzazioni del sito è accedere al tuo account amministratore sul sito ed eseguire la procedura guidata di configurazione del sito.

L’opzione “Configura altro” della procedura guidata di configurazione ti consente di selezionare un logo del sito, uno schema di colori, un font e uno stile della pagina iniziale per il sito:

Puoi visualizzare in anteprima le opzioni disponibili direttamente in questa pagina. Fai clic sul pulsante “Avanti” quando hai trovato le impostazioni che funzionano per te. Non preoccuparti, puoi sempre modificare queste impostazioni in seguito se decidi che non sono ciò che stai cercando.

Temi del sito

Una volta che hai una configurazione di base, è ora di personalizzare ulteriormente il tuo sito!

I temi sono personalizzazioni ampie che modificano più elementi dello stile del design del tuo forum e spesso includono anche funzionalità front-end aggiuntive. I temi hanno la capacità di cambiare significativamente l’aspetto e il layout del tuo forum.

La categoria Theme su Meta ospita una varietà di temi pre-creati che puoi utilizzare sul tuo sito per personalizzare l’aspetto del tuo sito. Questo è il posto migliore per cercare un tema da utilizzare sul tuo sito. Vai avanti e scegli un tema che ti piacerebbe usare per il tuo sito da questa categoria.

Una volta deciso un tema da utilizzare per il tuo sito, puoi aggiungerlo al tuo sito dalla pagina Admin -> Personalizza -> Temi (situata su .../admin/customize/themes). Puoi anche apportare modifiche al tema del tuo sito, o persino crearne uno completamente nuovo da questa pagina.

La Guida per principianti all’uso dei temi Discourse è un corso intensivo sulle basi dei temi Discourse e fornisce una panoramica su come installare temi sul tuo sito Discourse. Leggi questa guida per istruzioni su come installare il tema che hai scelto.

Puoi anche trovare maggiori informazioni su come utilizzare, creare e condividere i tuoi temi in:

• Guida per designer ai temi Discourse
• Guida per sviluppatori ai temi Discourse

Schemi di colori

Puoi personalizzare ulteriormente il tuo sito regolando lo schema di colori dalla pagina “Admin → Personalizza → Colori” (situata su /admin/customize/colors).

Creiamo un nuovo schema di colori da utilizzare sul tuo sito facendo clic sul pulsante “+Nuovo” in questa pagina:

Seleziona uno schema di colori esistente su cui basare il tuo nuovo schema di colori, quindi personalizza i colori del tuo nuovo schema facendo clic sul colore accanto a ciascuna sezione di colore:

Non dimenticare di nominare il tuo nuovo schema di colori e salvare le modifiche una volta terminato!

Hai bisogno di aiuto per decidere i colori? Uno strumento per la scelta dei colori come http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF può essere molto utile per questo!

Una volta che sei soddisfatto del tuo schema di colori, puoi assegnarlo al tuo tema corrente e visualizzarlo in anteprima per vedere le modifiche al tuo sito riflesse in tempo reale.

Le tue modifiche verranno anche applicate automaticamente al sito una volta ricaricata la pagina.

Per ulteriori informazioni su come utilizzare gli schemi di colori all’interno di Discourse, vedi:

Create and share a color scheme

Componenti del tema

Similmente ai temi, Discourse ha anche “Componenti del tema” che puoi utilizzare per modificare elementi superficiali del design del tuo forum, o aggiungere funzionalità front-end aggiuntive. Più piccoli e mirati dei temi completi, generalmente (anche se non sempre) possono essere combinati con altri componenti del tema per creare un design del forum su misura per la tua community.

La categoria Theme component su Meta contiene tutti i componenti del tema ufficiali e non ufficiali di Discourse. Esamina i componenti del tema elencati lì, e se desideri installarne qualcuno sul tuo sito, segui semplicemente le istruzioni qui: L’interfaccia dei temi di Discourse e come installare i componenti del tema

Alcuni dei componenti del tema Discourse più popolari includono:

• Dark/Light Mode Toggle
• Brand Header
• DiscoTOC - automatic table of contents
• Custom Header Links
• Versatile Banner

Il tag theme-guides su Meta contiene anche molte guide pratiche con idee per personalizzare ulteriormente il tuo sito con i Componenti del tema.

Branding del sito

Oltre ai loghi scelti nella procedura guidata di configurazione del sito, Discourse ha anche diverse altre impostazioni relative al branding del sito nella pagina “Admin → Impostazioni → Branding” (situata su /admin/site_settings/category/branding) che puoi utilizzare per aggiungere immagini e loghi personalizzati al tuo sito.

Da questa pagina, puoi aggiungere i seguenti tipi di loghi al tuo sito:

• logo - L’immagine del logo in alto a sinistra del tuo sito. Utilizza un’immagine rettangolare larga con un’altezza di 120 e un rapporto d’aspetto superiore a 3:1. Se lasciato vuoto, verrà mostrato il testo del titolo del sito.
• logo small - La piccola immagine del logo in alto a sinistra del tuo sito, visibile scorrendo verso il basso. Utilizza un’immagine quadrata di 120 × 120. Se lasciato vuoto, verrà mostrata una glifo della casa.
• digest logo - L’immagine del logo alternativa utilizzata in cima al riepilogo via email del tuo sito. Utilizza un’immagine rettangolare larga. Non utilizzare un’immagine SVG. Se lasciato vuoto, verrà utilizzata l’immagine dall’impostazione logo.
• mobile logo - Il logo utilizzato sulla versione mobile del tuo sito. Utilizza un’immagine rettangolare larga con un’altezza di 120 e un rapporto d’aspetto superiore a 3:1. Se lasciato vuoto, verrà utilizzata l’immagine dall’impostazione logo.
• logo dark - Alternativa allo schema scuro per l’impostazione del sito logo.
• logo small dark - Alternativa allo schema scuro per l’impostazione del sito logo small.
• large icon - Immagine utilizzata come base per altre icone di metadati. Dovrebbe idealmente essere più grande di 512 x 512. Se lasciato vuoto, verrà utilizzato logo_small.
• manifest icon - Immagine utilizzata come logo/immagine di avvio su Android. Verrà ridimensionata automaticamente a 512 × 512. Se lasciato vuoto, verrà utilizzata large_icon.
• manifest screenshots - Screenshot che mostrano le funzionalità e l’usabilità della tua istanza nella sua pagina di prompt di installazione. Tutte le immagini devono essere caricamenti locali e delle stesse dimensioni.
• favicon - Un favicon per il tuo sito, vedi Favicon - Wikipedia. Per funzionare correttamente su una CDN deve essere un png. Verrà ridimensionato a 32x32. Se lasciato vuoto, verrà utilizzata large_icon.
• apple touch icon - Icona utilizzata per i dispositivi touch Apple. Verrà ridimensionata automaticamente a 180x180. Se lasciato vuoto, verrà utilizzata large_icon.
• opengraph image - Immagine opengraph predefinita, utilizzata da molte app e piattaforme per le anteprime dei collegamenti web quando una pagina non ha altre immagini adatte. Dovrebbe idealmente essere quadrata. Se lasciato vuoto, verrà utilizzata large_icon.
• twitter summary large image - Scheda Twitter “summary large image” (dovrebbe essere larga almeno 280 pixel e alta almeno 150 pixel, non può essere .svg). Se lasciata vuota, vengono generati metadati della scheda normale utilizzando l’opengraph_image, purché anche questa non sia un .svg.

Per ottenere i migliori risultati qui, consigliamo di seguire le linee guida sulle dimensioni per ogni tipo di logo.

Personalizzazioni aggiuntive

Ora che hai aggiunto un tema personalizzato, uno schema di colori, alcuni loghi del marchio e magari alcuni componenti del tema al tuo sito, hai finito con tutte le personalizzazioni di base del sito!

Se stai ancora cercando altri modi per personalizzare il tuo sito Discourse, ti consigliamo di leggere gli argomenti seguenti che potrebbero interessarti:

• Personalizza qualsiasi testo in Discourse
• Customizing the Discourse outer email template
• Creating and configuring custom user fields
• Configure custom emoji

[jordan-violet]

Quindi, cosa fa effettivamente Manifest screenshots? Dove vengono utilizzate queste schermate? È quando qualcuno installa la tua community come app locale tramite il browser? Le immagini sono quelle che appaiono se rendi la tua community scopribile con Discourse Discover?

[Moin]

Vedo queste schermate quando uso l’opzione “Aggiungi alla schermata Home” su Chrome sul mio dispositivo Android

[jordan-violet]

Interessante! Pensavo facessero così, ma non li ho visti quando ho installato sul mio desktop (Chrome, Windows). Potrei non aver dato loro abbastanza tempo per caricarsi/propagarsi da qualche parte.

Sono contento di sapere che avevo ragione su cosa fanno, però!

[calebhearth]

@Discourse

Per ottenere i migliori risultati, si consiglia di seguire le linee guida sulle dimensioni per ciascun tipo di logo.

Sembra che questa sezione sia stata omessa per errore,

[Moin]

Dopo averlo letto due volte, penso di aver capito. Le linee guida sulle dimensioni sono incluse sopra. Ad esempio:

@Discourse

• logo - L’immagine del logo in alto a sinistra del tuo sito. Usa un’immagine rettangolare larga con un’altezza di 120 e un rapporto d’aspetto maggiore di 3:1. Se lasciato vuoto, verrà mostrato il testo del titolo del sito.

Penso che in generale questa guida sia piuttosto obsoleta. Non è più possibile aggiungere un logo o configurare l’aspetto nella procedura guidata. La pagina di amministrazione dei temi ora ha un aspetto completamente diverso e gli schemi di colori sono stati rinominati in palette di colori.
Il componente del tema per l’interruttore della modalità scura/chiara è stato spostato nel core. E il branding ha una nuova pagina di configurazione su /admin/config/logo.
Mi chiedo solo perché la dimensione menzionata nella pagina di configurazione sia diversa dalla descrizione quando guardo l’impostazione del sito.

600×80 è diverso da min. 360×120.

[nathank (Nathan Kershaw)]

Questo argomento è ormai un po’ obsoleto poiché queste cose sono state recentemente rielaborate.

Ecco i miei pensieri su alcuni suggerimenti minori (ma preziosi) per miglioramenti:

Some additional tweaks for Logos and Icons in the core settings

I’ve just set up a new site, and hit a few hiccoughs. First, I love the new admin settings (/admin/config/logo) - they are a vast improvement and visually very nice. Suggestion 1 That the new term “Square icon” be used instead of large_icon in the text explainers. The old name has been changed, but this hasn’t been followed through with in the text. Suggestion 2 That there is a separate Android icon under Mobile, as there is for iOS. At present, the Square Icon is used for the Android home …