Prestashop category page header image.

Avatar
heartlandpet
  • Answered
http://pawsandclawspetsupply.com
Please refer to: breadcrumbs-bg.png file in themes/jms_food folder

This a a stock image that the theme developer placed in to appear at the top of all the product pages, please see:
http://pawsandclawspetsupply.com/pillow-beds/9-bumper-dog-bed.html

Please walk me through how I change that image into one of my pet product images. I don't want to mess it up. I notice that there is not an edit option. For example, my image is on my laptop, don't I have to put it somewhere in order for bg file to pull from.

r,

Bruce
Replies 1
Avatar
0
Arn
Hi Bruce, Thanks for the question about editing the background image of your custom theme. If you are not familiar with where the elements of this theme must be changed, then you will need to make sure that you review all the pages where this image appears, and then note how the BG (background) file is referenced. In the URL that you provided, it is coming from a GLOBAL.CSS file that is found within the specific theme directory that you are using (/themes/jms_food/css/global.css). I use Chrome's option to inspect the page elements to find this reference. You can do this by right-clicking on the item you want to inspect, then select "Inspect Element". In this case, I could tell, that the BG image was being referenced through CSS. Using the Element Inspector in Chrome also gives me the dimensions of the image as it appears in the browser, though you can also find that information by simply loading the image file into a tool like Photoshop. Once I identified the file and where it was being referenced, I looked for the CSS file (global.css) and the actual image file itself. The IMG file (as identified by the path provided by Chrome's Inspect Element) was in the image files directory in the THEME folder that was being used. So, in this case, the BG file was located in public_html/themes/jms_food/breadcrumbs-bg.png. Now, you can change the graphic by simply renaming the old one and replacing it with a duplicate file using the SAME name. Then you don't have to make any changes anywhere in the CSS files to make the graphic change. If you want to change the graphic reference, then you would need to find the GLOBAL.CSS file and modify it to use the new graphic for the BG. I hope all of this makes sense to you! It's really a simple change, but the actual change to the theme will depend on how you make the change. Remember that the graphic you use should match the dimensions of the original file, as this file was created to fit the existing theme. Hope that helps! Let us know if you have any further questions. Regards, Arnel C.