Comment personnaliser l'apparence des sections comme Amazon ?

Bonjour, communauté !

J’ai récemment installé Discourse et je souhaite personnaliser l’apparence.

Cependant, je ne sais pas comment sélectionner des groupes de sections avec des indentations par rapport aux autres sections, ni comment créer une liste de sous-sections dans une seule colonne.

J’ai examiné les paramètres dans le panneau d’administration, mais je n’ai rien trouvé de similaire qui puisse m’aider.

Je serais reconnaissant pour toute aide.
Je viens tout juste de commencer à étudier cette plateforme.

Merci !

Par exemple, pour passer d’une liste de sous-sections en plusieurs colonnes à une seule colonne, je dois modifier les valeurs ici (category-list.scss)

Pour ces valeurs

Mais comment puis-je le faire correctement via le panneau d’administration sans modifier les fichiers eux-mêmes sur le serveur ?

display: block;
align-items: baseline;
margin-right: 0;

1 « J'aime »

J’ai bien compris : est-ce qu’il faut procéder ainsi ?
Est-ce la bonne façon de résoudre le problème ?

Ceci est le CSS par défaut pour les sous-catégories. Il suffit d’assigner une « Catégorie parente » dans la fenêtre d’édition de la catégorie, puis de définir la sous-catégorie et la catégorie parente avec la même couleur.

1 « J'aime »

Je ne comprends pas vraiment ce que la couleur a à voir avec cela.
Par défaut, les sous-catégories sont affichées comme suit : l’une après l’autre, horizontalement

Après avoir appliqué le CSS que j’ai spécifié ci-dessus, les sous-sections s’alignent verticalement comme je le souhaitais.

Je voulais simplement savoir : ajouter du CSS sous la forme que j’ai indiquée, via le panneau d’administration, est-ce la bonne méthode ?

Et la deuxième question principale est de savoir comment faire en sorte que les sections elles-mêmes soient séparées les unes des autres par des marges, comme dans l’exemple de la capture d’écran du forum Amazon ?

1 « J'aime »

Ah, je vois.

La bonne démarche consiste à placer ce CSS dans un composant de thème, ce qui ne diffère que légèrement de ce que vous faites !

Si vous modifiez le thème Clair, les modifications ne seront pas visibles sur le thème Sombre.

Créez un seul composant de thème pour toutes vos personnalisations locales du site !

4 « J'aime »

Merci pour vos conseils concernant la meilleure façon de les organiser en composants.

Si l’on prend un exemple concret comme Amazon, il ne s’agit pas seulement de CSS ; leur balisage diffère également du standard (HTML).

Comment mettre en place rapidement une présentation identique ?

Malheureusement, je n’ai qu’une connaissance superficielle de la mise en page, car je suis développeur backend, ce qui rend la mise en page difficile.

Puis-je reproduire cette mise en page sans modifier le code des fichiers sources eux-mêmes ?

J’ai parcouru de nombreux thèmes prêts à l’emploi, mais la plupart se ressemblent et aucun n’est aussi épuré qu’Amazon. Peut-être pouvons-nous le faire ensemble avec la communauté ? Cela semble plus épuré avec des espaces entre les sections.

Leur balisage est partiellement différent car ils n’ont pas semblé mettre à jour leur site depuis un bon moment.

L’ajout de ce CSS vous permet d’aller presque jusqu’au bout pour le style des sous-catégories…

.category-list .subcategories .subcategory {
  display: flex;
}

Si vous souhaitez apporter des modifications au balisage, vous devrez vous pencher sur le fonctionnement des surcharges de modèles dans Discourse… cela se trouve dans la section avancée du Guide du développeur pour les thèmes Discourse.