Drapeaux pour les langues

Comme certains sur le forum l'ont fait remarquer, le bouton des langues n'est pas très explicite pour un étranger arrivant sur un site français. Vous voudriez donc personnaliser les liens vers vos traductions. En utilisant les drapeaux, cette méthode est universelle. 

Avant toute chose, vos images doivent être de type .png et de petite taille, souvent 48px de large font l'affaire.

voici ce que ça donne           (j'ai utilisé français/allemand)

1ére étape

Lors de la création de votre site, il va falloir libérer le petit pied de page, pour cela, vous allez dans Thème/CSS, cliquez sur Pied de page (large), vous ajoutez 2 sections (dans le standard, il y en a 3, donc vous mettez 5), puis vous redimensionnez la 4ième et la 5ième à 50% de la largeur (affiche 6 sous le curseur). 


Ensuite vous déplacez le Pied de page (petit) vers le Haut de page, clic gauche maintenu dessus puis vous montez la souris là ou vous voulez voir les drapeaux, enfin presque car il y a des limitations, le pied de page étant gérer comme une barre d'outils, on ne peut donc l'inclure dans l'une d'elles.

Vous déplacez ensuite ce qu'il y a dans le petit pied vers les nouvelles sections du large. Il n'y a plus rien dans le petit pied de page

2ème étape

Nous allons ajouter les drapeaux sur le site français.

Cliquez sur la section de droite du petit pied pour l'éditer, positionnez le curseur où vous voulez et sélectionnez le bouton pour ajouter une image, comme vous êtes sur le site français, on met une simple image.

Dans la fenêtre qui s'ouvre, choisissez en bas "Utiliser vos images..." et sélectionnez le drapeau français. Ok, votre image apparait dans le pied, ajoutez quelques espaces à la suite.


Maintenant, pour le drapeau allemand, c'est différend, vous allez créer un lien. Cliquez sur le petit trombonne.



Remplissez le formulaire de cette manière

Après le clic sur Icône... faites comme pour l'image du drapeau français. Après la validation de l'ensemble, le 2nd drapeau sera en place, il n'apparaît qu'à ce moment. Avec la touche Retour arrière du clavier, effacer le mot " lien " qui suit l'image (uniquement lui, sinon vous effacez tout et on recommence).

Si vous avez un doute sur le nom de la page index de(s) autre(s) langue(s), lancez un aperçu de votre site, ensuite allez dans le dossier de votre site et ouvrez le dossier  "Preview", vous y verrez tous les fichiers index.
  le chemin         C:\Users\mon_nom\Mes documents\TOWeb sites\le_dossier_de_mon_site\Preview

3ème étape

Passons au site allemand (ou anglais ou un autre... enfin, le site traduit).

Vous devez refaire la même chose, mais cette fois, c'est le drapeau français qui sera créé comme un lien. Faites la procédure même si le drapeau apparaît déjà.
Pour le lien du site français (image ci-dessus), l'URL se termine par " index.html ". 

Il n'est pas nécessaire de refaire le 2nd drapeau, même si le lien est toujours valide, ce n'est pas gênant, on ne fera que retourner à la page d'accueil. Si cela vous gêne, dans ce cas vous remettez une simple image.


Le bouton de TOWeb doit rester apparent car les drapeaux ne sont pas opérationnels dans le logiciel pour basculer d'une langue à l'autre. Ils ne le sont que sur le Web. Par contre Vous pouvez l'effacer sur le site en créant un champ HTML dans lequel vous écrivez   

<script>
document.getElementById("langselect").innerHTML = "";
</script>

Vous écrivez le nom de ce script ( %LENOM% ) dans une section du bas de page (pied large)  pour chaque langue.

Le résultat de ce tuto ici

Une autre réalisation ici  j'ai utilisé de plus grandes images disposées dans les sections 1 et 3, le titre dans la 2ème.