Jump to content

How to use CSS Sprites in Prestashop?


anson.c
 Share

Recommended Posts

Hi all,

I'm trying to optimize my site and looking to use CSS Sprites. For my understanding CSS Sprites is to combine multiple images into one big image, but how do I should rewrite the links in prestashop? If anyone can explain or provide some links for tutorials will be much appreciated!
Thanks!

Share this post


Link to post
Share on other sites

You are supposed to choose which images you want to merge, then click the links to download the images, then click the "Export CSS" button and replace the lines in your global.css it displays with strikethru with the ones that aren't strikethru. Then upload the sprites you downloaded to the img directory inside your theme and change the sprite links to the SpriteMe website to the ones inside your theme instead.

  • Like 1

Share this post


Link to post
Share on other sites

You are supposed to choose which images you want to merge, then click the links to download the images, then click the "Export CSS" button and replace the lines in your global.css it displays with strikethru with the ones that aren't strikethru. Then upload the sprites you downloaded to the img directory inside your theme and change the sprite links to the SpriteMe website to the ones inside your theme instead.


Sorry for my questions. "click the links to download the images, " Which link? I have difficult time with this site. How can I upload my images so that they can be used with SpritesMe? Thank you for the help.

Share this post


Link to post
Share on other sites

You don't upload your images to SpriteMe. There is a link on the homepage that says "Drag this link". You should add this to your favourites, then go to your website and select the SpriteMe link from your favourites to open SpriteMe on your site. A popup should appear on your website like in the screenshot below. You can then click on the "Make all" button, or select which images you want to make into sprites. Once the sprites are generated, you can click the blue links in the popup to download them.

26008_ILb0nc5gNb7u10fqPKUQ_t

  • Like 2

Share this post


Link to post
Share on other sites

  • 3 weeks later...
  • 2 years later...

You don't upload your images to SpriteMe. There is a link on the homepage that says "Drag this link". You should add this to your favourites, then go to your website and select the SpriteMe link from your favourites to open SpriteMe on your site. A popup should appear on your website like in the screenshot below. You can then click on the "Make all" button, or select which images you want to make into sprites. Once the sprites are generated, you can click the blue links in the popup to download them.

Hi there Rocky,

I like your post and I have tried myself to follow it.

I have analized my website with Google PageSpeed Insights, and I have errors in section "Combine images into CSS sprites"

I have used the favorites saved link to SpriteMe on my website, I have generated the png file, I have uploaded that on: mydomain.com/themes/mytheme/img/spriteme.png, I have tried to modify the lines in globall.css with those from spriteMe export css.

I only tried with a few files, I am not sure if it works as if I re-run the test from google I get exactly the same error.

One more thing, google recomends me to combine this image: img/icon/sitemap.gif but I can not find it in global.css or in any of the rest of css files in the folder: mydomain.com/themes/mytheme/css

 

Plese let me know if you have any suggestions

Share this post


Link to post
Share on other sites

  • 1 year later...

You are supposed to choose which images you want to merge, then click the links to download the images, then click the "Export CSS" button and replace the lines in your global.css it displays with strikethru with the ones that aren't strikethru. Then upload the sprites you downloaded to the img directory inside your theme and change the sprite links to the SpriteMe website to the ones inside your theme instead.

i have tried to use spriteme, and on its website it says "Merge these changes into the CSS rules in yoursite/theme/yourtheme/cache/a certain css file, i couldnt get it working though on all images on sprite.png, some wouldnt work

 

 

Hi there Rocky,

I like your post and I have tried myself to follow it.

I have analized my website with Google PageSpeed Insights, and I have errors in section "Combine images into CSS sprites"

I have used the favorites saved link to SpriteMe on my website, I have generated the png file, I have uploaded that on: mydomain.com/themes/mytheme/img/spriteme.png, I have tried to modify the lines in globall.css with those from spriteMe export css.

I only tried with a few files, I am not sure if it works as if I re-run the test from google I get exactly the same error.

One more thing, google recomends me to combine this image: img/icon/sitemap.gif but I can not find it in global.css or in any of the rest of css files in the folder: mydomain.com/themes/mytheme/css

 

Plese let me know if you have any suggestions

CleanDev, you will find the sitemap file in themes/yourtheme/img/icon folder

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More