Je suis Discourse depuis des années, mais j’ai hésité à passer car je ne suis pas familier avec le codage ou les configurations en ligne de commande. Cependant, les fonctionnalités intéressantes et la nature open-source m’ont finalement convaincu de migrer de XenForo, avec l’aide d’un ami féru de technologie.
Maintenant, j’ai hâte de personnaliser mon forum ! En tant que designer UI/UX, j’ai beaucoup d’idées, mais je ne sais pas par où commencer. Avec XenForo, j’utilisais des thèmes qui correspondaient étroitement à ma vision et j’apportais des modifications mineures avec du CSS. Les options de thème intégrées me permettaient également d’ajuster des éléments d’interface utilisateur spécifiques, tels que les arrière-plans des messages ou les bordures de la barre latérale avec une interface graphique.
Dans Discourse, je vois une option de palette de couleurs, mais existe-t-il des contrôles intégrés pour un style plus détaillé, ou dois-je tout faire avec du code ? Toute aide serait grandement appréciée ! Cela dit, je suis vraiment impressionné par les fonctionnalités de Discourse et j’ai hâte d’explorer son potentiel.
Outre la palette de couleurs, il s’agira de CSS/SCSS, et plus si nécessaire (JS, HTML).
Cela pourrait vous intéresser :
Vous pouvez créer des thèmes et des composants. Les composants sont comme des « sous-thèmes » (ils peuvent contenir des styles et des fonctionnalités), et n’importe quel composant peut être activé pour un ou plusieurs thèmes.
Il existe un outil en ligne de commande qui aide à la création de thèmes et de composants, et je vous suggère de jeter un coup d’œil :
Il existe également une page spéciale qui répertorie la plupart des éléments HTML de Discourse afin que vous puissiez avoir un aperçu de leur apparence et créer vos styles en conséquence.
La page doit être activée avec le paramètre du site Styleguide enabled.
Bien que cela me semble un peu intimidant, je reste positif à ce sujet, merci pour cette réponse incroyable, je pense que le guide de style sera certainement utile. Merci beaucoup !
@manuel étend les options non (ou moins) codées pour la création et la personnalisation de thèmes. Je commencerais par là (égoïstement, j’adorerais suivre vos progrès à ce sujet jusqu’à ce que je trouve le temps de m’y plonger moi-même , donc si vous le faites, veuillez fournir/publier des commentaires et des rapports en cours de route !!!). Il semble qu’il innove certaines simplifications pour nous, les nerds de l’UI/UX.
Pas pour tout, mais pour implémenter un design plus personnalisé, je pense que vous devrez écrire du code. Mes étapes recommandées seraient :
Apprenez à utiliser le Theme CLI gem que @Canapin a déjà mentionné. Cela peut être une première étape intimidante, mais si quelque chose doit vous faire tomber amoureux de la personnalisation de Discourse, c’est bien ce petit bijou ! C’est comme une baguette magique pour les designers Sans cela, vous ressentirez probablement des frictions à chaque étape.
Entraînez-vous à implémenter des styles en utilisant les propriétés personnalisées CSS.
Je pense que les guides ne sont pas à jour à cet égard. Il reste encore beaucoup à faire pour un système cohérent de jetons de conception, mais Discourse a déjà parcouru un long chemin ! Comprendre où et comment les propriétés personnalisées sont utilisées vous aidera beaucoup à comprendre les meilleures pratiques pour le front-end de Discourse.
Vous pouvez trouver des propriétés personnalisées en utilisant l’inspecteur de votre navigateur, ou consulter cette liste pour une première impression : Documenting custom properties. Et vous pouvez styliser des modèles récents, comme la barre latérale, presque entièrement avec des propriétés personnalisées.
Comme l’a suggéré @denvergeeks, vous pourriez jeter un œil au modèle de thème Canvas. Ce qu’il fait, c’est ajouter un ensemble de propriétés personnalisées pour le style de la mise en page qui ne sont pas disponibles dans le cœur.
, donc si vous le faites, veuillez fournir/publier des commentaires et des rapports en cours de route !!!). Il semble qu’il innove certaines simplifications pour nous, les nerds de l’UI/UX.
Sans cela, vous ressentirez probablement des frictions à chaque étape.