Modifier design menu du module "thegruemenu"

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

  • [RÉGLÉ] Modifier design menu du module "thegruemenu"

    Bonjour,

    J'ai installé le module "thegruemenu" afin de générer un menu sur mon site web, aucun problème quant à son utilisation.

    lien du site : http://florian.barbaud.free.fr

    Je souhaiterais modifier le thème du menu j'ai fouillé un peu dans les fichier css du module ainsi qu'inspecter mon site avec firebug mais ne parviens pas à trouver le fichier qui génére le design du menu. J'ai l'impression que c'est du java script, et là c'est le drame

    Cliquez sur l'image pour l'afficher en taille normale  Nom : Capture4.PNG* Affichages : 1* Taille : 10,2 Ko* ID : 1970108
    voici ce que j'aimerais mettre, en essayant de s'y inspirer

    ou une flèches jaunes
    Cliquez sur l'image pour l'afficher en taille normale  Nom : flechejaune.png* Affichages : 1* Taille : 410 octets* ID : 1970109

    Sur le panneau d'administration du module, on a seulement la possibilité de changer de couleurs.

    En vous remerciant pour votre aide
    Dernière édition par thebadgones77 à 20/11/2017, 10h20

  • #2
    Bonjour,

    que voulez-vous faire exactement. Une petite simulation serait la bienvenue.

    Le JS n'est pas en cause dans le style du menu
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Bonjour,
      @thebadgones77
      tu as reussi a faire tourner un site Joomla!3 sur Free ? bravo !!! Mais je doute quand a son maintient avec les mises a jour ... etc .. etc .. dailleurs ton site est en version 3.1.5 !!! Autant dire a la préhistoire.
      Je te conseille vivement de prendre un autre hébergement avant d'aller plus loin, ou d'installer un serveur local sur ta machine si tu veux juste tester les possibilités de Joomla!
      Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer
      Cette année, le JoomlaDay FR a lieu à Bruxelles, les 20 et 21 mai 2022, plus d'infos et inscriptions : www.joomladay.fr

      Commentaire


      • #4
        Bonjour,

        lomart on a déjà évoqué le soucis ensemble sur un autre post, cependant je reviens vers vous, car j'ai changé de module pour le menu. Le précédent n'allais pas avec ce que je voulais faire surtout au niveau de l'articulation en accordeon, celui-ce se développe sur les cotés.

        voici le projet que j'essaye de faire Cliquez sur l'image pour l'afficher en taille normale  Nom : Sans titre.png  Affichages : 1  Taille : 167,1 Ko  ID : 1970127



        Mon menu s'organise actuellement comme ceci Cliquez sur l'image pour l'afficher en taille normale

