How to work with ‘TM ajax style switcher module’ and add one more color scheme to it

Want to have a very convenient tool for changing color schemes right from your website front-end? Then this tutorial is just the thing for you.

Style switcher module is displayed only for those logged in users, who have administrator rights. User login form on the website is activated by publishing “Login or Register” module in the Joomla admin panel => Extensions => Modules.

After “Login or Register” module is activated, you can work using your admin user, which is created with superuser rights or you can create a new one.

Now, let’s check the TM Ajax Style Switcher module on the website.

1. Open your website.
2. Login using your credentials via Login or Register form.
3. Locate the button with painters palette and paintbrush on the left side of your screen and click it.

Great job, you have opened the customization tool. Now, let’s learn how to use it.

First of all, you can select the preferred color scheme. You will see your website change colors to the ones, shown on your color palette in the module. Click the Save button in order to implement the preferred color scheme to the website.

You can also edit the existing color scheme to customize it to your preferences. Let’s go through this process step-by-step:

1. Access your server files using hosting cPanel or FTP client. 
2. Open the folder, that your Joomla is installed to and locate templates/themeXXX/color_schemes/css directory in it. 
3. Inside this directory, you will see four files, named color_scheme_X.css, where X stands for color scheme number. 
4. Open the preferred file for editing via your cPanel or using a PHP/text editor on your computer if you are working via FTP client. 
5. Replace the color codes in the file using your desired ones. You may use Ctrl + F (or Command + F if you are a MAC user) to find and replace all the necessary color codes at once in bulk. 
6. Save your file and upload it back to the server.
   
7. Clear Joomla and browser cache and check the updated color scheme on your website.

You have edited the color schemes, but you feel those aren’t enough? Or you want to add some more color schemes in addition to the ones you already have? No problem, we’ve got your wish covered.

Let’s learn how to add a brand new color scheme.

1. Access your server files using hosting cPanel or FTP client. 
2. Open the folder, that your Joomla is installed to and locate templates/themeXXX/color_schemes/css directory in it. 
3. Copy one of the color_scheme_X.css files, where X stands for color scheme number. For example, let’s copy the color_scheme_1.css file. 
4. Rename the copied color_scheme_1.css to color_scheme_5.css 
5. Replace color codes with your preferred ones in the file and save changes. 
6. Next, navigate to templates/themeXXX/css/ folder ( where XXX is your theme number) locate the template.css file and open it for editing. 
7. Copy this CSS code:

   replace the number of color scheme in it and background color the following way:

   and paste it at the very end of your file. Make sure to replace #000 with your preferred color code.

8. Update your template.css file. 
9. Clear Joomla and browser cache and check the end result on your website.

Congratulations, you have learned how to manage “TM Ajax Style Switcher” module and add a new color scheme to it.