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 : 75 
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 : 66 
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="https://cdnjs.cloudflare.com/ajax/li...ss/all.min.css"/>
          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
            https://fontawesome.com/icons/envelo...olid&f=classic

            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
                        1 sur 2 < >

                        C'est [Réglé] et on n'en parle plus ?

                        A quoi ça sert ?
                        La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                        Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                        Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                        Comment ajouter la mention [Réglé] à votre discussion ?
                        1 - Aller sur votre discussion et éditer votre premier message :


                        2 - Cliquer sur la liste déroulante Préfixe.

                        3 - Choisir le préfixe [Réglé].


                        4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                        2 sur 2 < >

                        Assistance au forum - Outil de publication d'infos de votre site

                        Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                        Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                        Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                        UTILISER À VOS PROPRES RISQUES :
                        L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                        Problèmes connus :
                        FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                        Installation :

                        1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                        Archive zip : https://github.com/AFUJ/FPA/zipball/master

                        2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                        3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                        4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                        5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                        6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                        et remplacer www. votresite .com par votre nom de domaine


                        Exemples:
                        Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                        Télécharger le script fpa-fr.php dans: /public_html/
                        Pour executer le script: http://www..com/fpa-fr.php

                        Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                        Télécharger le script fpa-fr.php dans: /public_html/cms/
                        Pour executer le script: http://www..com/cms/fpa-fr.php

                        En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                        Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                        Voir plus
                        Voir moins

                        Partenaire de l'association

                        Réduire

                        Hébergeur Web PlanetHoster
                        Travaille ...
                        X