[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

Joomla 3.x. How to add one more color scheme in “TM Ajax Style Switcher” module

This tutorial provides a description of how to add one more color scheme in “TM Ajax Style Switcher” module in Joomla 3.x.

Joomla 3.x. How to add one more color scheme in “TM Ajax Style Switcher” module

In order to add one more color scheme in “TM Ajax Style Switcher” module, you should do the following:

  1. Open and edit template.css file in templates\themeXXXX\css\ directory (XXXX stands for your theme id).

  2. Add one more scheme based on the existing one. That means we are going to copy the following CSS rule:

    		#style_switcher div.color_scheme.color_scheme_4 {
      			background: #f4d03f;
    		}
    	

    and modify it as follows:

    		#style_switcher div.color_scheme.color_scheme_5 {
    			background: #000;
    		}
    	

    As you can see, we have changed the number 4 to the number 5 in the selector, which basically ‘selects’ / applies the rule to our new scheme. We have also changed the background color to #000 (black as an example):

    Joomla_3.x._How_to_add_one_more_color_scheme_in_TM_Ajax_Style_Switcher_module

  3. Go to templates\themeXXXX\css\color_schemes directory, make a copy of color_scheme_1.css file (or any other one which has a name color_scheme_X) and rename it to color_scheme_5.css, respectively:

    Joomla_3.x._How_to_add_one_more_color_scheme_in_TM_Ajax_Style_Switcher_module2

  4. Change the colors in color_scheme_5.css and upload it again. For example, you can replace all #7ecefd values with #000 using CTRL+H replacement tool. Note that there are more colors than that:

    Joomla_3.x._How_to_add_one_more_color_scheme_in_TM_Ajax_Style_Switcher_module3

  5. Check out the outcome:

    Joomla_3.x._How_to_add_one_more_color_scheme_in_TM_Ajax_Style_Switcher_module4

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to add one more color scheme in “TM Ajax Style Switcher” module