Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6

Vous désirez insérer le drapeau du pays des langues que vous avez choisies pour votre site e-commerce. L’astuce est simple et rapide.

Valable pour Prestashop 1.6.

——————-

1) Ouvrez le fichier blocklanguages.tpl qui se situe dans themes > lenomdevotretheme > modules > blocklanguages > blocklanguages.tpl.

Il va falloir insérer ce code à deux endroits.  Par défaut, j’ai mis la largeur à 25 et la hauteur à 13 mais vous pouvez modifier les dimensions selon vos envies.

Voici le code complet du fichier  avec le morceaux de code ajouté.

Je l’ai mis juste devant  <span>{$language.name|regex_replace: »/\s\(.*\)$/ »: » »}</span> qui se situe au début et à la fin

Voila le résultat  : 

Ajouter le drapeau du pays dans le bloc langues | Prestashop

Je vous l’accorde il faut un peu de css pour harmoniser le tout.

2) Pour cela, on va ouvrir le fichier  blocklanguages.css qui se situe dans themes > lenomdevotretheme > css > modules > blocklanguages>  blocklanguages.css.

Modifier le code qui doit se situer vers la ligne 55

par

Maintenant si on regarde de nouveau votre site, le résultat est beaucoup mieux :

Capture d’écran 2015-06-29 à 15.44.23

 

 

 

Articles similaires

Petit aperçu du thème Classic de prestashop 1.7
views 7766
Prestashop vient de sortir la version  1.7.0.0 RC0. A noter, par rapport à la version Prestashop 1.6, le thème a été totalement repensé afin d'être plus minimaliste, fonctionnel et ergonomique. Il faut savoir aussi que la migration de Prestashop 1.6, 1.5....  vers  PrestaShop 1.7 sera impossible. D'un point de vue perso : - je ne suis pas fan des couleurs en particulier le gris (je l...
Faire une sauvegarde de votre BDD depuis le BO de Prestashop 1.6
views 2280
Qu'est ce qu'une BDD (base de données) ?  Une base de données est un outil qui permet de collecter et organiser des informations. Exemple: vos produits, vos images, vos textes, vos commandes, vos clients.... Pourquoi faire une sauvegarde ?  En cas de bug, d'une fausse manipulation, d'un module défectueux.... il sera peut-être nécessaire de réinitialiser votre base de données. D'où l'import...
Ajouter les réseaux sociaux sur la page d’accueil | Prestashop 1.7
views 7597
Contrairement à Prestashop 1.6, les réseaux sociaux sur votre page d'accueil ne s'affichent pas automatiquement. Ce petit tutorial va vous permettre de les configurer et de les faire apparaître sur la version Prestashop 1.7. Configurer les réseaux sur la page d'accueil | version Prestashop 1.7 A) Depuis le back-office de Prestashop, allez dans Modules > Modules & Services  B...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 1049
Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieux vous aidez dans la création de votre site e-commerce. Document 1 : Modèle de cahier des charges  Avant de se lancer dans l'aventure de l'e-commerce, il est très important de mettre par écrit un ensemble d'informations qui va vous aider pour la su...
Paypal, Hipay & Payplug – Quelle solution de paiement choisir
views 3910
Pour une petite boutique en ligne, mettre en place un contrat de vente à distance (VAD) peut s'avérer difficile en raison des coûts élevés que demande les banques. Aujourd'hui, il existe d'autres solutions de paiement dont Paypal, Hipay et Payplug Ces établissements sont autorisés par l’ACP à exercer en France. Ils ne nécessitent pas de contrat de VAD pour être mis en oeuvre A) Comparat...

8 réponses à “Ajouter le drapeau du pays dans le bloc langues | Astuce Prestashop 1.6”

  1. Nono dit :

    Bonsoir, encore moi
    en effet c’est beaucoup plus visible avec les drapeaux, merci.
    cependant, quand je mouse-over sur english
    la moitié du rectangle est d’une autre couleur
    quelle ligne dans le css pour régler ca?

    voici ce que ca donne:
    http://postimg.org/image/6ev21880v/

  2. c_majory dit :

    Bonjour,

    Le fichier css pour modifier le bloc langue se trouve dans ../themes/nomdevotretheme/css/modules/blocklanguages/blocklanguages.css

  3. Nono dit :

    Bonjour
    Oui ça à priori j’avais compris, je ne trouve pas quelle ligne modifier pour que la ligne anglais soit de la meme couleur quand on passe dessus avec la souris, et que ca ne fasse pas moitié marron, moitié gris comme sur l’image citée dans mon 1er post

  4. c_majory dit :

    Bonjour,

    Pouvez-vous me donner une adresse url ?

  5. David BINGUE dit :

    Hello,

    Je me permet, car j’ai été confronté au même problème, il faut rajouter :

    display: block;

    à

    #languages-block-top ul li.selected, #languages-block-top ul li:hover a { > un peu plus bas

    Bien cordialement

  6. Musashi dit :

    Bonjour,

    Je suis sous prestashop 1.6.1.1 et j’utilise le thème par défault.
    Je suis novice dans le domaine mais j’ai effectué les opérations tel que vous les avez expliqué et cela ne donne rien , aucun drapeau s’affiche.
    Serait ce dû à la version que j’utilise ou bien aurais je effectué une erreur ?

    Cordialement

  7. c_majory dit :

    Bonjour,

    Oui l’astuce fonctionne aussi sur cette version

    1) Avez-vous bien modifié le tpl qui se situe à l’intérieur de votre thème ? Dans votre cas default-boostrap

    2) Avez-vous vider votre cache ? Back office de presta > Paramètres avancés > Performances > Vider le cache (en haut à droite)

  8. Bonjour,
    Merci pour ce tuto qui m’a permis de débloquer un client en 2 temps 3 mouvements.
    Pour info, en ajoutant un width:100%; sur la ligne css juste en dessous, on évite le souci de hover (couleur qui s’arrête juste après le texte au passage de la souris et non à la fin du ) évoqué par Nono en commentaire.
    Dans mon cas :
    #languages-block-top ul li.selected, #languages-block-top ul li:hover a {
    background: #484848;
    width:100%;}

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *