anson.c Posted June 26, 2010 Share Posted June 26, 2010 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! Link to comment Share on other sites More sharing options...
rocky Posted June 27, 2010 Share Posted June 27, 2010 The easiest way is to use SpriteMe to do all the hard work for you, then copy the CSS code into your global.css. 1 Link to comment Share on other sites More sharing options...
mytheory. Posted June 27, 2010 Share Posted June 27, 2010 Hey rocky,Are you supposed to replace any line(s) in particular with the ones generated by SpirteMe, or do you just add it... like to the end or beginning of global.css?Thanks! Link to comment Share on other sites More sharing options...
rocky Posted June 27, 2010 Share Posted June 27, 2010 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. 1 Link to comment Share on other sites More sharing options...
google-friend Posted June 27, 2010 Share Posted June 27, 2010 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. Link to comment Share on other sites More sharing options...
rocky Posted June 27, 2010 Share Posted June 27, 2010 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. 2 Link to comment Share on other sites More sharing options...
anson.c Posted July 1, 2010 Author Share Posted July 1, 2010 When I try to use Sprites the images show up fine except the whole layout become messed up at the same time. (See pic)Anyone have an idea? Link to comment Share on other sites More sharing options...
rocky Posted July 2, 2010 Share Posted July 2, 2010 I have no idea. Adding sprites should change the backgrounds of elements only, not reposition them. Link to comment Share on other sites More sharing options...
vietnam Posted July 20, 2010 Share Posted July 20, 2010 I made a Feature request for the BO of prestashop , to minimize from over 20 Request to only 1 http://www.prestashop.com/bug_tracker/view/5022/ Link to comment Share on other sites More sharing options...
cogeanumarius Posted July 31, 2012 Share Posted July 31, 2012 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 Link to comment Share on other sites More sharing options...
mickeyboy1 Posted January 29, 2014 Share Posted January 29, 2014 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 Link to comment Share on other sites More sharing options...
mickeyboy1 Posted February 10, 2014 Share Posted February 10, 2014 Could somebody confirm where to add the edits for sprites please Is it in the /cache file or in the main css files ???? Link to comment Share on other sites More sharing options...
CartExpert.net Posted February 10, 2014 Share Posted February 10, 2014 Hi. In the main css files. Regards.Robin.The CartExpert Team Link to comment Share on other sites More sharing options...
mickeyboy1 Posted February 10, 2014 Share Posted February 10, 2014 Thanks Robin, i shall try that and report back Link to comment Share on other sites More sharing options...
mickeyboy1 Posted February 11, 2014 Share Posted February 11, 2014 No joy im afraid, I put some of the changes into global.css but was getting some wrong images from the sprite.png I put in all the correct positions but still not working Might have to live with this extra load time !!!! Link to comment Share on other sites More sharing options...
CartExpert.net Posted February 11, 2014 Share Posted February 11, 2014 If you are getting the wrong images you didn't set up the positions correctly. Regards.Robin.The CartExpert Team Link to comment Share on other sites More sharing options...
mecollectibles Posted April 16, 2015 Share Posted April 16, 2015 where to put the files & how to point to them? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now