Custom Code Settings

You can easily customize JoomLead Templates built for Joomla 3.4 with your own custom code, for example: CSS, JS, metatags, links and verification code by using the custom fields in that section of settings.


Any code you place here will appear in the head section of every page of your site. This is useful when you need to add verification code, javascript or css links to all pages. Check following example how you can use it.

Custom code

Final result on front-end HTML5 code generated by browser engine. That line you can see on image below was put by Helix3 engine before ending section and before will start, it means it’s fully W3C correctly solution.

Custom meta Joomla

You can use there any kinds of meta tags you want, also the refresh meta tag to redirect a page to a specific destination. Where is the best place to put JavaScript? If you want a script to execute early, before the page is displayed, then the HEAD section is a good place (it means use that field). Putting scripts into HEAD is a common and easy practice, but highly optimized sites use another method.

But remember all code you put here may harm your code quality or/and W3C verification tests, especially if it’s not HTML5 compatible. You can also use this solution to add addcional js libraries. By the way, CSS styles must be declared in the HEAD according to the HTML standard. Only javascripts are allowed to be placed anywhere.

Custom code 2


Any code you place here will appear in bottom of body section of all pages of your site. For example javascript code can also be at the bottom of page body. In this case it executes after the page is shown.

This is useful if you need to input a tracking code for a statistics counter (web analytics) such as Google Analytics(GA), Piwik, Woopra or Clicky. This tracking code will be available on every page of your Joomla 3.4 web site.

Custom CSS

This field allows you to custom CSS code directly into template code without using any external file link. Just paste your styles for class’es or ID’s or HTML tags to override dafault style based on template. Custom CSS

This field allows you to custom CSS code directly into template code without using any external file link. Just paste your styles for class’es or ID’s or HTML tags to override dafault style based on template.

Custom joomla css

We always recommend inspecting a web page with a tool like FireBug or the inspector built into Chrome/IE/Firefox browser when looking to customize CSS. When you inspect the code output directly with one of this tools it will show you exactly what CSS is affecting the HTML element you want to change. You can also test out what CSS changes will affect the element as well live in the browser.

Using Custom CSS gives you the power to create your unique design and allow you customize the appearance of selected elements (colors, size etc.). If this field is too small for your advanced changes you can use “hidden” feature. You don’t have to edit the template.css, legacy.css any other css files. The reason being that if you edit the framework files then when you update the template you will lose all of your code, because all of your changes will then be overwritten by the new version of the files included in the update. Instead, you can use custom.css file that will override the default CSS code.

So if you need custom code please create a new custom.css file in insert inside css folder of your current active JoomLead template.

Create new joomla template css Custom css joomla template Custom css template

An alternative solution is putting custom.css into the helix3 directory: templates/jlead_charvi_free/css/

If the custom file will be found in the above directory then it will be loaded and applied.

Note! custom.css file is loaded before custom css code from template settings, it means that second one may override everything, also that file with styles.

Custom JS

The procedure of adding JavaScript code is same as above mentioned adding CSS code.

Typography Settings

Right now using Google Font is much easier we also want to introduce a “Update Font List” feature. It allows you to refresh the list of available Google fonts. So if there are any new ones, this button allows you to quickly update fonts with just one click, and they will be automatically added in to JoomLead Template. Which allows you to use them quick.

