Joomladay francophone 2018 à Paris 18 et 19 mai

Plusieurs couleurs pour un menu

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

  • Plusieurs couleurs pour un menu

    Bonjour,

    J'ai fait un template sous artisteer, mais le problème c'est que je voudrais que les rubriques du menu soit de différentes couleurs en survol. Pour l'instant en survol c'est rose pour toutes les rubriques.

    Une image de mon menu :



    Donc voilà, j'aimerais que la rubrique "hi-tech" et "mode" (entre autre) soit d'une couleur différente en survol ainsi que leur sous-menu.

    J'ai tout ça comme code dans mon fichier css, qui je pense fait référence au menu ! (du coup je m'y perd un peu et je ne sais pas ce que je dois modifier ou ajouter)

    Code:
    /* begin Menu */
    /* menu structure */
    
    .artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
    {
      text-align:left;
      text-decoration:none;
      outline:none;
      letter-spacing:normal;
      word-spacing:normal;
    }
    
    .artmenu, .artmenu ul
    {
      margin: 0;
      padding: 0;
      border: 0;
      list-style-type: none;
      display: block;
    }
    
    .artmenu li
    {
      margin: 0;
      padding: 0;
      border: 0;
      display: block;
      float: left;
      position: relative;
      z-index: 5;
      background:none;
    }
    
    .artmenu li:hover
    {
      z-index: 10000;
      white-space: normal;
    }
    
    .artmenu li li
    {
      float: none;
    }
    
    .artmenu ul
    {
      visibility: hidden;
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
      background:none;
    }
    
    .artmenu li:hover>ul
    {
      visibility: visible;
      top: 100%;
    }
    
    .artmenu li li:hover>ul
    {
      top: 0;
      left: 100%;
    }
    
    .artmenu:after, .artmenu ul:after
    {
      content: ".";
      height: 0;
      display: block;
      visibility: hidden;
      overflow: hidden;
      clear: both;
    }
    .artmenu, .artmenu ul
    {
      min-height: 0;
    }
    
    .artmenu ul
    {
      background-image: url(../images/spacer.gif);
      padding: 10px 30px 30px 30px;
      margin: -10px 0 0 -30px;
    }
    
    .artmenu ul ul
    {
      padding: 30px 30px 30px 10px;
      margin: -30px 0 0 -10px;
    }
    
    /* begin MenuItem */
    .artmenu ul li
    {
      clear: both;
    }
    
    .artmenu a , .artmenu a span
    {
      height: 23px;
      display: block;
    }
    
    
    .artmenu a
    {
      cursor: pointer;
      text-decoration: none;
      margin-right: 3px;
      margin-left: 3px;
    
    }
    .artmenu a
    {
      background-image: url('../images/item-left.png');
      background-position: left top;
      background-repeat: no-repeat;
    }
    
    .artmenu a span
    {
      background-image: url('../images/item-right.png');
      background-position: right top;
      background-repeat: no-repeat;
    }
    .artmenu a span span
    {
      font-family: Arial, Helvetica, Sans-Serif;
      font-size: 12px;
      font-style: normal;
      font-weight: normal;
      color: #2C343A;
      padding: 0 0px;
      margin: 0 11px;
      line-height: 23px;
      text-align: center;
      background-image: url('../images/item-center.png');
      background-position: left top;
      background-repeat: repeat-x;
    
    }
    
    
    .artmenu a:hover
    {
      background-position: left -23px;
    }
    
    .artmenu li:hover>a
    {
      background-position: left -23px;
    }
    .artmenu li:hover a span
    {
      background-position: right -23px;
    }
    
    .artmenu a:hover span
    {
      background-position: right -23px;
    }
    
    
    .artmenu a:hover span span
    {
      color: #FFFFFF;
      background-position: left -23px;
    }
    
    .artmenu li:hover a span span
    {
      color: #FFFFFF;
      background-position: left -23px;
    }
    
    
    .artmenu a.active
    {
      background-position: left -46px;
    }
    
    .artmenu a.active span
    {
      background-position: right -46px;
    }
    
    .artmenu a.active span span
    {
      color: #DF0165;
      background-position: left -46px;
    }
    
    /* end MenuItem */
    
    /* begin MenuSubItem */
    .artmenu ul a
    {
      display:block;
      text-align: center;
      white-space: nowrap;
      height: 21px;
      width: 176px;
      overflow:hidden;
      line-height: 21px;
      margin-right: auto;
    
    
      background-image: url('../images/subitem-bg.png');
      background-position: left top;
      background-repeat: repeat-x;
    
      border-width: 0px;
      border-style: solid;
      border-color: {PassiveBorderColor};
    }
    
    .nav ul.artmenu ul span, .nav ul.artmenu ul span span
    {
      display: inline;
      float: none;
      margin: inherit;
      padding: inherit;
      background-image: none;
      text-align: inherit;
      text-decoration: inherit;
    }
    
    .artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
    {
      text-align: left;
      text-indent: 12px;
      text-decoration: none;
      line-height: 21px;
      color: #55636E;
      font-family: Arial, Helvetica, Sans-Serif;
      font-size: 12px;
      font-style: normal;
      font-weight: normal;
    }
    
    .artmenu ul ul a
    {
      margin-left: auto;
    }
    
    .artmenu ul li a:hover
    {
      color: #F6F5EE;
      border-color: {HoveredBorderColor};
      background-position: 0 -21px;
    }
    
    .artmenu ul li:hover>a
    {
      color: #F6F5EE;
      border-color: {HoveredBorderColor};
      background-position: 0 -21px;
    }
    
    .nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
    {
      color: #F6F5EE;
    }
    
    .nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
    {
      color: #F6F5EE;
    }
    
    
    /* end MenuSubItem */
    Merci à vous si vous pouvez m'éclairer
    Dernière édition par askaelle à 25/05/2009, 14h18

  • #2
    Bonjour,

    Il faut que tu créés un style css pour chaque item de menu concerné, exemple:

    Code:
    li.item1 a:hover {
    background:#fff888;
    display:block;
    }
    Autant de fois que tu as d'items dans ton menu.

    Et hop!

    Commentaire


    • #3
      Bonsoir,

      Alors j'ai essayé mais ça ne fait rien. J'ai utilisé webdevelopper pour savoir quel chemin utiliser pour le code.



      Dites moi si je me trompe, mais je devrais ajouter ça dans le style CSS ?

      Code:
      .nav > ul.artmenu > li.parent item73 > a > span 
      {
      background: #00a0c6;
      }
      Parce que j'ai essayé mais ça ne change rien, je pense qu'il faut changer autre chose parce que j'ai des images également en background (voici le code)

      Code:
      .artmenu a
      {
        background-image: url('../images/item-left.png');
        background-position: left top;
        background-repeat: no-repeat;
      }
      
      .artmenu a span
      {
        background-image: url('../images/item-right.png');
        background-position: right top;
        background-repeat: no-repeat;
      }
      .artmenu a span span
      {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        color: #2C343A;
        padding: 0 0px;
        margin: 0 11px;
        line-height: 23px;
        text-align: center;
        background-image: url('../images/item-center.png');
        background-position: left top;
        background-repeat: repeat-x;
      
      }
      Je ne sais pas si je suis très claire ' (désolé) mais c'est que le code généré est vraiment énorme et j'ai vraiment du mal à m'y retrouver.

      Commentaire


      • #4
        Tu peux nous donner l'adresse de ton site?

        Commentaire


        • #5
          Bon, j'ai bien reçu ton template.
          je vais essayé de tout t'expliquer.
          Il va falloir d'abord commencer par utiliser Photoshop ou The Gimp

          1- Les éléments de menu de premier niveau

          Voici les 3 images qui composent un onglet de menu : item-left.png, item-right.png, item-center.png

          pour chaque item de menu, il va falloir que tu retouches ces images pour modifier les couleurs, puis les coller dans le dossier images de ton template (attention, il faudra modifier le fichier templateDetails.xml pour que les images s'installent, sinon, tu seras obligé de les envoyer par FTP).

          Le code CSS : (exemple itemID n°1, il faudra répéter l'opération pour chaque Item)
          Code:
          .item1 a {
            background-image: url('../images/item1-left.png');
            background-position: left top;
            background-repeat: no-repeat;
          }
          .item1 a span {
            background-image: url('../images/item1-right.png');
            background-position: right top;
            background-repeat: no-repeat;
          }
          .item1 a span span {
            font-family: Arial, Helvetica, Sans-Serif;
            font-size: 12px;
            font-style: normal;
            font-weight: normal;
            color: #2C343A;
            padding: 0 0px;
            margin: 0 11px;
            line-height: 23px;
            text-align: center;
            background-image: url('../images/item1-center.png');
            background-position: left top;
            background-repeat: repeat-x;
          }
          2- Les éléments de sous-Menu

          comme pour le 1er niveau de menu, il va falloir retoucher l'image subitem-bg.png

          Le code CSS :

          Code:
          .item1 ul a {
            display:block;
            text-align: center;
            white-space: nowrap;
            height: 21px;
            width: 176px;
            overflow:hidden;
            line-height: 21px;
            margin-right: auto;
            background-image: url('../images/subitem1-bg.png');
            background-position: left top;
            background-repeat: repeat-x;
            border-width: 0px;
            border-style: solid;
            border-color: {PassiveBorderColor};
          }
          Voilà en pièce-jointe ce que ça peut donner,...c'est perfectible, je ne me suis pas trop appliqué pour les images
          Fichiers joints

          Commentaire


          • #6
            Je suis vraiment un boulet, parce que je n'y arrive toujours pas. (arf, désolé)

            J'ai ajouté cela dans mon CSS pour le menu, après avoir retouché les images sous toshop.
            Code:
            .item73 a {
              background-image: url('../images/item-left1.png');
              background-position: left top;
              background-repeat: no-repeat;
            }
            .item73 a span {
              background-image: url('../images/item-right1.png');
              background-position: right top;
              background-repeat: no-repeat;
            }
            .item73 a span span {
              font-family: Arial, Helvetica, Sans-Serif;
              font-size: 12px;
              font-style: normal;
              font-weight: normal;
              color: #2C343A;
              padding: 0 0px;
              margin: 0 11px;
              line-height: 23px;
              text-align: center;
              background-image: url('../images/item-center1.png');
              background-position: left top;
              background-repeat: repeat-x;
            }
            Et ceci pour le sous-menu (les items du sous-menu ont un ID différent, donc j'ai supposé qu'il fallait mettre ceux-là)
            Code:
            .item75 ul a {
              display:block;
              text-align: center;
              white-space: nowrap;
              height: 21px;
              width: 176px;
              overflow:hidden;
              line-height: 21px;
              margin-right: auto;
              background-image: url('../images/subitem1-bg.png');
              background-position: left top;
              background-repeat: repeat-x;
              border-width: 0px;
              border-style: solid;
              border-color: {PassiveBorderColor};
            }
            .item76 ul a {
              display:block;
              text-align: center;
              white-space: nowrap;
              height: 21px;
              width: 176px;
              overflow:hidden;
              line-height: 21px;
              margin-right: auto;
              background-image: url('../images/subitem1-bg.png');
              background-position: left top;
              background-repeat: repeat-x;
              border-width: 0px;
              border-style: solid;
              border-color: {PassiveBorderColor};
            }
            Enfin, j'ai ajouter ça dans templatesDetails.xml
            Code:
            <fileName>images/item-left1.png</fileName>
            <fileName>images/item-center1.png</fileName>
            <fileName>images/item-right1.png</fileName>
            <fileName>images/subitem-bg1.png</fileName>

            Commentaire


            • #7
              c'est bien .item73 ul a pour le sous-menu.

              Sinon, qu'est-ce qui ne va pas (copie écran) ?

              pour les images, numérote-les comme les items, ce sera plus facile pour t'y retrouver

              Commentaire


              • #8
                J'ai refait un essai avec un autre onglet, ça fonctionne
                Fichiers joints
                Dernière édition par Dens à 04/05/2009, 12h57

                Commentaire


                • #9
                  Alors je viens d'éditer mon fichier css et j'ai renommer mes fichieres images comme tu me l'a conseillé

                  Et ben ça marche, j'ai juste déplacer le code à un autre endroit, je sais pas si c'était ça qui gênait et j'ai enlevé du texte que j'avais mis en commentaire.

                  Merci beaucoup pour votre patience

                  Je vais continuer, et si j'ai un autre soucis je posterai à nouveau.

                  Encore merci

                  Commentaire


                  • #10
                    Attention : tu ne nommes pas les images de la même manière dans ton CSS que dans ton fichier xml.

                    Si ton css fait appel à des images n'existant pas...

                    Commentaire


                    • #11
                      Si je peux me permettre, sauf erreur de ma part et sans vouloir troubler la conversation:

                      1 - Il me semble que la demande initiale concernait le survol des menus.
                      En conséquence, il faudrait déjà rajouter la pseudo classe ":hover"

                      2 - Les numéros d'items sont ils les bons, autrement dit, correspondent t'ils aux menus réellement en place?

                      3 - Enfin, et bien que je présume que DENS saura résoudre les problèmes, est-il possible d'avoir une adresse URL du site pour regarder en live (ça m'interesse de regarder un cas concret de template créé sous Artisteer...)

                      Désolé si je dérange.

                      Commentaire


                      • #12
                        Oui mais en fait ça fonctionne sans la classe .hover (allez savoir pourquoi, j'ai du mal à comprendre moi aussi ')

                        Mais bon ça marche enfin !

                        Et non, cb75ter, tu ne déranges pas. Par contre, je bosse en local, donc je peux pas te montrer ce que le site donne. (je suis en phase de test là encore mais j'ai essayé hier d'installer sur mon ftp free et je n'y suis pas arrivée, mais c'est un autre sujet)

                        Commentaire


                        • #13
                          Envoyé par cb75ter Voir le message
                          Si je peux me permettre, sauf erreur de ma part et sans vouloir troubler la conversation:

                          1 - Il me semble que la demande initiale concernait le survol des menus.
                          En conséquence, il faudrait déjà rajouter la pseudo classe ":hover"

                          2 - Les numéros d'items sont ils les bons, autrement dit, correspondent t'ils aux menus réellement en place?

                          3 - Enfin, et bien que je présume que DENS saura résoudre les problèmes, est-il possible d'avoir une adresse URL du site pour regarder en live (ça m'interesse de regarder un cas concret de template créé sous Artisteer...)

                          Désolé si je dérange.
                          1- Non, pas besoin de hover, visiblement template réalisé avec Artisteer. cf pièce-jointe
                          les images de background contiennent les 3 visualisations ("non actif", hover, et active) (Artisteer doit gérer autrement ces visualisations...)

                          2-Oui, les numéros d'item doivent correspondre aux items des menus existant (celà peut donc changer d'un site à l'autre).

                          3- ce n'est pas de mon ressort
                          Fichiers joints

                          Commentaire


                          • #14
                            C'est marrrant, le temps que je poste mon dernier message (14h00), vous vous étiez répondu (13h55 &13h59), et évidemment je n'avais pas vu les réponses.

                            Content que la solution ait été trouvée. Et tant pis mon mon cas d'école Artisteer.

                            Bonne continuation.

                            Commentaire


                            • #15
                              Envoyé par cb75ter Voir le message
                              C'est marrrant, le temps que je poste mon dernier message (14h00), vous vous étiez répondu (13h55 &13h59), et évidemment je n'avais pas vu les réponses.

                              Content que la solution ait été trouvée. Et tant pis mon mon cas d'école Artisteer.

                              Bonne continuation.
                              Normalement, tu peux charger une version gratuite d'Artisteer (mais le template aura un watermark en prod), tu pourrais donc tout à fait reproduire ce "cas d'école"

                              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