Avez-vous déjà essayé d’intégrer des arrondis CSS sur Prestashop pour qu’ils soient visibles sur Internet Explorer ? 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 !