Je suis en train de configurer mon site et j’essaie d’ajouter une image dans la section d’en-tête supérieure.
Les instructions dans « Paramètres > Identité visuelle » indiquent :
Utilisez une image rectangulaire large avec une hauteur de 120 et un ratio d’aspect supérieur à 3:1
J’utilise donc une image PNG de 120 px × 2000 px, et je m’attendais à ce qu’elle soit positionnée à gauche et remplisse entièrement le conteneur de l’en-tête, mais ce n’est pas le cas !! Qu’ai-je fait de mal ?
D’après votre capture d’écran, il semble que l’image soit correctement placée à gauche. L’en-tête de Discourse est affiché à l’intérieur d’un div wrap dont la largeur est limitée. C’est la raison pour laquelle le logo n’est pas entièrement aligné à gauche de l’écran.
Les instructions vous demandent de télécharger une image d’une hauteur de 120 px, mais lorsque cette image est affichée sur Discourse, sa hauteur est réduite à environ 31 px. Cela signifie que la largeur de l’image que vous avez téléchargée est divisée par 4 lors de son affichage sur votre site. D’après ce que je vois, le logo de votre capture d’écran mesure environ 660 px, donc je pense qu’il est affiché correctement.
Si vous disposez d’un logo plus étroit, il pourrait être judicieux de l’essayer et de voir à quoi il ressemble.
Merci Simon, je voudrais que le logo remplisse entièrement l’en-tête, est-ce possible ? Même avec une largeur d’image réduite, il reste contraint à une hauteur de 31 px et cela ne rend pas bien.
Il est théoriquement possible de remplir la majeure partie de l’en-tête, mais cela nécessitera probablement quelques essais et erreurs pour obtenir le résultat souhaité. Vous constaterez peut-être que vous devez ajuster le CSS de votre site pour y parvenir. Si cela vous intéresse, consultez le Guide du débutant pour l’utilisation des thèmes Discourse et le Guide du développeur pour les thèmes Discourse.
En examinant nos instructions pour le paramètre logo, je pense que nous devrions indiquer un ratio d’aspect optimal. Le logo de votre capture d’écran a bien un ratio supérieur à 3:1, mais il me semble qu’il est trop large. Si vous regardez le logo utilisé sur le forum Discourse Meta, vous verrez qu’il est affiché à environ 150 x 40 px. Cela me semble être le ratio idéal, légèrement inférieur à 4:1.
Pour obtenir cet effet, vous pourriez utiliser un peu de CSS.
Exemple :
.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%);
}
Je pense que vous n’avez pas saisi mon objectif. Ce n’est pas l’effet qui m’intéresse, mais le fait de remplir la boîte d’en-tête avec une image, qui est actuellement limitée à une hauteur de 31 px.
Peux-tu mettre un lien vers ton image ici ?
Je comprends donc votre problème. Cependant, si réaliser ce que vous souhaitez avec une image est difficile, pourquoi ne pas télécharger le logo sans dégradé et ajouter le dégradé via CSS ? Cela me semble plus simple et plus direct. 
Mais peut-être que votre image finale ne pourra pas être obtenue avec du CSS ?
Oui, c’est exact.
Je viens de trouver ce forum qui semble réaliser ce que je souhaite.
En poursuivant mes recherches, j’ai trouvé le CSS qu’ils ont utilisé, mais je suis nouveau ici et j’essaie encore de comprendre comment ajouter du CSS pour apporter de telles modifications.
Sur votre site exemple, ils utilisent 2 images.
Un logo avec un fond transparent, et une image de fond sur 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;
}
Oui, cela semble être la bonne voie 
Je dois maintenant comprendre comment ajouter ce CSS.
J’utilise le thème ‘Shades of blue’.
Je parcours les guides de Discourse, mais je devrai peut-être en lire davantage.
Pour ajouter du CSS, je pense que la meilleure méthode consiste à créer un nouveau composant de thème, afin d’éviter que vos modifications ne soient écrasées lors d’une mise à jour de votre thème actuel.
Accédez à votre panneau d’administration → personnaliser → thèmes → composants → installer → Créer un nouveau
Merci, j’ai pu suivre votre tutoriel ci-dessus et je suis presque arrivé au bout !
Vous m’avez aidé à mieux comprendre le fonctionnement de Discourse.
Je vais passer un peu de temps ce soir pour en apprendre davantage.
Encore merci pour votre aide.
En référence à la discussion sur l’en-tête talksurf ;
Je vois d’où provient l’image de fond, mais pas l’image « talksurf » sur la gauche, qui flotte au-dessus de l’image de fond.
L’ajout de « talksurf » en tant qu’image dans Paramètres > Branding > logo résulte en une image beaucoup plus petite, car Discourse la réduit d’une hauteur originale de 120 px à seulement 31 px. Talksurf est bien plus grand que 31 px de haut.
Le logo de Talksurf est un logo standard, téléchargé dans la section de marque de l’administration.
J’ai téléchargé exactement le même logo et j’ai obtenu un logo de 40 px de hauteur sans aucune personnalisation :
Donc, je ne comprends pas comment il pourrait faire 31 px sur votre forum. Avez-vous un lien vers celui-ci afin que je puisse examiner le HTML et le CSS ?
De plus, voici comment découvrir comment ils ont personnalisé leur en-tête :
Merci pour votre aide. L’URL est https://yas-cfr.discourse.group/ et comme vous pouvez le voir, en utilisant le même logo que vous, j’obtiens une hauteur de 35 px, ce qui diffère de la vôtre (40 px).
La taille de l’image talksurf est de 322 x 63 px.
Vous devez supprimer cette règle CSS que vous avez :
.d-header #site-logo {
max-height: 35px !important;
}
Il est possible que cela provienne de votre thème, vous devrez donc le remplacer.
Notez que, comme la règle utilise !important, vous devrez également ajouter cela dans votre propre règle :
.d-header #site-logo {
max-height: none !important;
}
