0.00 (0 votes)

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.


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.


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


Users' reviews

Total rating: (0 votes) Add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?


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.