Sto appena configurando il mio sito e sto cercando di aggiungere un’immagine all’intestazione superiore.
Le istruzioni in ‘Impostazioni > Branding’ dicono:
Utilizza un’immagine rettangolare larga con un’altezza di 120 e un rapporto d’aspetto superiore a 3:1
quindi sto usando un’immagine PNG di dimensioni 120px x 2000px, e mi aspettavo che fosse posizionata a sinistra e riempisse completamente l’intestazione contenuta, ma non lo fa!! Cosa ho sbagliato?
Dallo screenshot, sembra che l’immagine sia correttamente impostata sul lato sinistro. L’intestazione di Discourse viene visualizzata all’interno di un div wrap che ha la sua larghezza vincolata. Questo è il motivo per cui il logo non è completamente a sinistra dello schermo.
Le istruzioni chiedono di caricare un’immagine con un’altezza di 120px, ma quando quell’immagine viene visualizzata su Discourse, la sua altezza viene ridotta a circa 31px. Ciò significa che la larghezza dell’immagine caricata verrà divisa per 4 quando viene visualizzata sul tuo sito. A me sembra che il logo nello screenshot sia di circa 660px, quindi penso che venga visualizzato correttamente.
Se hai a disposizione un logo più stretto, potrebbe essere una buona idea provarlo e vedere come appare.
Grazie Simon, vorrei che il logo riempisse completamente l’intestazione, è possibile? Anche con una larghezza dell’immagine ridotta, è comunque vincolato a un’altezza di 31px e non ha un bell’aspetto.
È teoricamente possibile riempire la maggior parte dell’intestazione, ma probabilmente richiederà qualche prova ed errore per farlo correttamente. Potresti scoprire di dover regolare il CSS del tuo sito per riuscirci. Se sei interessato a farlo, consulta la Guida per principianti all’uso dei temi Discourse e la Guida per sviluppatori ai temi Discourse.
Dalle nostre istruzioni per l’impostazione logo, penso che dovremmo fornire un rapporto d’aspetto ottimale. Il logo nello screenshot ha un rapporto d’aspetto superiore a 3:1, ma mi sembra troppo largo. Se osservi il logo utilizzato sul forum Discourse Meta, vedrai che viene visualizzato a circa 150 x 40 pixel. Quel rapporto d’aspetto mi sembra ideale, leggermente inferiore a 4:1.
Per ottenere il tuo effetto, potresti voler utilizzare del CSS.
Esempio:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
Penso che tu non abbia colto il mio obiettivo. Non si tratta dell’effetto, ma di riempire la casella dell’intestazione con un’immagine, che attualmente è limitata a un’altezza di 31 px.
Puoi linkare qui la tua immagine?
Quindi ho capito il tuo problema. Tuttavia, se ottenere ciò che desideri con un’immagine è difficile, perché non caricare il logo senza il gradiente e aggiungere il gradiente tramite CSS? A me sembra più semplice e diretto. 
Ma forse l’immagine finale non sarà ottenibile con il CSS?
Sì, corretto.
Ho appena trovato questo forum che sembra ottenere ciò che voglio.
Continuando a cercare, ho trovato il CSS che hanno utilizzato, ma sono nuovo qui e sto ancora cercando di capire come aggiungere il CSS per apportare tali modifiche.
Nel tuo sito di esempio, vengono utilizzate 2 immagini.
Un logo con sfondo trasparente e un’immagine di sfondo su d.header:
.d-header {
background: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg") center center;
}
Sì, sembra che questa sia la strada da seguire 
Devo solo capire ora come aggiungere quel CSS.
Sto utilizzando il tema “Shades of blue”.
Sto seguendo le guide di Discourse, ma forse devo leggerne ancora di più.
Per aggiungere CSS, secondo me il modo migliore è creare un nuovo componente tema, per evitare che le tue modifiche vengano sovrascritte se aggiorni il tema corrente.
Vai nel pannello di amministrazione → personalizza → temi → componenti → installa → Crea nuovo
Grazie, sono riuscito a seguire il tuo tutorial qui sopra e sono quasi arrivato!
Mi hai aiutato a capire un po’ di più su come funziona Discourse.
Stasera dedicherò del tempo per imparare ancora di più.
Grazie ancora per il tuo aiuto.
Con riferimento alla intestazione talksurf;
Posso vedere da dove proviene l’immagine di sfondo, ma non l’immagine ‘talksurf’ a sinistra, che fluttua sopra l’immagine di sfondo.
Aggiungere ‘talksurf’ come immagine in Impostazioni>Brand>logo risulta in un’immagine molto più piccola, poiché Discourse la riduce da un’altezza originale di 120px a soli 31px. Talksurf è molto più alto di 31px.
Il logo di Talksurf è un logo standard, caricato nella sezione brand dell’amministrazione.
Ho caricato lo stesso identico logo e ho ottenuto un logo alto 40px senza alcuna personalizzazione:
Quindi non capisco come possa essere di 31px sul tuo forum. Hai un link al logo così posso controllare l’HTML e il CSS?
Inoltre, ecco come scoprire come hanno personalizzato l’intestazione:
Grazie per l’aiuto, l’URL è https://yas-cfr.discourse.group/ e, come puoi vedere, usando lo stesso logo di te, ottengo un’altezza di 35px, che è diversa dalla tua (40px).
Le dimensioni dell’immagine talksurf sono 322 x 63px.
È necessario rimuovere questa regola CSS che hai:
.d-header #site-logo {
max-height: 35px !important;
}
Forse è qualcosa di scritto nel tuo tema, quindi devi sovrascriverlo.
Tieni presente che, poiché la regola utilizza !important, dovrai aggiungerlo anche nella tua regola:
.d-header #site-logo {
max-height: none !important;
}
