J’ai dû le reconstruire comme un composant purement CSS car je n’arrivais pas à stabiliser la version Javascript. L’objectif est de vous aider à mettre en évidence un chemin que vous souhaitez spécifiquement que les utilisateurs empruntent.
Lien : https://github.com/focallocal/nav-buttons-highlighter
Le voici installé et mettant en évidence le plugin Kanban qui la plupart des utilisateurs de ma plateforme ne sauraient pas où trouver après des mois d’adhésion, en particulier ceux qui utilisent principalement leur mobile.
Bureau :
Mobile :
Nav Buttons Highlighter
Un composant de thème Discourse qui met en évidence les boutons de navigation pour guider les utilisateurs vers des chemins ou des fonctions spécifiques que vous souhaitez qu’ils suivent, et rend le menu déroulant mobile plus clair et visible.
Objectif
Ce composant vous aide à :
- Guider les utilisateurs en mettant en évidence les liens de navigation importants (par exemple, votre tableau de tâches, la documentation ou les catégories clés)
- Améliorer l’expérience utilisateur mobile en faisant ressortir le bouton de navigation déroulant
- Créer une hiérarchie visuelle dans votre barre de navigation
Fonctionnalités
- Style de bouton 3D avec dégradés, ombres et effets de survol
- Adapté aux mobiles - met en évidence le bouton de bascule du menu déroulant “Latest” sur mobile afin que les utilisateurs comprennent mieux qu’ils peuvent/doivent cliquer dessus
- Préconfiguré pour le plugin Discourse Kanban par défaut
- Implémentation CSS uniquement - fiable et léger
- Facile à personnaliser
Configuration par défaut
Par défaut, ce composant est configuré pour mettre en évidence le plugin Discourse Kanban [lien](https://meta.discourse.org/t/kanban-board/) en BLEU. Cependant, il peut facilement être modifié pour mettre en évidence n’importe quel lien de navigation de votre choix dans n’importe quelle couleur.
Installation
-
Dans la console d’administration de Discourse, allez dans Customize Themes Components et cliquez sur Install
-
Copiez le lien du dépôt Git et collez-le :
https://github.com/focallocal/nav-buttons-highlighter -
Une fois installé, ajoutez le composant à votre thème actif.
Comment personnaliser
Trouver le fichier CSS
Il n’y a PAS de panneau de paramètres d’administration pour ce composant - toute la personnalisation se fait en modifiant directement le fichier CSS dans votre dépôt.
Le fichier CSS se trouve à l’adresse :
common/common.scss
Comment le modifier :
Option 1 : Modifier dans GitHub (le plus simple)
- Forkez une version de ce dépôt et installez-la
- Naviguez vers
common/common.scss - Cliquez sur l’icône du crayon pour modifier
- Apportez vos modifications et committez
- Dans Discourse Admin → Customize → Components, cliquez sur “Check for Updates” sur le composant Nav Buttons Highlighter
Option 2 : Modifier localement
- Clonez le dépôt sur votre ordinateur
- Modifiez
common/common.scssdans n’importe quel éditeur de texte - Commitez et poussez vos modifications
- Dans Discourse Admin → Customize → Components, cliquez sur “Check for Updates”
Notes :
- Ce composant fonctionne sur TOUS les thèmes où il est activé (pas lié à un thème spécifique)
- Le fichier CSS contient des commentaires en ligne détaillés expliquant exactement quoi changer
- Les modifications nécessitent de mettre à jour le composant dans l’administration de Discourse après modification
Les commentaires du fichier CSS expliquent :
- Quel sélecteur changer (par exemple,
a.kanban-nav) pour mettre en évidence différents liens - Quelles valeurs de couleur mettre à jour pour différentes couleurs
- Comment ajouter/supprimer la mise en évidence du menu déroulant mobile
Exemples
Changer la couleur du bleu au vert
Le bouton utilise trois nuances de bleu pour créer un effet de dégradé :
- Bleu clair :
#5ca3ff(haut du dégradé) - Bleu moyen :
#4285F4(milieu du dégradé) - Bleu foncé :
#3a75e4(bas/ombre)
Pour passer au vert, trouvez et remplacez ces valeurs dans common/common.scss :
| Bleu actuel | Remplacer par vert |
|---|---|
#5ca3ff |
#5cb860 |
#4285F4 |
#4CAF50 |
#3a75e4 |
#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
Mise en évidence d’un autre lien de navigation
Remplacez le sélecteur a.kanban-nav par votre lien cible :
Exemples :
a[href=“/c/category-name”]- Mettre en évidence une catégorie spécifiquea[href=“/tags/tag-name”]- Mettre en évidence une balise spécifiquea[href=“/my-custom-page”]- Mettre en évidence n’importe quel lien personnalisé#navigation-bar > li:nth-child(2) > a- Mettre en évidence le 2ème bouton de navigation
Comment trouver le sélecteur :
- Ouvrez votre forum dans un navigateur
- Cliquez avec le bouton droit sur le lien que vous souhaitez mettre en évidence
- Sélectionnez “Inspect Element”
- Recherchez les noms de classe (par exemple,
class=“kanban-nav”) ou les valeurs href dans le HTML
Désactiver la mise en évidence du menu déroulant mobile
Trouvez la section intitulée /* Latest dropdown button on mobile */ et soit :
- Supprimez toute la section, OU
- Commentez-la en l’entourant de
/* … */
Mise en évidence des liens dans le menu déroulant mobile
Ajoutez ce bloc CSS après les styles existants :
.fk-d-menu-modal a.kanban-nav {
background: linear-gradient(135deg, #5ca3ff 0%, #4285F4 50%, #3a75e4 100%) !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 8px !important;
}
Remplacez a.kanban-nav par votre sélecteur souhaité.
Développement
Ce dépôt contient :
common/common.scssTous les styles de bouton et guide de personnalisation détailléassets/javascripts/discourse/api-initializers/nav-buttons-highlighter.jsInitialiseur minimal (requis pour Discourse)about.jsonMétadonnées du composant
Dépannage
**Q : Les modifications n’apparaissent pas**
R : Après modification, cliquez sur “Save” et effectuez un rafraîchissement forcé de votre page de forum (Ctrl+F5 ou Cmd+Shift+R).
**Q : Je veux mettre en évidence plusieurs boutons**
R : Copiez tout le bloc CSS du bouton et collez-le sous la règle CSS existante, puis changez le sélecteur et éventuellement les couleurs.
Licence
MIT Public Happiness Movement