plugin MyMultiLingue - comment l'inclure dans le menu navigation

Zynfandel · octobre 2015

Bonjour,

Je suis entrain de monter un site Pluxml multilangue (j'ai quelques bases en programmation, et je me débrouille pas si mal à date en m'essayant et en fouillant sur internet).

Le formattage de la pluggin MyMultiLingue me donne du fil à retorde par contre. Présentement je l'inclut dans le code header.php comme dans le code ci-bas et je vois l'option "Français" et "Anglais" présentées une sous l'autre avec des bullet points sur mon site et ce n'est pas tellement jolie, il y aussi un espace blanc en dessous. J'aimerais essayer d'intégrer l'option multilangue à droite dans le menu de navigation et peut-être changer "Français" pour "Fr" et Anglais pour "En".

<nav class="nav" role="navigation">
<div class="responsive-menu">
<label for="menu"><?php $plxShow->lang('MENU'); ?></label>
<input type="checkbox" id="menu">
<ul class="menu expanded">
<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
</ul>
</div>
</nav>
<?php eval($plxShow->callHook('MyMultiLingue')); ?>

Bref, est-ce que quelqu'un aurait des suggestions sur les modification à apporter au code pour include la switch de langue à droite dans le menu de navigation? Et pour modifier le logo de langue (ex: Fr pour Français et En pour anglais)?

Merci!

Zynfandel

kowalsky · octobre 2015

Salut,

(c'est un plugin que je n'utilise pas, donc je ne saurais te confirmer son bon fonctionnement, mais) vu ce que tu décris, essaye de le placer à l'intérieur de la balise nav, cela devrait améliorer l'affichage :

[== HTML ==]
    <nav class="nav" role="navigation">
        <div class="responsive-menu">
            <label for="menu"><?php $plxShow->lang('MENU'); ?></label>
            <input type="checkbox" id="menu">
            <ul class="menu expanded">
                <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>                               
            </ul>
            <?php eval($plxShow->callHook('MyMultiLingue')); ?>
        </div>
    </nav>

Zynfandel · octobre 2015

Merci pour la suggestion kowalsky, mais j'ai essayé de l'intégrer de façon simple entre chacune des lignes du code ci-haut et ça ne fonctionne pas. Les switchs de langues restent sous le menu, deviennent gris pâle et ne fonctionne plus...

Je soupçonne qu'une ou deux ligne de codes plus "technique" soient nécessaires pour intégrer les switchs de langues dans le menu navigation.

Merci!
Zynfandel

Zynfandel · octobre 2015

En fait si je met le plugin MyMultilingue avant la ligne "<?php $plxShow->staticList($plxShow->getLang('HOME')..." les switchs de langues apparaissent dans le menu, mais les autres onglets (Accueil, etc.) se font bumper et apparaissent maintenant en dessous du menu... Comment peut-on envoyer les switchs de langue à droite dans le menu navigations et garder les autres onglets à leur place?

<nav class="nav" role="navigation">
<div class="responsive-menu">
<label for="menu"><?php $plxShow->lang('MENU'); ?></label>
<input type="checkbox" id="menu">
<ul class="menu expanded">
<?php eval($plxShow->callHook('MyMultiLingue')); ?>
<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
</ul>
</div>
</nav>

Stéphane · octobre 2015

Bonjour

Utilises les classes css pour mettre en forme la présentation. Regarde dans le code source de la page de ton site pour connaitre les balises générées par le plugin. Englobe l'appel du hook MyMultiLingue dans un balise par exemple <div> en lui donnant une classe css, voir un id.

Zynfandel · octobre 2015

Merci de la réponse, donc un bout de code comme ceci dans header.php pour la balise <div> et une classe?

<div class="language">
<?php eval($plxShow->callHook('MyMultiLingue')); ?>
</div>

