Tweet
Bonsoir la communauté
Je ne savais pas où placer ce post alors je me lance ici.
Après l'utilisation de "PageSpeed" sous Google Chrome, afin d'optimiser la rapidité d'ouverture de mes pages, je me retrouve avec des priorités moyennes a modifier dont une intitulé "Regrouper les images dans des sprites CSS".
Au départ, je ne comprenais pas bien ceux que cela voulait dire. Après plusieurs recherches sur la toile, je finis par comprendre à quoi servent ces fameux sprites CSS.
Cela m'amène sur un site, afin de créer ses propres sprites dont voici l'adresse :
Mon problème est que je ne comprend pas bien comment mettre en place ces fameux sprites.
Voici les démarches que j'ai réalisées :
- J'ai générez mes images ;
- Télécharger le sprite de mes images ;
- Ce sprite je l'ai envoyé dans mon dossier images de mon template;
Mon soucis et que je ne sait pas quoi faire et ou mettre tout les codes et fichiers donnée.
- J'ai téléchargé le fichier "stitches-0.5.18.zip", mais que faire avec? L'installer via mon admin Joomla comme n'importe quelle extensions ou par FTP;
- Le site me fournir trois codes :
1 code css et 2 autres codes, mais où insérer ces codes?
* Code css
* Code 1
* Code 2
Quelq'un utilisant également ce site pour créer ces sprites CSS pourrait me donner un gros coup de pouce
En espérant avoir était compréhensible.
Cordialement
Je ne savais pas où placer ce post alors je me lance ici.
Après l'utilisation de "PageSpeed" sous Google Chrome, afin d'optimiser la rapidité d'ouverture de mes pages, je me retrouve avec des priorités moyennes a modifier dont une intitulé "Regrouper les images dans des sprites CSS".
Au départ, je ne comprenais pas bien ceux que cela voulait dire. Après plusieurs recherches sur la toile, je finis par comprendre à quoi servent ces fameux sprites CSS.
Cela m'amène sur un site, afin de créer ses propres sprites dont voici l'adresse :
Mon problème est que je ne comprend pas bien comment mettre en place ces fameux sprites.
Voici les démarches que j'ai réalisées :
- J'ai générez mes images ;
- Télécharger le sprite de mes images ;
- Ce sprite je l'ai envoyé dans mon dossier images de mon template;
Mon soucis et que je ne sait pas quoi faire et ou mettre tout les codes et fichiers donnée.
- J'ai téléchargé le fichier "stitches-0.5.18.zip", mais que faire avec? L'installer via mon admin Joomla comme n'importe quelle extensions ou par FTP;
- Le site me fournir trois codes :
1 code css et 2 autres codes, mais où insérer ces codes?
* Code css
Code:
.sprite {
background: url(download.png) no-repeat;
}
.sprite-arrow-png {
width: 9px;
height: 9px;
background-position: -72px -27px;
}
.sprite-login-png {
width: 25px;
height: 20px;
background-position: -36px -0px;
}
.sprite-password-png {
width: 25px;
height: 20px;
background-position: -0px -31px;
}
.sprite-search-icon-png {
width: 16px;
height: 16px;
background-position: -72px -0px;
}
.sprite-username-png {
width: 25px;
height: 20px;
background-position: -0px -0px;
}
.sprite-vide-png {
width: 5px;
height: 5px;
background-position: -36px -47px;
Code:
<link rel="stylesheet" href="css/stitches-0.5.18-min.css"> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/modernizr-2.0.6.min.js"></script> <script src="js/stitches-0.5.18-min.js"></script>
Code:
<div id="stitches"></div>
<script>
jQuery(document).ready(function ($) {
var $stitches = $("#stitches");
Stitches.init($stitches, {jsdir: "js"});
});
</script>
En espérant avoir était compréhensible.
Cordialement
Commentaire