Nom : Capture6.PNG 
Affichages : 85 
Taille : 87,5 Ko 
ID : 1970131

        manu93fr mon site est actuellement hébergé localement en attente d'un hébergement officiel . je l'ai hébergé sur Free pour que vous puissiez jeter un oeil au code concernant le module.
        Dernière édition par thebadgones77 à 20/11/2017, 14h28

        Commentaire


        • #5
          lomart on a déjà évoqué le soucis ensemble sur un autre post,
          Ca me disait bien quelque chose

          Il faut jouer sur #gruemenu.grue_110 ul li
          mais pas facile à faire avec des images sous l'inspecteur de code
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            j'ai essayé dans un premier temps de modifier la couleur en cherchant le fichier css adéquat. l'inspecteur de code indique "inline"

            Code:
            /* Left-to-Right */
            #gruemenu.grue_110 ul li { margin:0!important; padding:0!important }
            #gruemenu.grue_110 > ul > li { display:block }
            #gruemenu.grue_110 > ul > li.has-sub > a::after {border-left-color: #D1E3FB;  right: 17px; top: 20px; }
            #gruemenu.grue_110 > ul > li.has-sub.active > a::after,
            #gruemenu.grue_110 > ul > li.has-sub:hover > a {border-left-color: #FFFFFF;}
            #gruemenu.grue_110 ul ul { position: absolute; left: -9999px; top: auto; padding-left: 6px;}
            #gruemenu.grue_110 > ul > li > ul::after { content: ""; position: absolute; width: 0; height: 0; border: 5px solid transparent; top: 20px; left: -3px;}
            #gruemenu.grue_110 ul ul ul::after {content: "";position: absolute; width: 0; height: 0; border: 5px solid transparent;  top: 11px; left: -3px;}
            #gruemenu.grue_110 > ul > li:hover > ul {top:0;left:100%;}
            #gruemenu.grue_110 ul ul ul {padding-top: 0;padding-left: 6px;}
            #gruemenu.grue_110 ul ul > li:hover > ul {left: 220px;top: 0;}
            #gruemenu.grue_110 > ul > li > ul::after { border-right-color: #192F4D}
            #gruemenu.grue_110 ul ul ul::after {border-right-color:  #192F4D }
            #gruemenu.grue_110 ul ul li.has-sub > a::after {border-left-color: #D1E3FB;   right: 17px; top: 14px; }
            #gruemenu.grue_110 ul ul li.has-sub.active > a::after,
            #gruemenu.grue_110 ul ul li.has-sub:hover > a::after {border-left-color:#FFFFFF; }
            #gruemenu.grue_110 { background: #192F4D; }
            #gruemenu.grue_110 ul li a, #gruemenu.grue_110
            #gruemenu.grue_110 {font-family: "Open Sans", Arial, Helvetica, sans-serif ;}
            #gruemenu.grue_110,
            #gruemenu.grue_110 ul,
            #gruemenu.grue_110 ul li,
            #gruemenu.grue_110 ul > li > a { font-size:16px}
            #gruemenu.grue_110 ul > li > ul > li > a { font-size:15px!important}
            #gruemenu.grue_110 > ul > li > a { color: #D1E3FB; text-transform:uppercase}
            #gruemenu.grue_110 > ul > li:hover > a,
            #gruemenu.grue_110 > ul > li > a:hover,
            #gruemenu.grue_110 > ul > li.active > a {color: #FFFFFF; background: #11243D;}
            #gruemenu.grue_110 ul ul li:hover > a,
            #gruemenu.grue_110 ul ul li.active > a {color: #FFFFFF; background: #11243D;}
            #gruemenu.grue_110 ul ul li a, #navigation-toggle {color: #D1E3FB; background: #192F4D;}
            #gruemenu.grue_110 ul ul li:hover > a,
            #gruemenu.grue_110 ul ul li.active > a,
            #navigation-toggle:hover {color: #FFFFFF;background:#11243D;}
            #gruemenu.grue_110 #menu-button{ color: #D1E3FB; }
            #gruemenu.grue_110 {-webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;  border-radius: 3px;}
            #gruemenu.grue_110 ul li:first-child > a  { border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
            #gruemenu.grue_110 ul ul li:first-child > a { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 0px; border-bottom-right-radius: px;}
            #gruemenu.grue_110 ul ul li:last-child > a {border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}
            #gruemenu.grue_110 #menu-button::after {border-top: 2px solid #D1E3FB; border-bottom: 2px solid #D1E3FB; }
            #gruemenu.grue_110 #menu-button::before {border-top: 2px solid #D1E3FB; }
            /* Enable Mobile Menu */
            [USER="80685"]media[/USER] screen and (max-width: 720px) {
            #navigation-toggle { z-index:999; display:block; position:fixed; top:10px; right:10px; padding:10px 10px; box-shadow:0px 1px 1px rgba(0,0,0,0.15);    border-radius:3px;    text-shadow:0px 1px 0px rgba(0,0,0,0.5); font-size:20px;        transition:color linear 0.15s; text-decoration: none !important; }
            #navigation-toggle span.nav-line { display:block; height:3px; width:20px; margin-bottom:4px; background:#fff}
            #navigation-toggle:hover {text-decoration:none;    }
            #gruemenu.grue_110  {display: none;}
            }
            Ce code n'est pas modifiable, c'est ce qui est généré depuis le panneau d'administration du module
            Dernière édition par thebadgones77 à 20/11/2017, 14h37

            Commentaire


            • #7
              Personne pour m'aiguiller?

              Commentaire


              • #8
                Bonsoir,

                Tous le code étant en inline, il faudrait désactiver sa génération puis créer un fichier CSS pour le remplacer avec ses propres désirs.
                Un gros boulot en perspective ...
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  ah, ça parait compliqué à mettre en place. dois-je me diriger vers un autre module n'ayant pas autant de protection que celui-ci?

                  Commentaire


                  • #10
                    Où alors me tourner vers du code css plutôt qu'un module tout fait?
                    Dernière édition par thebadgones77 à 01/12/2017, 10h11

                    Commentaire


                    • #11
                      Bonjour,
                      Où alors me tourner vers du code css plutôt qu'un module tout fait?
                      Oui et non, car il faudra toujours du php pour créer le code HTML qui appele le CSS
                      Il est préférable de trouver un module tout fait
                      UP, le plugin universel à découvrir sur https//up.lomart.fr
                      bgMax
                      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                      Commentaire


                      • #12
                        Je suis sur maximenu ck qui à l'air beaucoup plus accessible niveau protection

                        Commentaire


                        • #13
                          Je suis sur maximenu ck qui à l'air beaucoup plus accessible niveau protection
                          Ce n'est pas une protection, c'est une méthode de codage
                          De mémoire, MaximenuCK utilise un fichier PHP pour créer une feuille de style dynamique. C'est pas forcément plus simple
                          UP, le plugin universel à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          Commentaire

                          Annonce

                          Réduire
                          Aucune annonce pour le moment.

                          Partenaire de l'association

                          Réduire

                          Hébergeur Web PlanetHoster
                          Travaille ...
                          X