Joomladay francophone 2018 à Paris 18 et 19 mai

Personnalisation des menus et liens

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

  • [Problème] Personnalisation des menus et liens

    Bonjour,

    j'ai réussi à créer un template, placé les différents éléments pour qu'ils s'ajustent correctement.

    Maintenant, je souhaite passer à l'étape des menus et liens mais là je sèche. J'ai essayé de regarder différents templates pour comprendre le fonctionnement.

    Mais je n'y arrive pas. Je mets en pièce jointe mon index.php et mon template.css.

    Merci pour toute l'aide que vous pourrez m'apporter.
    Fichiers joints

  • #2
    Styler un menu en css

    Bonjour,

    Selon le type de menu que tu choisis dans les paramètres du module de menu, le rendu html ne sera pas le même.

    Je vais prendre le cas d'un menu de type liste que tu aurais publié dans ta position top:

    Pour un menu contenant 2 liens, le rendu sera à peu de choses près le suivant:

    Code HTML:
    <div id="topmenu">
    <div class="module">
                                                                                                                    
    <ul class="menu">
    
            <li id="current" class="active item1">
                    <a href="http://localhost/1.html">
                            <span>Nom de l'item 1</span>
                    </a>
            </li>
    
            <li class="item2">
                    <a href="http://localhost/2.html">
                            <span>Nom de l'item 2</span>
                    </a>
            </li>
    </ul>                                   
    
    </div>
    </div>
    Tu peux donc par exemple le styler à l'aide des sélecteurs suivants (liste non exhaustive):

    Code:
    #topmenu ul{
    
    }
    
    #topmenu li{
    
    }
    
    #topmenu a{
    
    }
    
    #topmenu span {
    
    }
    
    li.item1 {
    
    }
    
    li.item2 {
    
    }
    
    #current.active a {
    
    }
    Etc...
    Dernière édition par cb75ter à 03/01/2010, 11h34

    Commentaire


    • #3
      Merci pour ton aide. J'ai réussi.

      J'ai une nouvelle question : ma colonne droite a une position "right" avec un style "rounded". J'y ai placé un module "Article as module".

      Je souhaiterai que seul le texte affiché dans ce module ait une marge de 5px. Seulement quand je définis la marge, le titre du module se décale aussi.

      Aurais-tu une solution?

      Je mets en pièce jointe mon fichier css concernant la colonne.

      Merci par avance
      Fichiers joints

      Commentaire


      • #4
        Re,

        Le problème, c'est que sans voir le site ça ne va pas être simple. J'ai plutôt besoin du code html généré dans ta page que du css.

        Cependant, tu peux essayer de rajouter ça dans ton css:
        Code:
        #colonne-droite div div div {
        padding:5px;
        }
        Si ça ne marche pas, envoie nous le code html généré qui affiche le module en question.

        Commentaire


        • #5
          Merci pour la tentative mais cela ne donne pas le résultat escompté....

          Je joins un fichier avec le code html généré.

          Encore merci pour l'aide.
          Fichiers joints

          Commentaire


          • #6
            Re,

            Essaye ça alors:

            Code:
            #colonne-droite div.module div div div p{
            margin:5px;
            }
            Ou plus simplement, si ça te convient:

            Code:
            #colonne-droite p{
            margin:5px;
            }
            Dernière édition par cb75ter à 05/01/2010, 09h12

            Commentaire


            • #7
              Merci pour tes solutions mais dans les 2 cas, cela ne fonctionne que pour le 1er module (Article as module). Pour le suivant (custom code), le texte ne se décale pas.

              Si tu as une autre idée, je suis preneur...

              Merci par avance

              Commentaire


              • #8
                Ben j'avais justement compris que tu ne souhaitais décaler le texte QUE dans le module article as module, puisque ton message était:
                J'ai une nouvelle question : ma colonne droite a une position "right" avec un style "rounded". J'y ai placé un module "Article as module".
                Je souhaiterai que seul le texte affiché dans ce module ait une marge de 5px.
                Du coup, pour le mod custom, la solution est:

                Code:
                .module div div div div {
                margin:5px;
                }
                Mais l'idée serait quand même que tu comprennes le fonctionnement des styles afin que tu puisses te débrouiller seul. Rien qu'avec notre conversation, tu as plusieurs exemples presque similaires avec lesquels t'amuser et constater les changements en fonction des sélecteurs que tu rajoutes ou enlèves.

                Commentaire


                • #9
                  Bonjour,

                  merci pour l'aide et toutes les excuses pour l'incompréhension.

                  Je commence à comprendre les feuilles de style mais je ne suis pas encore très au point sur le style "rounded". J'ai un peu de mal.

                  Concernant ta dernière proposition : pourquoi est-ce que la marge ne s"applique qu'au module "costum code"?

                  Si tu connais des sites où je pourrai trouver de la doc, je suis preneur.

                  Merci de ton aide

                  Commentaire


                  • #10
                    Re,

                    Ce qu'il faut que tu comprennes, c'est que le style "rounded" génère un code html comme celui ci:
                    Code HTML:
                    <div class="module">
                      <div>
                        <div>
                          <div>
                            <h3>Titre du module</h3>
                               <!--CONTENU DU MODULE-->
                          </div>
                        </div>
                      </div>
                    </div>
                    Ce type sert à créer des modules avec des coins arrondis. Si tu n'as pas besoin de modules à coins arrondis, utilises le type xhtml.

                    Du coup, dans le cas du rounded et pour styler le contenu du module, tu dois enchainer de nombreux sélecteur DIV:
                    Code:
                    .module div div div h3 {
                    }
                    ou encore:
                    Code:
                    .module div div div p {
                    }
                    ou:
                    Code:
                    .module div div div div{
                    }
                    Les sélecteurs choisis pour ta règle dépendent de ce que tu veux "toucher". Je te suggère, pour mieux comprendre lors de tes essais, de donner une couleur de fond à tes sélecteurs, ex:

                    Code:
                    .module div div div p {
                    background:red;
                    }
                    Ça te permettra de tâtonner en voyant bien ce que tu es en train de modifier.

                    Pour finir, FireBug et Web Developper Toolbar sont tes amis!

                    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