🌅 Présentation d'Horizon, notre nouveau thème

[lindsey (Lindsey Fogle)]

Depuis quelques mois, nous travaillons d’arrache-pied sur notre tout nouveau thème Discourse, Horizon, et aujourd’hui, nous sommes ravis de partager notre travail avec vous et de vous inviter à essayer Horizon dans votre communauté.

Dans ce sujet, nous vous parlerons d’Horizon et vous guiderons dans l’installation.

Tout sur Horizon

Horizon est un thème simple et magnifique conçu pour offrir une excellente expérience utilisateur aux communautés sans effort supplémentaire de la part de l’administrateur. Le nom reflète notre espoir que ce thème exprime une vision plus large de qui peut utiliser Discourse et de l’apparence des communautés Discourse.

Mode clair

Mode sombre

Pourquoi avons-nous créé Horizon ?

Nous avons créé Horizon pour permettre à n’importe qui de créer facilement une communauté Discourse et de la partager fièrement avec ses membres.

En discutant avec les administrateurs de Discourse, nous avons appris que l’une des parties les plus importantes de la création d’une communauté est de modifier son apparence pour s’assurer qu’elle est un espace accueillant et agréable pour les membres de la communauté. Horizon permet d’avoir une communauté d’apparence attrayante sans effort ou personnalisation supplémentaire.

Pour qui est Horizon ?

Horizon est conçu pour les communautés qui n’ont pas l’expertise ou les ressources nécessaires pour personnaliser l’apparence de Discourse.

Nous sommes fiers de la flexibilité et de la personnalisation de Discourse – et cela ne change pas ! Mais nous pensons que plus de Discourse dans le monde est une bonne chose, et que la meilleure façon d’y parvenir est de faciliter la prospérité des communautés moins expertes en technologie avec notre produit.

Qu’est-ce qui rend Horizon spécial ?

Là où le thème par défaut est une page blanche, Horizon a des opinions. Il valorise l’espace, la simplicité et l’esthétique du design moderne.

Pour voir la différence, utilisez le sélecteur de thème en bas de la barre latérale ici sur Meta pour passer à Horizon :

Voici quelques-unes des différences que vous remarquerez avec Horizon :

• Moins de densité d’information. La caractéristique la plus notable d’Horizon est la carte de sujet, qui est réduite par rapport à la vue de tableau standard pour la rendre plus accessible et simple. Certaines informations, telles que les détails complets sur les participants au sujet, les tags et les utilisateurs assignés, ne sont pas visibles.
• Texte plus grand et plus d’espace. Au-delà de la carte de sujet, nous avons apporté un plus grand degré d’espace dans Horizon en augmentant les tailles de police de base dans la zone de lecture et en intégrant une structure pleine largeur.
• Conçu pour être utilisé tel quel. Les communautés qui souhaitent un contrôle étendu sur l’apparence du site ou qui ont des exigences de conception très particulières peuvent et doivent continuer à travailler à partir de notre thème par défaut ou créer leur propre thème pour mieux répondre à leurs besoins. Bien que nous ayons testé Horizon avec les composants de thème officiels les plus populaires et n’ayons trouvé que des incompatibilités mineures, nous ne recommandons pas d’ajouter des composants non officiels ou d’autres codes personnalisés à Horizon.

Utiliser Horizon

Vous pouvez activer Horizon pour vos membres en quelques étapes simples :

1. Allez dans la zone Admin, accédez à la section Apparence et cliquez sur Thèmes et composants.
2. Trouvez la carte du thème Horizon, cliquez sur le bouton … et sélectionnez Définir comme actif pour faire d’Horizon le nouveau thème par défaut de votre communauté. (Vous devrez peut-être actualiser votre écran pour voir ce changement.)

Vous pouvez éventuellement activer l’une des nouvelles palettes de couleurs, qui sont conçues spécifiquement pour bien fonctionner avec Horizon.

> Remarque : vous pouvez remplacer les palettes utilisées sur Horizon, mais seules les palettes nommées Clover, Horizon, Lily, Marigold, Royal et Violet apparaîtront dans le sélecteur de couleurs de la barre latérale.

Instructions sur la configuration des palettes de couleurs.

