README.md

 # Community-theme
-## Plugins
-Ce thème utilise les plugins ci-dessous, pensez à les installer avant d'installer ce thème.
 
-### One year anniversary
+Ce thème est inspiré du thème [**_Mint_**](https://meta.discourse.org/t/mint-a-modern-theme-for-discourse/202822). Il est dédié à la la gestion de communautés en ligne.
 
-Lors des un an de votre post, recevez une notification pour repartager celui-ci à votre communauté.
+## Prérequis
 
-- Doc : https://meta.discourse.org/t/discourse-yearly-review-plugin/105713
-- Dépôt : https://github.com/discourse/discourse-yearly-review
+Le thème Community se compose de plusieurs composants déjà inclus dans le fichier **about.json**. Il a aussi besoin de plugins que vous devrez installer pour être pleinement fonctionnels, pour plus d'informations voir [la section des prérequis](doc/prerequis.md).
 
-### Reaction
+## Configuration
 
-Ajoutez des émojis et participez de façon dynamique aux conversations.
+Après l'installation du thème vous aurez besoin de le configurer correctement, voir [la section configuration](doc/configuration.md).
 
-- Doc : https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261
-- Dépôt : https://github.com/discourse/discourse-reactions
+## discourse CLI
 
-
-### Private topic to discover
-
-Vos contenus sont visibles partiellement : encouragez vos contacts à s'inscrire sur la plateforme pour voir la totalité des contenus.
-
-- Doc : https://meta.discourse.org/t/advertise-activity-in-a-private-category-discourse-category-lockdown/70649https://github.com/paviliondev/discourse-category-lockdown
-- Dépôt : https://github.com/paviliondev/discourse-category-lockdown
-
-### Problème du topic réglé
-
-Indiquez à une communauté le statut "résolu" d'un problème.
-
-- Doc : https://www.discourse.org/plugins/solved.html
-- Dépôt : https://github.com/discourse/discourse-solved
-
-### Automatisation (ex: for event)
-
-Automatisez des actions complexes (version beta).
-
-- Doc : https://meta.discourse.org/t/discourse-automation/195773
-- Dépôt : https://github.com/discourse/discourse-automation
-
-### Follower
-
-Suivez, recevez des notifications de vos membres préférés et tenez vous au courant du nombre de followers.
-
-- Doc : https://meta.discourse.org/t/follow-plugin/110579
-- Dépôt : https://github.com/discourse/discourse-follow
-
-### Calendrier
-
-Partagez des événement avec les autres membres sur votre calendrier, ou passez en mode "vacances".
-
-- Doc : https://meta.discourse.org/t/discourse-calendar/97376
-- Dépôt : https://github.com/discourse/discourse-calendar
-
-### map and post
-
-Ajoutez votre géolocalisation sur vos post, ceux-ci peuvent favoriser les recherches entre membres.
-
-- Doc : https://meta.discourse.org/t/locations-plugin/69742
-- Dépôt : https://github.com/paviliondev/discourse-locations
-
-### Location plugin
-
-Découvrez la carte des membres de votre communauté et organisez des événements avec les membres les plus proches.
-
-- Doc : https://meta.discourse.org/t/locations-plugin/69742/723
-- Dépôt : https://github.com/discourse/discourse-calendar
-
-
-## Composants
-
-Ce thème utilise les composants ci-dessous, pensez à les installer avant d'installer ce thème.
-
-### Icônes pour les catégories
-
-Les catégories sont affichées avec des icônes complétant les titres.
-
-- Doc : https://meta.discourse.org/t/category-icons-component/104683
-- Dépôt : https://github.com/discourse/discourse-category-icons
-
-
-### Discourse loading slider
-
-Une barre horizontale s'affiche lors du temps de chargement d'une page.
-
-- Doc : https://meta.discourse.org/t/experiment-on-meta-horizontal-loading-slider/177939
-- Dépôt : https://github.com/discourse/discourse-loading-slider
-
-
-### Discourse category banners
-
-Affiche une barre de catégorie en haut de la page catégorie. 
-
-- Doc : https://meta.discourse.org/t/discourse-category-banners/86241
-- Dépôt : https://github.com/discourse/discourse-category-banners.git
-
-
-### Discourse search banner
-
-Affiche une barre de recherche sur la page d'accueil. 
-
-- Doc : https://meta.discourse.org/t/search-banner-theme-component/122939
-- Dépôt : https://github.com/discourse/discourse-search-banner.git
-
-
-### Easy footer
-
-Ajoute _footer_ simple et responsive.
-
-- Doc : https://meta.discourse.org/t/easy-responsive-footer/95818
-- Dépôt : https://github.com/discourse/Discourse-easy-footer
-
-
-### Icons header
-
-Permet d'ajouter des liens sur la partie "header" de votre site avec des icones.
-
-- Doc : https://meta.discourse.org/t/custom-header-links-icons/86307
-- Dépôt : https://github.com/discourse/discourse-icon-header-links
-
-### MD Topic list
-
-Épuration de la partie page d'accueil en améliorant la charte initiale.
-
-- Doc : https://meta.discourse.org/t/md-topic-list-component/117694
-- Dépôts : https://github.com/MonDiscourse/md-topic-list
-
-### TOC, Table of content
-
-Ajoute la table des matière du post.
-
-- Doc : https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143
-- Dépôts : https://github.com/discourse/DiscoTOC.git
+Pour créer/modifier ses propres thèmes et composants, Discourse Theme CLI utilise la synchronicité. On peut voir à distance les modifications apportées dans notre thème/composant local, et ce, en simultané ! Voir [la section discourse theme cli](doc/discourse_theme_cli.md).
 
 ## Licence
+
 [![community-theme Copyright 2021-present Lydra](https://www.gnu.org/graphics/gplv3-with-text-136x68.png)](https://choosealicense.com/licenses/gpl-3.0/)
 
 **community-theme** is maintained by [Lydra](https://lydra.fr/) and released under the GPL3 license.

common/common.scss

@@ -247,9 +247,11 @@ a {
 }
 
 .list-controls .combo-box .combo-box-header {
-  border: none;
+  border: 1px solid $primary-medium;
+  color: $primary;
+  box-shadow: 1px 1px 5px 1px rgba(67,66,66, .2);
   @include border-radius;
-  background-color: $header_background;
+  background-color: $header_primary;
 }
 
 .menu-panel .panel-body-bottom .btn {
@@ -366,7 +368,7 @@ a:hover {
 
 .admin-controls, .email-template, .admin-container {
   .nav-pills>li a.active {
-    background: var(--tertiary);
+    background: var(--primary-medium);
     color: var(--secondary);
   }
   .btn-primary {

doc/configuration.md

+# Configuration du thème et des composants
+
+## Comment ça marche ?
+
+### Bannière _How to begin ?_
+
+C'est le composant **_Versatile Banner_** qui est utilisé pour cette bannière.
+
+- Doc : https://meta.discourse.org/t/versatile-banner/109133
+- Dépôt : https://github.com/tshenry/discourse-versatile-banner.git
+
+La bannière s'affiche pour tout le monde / possibilité de la masquer.
+Elle apparaît sur les pages :
+
+- `/latest`
+- `/categories`
+- `/new`
+- `/unread`
+- `/top*`
+- `/tag/*`
+- `/tags/*`
+- `/c/*`
+- `/t/*`
+
+Il n'y a pas d'image de fond, mais il est possible d'en ajouter une.
+
+Ensuite il faut configurer le contenu de la bannière : texte, images dans chaque colonne.
+
+Pour personnaliser les images de la bannière, il faut les uploader sur le forum. Pour ça il faut créer un post avec les images dans la catégorie _staff_ (privée). Puis parcourir le post créé qui affiche l'image et faite un clic droit pour **copier le lien de l'image**. Puis, coller ce lien dans la page configuration du composant, section `Column Icons`.
+[Pour plus d'information voir ici](https://meta.discourse.org/t/upload-image-in-discourse/141504/4).
+
+### Les boites de catégories
+
+Le composant est **_Categories Layout Override_** qui affiche les boîtes de categories avec leur images.
+
+Dans Theme Settings/categories layout il faut choisir `catégories_boxes`.
+
+- Doc : https://meta.discourse.org/t/categories-layout-override/131098
+- Dépôt : https://github.com/tshenry/discourse-categories-layout-override
+
+### _Showcased Categories_
+
+Le composant présentant deux boîtes avec une liste de 4 postes.
+
+- Doc : https://meta.discourse.org/t/showcased-categories-theme-component/173524
+- Dépôt : https://github.com/discourse/discourse-showcased-categories.git
+
+Vous pouvez définir la taille en nombre de post maximum du contenu des boîtes et les catégories qui seront dans les boites ainsi que leur titre.
+
+### Configuration des couleurs
+
+Les couleurs peuvent être modifiées en créant votre palette de couleurs dans `Customize / Colors`. Pour plus d'information sur les palettes de couleurs [voir ici](https://meta.discourse.org/t/how-to-create-and-share-a-color-scheme/61196). Vous pouvez dupliquer les palettes `Community Light` ou `Community Dark` pour faire vos propres palettes.
+
+Pour en savoir plus sur quelle couleur correspond à quel élément, nous fournissons [un descriptif de celles-ci](descriptif_couleurs.md).
+
+Une fois votre palette créé ajouter celle-ci dans le thème : section **color palette**.
+
+#### Installer des polices de caractère
+
+Vous pouvez aussi installer des fonts existantes sur Discourse, depuis **Admin/Settings/Basic Setup.**.
+Pour en savoir plus [voir ici](https://meta.discourse.org/t/how-to-change-default-font-of-your-site/21282).

doc/descriptif_couleurs.md

+# Descriptif de la palette de couleur
+
+## primary
+
+- La plupart du texte, des icônes et des bordures
+- Textes
+- Textes sections
+- Textes input
+- Titres
+- Bannière des options (en plus claire)
+- Génère un bandeau lors d'un :hover d'une image dans le topic.
+
+## secondary
+
+- Couleur d'arrière-plan principale, et couleurs du texte de certains boutons.
+- Couleur de fond des post/topics
+- Couleur de fond des catégories
+- Couleur de fond input
+- Couleur des textes/icones du footer
+- Couleur du texte des boutons
+- Couleur des icones dans topics
+
+## tertiary
+
+- Les liens, certains boutons, notifications et accentuation
+- Boutons:actif des menu
+- Ombre des boutons d'action (more, new topic)
+- Éléments des graphiques
+- Titres des graphiques
+- Titre:actifs des options des graphiques
+- Titre:hover des options des graphiques
+- Titre:hover du menu latéral
+- Surlignement des messages Discourse pour l'utilisateur.
+
+## quaternary
+
+- Liens de navigation
+- Section:active menu latéral
+- Icones:hover
+
+## header background
+
+- Couleur de font de la bannière
+- Bordures des post/topics
+- Boutons:actifs
+- Topics-action:hover
+- Titre des options:hover de la bannière
+
+## header primary
+
+- Texte, icones de la bannière
+- Fond de couleur de la page.
+
+## highlight
+
+- Couleur d'arrière-plan (surligner) des post et topics.
+- Couleur de fond des champs de saisie
+
+## danger
+
+- Couleur d'arrière-plan (surligner) des actions like, suppression de post/topics
+- Couleur de fond des boutons:actifs dans le menu customize theme/component
+- Icone de suppression
+
+## success
+
+- Une action réalisée avec succès
+
+## love
+
+- Bouton like
+
+## primary-low-mid
+
+- Les icones
+
+## primary-medium
+
+- Les boutons
+- Bouton:hover des categories/options
+- Bordures des cadres

doc/discourse_theme_cli.md

+# Comment utiliser le Discourse Theme CLI ?
+
+## Utilité
+
+> Discourse Theme CLI permet de syncroniser son code local avec une instance discourse en ligne.
+
+#### Installation
+
+Il faut commencer par [générer une clé API `Global Key`](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950#credentials-4) dans Discourse, et on enregistre une clé API par thème.
+
+1. Installer `Ruby 2.2` minimum, le mieu c'est d'utiliser [`rbenv`](https://github.com/rbenv/rbenv).
+2. Installer la gem `discourse_theme`.
+
+```bash
+gem install discourse_theme
+```
+
+- [Ressources sur Discourse Theme CLI.](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)
+
+#### Utilisation
+
+Au lancement la CLI va nous proposer plusieurs options :
+
+1. Créer un nouveau thème via le discourse CLI :
+
+```bash
+discourse_theme new <my_new_theme>
+```
+
+2. Syncroniser un thème ou un composant local avec le Discours distant. Pour ça on doit lancer le `watch` sur le répartoire de notre projet.
+
+```bash
+discourse_theme watch <my_theme>
+```
+
+3. Télécharger un thème existant sur le Discourse distant, et le synchroniser grâce au `watch`.
+
+```bash
+discourse_theme download <my_remote_theme>
+```
+#### Bon à savoir
+
+Ça y est ! Vous utilisez Discourse Theme CLI et vous avez la possibilité de créer ou de `watch` des thèmes et des composants.
+
+**⛔ Note : il n'est pas possible de regarder plusieurs thèmes/composants en simultané.**
+
+Exemple :
+
+```bash
+discourse_theme watch component-community-fonts community-theme component-colors
+```
+
+Ceci génèrera une erreur. Il faut dans ce cas lancer un cli par répertoire.

doc/prerequis.md

+# Prérequis
+
+## Composants
+
+Ce thème utilise les composants ci-dessous, ils sont installés avec le thème, pensez à les configurer.
+
+### Discourse loading slider
+
+Une barre horizontale s'affiche au dessus de l’entête durant le temps de chargement d'une page.
+
+- Doc : https://meta.discourse.org/t/experiment-on-meta-horizontal-loading-slider/177939
+- Dépôt : https://github.com/discourse/discourse-loading-slider
+
+### Icon Header Links
+
+Ajoute des liens sous la forme d’icône en entête du site : Instagram, Gitlab, YouTube,...
+
+- Doc : https://meta.discourse.org/t/custom-header-links-icons/86307
+- Dépôt : https://github.com/discourse/discourse-icon-header-links
+
+### Versatile Banner
+
+Ajoute une bannière de trois images avec du texte de présentation - Option plier / déplier
+- Doc : https://meta.discourse.org/t/versatile-banner/109133
+- Dépôt : https://github.com/tshenry/discourse-versatile-banner
+
+### Showcase Categories
+
+Met en avant deux catégories et leur _top posts_.
+
+- Doc : https://meta.discourse.org/t/showcased-categories-theme-component/173524
+- Dépôt : https://github.com/discourse/discourse-showcased-categories
+
+### Categories Layout Override
+
+Les catégories sont présentées sous forme de boîte avec une image. La taille conseillée pour les images de catégorie est de maximum 150px.
+
+- Doc : https://meta.discourse.org/t/categories-layout-override/131098
+- Dépôt : https://github.com/tshenry/discourse-categories-layout-override
+
+### Category icons component
+
+Les catégories sont affichées avec des icônes complétant les titres.
+
+- Doc : https://meta.discourse.org/t/category-icons-component/104683
+- Dépôt : https://github.com/discourse/discourse-category-icons
+
+### Discourse category banners
+
+Affiche une bannière de présentation de catégorie en haut de chaque page catégorie.
+
+- Doc : https://meta.discourse.org/t/discourse-category-banners/86241
+- Dépôt : https://github.com/discourse/discourse-category-banners.git
+
+### DiscoTOC
+
+Ajoute une option Tables des matières lors de la rédaction de topic.
+
+- Doc : https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143
+- Dépôts : https://github.com/discourse/DiscoTOC.git
+  
+### Easy footer
+
+Ajoute un pied de page simple et responsive avec vos liens.
+
+- Doc : https://meta.discourse.org/t/easy-responsive-footer/95818
+- Dépôt : https://github.com/discourse/Discourse-easy-footer
+
+## Plugins
+
+Pour une meilleure expérience utilisateur nous vous conseillons aussi d'installer les plugins suivant.
+
+### One year anniversary
+
+Toutes les années ce plugin créer un sujet anniversaire qui résume l'activité de l'année précédente sur un forum.
+
+- Doc : https://meta.discourse.org/t/discourse-yearly-review-plugin/105713
+- Dépôt : https://github.com/discourse/discourse-yearly-review
+
+### Reaction
+
+Ajoutez des émojis et participez de façon dynamique aux conversations.
+
+- Doc : https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261
+- Dépôt : https://github.com/discourse/discourse-reactions
+
+### Private topic to discover
+
+Vos contenus privés sont visibles partiellement : encouragez vos contacts à s'inscrire sur la plateforme pour voir la totalité des contenus.
+
+- Doc : https://meta.discourse.org/t/advertise-activity-in-a-private-category-discourse-category-lockdown/70649https://github.com/paviliondev/discourse-category-lockdown
+- Dépôt : https://github.com/paviliondev/discourse-category-lockdown
+
+### Solved
+
+Indiquez à une communauté le statut "résolu" d'un problème.
+
+- Doc : https://www.discourse.org/plugins/solved.html
+- Dépôt : https://github.com/discourse/discourse-solved
+
+### Automation (ex: for event)
+
+Automatisez des actions complexes (version beta).
+
+- Doc : https://meta.discourse.org/t/discourse-automation/195773
+- Dépôt : https://github.com/discourse/discourse-automation
+
+### Follower
+
+Suivez, recevez des notifications de vos membres préférés et tenez vous au courant du nombre de followers.
+
+- Doc : https://meta.discourse.org/t/follow-plugin/110579
+- Dépôt : https://github.com/discourse/discourse-follow
+
+### Calendrier
+
+Partagez des événements avec les autres membres sur votre calendrier, ou passez en mode "vacances".
+
+- Doc : https://meta.discourse.org/t/discourse-calendar/97376
+- Dépôt : https://github.com/discourse/discourse-calendar
+
+### map and post
+
+Ajoutez votre géolocalisation sur vos post, ceux-ci peuvent favoriser les recherches entre membres.
+
+- Doc : https://meta.discourse.org/t/locations-plugin/69742
+- Dépôt : https://github.com/paviliondev/discourse-locations
+
+### Location plugin
+
+Découvrez la carte des membres de votre communauté et organisez des événements avec les membres les plus proches.
+
+- Doc : https://meta.discourse.org/t/locations-plugin/69742/723
+- Dépôt : https://github.com/discourse/discourse-calendar