Prestashop 1.6 et Twitter Bootsrap : Désactivation du responsive

Introduction Au passage à la version 1.6, le thème de base de prestashop à intégrer Twitter Bootstrap. Il est donc par défaut  responsive ou encore adaptatif. Ce qui signifie que l’affichage s’adapte de façon automatique à tous les types de terminaux (desktop, smarphone / mobile, tablette …). Bien que pouvant et à juste titre être considérer […]
NOVAZEN > Blog > Prestashop 1.6 et Twitter Bootsrap : Désactivation du responsive

Introduction

Au passage à la version 1.6, le thème de base de prestashop à intégrer Twitter Bootstrap. Il est donc par défaut  responsive ou encore adaptatif. Ce qui signifie que l’affichage s’adapte de façon automatique à tous les types de terminaux (desktop, smarphone / mobile, tablette …). Bien que pouvant et à juste titre être considérer comme un avantage, nous avons eu à Novazen, des clients bien que voulant un site e-commerce sur la version 1.6 de Prestashop ne veulent pas d’un thème responsive. Dans ce petit tutoriel, nous allons vous présenter la méthode que nous utilisons pour désactiver le responsive sur un thème Prestashop 1.6

Etapes de désactivation du responsive sur Twitter Boostrap

Étape 1 : Supprimer les « viewport »  dans le « header »

Cette étape est la plus simple, il suffit de supprimer les métas « viewport » dans le header de notre thème.

Étape 2 : Fixer la largeur du conteneur principal

Ajouter la classe ci-dessous dans un fichier css qui sera charger après celui de Twitter Bootsrap. Son rôle est de surcharger le max-width de la classe .container

.container{
    max-width: none!important;
    width:970px; // 970px correspondant à la largeur utile de votre site Internet
}

Étape 3 : Fixer la largeur des  colonnes latérales encore appelées « navbars »

Ouvrir le fichier variables.less et paramétrer les variables suivantes  à 0

  1. @grid-float-breakpoint
  2. @screen-xs-max

Étape 4 : Utiliser les grilles

Pour gérer les grilles, utiliser les  classes .col-xs-* en lieu et place des grilles de types medium et large

Étape 5 : Optionnel

Utiliser le fichier « Respond.js » pour IE 8. Les médias queries étant toujours présent  ce fichier désactivera l’affichage mobile sur IE8

Conclusion

Bien que Twitter Bootstrap étant premièrement orienté mobile, il est possible de désactiver son fonctionnement relatif en cas de besoin.  Nous venons ci-dessus de présenter les étapes pour y arriver. En cas de question ou de besoin pour la création d’un thème ou le développement Prestashop offshore, n’hésitez pas à nous contacter.

Laisser un commentaire