How to Add or Use Custom CSS & JS in Helix Framework

You can easily customize JoomShaper templates based on Helix Framework built for Joomla with your own custom code (CSS and JS) by using the custom.css and custom.js file(s). For example custom CSS gives you the power to create your unique design and allow you customize the appearance of selected elements: colors, border radius, font size and background color or even using a image as a background etc. Before making any changes, please remember that you don’t have to edit css files from Helix framework. Instead, our smart Framework has in-build feature that allow you to use custom CSS code that will override the default CSS code created by the JoomShaper Developer Team. In this tutorial we'll show you, how to start customizing our templates.

Web Developer Tools

We always recommend inspecting a web page with a tool like FireBug or the inspector built into Chrome 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.

Adding & using Custom CSS file(s)

This below code will load custom.css file from your templates css folder. At first the function will look for the custom.css file from your templates css folder and if file exist then function will load this files. So if you need custom code please create a new custom.css file in insert inside css folder of your current active JoomShaper template.

An alternative solution is putting custom.css into the helix plugin directory: YOUR_SITE/plugins/system/helix/css/

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

$helix->addCSS('custom.css');

Adding multiple css files:

$helix->addCSS('custom1.css,custom2.css');

Adding & using Custom javascript files(s)

The procedure of adding JavaScript code & files is same as above mentioned adding CSS files but this function will load javascript files from js folder of templates if system willl find at least one custom.js file.

$helix->addJS('custom.js');

Adding multiple javacript files:

$helix->addJS('custom1.js,custom2.js');

Cache Settings

Helix V2 Framework has come with built-in CSS and JavaScript compression feature for you to make your site faster. It greatly reduces the size of standard CSS (cascading stylesheet) and Javascript code combine them and places in the cache folder which allowing to minimize the size of files downloads, increase loading speed and save on bandwidth as well. It’s actually that easy to speed up your website, besides reducing the size of pictures.

Cache Time: Set the cache time in minute, usually 30 (minutes). The cache time indicates the time interval during which the data in the cache is to remain valid. If the cache time is exceeded, the data from the data source is re-imported into the cache and the data feed is recalculated. CSS/JS files aren't changes you'd make regularly so you can set a long period of time.

CSS Compression: Select Enable, if you want to compress all CSS files and marge them and place in cache folder. Only enable this option when your site is 100% ready to launch.

Javascript Compression:Select Enable, if you want to compress all Javascript files and marge them and place in cache folder. Only enable this option when your site is 100% ready to launch.

Google Analytics

It enables Google Analytic tracking down system on your site in a quick and easy way. Just enable the feature and input your UA Key assigned to you by Google in the field provided. Your code will then be insterted into the footer of the template, which is best for performance reasons. 

Load jQuery

You can enable or disable force load jQuery. Also you can load jQuery from a CDN. By taking advantage of the CDN, you can significantly improve the performance of your Ajax applications. The contents of the CDN are cached on servers located around the world. In addition, the CDN enables browsers to reuse cached third party JavaScript files for web sites that are located in different domain. This option is available for Joomla 2.5 users only. In Joomla 3.x jQuery are loaded by default.

LESS

Helix V2 comes with LESS compatibility. If you want to enable this service then select "Yes". 

Component Area

Homepage component area can be enabled or disabled. Select "NO" to hide the component area for the homepage only. It allows you to show only modules on HomePage without unnecessary articles or any other component. No more tricks like Blank Component.

Preset color style

The Preset Style settings panel in the Helix framework-based template administration interface provides several options for configuring the main stylistic aspects of the template. We are giving some default preset color settings with each template. You can customize those styles by own, you have the ability to choose unlimited color combinations for some elements: Header color, Background color, Text color and Link color. Everything else you can change using for example the custom.css file.

Helix framework comes with 3 preset color styles to choose from. But most of our templates offering 6 preset color styles. The thumbnail from those styles allows you to decide which one you want to use in your current project.

Once a preset is loaded in the options panel, you can further customize it to fit your needs. If you are a web designer and want to make advanced customizations, each preset enqueues a separate CSS file that can be used as a starting point.

Change the layout columns width

The Layouts panel in the Helix Framework-based template administration interface provides several options for configuring the layout of the template. It comes with two main layout variations (Responsive, Fixed). In this tutorial, we will show you how to change the layout columns width. As you see in the below image that first parameter indicating the type of layout. Set the type of default layout according to your needs.

 Set the Main Body width in pixel. You can set up it from Basic menu tab.

Column Width:  This parameter is used to control the left column width of Helix based template. From settings, you can select each column width. Full column width is span12 (100%). 

If you want to use 3 equal module positions please use "span4" - it means 33,3% of width for each.

If you want to use 4 equal module position use "span3" - it means 25% of width for each. 

If you want to use 2 equal module position use "span6" - it means 50% of width for each.