# Comment personnaliser l'apparence des sections comme Amazon ?
**URL:** https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213
**Category:** UX
**Created:** [Octobre 25, 2020, 6:33 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213 "2020-10-25T18:33:14Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Alex\_Tramp](https://meta.discourse.org/u/Alex_Tramp)
#### Post date: [Octobre 25, 2020, 6:33 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/1 "2020-10-25T18:33:14Z")
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 !
---
### Author:  [@Alex\_Tramp](https://meta.discourse.org/u/Alex_Tramp)
#### Post date: [Octobre 26, 2020, 7:07 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/2 "2020-10-26T07:07:08Z")
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;**
---
### Author:  [@Alex\_Tramp](https://meta.discourse.org/u/Alex_Tramp)
#### Post date: [Octobre 26, 2020, 8:06 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/3 "2020-10-26T08:06:41Z")
J’ai bien compris : est-ce qu’il faut procéder ainsi ?
Est-ce la bonne façon de résoudre le problème ?
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [Octobre 26, 2020, 8:27 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/4 "2020-10-26T08:27:57Z")
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.
---
### Author:  [@Alex\_Tramp](https://meta.discourse.org/u/Alex_Tramp)
#### Post date: [Octobre 26, 2020, 8:37 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/5 "2020-10-26T08:37:48Z")
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 ?
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [Octobre 26, 2020, 9:55 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/7 "2020-10-26T09:55:36Z")
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 !
> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …
---
### Author:  [@Alex\_Tramp](https://meta.discourse.org/u/Alex_Tramp)
#### Post date: [Octobre 26, 2020, 2:19 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/8 "2020-10-26T14:19:01Z")
Merci pour vos conseils concernant la meilleure façon de les organiser en composants.
Si l’on prend un exemple concret comme [Amazon](https://sellercentral.amazon.com/forums/), 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 ?
---
### Author:  [@Alex\_Tramp](https://meta.discourse.org/u/Alex_Tramp)
#### Post date: [Octobre 27, 2020, 4:40 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/9 "2020-10-27T16:40:42Z")
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.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Novembre 26, 2020, 3:20 UTC](https://meta.discourse.org/t/how-customize-the-appearance-of-sections-like-amazon/168213/10 "2020-11-26T03:20:45Z")
> [@Alex\_Tramp](#):
>
> Ce n’est pas seulement une question de CSS, leur balisage diffère également de la norme (HTML).
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…
```css
.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](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648).