1. Cliquez sur Palettes de couleurs dans la barre latérale d’administration.
2. Sélectionnez la palette de couleurs souhaitée (par exemple, Horizon).
3. Cochez le paramètre La palette de couleurs peut être sélectionnée par les utilisateurs, puis cliquez sur la coche pour confirmer.
4. Répétez les étapes 2 et 3 pour toutes les palettes que vous souhaitez utiliser.

Après l’actualisation, vous verrez un pinceau en bas de la barre latérale. Vous pouvez cliquer dessus pour choisir votre palette de couleurs spécifique pour Horizon (illustré dans la capture d’écran ci-dessus). Vos membres peuvent faire de même pour choisir parmi les palettes que vous avez activées. Pour définir la nouvelle palette par défaut pour Horizon (c’est-à-dire à quoi ressemble Horizon avant que les membres n’aient apporté de modifications et pour les visiteurs anonymes) :

1. Accédez à Thèmes et composants dans la zone d’administration.
2. Trouvez la carte Horizon et cliquez sur Modifier.
3. Changez le champ Palette de couleurs pour celle que vous désirez par défaut.

Prochaines étapes pour Horizon

Nous ne faisons que commencer ! Nous avons travaillé dur sur cette première version du thème, mais attendez-vous à continuer d’investir dans Horizon et à l’améliorer au fil du temps. Nous solliciterons activement les commentaires des sites qui utilisent Horizon afin de continuer à l’améliorer, et espérons un jour bientôt en faire le thème par défaut qui est livré avec les sites Discourse.

Merci

Nous sommes très reconnaissants envers tous ceux qui ont soutenu Horizon (et l’équipe Discourse !) en testant Horizon ici sur Meta ou en participant à notre bêta test. Ces commentaires nous ont été précieux pour trouver des bugs, apporter des ajustements et améliorer l’expérience globale de Discourse avec ce thème. Merci beaucoup pour votre temps, vos commentaires et votre soutien !

[hellekin]

Cela semble génial ! J’ai vraiment envie d’essayer.

Mais il n’y a pas de route pour /admin/customize/themes/1/common/*/edit personnalisation. Pouvez-vous l’ajouter ? Je l’utilise pour fournir des en-têtes spéciaux et d’autres personnalisations indépendamment du thème choisi.

Merci !

[Moin]

Pourquoi ne pas créer un nouveau composant de thème où vous apportez des modifications et l’ajoutez au thème horizon ?

Customizing themes without an Edit code button

Sometimes, you may want to customize a Discourse theme but find that there’s no “Custom code” section with an “Edit code” button available. This often happens with remote themes (themes installed from an external source) and the preinstalled themes (Horizon & Foundation). Here’s how you can still add your customizations: Understanding the limitation For preinstalled themes, you see a banner telling you This theme is preinstalled and can not be deleted or customized For remote themes, you’ll…

[Moin]

Ai-je manqué quelque chose ou Horizon n’a-t-il pas été ajouté à Crowdin pour la traduction ? Dois-je plutôt créer une pull request avec les traductions ?

[lindsey (Lindsey Fogle)]

@hellekin

Ça a l’air génial ! J’ai vraiment envie d’essayer.

Mais il n’y a pas de route pour /admin/customize/themes/1/common/*/edit personnalisation. Pouvez-vous l’ajouter ? Je l’utilise pour fournir des en-têtes spéciaux et d’autres personnalisations indépendamment du thème choisi.

Horizon est principalement conçu pour être utilisé tel quel, donc les personnalisations directes ou les personnalisations via des composants non officiels ne sont pas recommandées. Cela dit, j’aimerais en savoir plus sur ce que vous aimeriez changer à propos d’Horizon pour voir si cela pourrait être un bon candidat pour que nous l’intégrions plus directement dans le thème.

@Moin

Est-ce que je l’ai manqué ou Horizon n’a-t-il pas été ajouté à Crowdin pour la traduction ? Dois-je plutôt créer une pull request avec les traductions ?

Je suis en train de regarder ça, je vous tiens au courant bientôt !

[hellekin]

En fait, c’est juste un en-tête pour lier le forum à un compte Fediverse (et une balise \u003cnoscript\u003e pour faire la même chose dans le pied de page).

J’ai mis le code du composant de thème ici : \u003chttps://git.z7l.eu/ps/discourse-lire.im\u003e

Voir la justification pour Mastodon.

