Prestashop & Opencart Templates
No Result
View All Result
  • Home
  • Prestashop Tips
    • Buy Prestashop Themes
    • Prestshop Tutorials
    • Prestashop Tutorials for Beginners
    • Prestashop Themes
    • Prestashop Theme Installation
  • Opencart Tips
    • Opencart Tutorials
    • Opencart Themes
    • Opencart Theme Installation
  • Buy Themes
  • Contact
  • Home
  • Prestashop Tips
    • Buy Prestashop Themes
    • Prestshop Tutorials
    • Prestashop Tutorials for Beginners
    • Prestashop Themes
    • Prestashop Theme Installation
  • Opencart Tips
    • Opencart Tutorials
    • Opencart Themes
    • Opencart Theme Installation
  • Buy Themes
  • Contact
No Result
View All Result
Prestashop & Opencart Templates
No Result
View All Result

How to change colors in your Prestashop theme

in Prestashop Tutorials
2 min read
How to change colors in your Prestashop theme

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
Prestashop colours in Google Chrome
Prestashop colours in Google Chrome
  • 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

themeconfigurator

  • 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]

Previous Post

How to change the color scheme in your Opencart theme

Next Post

Free Prestashop Themes – design your own

Next Post
Free Prestashop Themes

Free Prestashop Themes - design your own

Translate Page

Facebook Instagram

This message is only visible to admins.

Problem displaying Facebook posts.
Click to show error

Error: Server configuration issue
No Result
View All Result
  • Home
  • Prestashop Tips
    • Buy Prestashop Themes
    • Prestshop Tutorials
    • Prestashop Tutorials for Beginners
    • Prestashop Themes
    • Prestashop Theme Installation
  • Opencart Tips
    • Opencart Tutorials
    • Opencart Themes
    • Opencart Theme Installation
  • Buy Themes
  • Contact

© eShopalot

Translate »