Alright guys, we decided to write this detailed article about how to customize our Gantry Templates. We get this kind of questions quite often in our Support Forum so we decided to shed some light into the topic. So, let's get started :)

Which Files Should I edit?

The whole styling of the Gantry Framework and therefore the whole styling of our templates is located in the "less" folder inside the template folder - "root/templates/template_name/less". These are the files that you need to edit in order to make your customizations. Let's have a closer look at the files that you might need to edit:

gantry-core.less - this is the file that contains the default and core Gantry stylings. For example, in this file you will find the "a", "html", "body", "rt- block", "p", "h1-6", "ol", "ul", "li" and other major stylings.

header-dark.less - this file contains specific stylings for the Dark Header - not much to edit here.

header-light.less - this file contains specific stylings for the Ligth Header - not much to edit here.

joomla-core.less - Here you can find the stylings for the default Joomla functions and pages, for example Article Styling, Category Styling, Pagination Styling, Member Access, Login Module, Breadcrumbs Module and so on and so on.

menu.less - if you need to make some changes in the Menu Layout this is the file you need to edit. Everything related to the Menu is located here, everything exept the hover stylings.

menu-hovers.less - here are the Menu hover stylings only.

menu-dark.less - here are the variable values for the Dark Menu.

menu-light.less - here are the variable values for the Light Menu.

style.less - this is one of the files that you will most often need to edit. In this file you will find again the default and core functions like "a", "html", "body", "rt-block", "p", "h1-6", "ol", "ul", "li", "button", etc. but here are the specific stylings like colors, backgrounds, box-shadows, borders, text-shadows and so on.

template.less - here you will find some stylings specific for the Default Gantry Template. You should not need to edit it quite often but it is worth it to check if the code you are looking for is located in it.

template-custom.less - this is the BOSS :D This is the file that you will most often find what you are looking for. In this file we are writing the stylings for our templates. While we just make some small changes to the other (default) LESS files, we create the "template-custom.less" file and write everything in it :)

variables.less - this is also an important file. When you open some of the other LESS files (for example "styles.less") you will notice that there are some variables (@example). Most of these variables are located here.

k2.less - this is the file that contains the K2 Styling. We love the K2 Component so all our template should have this file.

How to find out which function I need to edit?

In order to find out which CSS (LESS) function you need to edit in order to apply your customizations you need to use Firebug (that's what we use and we love it) or Google Inspect Element. Both work the same way - just open your website, right-click on the Element you need to change and select "Inspect Element". Then a small console will open at the bottom of the browser window:

Then you need to find the particular CSS (LESS) function in the particular LESS file and edit it. It is a bit complicated to search for a particular CSS function in the LESS files because of the syntax. Here is an example:

1. In the Browser (Inspect Element) you will see the function like this:

.gf-menu.l1 > li > .item {
    ...
    ...
    ...
}

2. But if you open the "menu.less" file you will see that the syntax of the above function is:

.gf-menu {
    &.l1 {
        > li > .item {
            ...
            ...
            ...
          }
      }
}

3. The above is just an example but I just wanted to show you that it will not be very easy just to copy the CSS function name from the browser and then search for it (Ctrl+F) in the LESS file. You just need to get used to the syntax :)

Other Helpful Resources

LESS Website - http://lesscss.org/
Gantry Website - http://www.gantry-framework.org/

I hope this article will help you with your customizations. If you have some questions or ideas please fill free to leave us a comment below. Also, if you need some more details about a particular customization please open a new discussion in the Support Forum and we will assist you with it :)