Find out how to add your own customizations and learn more about purposes of folders in Helix3 templates. Here are basics of templates\shaper_helix3 folder structure:

CSS folder

Include all CSS files used to build template layout and create a design features. There you will find example: bootstrap 3.x  and font-awesome 4.x styles.
In css\presets folder you can find style presets with different color variants. They are used in template settings.

Using Custom CSS  in Helix3 gives you the opportunity to create your unique design and allow you customize the appearance of selected elements (colors, size etc.). Please do not edit the template.css, legacy.css any other main css files from the Helix3 template framework. The reason being that all of your changes will be overwritten by template engine.

There are at least two ways of adding your own custom CSS to a Helix3 template (framework) :

• from template settings (there is Custom CSS filed)
• or add your own CSS by creating a custom.css file inside the /css folder.

That way your CSS won't be overwritten by template system or next template update.

Features folder

This folder includes source code for main sections of each Helix3 template:

• logo.php - source code for all used types of logo (image, text, mobile)
• menu.php - menu switcher MegaMenu & OffCanvas Menu
• title.php - title for pages with breadcrumb module position
• contact.php - contact (phone and e-mail) which you can see in most cases in top right position of template (front-end) and settings are in Basic tab
• social.php - social icons which you can see in Basic tab of template settings
• footer.php - copyright section, also which you can see in Basic tab of template settings

In each template source code of selected files may looks different, including extra features.

Fonts folder

In most cases there are required and legacy types of font files:

• FontAwesome
• IcoFont
• IcoMoon

Google Fonts which you can use in template settings are not kept locally, there are on Google servers only.

HTML folder

Joomla has an integrated tool that allows you to duplicate components and modules view, to create overrides. That can be done from this template folder, to avoid hacking the Joomla! files. More info in that guide: https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

This directory contains template override files for core output and module chrome.

In all of our template we have overridden several views of core components like:

• articles (com_content)
• users (com_users)
• search (com_search)

and modules like:

• articles categories
• articles latest
• menu
• login
• search
• tags
• breadcrumbs

And sometimes also JoomShaper modules like: SP Simple Portfolio etc.

Also in that module you can find folder named layouts -  which contain two subfolders: joomla and helix3:

Folder: templates\shaper_helix3\html\layouts\joomla - contain main overwritten for Joomla elements and new features made by Helix3, for example:

• article views
• category view
• read more
• tags
• post formats
• social comments
• social share
• info blocks (author, date, hits, category etc.)

 ....

....

Images folder

This directory contains all images used by the template, but not QuickStart demo site(!). For example you will find here:

• default favicon
• default template logo
• graphic backgrounds

JS folder

JS shortcut from JavaScript - contains supporting JavaScript used by the template for added functionality.

 .....

-----

MORE SOON