Les balises générées par le plugin est-ce que c'est ceci qu'on retrouve dans le code css du plugin (ou bien c'est autre chose?):

#langs ul li { display:inline; list-style-type: none;} #langs a { margin: 0 10px 0 0; text-decoration: none } #langs a:hover { color: #db2020; } #langs a img { padding: 2px 2px 2px 2px; border: 1px solid #cecece; width: 25px } #langs a img.active { padding: 2px 2px 2px 2px; border: 1px solid red; } #langs a.active { padding: 2px 2px 2px 2px; border: 1px solid red; color: red }

J'avoue que je saurais pas vraiment comment relier les deux. Un petit exemple simple m'aiderait beaucoup à comprendre.

Merci!
Zynfandel

bazooka07 · octobre 2015

Bonjour,

Régler une feuille de styles CSS s'avère parfois compliqué quand il y une multitude de régles.

Dans Firefox, on peut utiliser l'inspecteur en cliquant sur le burger en haut à droite ou en tapant CTrl-Maj-C au clavier.
Avec la souris, on peut sélectionner un élément sur la page HTML et voir les règles CSS qui font la loi. En prime, on a l'affichage du code source à côté.
On put voir cela

.
Cela demande un petit investissement personnel mais qui est vite rentabilisé. Il existe la meme chose avec Chrome.

Cordialement

Zynfandel · octobre 2015

Merci, j'ai ouvert le menu CTrl-Maj-C au clavier. Très intéressant même si ardu à commencer à manipuler, mais j'ai l'impression que j'avance. J'ai maintenant mes onglets du menu navigation sur une ligne, et sur la ligne suivante les switchs de langues.

Dans <ul class="menu expanded">, j'ai ma page statique principale du site

<ul class="menu expanded">

<li class="active" id="static-home">
<a href="mon site" title="Accueil">Accueil</a>)
</li>

puis une deuxième page statique (une section Auteurs)

<li class="noactive" id="static-2">
<a href="mon site" title="Auteurs">Auteurs</a>
</li>

et enfin mes switchs de langues français et anglais qui sont juste en dessous dans

<div id="langs">
<ul>
<li>
<a class="lang" href="mon site/lang=en">English</a>
</li>

<li>
<a class="lang" href="mon site/lang=fr">Français</a>
</li>
</ul>

Une suggestion pour les inclures sur la même ligne du menu (et les switchs de langues à droite du menu)? si je glisse une switch de langue dans le "li" d'un autre par exemple, il apparait comme un menu déroulant de l'autre.

Merci!
Zynfandel

bazooka07 · octobre 2015

Bonjour,

le <div> vient semer la zizanie.

Les options du menu s'affichent sur une ligne grâce à cette structure:

[== HTML ==]
<nav role="navigation">
  <ul>
     <li>Option1</li>
     <li>option 2<li> 
   </ul>
</nav>

Il ne faut pas en sortir.
Si tu veux une liste déroulante, il faut ajouter après le <li>option 2</li> :

[== HTML ==]
   <li id="lang"><span>langues</span>
      <ul>
          <li>option3</li>
          <li>option 4</li>
         .....
      </ul>

Bien sûr pour avoir un lien cliquable, il faut modifier chaque option comme ceci :
<li><a href="lien1.php" title="Je vais au lien1">option1</a></li>

Cela c'est pour la structure HTML.
Le reste se règle à coups de régles CSS3 dans les fichiers *.css du thème :

[== CSS ==]
nav[role='navigation'] > ul > li  { display: inline-block; }
#lang ul { position: absolute; z-index: 10; }

Il faut apprendre les règles CSS3 pour aller plus loin.

Zynfandel · octobre 2015

Merci pour les infos, je vais faire quelques tests :-)

Zynfandel

Zynfandel · octobre 2015

CTrl-Maj-C m'aide beaucoup à progresser et je réussi à placer les switchs de langues de façon intéressante. Maintenant une petite question pour m'aider à me lancer dans CSS3.

J'essaie de connecter le code suivant pour créer un bouton avec CSS3 mais il doit y avoir un détail technique qui m'échappe:

donc

<div id="button">
<p><a class="lang" href="mon site/lang=en">En</a> <a class="lang active" href="mon site/lang=fr">Fr</a><p>
</div>

avec le code ci-bas que je copie à la fin du code plucss.css:

#button {
width: 67px;
height: 40px;
background-color: #33FF00;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #009900;
padding: 5px;
}

Il ne se passe rien par contre. Il doit y avoir un détail de language qui m'échappe pour connecter les deux. Quelqu'un aurait la solution? Réussir une première connection avec le code plucss.css va me lancer je pense. A date aucune de mes tentatives sur plucss.css n'a été concluante.

Merci!
Zynfandel

mathieu · octobre 2015

pour savoir quel code CSS s'applique à un élément, tu peux utiliser la console de développement de ton navigateur
par exemple avec Firefox, fais Ctrl+Maj+C et clique ensuite sur l'élément comme expliqué ici :
https://developer.mozilla.org/fr/docs/Outils/inspecteur

Zynfandel · octobre 2015

Merci, je vais donner un bon coup là-dedans. J'ai hâte de maîtriser davantage le code CSS...

Zynfandel

plugin MyMultiLingue - comment l'inclure dans le menu navigation

Réponses