Ajouter une icône au titre d'un module

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Ajouter une icône au titre d'un module

    Bonjour,
    Sur un site Joomla 3, mes titres de module étaient précédés d'une icône Awesome en utilisant cette écriture : [icon-book] Média
    Cassiopeia accepte cette méthode pour personnaliser les liens de menus, mais je n'arrive pas à l'appliquer aux modules.
    Avez-vous une solution ?

    https://kb-joomla4.cinnk.com/fr/kb/m...-liens-de-menu

  • #2
    Bonjour

    je ne comprends pas la raison pour laquelle vous souhaitez ajouter des icônes aux modules .
    Les noms de modules ne sont pas affichés, comme le sont les liens de menus.
    Merci de préciser
    Merci

    Cordialement

    Commentaire


    • #3
      Envoyé par jps0302 Voir le message
      Bonjour
      je ne comprends pas la raison pour laquelle vous souhaitez ajouter des icônes aux modules .
      Les noms de modules ne sont pas affichés, comme le sont les liens de menus.
      Merci de préciser
      Bonjour jps,
      Il est possible d'afficher le titre d'un module avec un clic sur l'option.
      Cliquez sur l'image pour l'afficher en taille normale

Nom : module-contact.png 
Affichages : 333 
Taille : 86,0 Ko 
ID : 2043744
      Ci-dessous l'affiche d'une icône avant le titre sur Joomla 3, en précisant le titre [icon-envelope] Contact

      Cliquez sur l'image pour l'afficher en taille normale

