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

Modification CSS styles in Joomla 3.x templates differs significantly comparing to Joomla 2.5 templates
The basic difference is that 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.
From this article you will find out on how to modify LESS within the Joomla-Monster template.

 

What is LESS?

LESS extends CSS with dynamic behavior such as variables, mixins and functions.
With LESS, the structure of your template styles will be optimized (favorably affects your site seo optimalization).
For more details about the less project please visit the official website.

Tools for coding with LESS.

Before starting the modification please make sure that you have a html editor installed on your computer that support CSS/LESS files.
We recommend the Aptana Studio editor as professional tool which is quite simple to use for beginners as well.
Find out more about working with less here.

Developer Tools.

The another tool you need to have is Firebug addon for Firefox browsers. With this great extension you will be able to inspect any part of your website for code and CSS styles. All major browsers provide a built-in tool which works in similair way as Firebug, e.g. press "Ctrl + Shift + i" to open DevTools for Chrome/Opera browsers or press "Ctrl + Alt + i" Developer Tools for  Safari browser.

Now we are ready to start the modification.

1. First of all, you have 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 and choose your Joomla-Monster template. 
Then click the Options tab.
Next, click on the Advanced Features tab.


advanced features tab

 

Enable the Developer Mode and save changes.


developer mode enabled

 

 2. All less files are located in the less folder in the root/templates/your_template directory.


less-files

override - directory of bootstrap LESS files overrides (boostrap LESS files are located in EF3 Joomla Monster plugin by default)
animated-buttons.less/animated-buttons_safari.less - styles for animated buttons used in typography and custom modules
boostrap.less - this file imports boostrap LESS files (boostrap LESS files are located in EF3 Joomla Monster plugin by default)
boostrap_responsive.less - this file imports boostrap responsive LESS files (boostrap LESS files are located in EF3 Joomla Monster plugin by default)
boostrap_variables.less - bootstrap LESS variables (here you can specify variables for bootstrap LESS files)
editor.less - typography and custom modules styles
extensions.less - styles for Joomla extensions used with template
layout.less - styles for template layout
modules.less - styles for template modules
style1.less/style2.less/style3.less - styles for color versions
template_mixins.less - mixins used in template LESS files (mixins allows to use a group of styles in a short way)
template_responsive.less - styles for template responsive feature
template.less - styles for Joomla pages and modules
template_variables.less - template LESS variables (here you can specify variables for template LESS files)

 

The LESS language stylesheet is based on variables which are defined in the template_variables.less file.
As you can see on the screenshot, in the template_variables.less file you can change, e.g. color values for each template color version.


less variables

You can also change the color values for many other template elements, e.g. top bar or footer background.
Note that all is well commented.

variables for tempalte parts


3. If you would like to edit values that are not defined within the template_variables.less file, then the Firebug extension will be useful for you.


Qucik guide step by step.

a) Using Firebug extension, inspect any part of your website that you want to edit. Firebug will show you the name and the location of styles for selected element.
In our example we inspect for active button of the DJ-Frontpage module of JM-Free-Ebooks template J3.x.

inspecting with firebug

 

In our example styles are located in extensions.css.

extensions-css

Please take into account that Firebug shows the style location in CSS files only.
You must modify LESS files in order to see effects on your website.

b) Open the extensions.less file and using "Ctrl + F" shortcut search for "span.button" element (last tag element).


extensions less



As you can see the structure of styles may be different between LESS and CSS but if you analize it step by step the logic is the same.

c) Modify styles, e.g. the background color to see changes on the site.

 

4. After finishing modifications remember to disable Developer Mode option.

developer mode disabled

 

News

New special offer till 23th september.

2014-09-17 13:27:12
Check this week's Special Offer! These three premium Joomla templates presented below are now 30% cheaper.Our ...

JM Beauty Center - check some interesting info about this template.

2014-09-15 09:37:47
JM Beauty Center is our latest Joomla! 3 template addressed for any beauty salons related with services like h ...

Blog

See what people ask about JM Doctor - multipurpose services template.

2014-09-08 08:15:00
 We keep getting questions about JM Doctor template. Check most popular ones.

The Joomla 3 beginner's guide second edition already released!

2014-08-29 12:03:13
The Joomla 3 Beginner's Guide Second Edition is another step-by-step Beginner's Guide to the Joomla CMS.It was ...

Faq

Utility classes for showing and hiding content by device.

2013-11-04 14:02:29
When customizing your own Joomla 3 site for tablets and mobile devices, you may come to the conclusion that yo ...

What does the subscription mean in practice?

2013-10-10 11:35:35
Customers often have doubts what the subscription exactly means in practice.They seem to be surprised that the ...