You can easily customize Helix Ultimate Framework with your own custom code, for example: CSS, JavaScript, Metatags, links and verification code by using the custom fields in that section of settings. Inserting custom code before your Joomla website’s </head> and/or </body> tags is a common requirement for a variety of scripts and services (e.g. Google Analytics).

Before < / head >

Any code you place here will appear in the < head > section of every page of your site. This feature is useful when you need to add verification code, extra Meta Tags, HTML Links Tags, and other metadata. This feature is also very useful if you need to input a tracking code from Google Analytics. The head of an HTML document is the part that is not displayed in the web browser when the page is loaded.

Example use:

<link href="/templates/shaper_helixultimate/css/shop.css" rel="stylesheet" type="text/css" />
<link href="/images/favicons/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
<meta name="google-site-verification" content="___" />

Always check if added code works correctly after saving, in some cases, it may not. It can be caused by:

• Firewall which can damage script <j-avascript> - in that case, please check settings of RSfirewall or Akeeba Tools Pro.
• Your server security settings (Mod_Security or similar) do not allow using this kind of code.
• The code line contains the wrong path to the file.
• You forgot to add a close tag or missing letter.
• Service from embed code is suspended or has temporary server problems.
• Used code contains too many redirections which may also damage template code or cause long load delays. 

Damaged custom code:

In some cases, added custom code may not work and seems to be damaged (i-frame or s-cript) - it's caused by RSfirewall component.  Change its settings and paste the original code again. Do not use custom php code inside template options!

If you are trying to add a script or iframe tag in Template Options and the tag is scrambled after you save your changes, this is caused by one of the protection filters applied by RSFirewall!: the JS Protections filter. This option will help protect you against JavaScript injections by disrupting the starting tags, for example an <iframe> tag will be changed to <i-frame>. In order to avoid this filtering you can:

Before < / body >

Any code you place here will appear at the bottom of the body section of all pages of your site. This feature is useful if you need to input a tracking code for a state counter such as Clicky. Some developers recommend to use their code should go directly before  the closing body tag </body> of your page(s).

Custom CSS

Using Custom CSS gives you the power to create your unique design and allow you to customize the appearance of selected elements (colors, size etc.).  You can use custom CSS to add your styles (code tweaks) or overwrite default CSS from a template or extension. This option is useful for small design changes. This is only for raw CSS code, do not use HTML or PHP code here.

For more extensive design changes (more than a few lines of code) we suggest using the custom.css file instead. By default custom.css file doesn’t exist, you have to create a new file inside /css folder of the template. This is a safe method, and allows you to move from template-to-template, and makes it easy to debug if something ever goes wrong.

Remember that CSS cascades in reverse, meaning rules that appear later always take precedence over rules that appear earlier. So any CSS applied to a separate sheet will override the page’s default code.

Those methods should help you to create custom sites that stay exactly how you want them to, no matter what new updates roll out.

Warning! Please do not edit the template.css or any other CSS file from the Helix Ultimate template framework. The reason being that all of your changes will be overwritten by a template engine (reverting back to original code). Instead, we suggest using custom.css file where you can override the default CSS code created by the our team.

Tip: How to use different custom css files for multiple styles of the same template - answer to that question you will find in separate FAQ section of Helix Ultimate documentation.

Custom JavaScript

Use this field to inject custom JavaScript to the whole website. It loads your custom Javascript code after all other JavaScript files (except special hard coded occasions), allowing you to be the last one who will affect your website. Add here only raw JavaScript code without starting tags.

Warning! Wrong JS code may slow down or even temporary damage your template and block the edit toolbar. Always make a backup first.

For longer custom JavaScript code we suggest to use the custom.js file instead. By default this file doesn’t exist, you have to create a new file inside /js folder of template.