Avez-vous déjà essayé d’intégrer des arrondis CSS sur Prestashop pour qu’ils soient visibles sur Internet Explorer ?
Pour approfondir ce sujet, consultez notre article Tuto : Restreindre une page aux utilisateurs connectés sous WordPress.
Pour approfondir ce sujet, consultez notre article Tuto Installation module Ogone pour PrestaShop 1.5.
Si oui, vous avez sûrement trouvé ce tutoriel roundies.js ou CSS3 Pie proposé par Alsacréations ici. On retrouve dans cet article les techniques d’intégration des arrondis par :
- la propriété CSS3 border-radius
- CSS3pie
- Roundies.js
Malheureusement, tout se complique avec Prestashop car pas une de ces techniques n’a fonctionné sur Prestashop après tests c’est pourquoi je me suis tourné vers Jquery Corner : la solution pour avoir des arrondis dans Internet Explorer 8 et inférieurs.
Voici comment faire :
- Télécharger le JQuery à cette adresse en cliquant ici : JQuery.Corner.js
- Uploader ce même fichier sur votre serveur
- Appeler le JQuery entre les balises <head></head> avec ce code :
<script type="text/javascript" src="cheminverslefichierjquery/jquery.corner.js"></script> - Entre les balises <head></head> toujours, appliquez les arrondis voulus parmi ceux disponibles de la sorte :
<script type="text/javascript">$('class ou id de l'élément html').corner("propriété de l'arrondi");</script> - Ne pas oublier de donner la class ou l’id à l’élément html qui doit avoir des arrondis.
- C’est tout, simple et efficace !
Pour illustrer le tutoriel, on peut avoir dans le <head> $('.arrondi5').corner("5px top"); qui affichera l’élément de class .arrondi5 avec des arrondis de 5 pixels en haut à gauche et en haut à droite.
On peut bien entendu ajouter autant de comportements que souhaité. A vous de jouer !