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.
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.
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.
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.
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.
Enable the Developer Mode and save changes.
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.
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.
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.
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).
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.