Changing the colors in any Prestashop template is a pretty simple process.
So if you bought a theme, love the design but want to change the colours to match your logo or just simply prefer a different colour. Follow these steps.
In this demonstration we will use Google Chrome browser
If you don’t have google chrome, you can download it here
https://www.google.com/chrome/browser/desktop/
How to change the colours
- First, open your website in your Google Chrome brower
- Now find text or an object on your page that has the colour that you want to change, and right click over it.
(for example, if a color of a title is blue, then right click on the title) - Now a drop down will appear and select “inspect element”
- Now you will see Chrome expand to show the code that is used to make the page
- To the button right of the page (seen in the image above), you will see the color used to make the text.
- In the example above this is: color: #c15a5b
- Make a note of the number used to make this color (c15a5b)
Now we need to open your themes css stylesheet. In prestashop there are several stylesheets that you will open. All stylesheets end with a .css
- Open one of the the stylesheet located in “Your Prestashop install/themes/YOUR THEME/css/modules/themeconfigurator/css
(you can download the file via FTP) - Open the stylesheet based on the colour you have chosen in your themeconfigurator. The image below shows what stylesheet you should ammend based on the colour you have selected in your themeconfigurator. For example, if you have select the second colour from the left, you will want to edit theme3.css
- You can open the file in notebook or any plain text programme if you don’t have Adobe Dreamweaver
- If you use dreamweaver, you can search and replace the entire folder without having to open up each file
Now you need to find the html value of the colour you prefer
All colours used in the web have an html value of letters and numbers. For example, the blue that I used in the example image above is #c15a5b
You can find the html version of your colour using this website: www.colorschemer.com/online.html
Once you have found your colour you need to do a search and replace in your stylesheet from the old colour to the new.
- In notepad… go under edit and click “replace”. (make a backup of the original first!)
- Then save your stylesheet and reupload to the web.
[banners_zone id=2]
