There are plenty of background images you need to change to get a new look. Some are used in the block header and others are used in the block content, and so on. The preceding screenshot shows all the background images on the front page of your site. The images outlined in red are all the images but you can only see them as accent to the site. The background image elements that you may consider replacing can be some or all of the following:
- Backgrounds
- Banners
- Bullets
- Buttons
- Icons
To find out the location of a background image:
- Move your mouse over the image you want to check.
- Right-click the image. You will see the menu option View Background Image.
- Click that option and you will be directed to a page where the image will be shown individually. The path to the image on your server will be displayed in your browser's address bar.
- This is where the example background image is located:
http://www.yoursitename.com/prestashop/themes/theme1/img/block_category_item_bg.jpg - Notice that it is in the
imgfolder of the theme being used (that is,theme1). - You can right-click on the image you see and download it to edit it.
Alternatively, you can always edit the file using a copy of the image that
you made when you downloaded Prestashop, as long as you know which item you
want to edit and which one you want to keep as it is.
- Although the example show use of the Web Developer extension, you can also use Firebug to view the path of the images. These tools were explained in the previous chapter).
By doing this, you will have some idea when you upload an image for the products catalog where the images will appear. When you want to replace an image or a background image, it is necessary to know what to replace or change and know where the files are located within the PrestaShop directory.
In the above screenshot we used Firebug to inspect the background image element for the Categories block. The image information can be seen on the right split.