DOWNLOAD HERE – Prestashop Theme Extender module

Prestashop 1.6 color schemes structure

As a first step, it is fundamental to understand the file structure of color schemes in Prestashop 1.6. They are not located in the default-bootstrap theme folder, as we might think, but come as part of the Theme Configurator module. Therefore, to locate all the default ones, we must reach out the /css/ folder inside /modules/themeconfigurator/.

By default, it will contain one css file for each of the default fonts, and one for each of the color schemes. Notice that, if you want to use SASS, it worth having a look at the /scss folder instead, and create a ruby compiler in the main module’s folder, as it’s missing. In this tutorial we will be editing .css files anyway.

Before proceeding: color schemes are named theme# where # is a number, but notice number 1 is missing, and, for that reason, we have 8 themes, instead of 9.

Adding a new color scheme

The scheme’s file

The easiest way to add a new color scheme is, of, course, to clone one of the existing ones. Therefore, grab the one you wish to use as a starting point (I will use theme9), clone and rename it theme10.

The database entry: 2 routes

Now that we have the file in place, we need the configurator to know it’s actually there. How to? If we inspect the source code, we will see it grabs the selectable variation from a serialized array, added to the database upon install:

		$themes_colors = array(
			'theme1',
			'theme2',
			'theme3',
			'theme4',
			'theme5',
			'theme6',
			'theme7',
			'theme8',
			'theme9'
		);

		...
		!Configuration::updateValue('PS_TC_THEMES', serialize($themes_colors)) ||
		...

We are facing two routes at this point: we can manually edit the array, and reset the module so that the database entry is updated. Or, we can directly modify the serialized array. Please notice that this second way is risky, and if you edit it the wrong way, you will not be able to use the theme switcher unless you reinstall the theme configurator module. That said, resetting the module means losing all of the other customizations that might have been added, and I will therefore cover both methods.

METHOD 1: Modifying the php file, and resetting the module

Head over to /modules/themeconfigurator/ and open themeconfigurator.php. Find the array mentioned above, and add the name of the .css file you cloned. In this case, theme10:

		$themes_colors = array(
			'theme1',
			'theme2',
			'theme3',
			'theme4',
			'theme5',
			'theme6',
			'theme7',
			'theme8',
			'theme9',
			'theme10'
		);

Save, login to the back office and hit Reset on the right hand side dropdown menu. Doing this will erase your current customizations and images added using this module! Therefore, make sure you have a backup, if you need them.

METHOD 2: Manually editing the database entry

Login to your database and reach the ps_configuration table (your prefix might be other than ps_). Look for the entry named PS_TC_THEMES, and click to modify it. At this point, the value column will look like this:

a:9:{i:0;s:6:"theme1";i:1;s:6:"theme2";i:2;s:6:"theme3";i:3;s:6:"theme4";i:4;s:6:"theme5";i:5;s:6:"theme6";i:6;s:6:"theme7";i:7;s:6:"theme8";i:8;s:6:"theme9";}

How does a serialized array works? It’s important to understand it, in order to avoid breaking serialization, making it impossible to use it later. a:9 declares the size of the array. It contains 9 elements, so we need to change it to a:10 as we are adding another one.

Then, let’s take a closer look at the last element:

i:8;s:6:"theme9";

i:8 represents the index of this entry, which is 8; s:6 means it’s a 6-chars long string; “theme9″ is the value of this array entry.

Make sure to copy and save the original value somewhere, before modifying it!

Now that we know it, we can add our new element after the last semicolon:

i:9;s:7:"theme10";

Explanation: i:9 means that this element has 9 as index; s:7 indicates the length of it, as it’s one more character compared to the other ones, it needs to be 7, not 6. Lastly, the name of our file.

The final entry:

a:10:{i:0;s:6:"theme1";i:1;s:6:"theme2";i:2;s:6:"theme3";i:3;s:6:"theme4";i:4;s:6:"theme5";i:5;s:6:"theme6";i:6;s:6:"theme7";i:7;s:6:"theme8";i:8;s:6:"theme9";i:9;s:7:"theme10";}

Once more, this is a risky procedure, so if you have doubts, you can follow method 1 instead!

Editing CSS files

At this point, it’s time for some pure CSS fun! Click on the shop link from the back office to activate the live configurator, it should look like this:

That last black entry is our new color scheme! Why is it dark? Because the color is (sadly) saved in a separate file: /modules/themesconfigurator/css/live_configurator.css. It’s not strictly necessary to add it, but in case you want, locate the following:

#tool_customization #color-box .theme9 .color1{
	border: 13px solid #f9f6ed;
}
#tool_customization #color-box .theme9 .color2{
	background: #eea200;
}

Clone these lines and rename them to match the new theme’s name, then change the color to something that will help you identify the new scheme (mine is an electric blue, leaving the lighter color as it was):

#tool_customization #color-box .theme10 .color1{
	border: 13px solid #f9f6ed;
}
#tool_customization #color-box .theme10 .color2{
	background: #3982ef;
}

Then, open up the theme10.css file and start modifying colors! If you are happy to only change the main color, like in the example of the original theme9, #f9f6ed, locate all entries of it, and replace them with your hex.

Of course, a completely new world opens up now. It would be boring to go through all boxes and colors. Instead, as the current way is troublesome and might generate issues, let’s have a look at n easier (and FREE!) alternative to manual modifications, using a module I created!

Alternative method: Adding new color schemes using my Free Prestashop Theme Extender module

DOWNLOAD HERE – Prestashop Theme Extender module

Adding new color schemes using this module is as simple as editing a .css file. Because that is all you need to do, of course! My suggestion is, once more, to use one of the default color schemes as a basis. Once you are done with modifications, simply grab my module, install it, choose your .css file, and, optionally main and secondary colors (they have the only purpose of helping you recognize the scheme in the live configurator). Then, click add. And you have the new color scheme!

THis way, there will be no need or resetting the live configurator module, nor doing any complex modification in the database, or to any .php files. And of course, it’s completely free!

The post How to add new Color Schemes to the Prestashop 1.6 Theme appeared first on NemoPS.

Watch The Screencast

The post Prestashop 1.6 preview : New responsive Prestashop theme appeared first on NemoPS.