[Helga_Razinkova (Helga)]

Ça a l’air super !! Je suppose que le thème ne sera pas compatible avec les composants personnalisés que nous utilisons actuellement ? Par ex. :

[Jonathan5]

Continuant la discussion de Aidez-nous à tester Horizon, notre nouveau thème :

@chapoi

Vous pouvez découvrir Horizon sur Meta en utilisant le sélecteur de thème en bas de votre barre latérale :

Cela n’a pas fonctionné pour moi sur mobile (iPhone 11 Pro Max). Je suppose que cela pourrait être dû à l’augmentation de la taille de la police dans les paramètres de mon téléphone.

[satonotdead]

Ce thème est magnifique, merci pour votre travail !

Je me demande comment garder les horizons forkés à jour ? Nous avons quelques modifications personnalisées à conserver

[sam (Sam Saffron)]

Créer des composants et les ajouter au thème pour personnaliser

[sam (Sam Saffron)]

À long terme, notre objectif est que nos composants officiels fonctionnent bien sur Horizon, pour un travail personnalisé en tant que client, n’hésitez pas à contacter @team pour voir si nous pouvons vous aider (peut nécessiter un travail personnalisé payant).

[SubStrider]

Je souhaite créer une option sélectionnable par l’utilisateur pour ce thème afin que je puisse ajouter le composant thématique qui modifiera ce thème. Je veux que les utilisateurs puissent sélectionner le thème Horizon tel quel ou sélectionner sa variation.

La variation de ce thème sera en pleine largeur. Elle stylisera également le CSS des lignes de publication individuelles pour faire remonter le contenu dans la hiérarchie visuelle par rapport à d’autres éléments de la page tels que la barre de défilement, les sujets nouveaux et non lus en bas, etc.

Horizon est vraiment superbe, mais il ne résout toujours pas le problème de la densité d’information sur la page des sujets. Il est visuellement écrasant pour les personnes habituées à d’autres logiciels de forum traditionnels.

Mes commentaires ne sont peut-être pas pertinents pour les utilisateurs natifs de Discourse, mais j’apporte un point de vue extérieur. Je dois apporter ces modifications pour ma communauté au moins.

[hellekin]

J’ai trouvé un petit bug ici, dans l’affichage des groupes, où il peut y avoir un dépassement :

Cela peut être atténué en ajoutant du CSS :

.group-box-inner {
	overflow: auto;
}

[asa]

Est-il intentionnel qu’il y ait autant d’espace entre la barre de navigation et le contenu ?

[NateDhaliwal]

Non, je ne pense pas que ce soit attendu. Peut-être qu’un composant interfère avec cela ?

[sam (Sam Saffron)]

Je pense que c’est le cas actuellement, j’imagine que c’est une capture d’écran rognée d’un navigateur ultra-large plein écran.

[MachineScholar]

J’adore complètement ce thème, mais il semble que le composant Bannière de recherche ne s’accorde pas très bien avec. Le texte search_banner.subhead ne s’affiche pas, ce qui le rend désaligné. Il y a aussi une légère ligne grise.

Mise à jour :
J’ai désactivé la Bannière de recherche et l’accueil+recherche intégrés s’affichent mieux. Cependant, j’obtiens ce texte de sous-titre dans la capture d’écran ci-dessous.

De plus, le lien des favoris sur la page d’accueil indique que je n’ai pas encore de favoris alors que j’en ai. Il renvoie vers /bookmarks au lieu de /u/johndoe/activity/bookmarks.

[asa]

C’est bien un écran large. Cependant, la grande quantité d’espace blanc vide est gênante. Est-il possible d’ajuster cela ?

[Lilly (Lillian Louis)]

Merci de nous avoir informés à ce sujet. J’ai demandé à quelqu’un de l’équipe de conception d’examiner le problème.

[SubStrider]

Signalé il y a presque un mois mais…

Help us test Horizon, our newest theme

This extra white space to the left and right of the topic contents is what I was talking about. Doesn’t look uniform. Ideally I would like an option for it to occupy the full width, or at the very least be aligned to the left instead of center. I can anyway override it using custom CSS but just reporting in case there is consensus on aesthetics. [Screenshot 2025-06-02 at 10.21.01 PM] [Screenshot 2025-06-02 at 10.25.54 PM]