0.00 (0 votes)

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.

 

editor-jm-doctor-colors

 

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.

 

jm-doctor-templates

Click on JM Doctor Details and Files link.

 

jm-doctor-file-list

Edit less/template_variables.less file.

 

jm-doctor-customize

 

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

 

jm-docror-blue-ver

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.

 

jm-doctor-read-more

 

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

Our result:

 

jm-doctor-results

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' reviews

Total rating: (0 votes) Log-in to add review

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2017 Joomla-Monster.com All rights reserved. Joomla! is Free Software released under the GNU/GPL License.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Joomla-Monster.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

You will Get best support ever!

Do you know that besides high-quality templates
& pro extensions given for FREE 
our customers appreciate the excellent support

Check here why :)