Joomladay francophone 2018 à Paris 18 et 19 mai

top menu avec images en css

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

  • top menu avec images en css

    Bonjour,

    Je suis toujours débutant sous Joomla, j'ai commencé en créant un template fait maison, j'ai pu y intégrer mes différents modules etc..
    J'en viens maintenant à personnaliser ces différents menus et modules.

    J'ai un menu horizontal avec les liens de type texte, je souhaiterais les remplacer par des images selon l'état. Le css ne me pause pas de problème, je vois comment faire pour un site sans joomla mais la ... je bloque complètement.
    En fait, il faudrait pouvoir personnaliser les liens <a href="" ... > en leurs attribuant une classe ou un id.
    Mais comment pourrais je le faire ?
    Auriez vous une piste pour me mettre sur la voie ?

    Je rencontre le même problème de personnalisation pour les différents modules, j'aimerais utiliser des images par exemple pour le module "connection"... mais comme pour le menu je ne vois pas trop comment le cibler, le personnaliser
    En espérant que l'un d'entre vous pourra éclairer ma lanterne
    Merci d'avance à tous

  • #2
    Il faut regarder le code généré par joomla et les class et adapter son css dessus!
    Pas d'aide par MP ce qui vous aide vous peut servir aux autres!!!

    Commentaire


    • #3
      Bonjour,

      Merci pour votre réponse, j'ai bien regardé le code généré à l'affichage pour le menu principal "mod_mainmenu", il apparaît sous forme de tableau <table> alors que j'ai vu d'autres l'obtiennent sous forme de liste <ul><li>

      Par rapport au menu, j'aurais besoin d'attribuer une image propre à chaque lien via css. Le souci c'est que je n'ai pas suffisamment d'id ou de classes pour pouvoir cibler chaque lien indépendamment.

      Pourriez vous s'il vous plaît m'éclairer davantage sur la façon de procéder ?
      En vous remerciant par avance

      Commentaire


      • #4
        tu peux faire un tour sur mon tuto du menu image, ça pourrait t'aider
        http://www.joomlack.fr.nf/tutos-desi...age-hover.html
        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
        http://www.template-creator.com Outil de création de templates
        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

        Commentaire


        • #5
          Bonsoir,

          Merci pour le lien
          J'aurais aimé répondre plus tôt mais faute de temps
          J'ai jeter un oeil au code qui m'a l'air bien sympa, malheureusement, je ne peux m'en servir pour résoudre mon problème.

          Je ne comprends pas comment tu fais pour attribuer une image différente pour chaque bouton. Mon menu, généré par joomla (mod_mainmenu) est sous forme de tableau, j'aurais préféré une liste ul li mais bon....

          Ce qui me chagrine, c'est que je ne peux pas cibler mes entrées une à une pour leur attribuer une image spécifique comme elle n'ont ni id ni class de définie.
          J'ai retourné le problème dans tous les sens, au pire, il faudrait que je puisse éditer le code du module pour lui placer mes idées
          (ex : lien1, lien2) pour pouvoir enfin attribuer mes images

          Si quelqu'un peut éclairer ma lanterne ce serait vraiment super
          Merci d'avance

          Commentaire


          • #6
            dans l'administration du module tu lui donnes "style de menu" : "liste"
            dans l'administration des liens du menu dans les parametres avancées tu peux choisir une image à utiliser
            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
            http://www.template-creator.com Outil de création de templates
            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

            Commentaire


            • #7
              Salut
              Je te remercie de m'avoir répondu si rapidement
              J'avais déjà jeter un œil dans les paramètres avancés, par contre la liste déroulante pour choisir l'image ne me propose mes images..

              Je dois avoir un souci avec les images, j'ai créé un dossier dans média spécifique à mon projet et quand j'essaie d'en insérer l'une d'entre elles dans un article, l'image ne s'affiche pas. Je ne sais pas si les 2 problèmes sont liés.
              En tout cas ce qui compte le plus pour le moment, c'est mon monstrueux problème de menu

              Encore merci

              Commentaire


              • #8
                Personne pour m'éclairer un peu ?

                Commentaire


                • #9
                  Excusez moi de revenir encore avec ça.
                  Je viens de réessayer en passant par les paramètres avancés du module "main_menu".
                  J'ai choisi "utiliser les images ci dessous" dans la liste déroulante et j'ai placé une image pour mon premier lien, j applique, je sauvegarde
                  Rien ne s'affiche, j'ai beau cherché je ne parviens pas à localiser le problème.
                  Est ce que vous avez déjà rencontré le problème ?
                  Merci d'avance

                  Commentaire


                  • #10
                    Top menu avec fonds de couleurs différents pour chaque lien en css

                    Bonjour,

                    Je tombe sur ta question aujourd'hui en cherchant moi même une solution à mon problème, très similaire !

                    J'ai fait mon template, dans lequel j'ai fait un top menu avec mes différents liens (chapitres).
                    Je souhaite appliquer une couleur de fond à chacune des "capsules" (chacun de mes liens a un border: 1px qui l'entoure, d'où la mise en page de tous mes liens dans des capsules rectangulaires).

                    Mais voilà, comme toi, je n'arrive pas à trouver la classe ou la div qui correspond à chaque lien que j'ai créé pour pouvoir les personnaliser, chacun, d'une couleur différente en fond.

                    Je viens de lire la proposition de mettre une "Image de menu" (dans les "Paramètres-Système" dans un de mes "Alias de menu,(éditer)")

                    = Mais d'une part il me semble que cela sert à juste mettre un petit icône à gauche ou à droite du lien, et non en fond comme je le souhaite.
                    D'autre part cela ne fonctionne pas. J'ai testé avec une image dans la liste proposée, et elle n'apparait pas.

                    "JSparrow" as-tu trouvé la solution depuis ?
                    Quelqu'un a t-il déjà réussi à le faire pour me l'expliquer ?

                    Merci d'avance pour votre aide

                    Commentaire


                    • #11
                      pour ton souci j'irais faire un tour par là
                      http://www.joomlack.fr.nf/tutos-desi...icouleurs.html
                      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                      http://www.template-creator.com Outil de création de templates
                      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                      Commentaire


                      • #12
                        Oh merci pour ce lien ! Je vais le testé dès cette aprèm,
                        je vous tiens au courant

                        Commentaire


                        • #13
                          Solution pour un topmenu multicolor !!!-)

                          J'ai réussi à le mettre en place !

                          Merci Merci Merci !!!

                          Cela fait plusieurs semaines que je m'arrache les cheveux pour répondre à cette demande de menu multicolore de mon client, et je ne trouvais pas :/

                          alors merci encore !!!

                          ... et pour tous ceux qui veulent le faire aussi voici les étapes :


                          1-Créez un nouveau module menu ou dupliquez le topmenu existant. Il faut lui donner les paramètres suivants :
                          - style d'affichage : Liste
                          - ajouter un ID : menucouleur
                          Le style Liste nous permet d'avoir des éléments qui sont repérés par leur numéro d'item. L'ID va identifier notre menu pour les CSS.
                          Index.php

                          2-Dans le fichier index.php du template, il faut ajouter quelques lignes de javascript qui vont donner l'effet "hover" pour l'utilisation sous Internet Explorer. Avant la balise , insérez les lignes suivantes :
                          <script type="text/javascript">
                          window.addEvent('domready', function() {
                          var sfEls = document.getElementById("menucouleur").getElements ByTagName("li");
                          for (var i=0; i<sfEls.length; i++) {
                          sfEls[i].onmouseover=function() {
                          this.className+=" sfhover";
                          }
                          sfEls[i].onmouseout=function() {
                          this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                          }
                          }
                          });
                          </script>

                          Avec ce script, nos éléments survolés auront la classe ".sfhover".
                          Identification des éléments

                          3-Utilisons Webdeveloper (https://addons.mozilla.org/fr/firefox/addon/60) pour voir à quoi ressemblent nos éléments. SI vous n'avez pas encore installé cette barre d'outil dans Firefox, c'est le moment !
                          On clique sur "Afficher les informations des éléments" et on trouve pour chacun de nos éléments de liste LI les classes avec les items :
                          li.item34, li.item35, li.item36, li.item37
                          Ici j'ai quatre liens dans mon menu, et les items qui sont rattachés ne sont valables que pour mon propre menu. A vous de trouver ceux qui correspondent au votre. Je vous conseille de faire cette manipulation une fois que votre menu est figé.

                          4-Fichier CSS
                          Dans le fichier CSS du template (généralement template.css), on va ajouter les lignes qui piloteront les couleurs et attributs graphiques de notre menu. A la fin du fichier, ajoutez les lignes suivantes :
                          /****************** Menu multicouleurs *******/
                          #menucouleur li {
                          padding:5px;
                          list-style:none;
                          }
                          #menucouleur li.item34 {
                          background:#ff0000;
                          }
                          #menucouleur li.item35 {
                          background:#ff4000;
                          }
                          #menucouleur li.item36 {
                          background:#ff8000;
                          }
                          #menucouleur li.item37 {
                          background:#ffBF00;
                          }
                          #menucouleur li.item34.sfhover, #menucouleur li.item34:hover {
                          background:#AD0000;
                          }
                          #menucouleur li.item35.sfhover, #menucouleur li.item35:hover {
                          background:#AD2800;
                          }
                          #menucouleur li.item36.sfhover, #menucouleur li.item36:hover {
                          background:#AD5700;
                          }
                          #menucouleur li.item37.sfhover, #menucouleur li.item37:hover {
                          background:#AD8200;
                          }

                          Commentaire


                          • #14
                            je ne pense pas que ce toi nécessaire de faire un copier coller de mon tuto ici...
                            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                            http://www.template-creator.com Outil de création de templates
                            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                            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
                            Travaille ...
                            X