Nom : module-contact-bottom.png 
Affichages : 318 
Taille : 3,3 Ko 
ID : 2043745

      Commentaire


      • #4
        La methode reste valable.mais c est fontawesome v6, les noms de classe ont peut etre changé
        Dernière édition par lefabdu51 à 01/10/2022, 17h38

        Commentaire


        • #5
          Envoyé par lefabdu51 Voir le message
          La methode reste valable.mais c est fontawesome v6, les noms de classe ont peut etre changé
          Effectivement, les noms de classe sont différents, et je n'arrive pas à appliquer les instructions de ce tuto
          https://www.alticreation.com/comment...-font-awesome/

          J'ai créé la liaison avec la librairie dans index.php, entre <head> et </head>
          Code:
          <link rel="stylesheet"
          href="[URL="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"]https://cdnjs.cloudflare.com/ajax/li...ss/all.min.css[/URL]"/>
          Maintenant, je ne sais pas comment utiliser le code
          Code:
          <i class="fa-regular fa-envelope"></i>
          Si je place fa-regular fa-envelope dans le champ Classe d'en-tête/titre, un cadre de remplacement s'affiche devant Contact à la place de l'icône.
          Je suis sur la bonne voie, j'attends un petit coup de pouce pour finaliser ...
          Cliquez sur l'image pour l'afficher en taille normale  Nom : icone-module-contact-bottom.png  Affichages : 0  Taille : 3,7 Ko  ID : 2043748
          Dernière édition par Alain_56 à 02/10/2022, 08h16

          Commentaire


          • #6
            essaye ceci: extrait de la doc fontawesome 6.2:

            <i class="fa-solid fa-envelope"></i>

            si tu cherche la nouvelle syntaxe à appliquer
            Envelope icon in the Solid style. Make a bold statement in small sizes. Available now in Font Awesome 6.

            Commentaire


            • #7
              Bonjour,

              Les tutoriels ne sont pas toujours adaptés pour s'utiliser avec Joomla car Font Awesome Free 5.15.4 est déjà installé nativement.
              L'appel se faisant par la classe css "icon-" suivi du nom de l'icône par exemple "envelope", ce qui donne "icon-envelope",
              on peut aussi utiliser "fas fa-envelope" mais le premier choix me semble meilleur.




              Effectivement, on peux insérer dans la classe d'entête/titre, ce qui va permettre de faire apparaître l'enveloppe précédent le titre.

              Cependant cette solution pose problème car la classe est appliquée sur la balise titre, sous cassiopeia par défaut, ce sera la h3.
              Cela a pour conséquence d'écraser la "font-family" définie par la variable css sur les h3.

              Pour ma part, j'ai résolu en développant un sélecteur d'icône qui s'associe aux modules pour choisir sans utiliser leur nom.
              Je l'ai intégré avec plus de choix dans mon framework de template. Ce framework sera bientôt disponible avec d'autres fonctionnalités inédites.

              En attendant, je te propose une solution alternative tout aussi performante...


              Cette solution que je préconise, c'est d' écrire sous la forme [icon]book[/icon] dans le titre d'un module suivi d'un espace entre le code et le titre.

              Sous Joomla 3, ce type d'écriture similaire au "bbcode" n'etait pas natif et ce ne sera pas non plus dans joomla 4 car en réalité, c'est une extension tierce comme rokcandy qui effectue ce changement. Le composant de rokcandy n'a pas été porté sur joomla 4 mais le plugin de "6 ko" qui est le moteur de rokcandy a bien été adapté et c'est bien suffisant !

              L'extension qui est une adaptation de rokcandy se nomme EASY SHORTCODE, on peut télécharger en cliquant sur "Get Easy Shortcodes (v1.1.0)" depuis
              https://extensions.joomla.org/extens...sy-shortcodes/

              Les étapes sont simples mais il faut les respecter :

              1. Installation du plugin
              Télécharger via le lien ci-dessus puis installer comme toute extension joomla,
              N'oubliez pas de l'activer dans la gestion des plugins car il ne se fait pas automatiquement.

              2. Créer le fichier shortcodes.ini
              Celui-ci doit être placé dans le repertoire html de votre template "par défaut".
              Si c'est cassiopiea le chemin sera donc templates/cassiopeia/html/shortcodes.ini

              Si vous n'avez pas d'editeur html comme notepad++ ou vous n'avez pas la possibilité de transférer via ftp ou autre, vous pouvez utiliser Joomla !
              Dans Système > Templates du site > Cassiopeia Details et fichiers
              Cliquer sur "nouveau fichier" puis selectionner "html" dans la colonne de gauche de la fenêtre popup ouverte,
              saisissez le nom de fichier : shortcodes et le type de fichier : ini puis créer

              L'éditeur s'ouvre, il vous reste à saisir le code de remplacement :

              Code:
              [icon]{class}[/icon]=<i class="icon-{class}"></i>



              ​​​​​​​Il ne reste plus qu'à sauvegarder et à tester.

              Dans le module menu, j'ai écrit [icon]book[/icon] Menu principal

              Le résultat



              L'avantage, c'est d'avoir la classe appliqué uniquement sur l'icône avec le code html

              Code:
              <i class="icon-book"></i>
              Le plugin prend peu de ressource (infime). j'ai utilisé de nombreuses fois rokcandy dans le développement de templates car cela permettait d'offrir divers éléments déjà pré-réglés avant l'apparition des builders avec une personnalisation possible donc le fait de réutiliser la même technique avec le fichier ini est une très bonne idée sous Joomla 4.
              De plus, c'est un plugin système et non un plugin de contenu, ce qui lui permet de faire un rechercher/remplacer dans toute la page (y compris dans les titres de liens ou de modules).

              Essayer de faire évoluer le code de façon à ajouter par exemple des classes css de couleur en variable de façon à personnaliser l'icône indépendamment du titre. exemple dans shorcodes.ini : [icon couleur="{couleur}"]{class}[/icon]=<i class="icon-{class} {couleur}"></i>
              ajouter vos couleurs dans le fichier css personnalisé en définissant les classes par des couleurs spécifiques ou en utilisant les variables définis par bootstrap et ceux du template, et le tour est joué !

              On peut même aller plus loin....

              En créant des icônes de deux couleurs ( exemple duotone : https://fontawesome.com/docs/web/style/duotone dans font-awesome version pro uniquement ) ou multi-couleurs avec des fichiers svg (via inkscape par exemple). Lors de mes créations de template sur mesure, je créé en premier les images vectorielles personnalisées (des créations originales adaptés au client) en fichiers svg puis je les ajoute dans fontello.com pour les transformer en fonte. J'utilise également des propriétés d'animations et d'icônes en plusieurs couleurs. J'incorpore la fonte dans le template et je peux utiliser ainsi les icônes personnalisés dans tous le site via les méthodes évoquées comme easy shortcode et autres.

              Cela peut sembler complexe et c'est le cas notamment pour écrire la css et réaliser des animations mais néanmoins, je travaille actuellement sur la simplification notamment de l'insertion de fonte et d'icônes par un simple glisser/deposer. A suivre

              N'hésitez pas à faire votre retour sur le sujet.
              Dernière édition par daneel à 03/10/2022, 06h49
              Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

              Commentaire


              • #8
                Envoyé par daneel Voir le message
                Bonjour,

                Les tutoriels ne sont pas toujours adaptés pour s'utiliser avec Joomla car Font Awesome Free 5.15.4 est déjà installé nativement.
                L'appel se faisant par la classe css "icon-" suivi du nom de l'icône par exemple "envelope", ce qui donne "icon-envelope",
                on peut aussi utiliser "fas fa-envelope" mais le premier choix me semble meilleur.
                Merci daneel,
                Cette réponse documentée doit solutionner mon problème. Je vais me pencher sur les options...
                Alain

                Commentaire


                • #9
                  Yeaaaa,
                  Je viens d’appliquer avec succès , ta proposition avec l'extension EASY SHORTCODE.
                  C'est simple et efficace !
                  Merci

                  Commentaire


                  • #10
                    Oups,
                    Je constate que les css contenus dans user.css ne sont plus appliqués !?
                    J'ai désactivé EASY SHORTCODE mais rien n'y fait.
                    Avez-vous une idée ?

                    Commentaire


                    • #11
                      Envoyé par Alain_56 Voir le message
                      Oups,
                      Je constate que les css contenus dans user.css ne sont plus appliqués !?
                      Le plugin ne fait que prendre le contenu du shortcodes.ini pour effectuer virtuellement un rechercher/remplacer.
                      Il ne modifie pas les fichiers ou le contenu existant, je doute que ce soit la cause de ton problème.
                      Dernière édition par daneel à 09/10/2022, 18h46
                      Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

                      Commentaire


                      • #12
                        Envoyé par daneel Voir le message
                        Le plugin ne fait que prendre le contenu du shortcodes.ini pour effectuer virtuellement un rechercher/remplacer.
                        Il ne modifie pas les fichiers ni le contenu existant, je doute que ce soit la cause de ton problème.
                        Tu as raison Daneel, une ligne de code erroné dans le css est à l'origine du problème.
                        MERCI, bonne fin de week-end

                        Commentaire

                        Annonce

                        Réduire
                        Aucune annonce pour le moment.

                        Partenaire de l'association

                        Réduire

                        Hébergeur Web PlanetHoster
                        Travaille ...
                        X