0.00 (0 votes)
5 stars 0
4 stars 0
3 stars 0
2 stars 0
1 stars 0

In this article I would like to demonstrate how to change template color version in JM Doctor template following those 4 simple steps.

Joomla 3.x templates use the LESS language stylesheets from which the CSS files are compiled. In other words, if you would like to change the template styles, you will have to modify the LESS instead of the CSS files.

TIP: How to modify LESS and CSS files in Joomla 3.x template?

All color values (Hex Color Codes) in the template based on variables are defined in the template_variables.less file.

Step 1

You need to enable the developer mode. Otherwise, the modification will be unsuccessful.
Within this mode, CSS files are compiled from LESS on each page refresh.

Navigate to Extensions -> Template Manager -> choose your Joomla-Monster template.
Then click the Options -> Advanced Features tab.


developer mode enabled


Step 2

At first we need to open template_variables.less and change values for base color variables @JMstyle1, @JMstyle2, @JMstyle3 or @JMstyle4, depends on the version of the color you want to edit.

We can do this in two ways:

1. Using some html editor that support CSS/LESS files and edit file on the server.




2. Using Template Manager feature at Joomla backend.

Just open Extensions -> Template Manager -> Templates -> Select template JM-Doctor -> select template_variables.less.

Enter Templates section.



Click on JM Doctor Details and Files link.



Edit less/template_variables.less file.




In example I will change first template color version (Style1) from blue to red.



1) @JMstyle1 old color: '#37abda' changed into new color => '#ff0000'
2) @JMstyle1Lighten old color: '#4cbbe8' changed into new color => '#fc7171'
3) @JMstyle1Darken old color: '#229bcc' changed into new color => '#d80000'
4) @JMstyle1VeryLight old color: '#c0e9f9' changed into new color => '#ffcfcf'

We can also edit color values for selected elements separately.
In example I will change readmore color button from red(previous blue) to black.




1) @JMstyle1ReadmoreColor '@JMstyle1' (red color) => '#000000'

Our result:



Step 3 - optional

All colors have been changed except images. 

If you need to change color of all images they are stored accordingly each color version image folder in 'templates/jm-doctor/images/style1' simply use PSD sliced that you will find in your download area of this template.

TIP: How to easily modify PSD slices?

Step 4

After finishing modifications remember to disable Developer Mode option.


developer mode disabled

About the author

Artur Kaczmarek
WordPress and Joomla lover. Artur Kaczmarek works as a programmer and coder at Joomla-Monster.com and PixelEmu.com. Senior products quality reviewer. Recent passed level - specialist at accessible templates (WCAG/Section508). Artur graduated IT and econometrics. He is a passionate about new technologies and in particular everything related to programming and coding for content management systems.

Users' comments

Total rating (go to the top to rate): (0 votes) Log-in to comment


ul. Przyjaźni 9, 84-215 Gowino, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.