Ceci est un tutoriel non technique qui vous guidera dans la personnalisation de la marque et de l’apparence de votre site Discourse.
Niveau d’utilisateur requis : Administrateur
Vous souhaitez personnaliser la marque de votre site, mais vous ne savez pas par où commencer ? Lisez la suite pour le découvrir !
L’assistant de configuration
Discourse est très personnalisable ! Un bon point de départ pour les personnalisations de site est de vous connecter à votre compte d’administrateur sur le site et d’exécuter l’assistant de configuration du site.
L’option “Configurer davantage” de l’assistant de configuration vous permet de sélectionner un logo de site, un schéma de couleurs, une police et un style de page d’accueil pour le site :
Vous pouvez prévisualiser les options disponibles directement sur cette page. Cliquez sur le bouton “Suivant” lorsque vous avez trouvé les paramètres qui vous conviennent. Ne vous inquiétez pas, vous pouvez toujours modifier ces paramètres plus tard si vous décidez qu’ils ne correspondent pas à ce que vous recherchez.
Thèmes du site
Une fois que vous avez une configuration de base en place, il est temps de personnaliser davantage votre site !
Les thèmes sont des personnalisations étendues qui modifient plusieurs éléments du style de votre forum, et incluent souvent des fonctionnalités frontales supplémentaires. Les thèmes ont la capacité de changer considérablement l’apparence et la disposition de votre forum.
La catégorie Theme sur Meta héberge une variété de thèmes prédéfinis que vous pouvez utiliser sur votre site pour personnaliser son apparence. C’est le meilleur endroit pour rechercher un thème à utiliser sur votre site. Allez-y et choisissez un thème que vous aimeriez utiliser pour votre site dans cette catégorie.
Une fois que vous avez décidé d’un thème à utiliser pour votre site, vous pouvez l’ajouter à votre site depuis la page
Admin -> Personnaliser -> Thèmes(située à.../admin/customize/themes). Vous pouvez également apporter des modifications au thème de votre site, ou même créer un thème entièrement nouveau à partir de cette page.Le Guide du débutant pour l’utilisation des thèmes Discourse est un cours intensif sur les bases des thèmes Discourse et fournit un aperçu de la façon d’installer des thèmes sur votre site Discourse. Lisez ce guide pour obtenir des instructions sur la façon d’installer le thème que vous avez choisi.
Vous pouvez également trouver plus d’informations sur la façon d’utiliser, de créer et de partager vos propres thèmes dans :
Schémas de couleurs
Vous pouvez personnaliser davantage votre site en ajustant le schéma de couleurs depuis la page “Admin → Personnaliser → Couleurs” (située à
/admin/customize/colors).Créons un nouveau schéma de couleurs à utiliser sur votre site en cliquant sur le bouton “+Nouveau” sur cette page :
Sélectionnez un schéma de couleurs existant pour baser votre nouveau schéma de couleurs, puis personnalisez les couleurs de votre nouveau schéma en cliquant sur la couleur à côté de chaque section de couleur :
N’oubliez pas de nommer votre nouveau schéma de couleurs et de sauvegarder vos modifications une fois que vous avez terminé !
Une fois que vous êtes satisfait de votre schéma de couleurs, vous pouvez l’attribuer à votre thème actuel et le prévisualiser pour voir les changements sur votre site reflétés en direct.
Vos modifications seront également appliquées automatiquement au site une fois que vous aurez actualisé la page.
Pour plus d’informations sur la façon dont vous pouvez utiliser les schémas de couleurs dans Discourse, consultez :
Create and share a color scheme
Composants de thème
Similaires aux thèmes, Discourse dispose également de “Composants de thème” que vous pouvez utiliser pour modifier des éléments de surface de la conception de votre forum, ou ajouter des fonctionnalités frontales supplémentaires. Plus petits et plus ciblés que les thèmes complets, ils peuvent généralement (mais pas toujours) être combinés avec d’autres composants de thème pour créer une conception de forum sur mesure pour votre communauté.
La catégorie Theme component sur Meta contient tous les composants de thème officiels et non officiels de Discourse. Parcourez les composants de thème qui y sont répertoriés, et si vous souhaitez en installer sur votre site, suivez simplement les instructions ici : L’interface de thème Discourse et comment installer des composants de thème
Parmi les composants de thème Discourse les plus populaires, on trouve :
- Dark/Light Mode Toggle
- Brand Header
- DiscoTOC - automatic table of contents
- Custom Header Links
- Versatile Banner
Image de marque du site
En plus des logos que vous avez choisis dans l’assistant de configuration du site, Discourse dispose également de plusieurs autres paramètres liés à l’image de marque du site sur la page “Admin → Paramètres → Image de marque” (située à
/admin/site_settings/category/branding) que vous pouvez utiliser pour ajouter des images et des logos personnalisés à votre site.À partir de cette page, vous pouvez ajouter les types de logos suivants à votre site :
logo- L’image du logo en haut à gauche de votre site. Utilisez une image rectangulaire large avec une hauteur de 120 et un rapport d’aspect supérieur à 3:1. Si laissé vide, le titre du site sera affiché.logo small- La petite image du logo en haut à gauche de votre site, visible en faisant défiler vers le bas. Utilisez une image carrée de 120 × 120. Si laissé vide, un glyphe de maison sera affiché.digest logo- L’image de logo alternative utilisée en haut du résumé par e-mail de votre site. Utilisez une image rectangulaire large. N’utilisez pas d’image SVG. Si laissé vide, l’image du paramètrelogosera utilisée.mobile logo- Le logo utilisé sur la version mobile de votre site. Utilisez une image rectangulaire large avec une hauteur de 120 et un rapport d’aspect supérieur à 3:1. Si laissé vide, l’image du paramètrelogosera utilisée.logo dark- Alternative de schéma sombre pour le paramètre de sitelogo.logo small dark- Alternative de schéma sombre pour le paramètre de sitelogo small.large icon- Image utilisée comme base pour les autres icônes de métadonnées. Devrait idéalement être plus grande que 512 x 512. Si laissé vide,logo_smallsera utilisé.manifest icon- Image utilisée comme logo/image de démarrage sur Android. Sera automatiquement redimensionnée à 512 × 512. Si laissé vide,large_iconsera utilisé.manifest screenshots- Captures d’écran qui présentent les fonctionnalités et la fonctionnalité de votre instance sur sa page d’invite d’installation. Toutes les images doivent être des téléchargements locaux et avoir les mêmes dimensions.favicon- Une favicon pour votre site, voir Favicon - Wikipedia. Pour fonctionner correctement sur un CDN, elle doit être en png. Sera redimensionnée à 32x32. Si laissé vide,large_iconsera utilisé.apple touch icon- Icône utilisée pour les appareils tactiles Apple. Sera automatiquement redimensionnée à 180x180. Si laissé vide,large_iconsera utilisé.opengraph image- Image opengraph par défaut, utilisée par de nombreuses applications et plateformes pour les aperçus de liens Web lorsqu’une page n’a pas d’autre image appropriée. Devrait idéalement être carrée. Si laissé vide,large_iconsera utilisé.twitter summary large image- Carte Twitter ‘summary large image’ (devrait avoir une largeur d’au moins 280 et une hauteur d’au moins 150, ne peut pas être .svg). Si laissé vide, les métadonnées de la carte normale sont générées à l’aide de l’opengraph_image, tant que celle-ci n’est pas également un .svg.
Personnalisations supplémentaires
Maintenant que vous avez ajouté un thème personnalisé, un schéma de couleurs, quelques logos de marque et peut-être quelques composants de thème à votre site, vous avez terminé toutes les personnalisations de base du site !
Si vous cherchez encore d’autres moyens de personnaliser votre site Discourse, nous vous recommandons de lire les sujets suivants qui pourraient vous intéresser :
8 « J'aime »
Alors, que fait réellement Manifest screenshots ? Où sont utilisées ces captures d’écran ? Est-ce lorsque quelqu’un installe votre communauté en tant qu’application locale via son navigateur ? Les images sont-elles celles qui s’affichent si vous rendez votre communauté découvrable avec Discourse Discover ?
Je vois ces captures d’écran lorsque j’utilise l’option « Ajouter à l’écran d’accueil » dans Chrome sur mon appareil Android
2 « J'aime »
Intéressant ! Je pensais que c’était ce qu’ils faisaient, mais je ne les ai pas vus lors de mon installation sur mon bureau (Chrome, Windows). Mais je ne leur ai peut-être pas laissé assez de temps pour se charger/se propager quelque part.
Heureux de savoir que j’avais raison sur ce qu’ils font, cependant !
1 « J'aime »
Il semble que cette section ait été omise par erreur,
1 « J'aime »
Après l’avoir lu deux fois, je pense avoir compris. Les directives de taille sont incluses ci-dessus. Par exemple :
Je pense qu’en général ce guide est assez dépassé. Vous ne pouvez plus ajouter de logo ni configurer l’apparence dans l’assistant. La page d’administration des thèmes est totalement différente maintenant, et les schémas de couleurs ont été renommés en palettes de couleurs.
Le composant de thème de basculement entre mode sombre/clair a été déplacé dans le cœur. Et la personnalisation de la marque dispose d’une nouvelle page de configuration à l’adresse /admin/config/logo.
Je me demande juste pourquoi la taille mentionnée sur la page de configuration est différente de la description lorsque je regarde le paramètre du site.
600×80 est différent de min. 360×120.
1 « J'aime »
Ce sujet est maintenant un peu dépassé car ces éléments ont été récemment remaniés.
Voici mes réflexions sur quelques suggestions d’amélioration mineures (mais précieuses) :
2 « J'aime »