Joomladay francophone 2018 à Paris 18 et 19 mai

Top menu BEEZ

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

  • Top menu BEEZ

    Bonjour à tous,

    J'ai un problème avec le top menu de Beez, donc en position user 3, je souhaiterais que l'item activé du top menu change de couleur lorsqu'on est sur la page de l'item en question, histoire d'avoir un repère visuel sur la navigation dans le site étant donné que je souhaite me passer du breadcrumbs.
    Bon à savoir : le top menu correspond à mon main menu.
    J'ai bien navigué à travers ce forum mais en vain pour trouver une réponse simple, en existe-t-il une ? Si oui, laquelle, même si elle n'est pas simple…

    Un grand merci à celle ou celui qui voudra bien m'apporter une réponse.
    Dernière édition par elchecmoi à 09/02/2010, 11h11

  • #2
    Bonjour,

    Il faut paramétrer le css cad l'ID: #active_menu-nav du fichier layout.css ligne 223 du template.

    TT
    Templates Joomla sur mesure & responsive http://alphadesign.fr/creation-de-sites-templates-joomla-responsive.html
    Formations Joomla http://alphadesign.fr/services/formations-joomla.html
    Formations Joomla conventionnées: DIF et autres formations continues.
    Checklist SEO pour Joomla http://alphadesign.fr/joomla/checklist-seo-pour-joomla-referencement-joomla.html

    Commentaire


    • #3
      Merci AlphaDesign,
      mais n'étant pas très forte en css, je te rapporte la réponse que Papounet m'a donnée sur un autre post ci-dessous ainsi que ma question qui suit.
      Avant de te la donner, je te pose la question avant (qui revient un peu à celle que j'ai posée à Papounet mais en plus clair) :
      Que dois-je créer exactement dans ma classe spéciale du style, quelque comme ça à rajouter à partir de la ligne 228
      #active_menu-nav ul li item1
      {background:FFF;
      color:665544;
      }

      Ou là là, je suis vraiment désolée, mais la fatigue me montre que le css n'est pas encore naturel chez moi hélas…
      En fait, un exemple de la classe à écrire m'aiderait énormément… c'est peut-être trop demander ?

      Et enfin la réponse de Papounet :

      Envoyé par papounet Voir le message
      Ce sont les classes css du sommaire des pages d'un article multipage.

      Pour ton problème de couleur de ton menu, tu vas faire ceci :
      1. Affiches la page de ton site.
      2. Affiches ensuite le code de la page à l'aide de ton navigateur. Sous firefox, faire Affichage + Code source de la page
      3. Cherche ton menu dedans. Tu vas trouver quelque chose dans ce genre :
      Code PHP:
      <div class="module_menu">
        <
      div>
          <
      div>
            <
      div>
              <
      h3>Main Menu</h3>
            <
      ul class="menu">
                   <
      li id="current" class="active item1">
                     <
      a href="http://localhost/Joomla_1.5.14-FR/">
                         <
      span>Home</span>
                     </
      a>
                  </
      li>
                <
      li class="parent item27">
        
      ETC.... 
      Les styles .item1, .item2, etc. sont prévus pour solutionner ton problème.
      Note : Le numéro correspond au lien du menu. Ce numéro est attribué par joomla lors de la création du lien. il n'a pas de correspondance avec l'ordre du menu. Il est unique.

      Papounet
      Envoyé par elchecmoi Voir le message
      Merci Papounet pour ta prompte réponse !
      Ok, j'ai bien identifié mes items de menu dans le code source html. Seulement, pour attribuer les couleurs que je souhaite à chaque item lorsqu'il est activé, dois-je rajouter des class css spécifiques à mon top menu dans le layout.css dans la partie top-nav en attribuant une spécificité menu-ul ou en le plaçant plutôt dans le main-menu ?
      Je m'excuse mais je ne suis pas très forte en css non plus, disons que j'y vois de plus en plus clair grâce à joomla, mais il me reste bien des lacunes encore…
      Dernière édition par elchecmoi à 08/02/2010, 16h28

      Commentaire


      • #4
        HELP please, je n'y arrive pas.
        J'ai essayé différents codes css en essayant de recopier ce qui est dans le header ul du top nav (puisque mon changement de couleur fonctionne lorsque je passe la souris dessus) mais pas pour l'item actif
        J'ai rajouté ça en dessous des paramétrages du top nav ul et juste avant le fontzize :

        #active_menu-nav ul li item1 a:current
        {
        background:#fff;
        color:#665544;
        }

        j'ai aussi essayé la même chose sans "-nav" après active_menu, toujours en vain

        Qu'est qui n'est pas bon ? ou quel est le bon code, ce serait trop top…
        et je pensais recopier la même chose pour mes autres items suivants…
        ou faut-il que je développe pour le current, focus, active, hover, visited, ...? d'ailleurs (et comme quoi ça montre bien que je suis néophite en css) pourquoi il y a autant d'attributs, normalement il ne devrait y en avoir que 4 max (link, hover, active, visited) ? non ??????

        Pffff, je me désespère toute seule, alors si qqn pouvait venir me lancer une bouée, ce serait coooooooooooooool.
        Dernière édition par elchecmoi à 08/02/2010, 17h45

        Commentaire


        • #5
          OK,

          Dans le fichier layout.css du template beez voici ce que l'on trouve ligne 222
          Code:
          /* header Top-nav */
          #header #active_menu-nav
          {
              background:#000;
              color:#fff;
          }
          Il suffit de changer la couleur du background et la couleur du texte (color) par celles que tu souhaites

          tu peux donc remplacer les valeurs de couleurs précédentes par les tiennes en n'oubliant pas le #:
          Code:
          /* header Top-nav */
          #header #active_menu-nav
          {
              background:#fff;
              color:#654;
          }
          ++, TT
          Dernière édition par AlphaDesign à 08/02/2010, 17h55
          Templates Joomla sur mesure & responsive http://alphadesign.fr/creation-de-sites-templates-joomla-responsive.html
          Formations Joomla http://alphadesign.fr/services/formations-joomla.html
          Formations Joomla conventionnées: DIF et autres formations continues.
          Checklist SEO pour Joomla http://alphadesign.fr/joomla/checklist-seo-pour-joomla-referencement-joomla.html

          Commentaire


          • #6
            Et bien, tu m'en vois fort désolée, mais j'aurais aussi aimé que ce soit si simple, la réponse de Papounet m'avait mis la puce à l'oreille que ce ne serait pas si simple, car ta solution ne fonctionne pas.

            Le site est en cours, mais je te mets l'adresse
            http://www.caracteristic.fr/www.clau....fr/joomla1.5/
            tu pourras voir de toi-m^me (je viens de remettre le code comme tu dis) et surtout voir aussi que j'ai qd-même réussi à mettre mon fond blanc mais seulement sur le hover, alors que je voudrais qu'il le soit lorsque l'item est activé.

            Merci qd-même pour tes réponses. Mais si tu subodores une réponse proche de ce que Papounet entend… elle sera plus que bienvenue.

            a++

            Commentaire


            • #7
              diable j'avais tout faux, essaye ceci en ajoutant à ton code css :


              Code:
              #header ul li#current
              {
                  background:#fff;
                  color:#654;
              }
              ++, TT
              Templates Joomla sur mesure & responsive http://alphadesign.fr/creation-de-sites-templates-joomla-responsive.html
              Formations Joomla http://alphadesign.fr/services/formations-joomla.html
              Formations Joomla conventionnées: DIF et autres formations continues.
              Checklist SEO pour Joomla http://alphadesign.fr/joomla/checklist-seo-pour-joomla-referencement-joomla.html

              Commentaire


              • #8
                Merci Alpha_Design pour les tentatives, mais ça n'est toujours pas ça.
                snif !

                Commentaire


                • #9
                  Bonjour,

                  Si tu remplace: #header ul li#current
                  par: #header ul li.active

                  C'est un test...
                  Un peu de pub: http://www.aplomb.ch

                  Commentaire


                  • #10
                    Ca ne fonctionne toujours pas.

                    Je te mets mon code de la top nav :
                    #header #active_menu-nav
                    {
                    background:#fff;
                    color:#654;
                    }

                    #header ul
                    {
                    background:#654;
                    display:block;
                    margin:-7px 0 -2px;
                    padding:5px 0;
                    text-align:right;
                    }

                    #header ul li
                    {
                    background:#654;
                    color:#fff;
                    display:inline;
                    text-align:center;
                    }

                    #header ul li a:link,#header ul li a:visited
                    {
                    background:#654;
                    color:#fff;
                    text-decoration:none;
                    border-right:solid 1px #fff;
                    padding:5px 10px;
                    line-height:1.7em;
                    }

                    #header ul li a:hover,#header ul li a:active,#header ul li a:focus
                    {
                    background:#fff;
                    color:#654;
                    }

                    Je crois bien que Papounet a raison en disant qu'il faut que je spécifie mes items histoire de réécrire par dessus la règle générale, mais je ne sais pas comment spécifier mon code, je vais essayer de le solliciter à nouveau…

                    Encore merci Al1pb pour toutes ces tentatives. Si jamais tu as une idée, je suis preneuse bien sûr.

                    a+
                    CC
                    Dernière édition par elchecmoi à 09/02/2010, 13h15

                    Commentaire


                    • #11
                      Un dernier pour la route:

                      essaie: #header ul li.active a {

                      si ça fonctionne, il faudra renseigner les :hover...
                      Un peu de pub: http://www.aplomb.ch

                      Commentaire


                      • #12

                        Tu es TROP FORT Al1pb !!!!!! YES, CA FONCTIONNE !!!!!

                        Merci mille fois, tu es génial !!!!

                        J'avoue ne pas saisir la nuance entre :
                        #header ul li.active a
                        et
                        #header ul li a:active
                        Le 1er prendrait-il la main sur le 2nd ?

                        Bref, tu as réussi à régler mon problème, et je t'en suis infiniment reconnaissante. D'ailleurs je mets le post en réglé dans la foulée.

                        Bonne journée,
                        CC
                        Dernière édition par elchecmoi à 09/02/2010, 13h14

                        Commentaire


                        • #13
                          De rien.

                          En fait, je suis al1pb et non AlphaDesign...

                          Si tu te souviens bien, il y a un bon moment, c'est toi qui m'avait aidé, c'était un problème d'url rewirting avec phoca...

                          Pour te répondre, le li.active, active est une classe que les menus de joomla mettent automatiquement, donc le .active du css s'adresse à la classe active.
                          Le a:active est une pseudo-classe de la balise a (comme :hover, :link...) qui donne l'état de la balise.

                          J'ai utilisé Firebug pour trouver, en fait #header ul li a:link, #header ul li a:visited prenais la pain sur #header ul li#current ou #header ul li.active

                          Bon le principal c'est que ça fonctionne.
                          Un peu de pub: http://www.aplomb.ch

                          Commentaire


                          • #14
                            Toutes mes confuses al1pb !!!
                            J'ai tellement le nez dans le guidon que je ne capte même plus ce qui se passe autour de moi… Il faut que je fasse gaffe… Encore désolée !
                            Oui, maintenant que tu me le rappelles, je me souviens t'avoir aidé pour phoca… n'ayant pas eu affaire au web l'an dernier, je ne suis même pas certaine de pouvoir reexpliquer à nouveau auj.… Enfin, j'espère que ma lucidité sur les outils va revenir au galop pour pouvoir aider à nouveau !!!!
                            Alors c'est donc toi, alp1b, qui est génial et que je remercie infiniment ! et à qui je voue tous ces
                            J'ai rectifié les posts précédents. Revient à qui de droit les remerciements !!
                            Et merci pour l'explication du css ! Tu me confirmes ce que je subodorais. Bonne journée à toi.
                            En espérant pouvoir t'aider à nouveau 12c4.
                            Céline

                            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