Categories

Featured templates

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

Jack Martins February 17, 2016
Rating: 5.0. From 2 votes.
Please wait...

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

Joomla Themes
This entry was posted in Joomla! Tutorials and tagged AJAX, color, joomla, module, scheme, style, switcher. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.