Typography settings allows you to choose font and its settings for popular HTML tags: body, h1, h2, h3, h4, h5, h6 and navigation. Subsets (like Latin Extended, Vietnamese are also no problem – just choose the character sets you want. Of course if they are available for selected font set. All settings are from template settings, so you have got now a simple and efficient way to embed Google fonts of your choosing to your website with a few clicks of your mouse.

Google Font

Google has been supplying the community with a large collection of web-based fonts for quite a few years. One of unique Helix3 feature is Live Font Preview during choosing from list 670+ of available fonts. Remeber integrating good looking font(s) into a Joomla website can improve the appearance, increases trust for your website.

Font Preview

Custom Font

This section allows you also to use Custom Google Font for selected CSS selector. Just enable option, choose font settings and in empty field below insert name of classes separated by comma.

Custom Joomla Font

Menu Settings

Setup Joomla Mega menu

Mega Menu is an easy to use menu tool for creating beautiful, customized menus for your site, also with modules inside. That also boosts SEO and user engagement. Here in template settings you have access to 4 options only, more advanced settings are “hidden” in Menu Manager inside each menu item – so please check also there.

Joomla mega menu

Select Menu

It allows you to choose menu from available in your system. If you’re planning to build multilingual site in Joomla 3.4 – you have to create clone of current template for each addcional language and choose here a Main Menu for each of them.

Menu Type

By default there are enabled two separate menus: Mega Menu and Off Canvas Menu. You can use both or only of of them – as you want or need.

Mega Menu

Off Canvas is indeed a external menu module – so if you want to use this area you have to create a menu module, set it properly.

Remember to choose offcanvas module position for them.

Offcanvas mene

What is more important in this sidebar menu you can also publish not only menu modules but also for example Search module, it also have to had a offcanvas position chosen in Module Manager.

Mega menu Module

Dropdown Width

Dropdown Menu Width value would be to set it to the width of your submenu size content area. By default 240px.

Dropdown Animation

MegaMenu offer four transition options for your dropdown submenus:

  • Fade (default)
  • Zoom
  • Fade in Up
  • No Animation

This is the transition that occurs when the submenu is opened. To have the submenu appear with no transition, set this to None (No Animation).

Layout Manager Settings

Layout Manager

Allowing you to build flexible and beautiful layout based on module positions. Layout Builder is one of the unique features of Helix Framework which allows anyone to customize the existing template in any shape without having any programming language! In the layout builder we used 6 columns. Those 6 columns covered the whole width of our layout. If you want to create 4 columns then have to use wider blocks for every column.

Joomla template layout

Using Layout Manager is easy to master, learn. Following icons legend should help you understand which icons are responsible for what feature/setting. We suggest to make a copy of current layout to keep it for later in case if you would delete all rows and you forget how they were placed at the beginning.

Option Joomla Template layout

Note Each layout which you create can be saved and used later for example in template copy.

Column Settings

Make Component Area
Enable this option to make this column as a Component area. If you already selected component area for another column then unselect that one first then select this one. Joomla message section will also be loaded inside this column. Only one column in whole layout can be used for showing component (!).
Module Position
Select any suitable module position from the list. Do not set one module position to multiple position. Each such have unique name.
Hide on Mobile/Tablet/Desktop
Allows you to choose where this block should be displayed and where shouldn’t be. For example some module position can be displayed only on deskop/laptops computer but not on smartphones nor tablets.
Custom CSS Class
If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.

Note Do not forget to save column settings on popup window – save button is at the bottom, also general template must be saved after changes.

Installation and System Requirements

Installing Joomla Template and System Requirements

Please make sure that you’re using that version of CMS(latest version of Joomla 3.4). Changing your template lets you explore a variety of design styles and color combinations, which can completely change the look and feel of your website. In this tutorial we will teach you how to install a JoomLa template and set it as default for your website.

Our template including FREE and Premium template, that you can use for your private, noprofit and commercial projects.

1. Download the latest JoomLead template via your customer area to your local disc.

Free joomla template download

2. If your Joomla site have content already you can install template and modules only. Quickstart is good only for new websites because it contain Joomla package itself.

3. Before installation, check the compatibility whether the downloaded version of template is compatible with your version of Joomla. Must be Joomla 3.4+.

4. Once you have your Joomla template downloaded on your computer, login to the administrative area of your Joomla website and upload the template through the Extension Manager (Extensions -> Extension Manager).

5. Click on Browse button and select the template bundle archive you downloaded earlier. Finally, click on upload & install.

Install Joomla Template

6. After installing the template, you should receive a message “Installing template was successful!”. At this point, you have successfully installed a JoomLead template. Please note that this has not activated your new template, you still need to do this if you want to use this design.

Installing Joomla Template

7. Once the template is installed in your Joomla 3 system, you need to make it default for your website so your pages get the new design. First, you need to go to Extensions -> Template Manager. Now select the template checkbox near its name and click on Make Default.

set default joomla template

8. Make sure that only “jlead_charvi_pro” is assigned to all menu items if you want to use them fully as a default template in your next project.

9. That’s all JoomLead should be now your main and default template in Joomla 3.4+ system.