Helix Ultimate is an advanced, functional Joomla template framework which is user-friendly and highly customizable tool to build Joomla templates easily and quickly. It allows you to use your own custom code to customize Helix Ultimate Framework (Ex: CSS, JavaScript, Metatags, links and verification code).
1. Before < / head >
Any code that is put here will appear in the < head > section of all your web pages. This feature is useful when you need to add verification code, JavScript or CSS links to all pages. When the page is loaded, the head of HTML document will be not displayed in the web browser.
Image by Joomshaper
2. Before < / body >
The code placed here will appear at the bottom of the body section of all your web pages. This feature is useful if you need to input a tracking code for a state counter such as Google Analytics or Clicky
Image by Joomshaper
3. Custom CSS
Add your custom CSS code here and save settings. You can use custom CSS to add your styles (code tweaks) or overwrite default CSS from a template or extension. This is only for CSS code, not for HTML or PHP code.
Image by Joomshaper
You should use the custom.css file instead if you want to get more extensive design changes. By default, custom.css file doesn’t exist, so you have to create a new file inside /css folder of template.
Image by Joomshaper
Note: CSS cascades in reverse, that means 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.
4. Custom JavaScript
You can add custom JavaScript to your website here. It loads your custom Javascript code after all other JavaScript files (except special hardcoded occasions), you will be the last one who will affect your website.
Image by Joomshaper
You should use the custom.js file for longer custom JavaScript code. However, by default, this file doesn’t exist, so you have to create a new file inside /js folder of template.
Image by Joomshaper
Hope this article will be useful for you in customizing Helix Ultimate With Custom Code. If you have any question about this tutorial, don’t hesitate to leave a comment below. And don’t forget to share with your friends if you find it useful! Thanks! ?
- Taking Inspiration From One of the World’s Leading Eyewear Ecommerce Sites: Eyebuydirect - March 22, 2024
- Navigating Success: The Role of UX/UI Agencies in Business Growth - March 12, 2024
- 4+ Best Woocommerce Private Store Plugins - March 8, 2024
Hi ,
I need to add the below code in custom css file. But I can’t follow the above steps because I cant find the template customization screen . I am using helixultimate temaplate. Can you please also elaborate that part how to find that template customization page ?
div#sp-menu {
width: 100%;
margin: 0 auto;
text-align: center;
}
.sp-megamenu-parent {
list-style: none;
padding: 0;
margin: 0 -15px;
z-index: 99;
display: block;
float: none;
position: relative;
}
You can find Template Settings by go to Admin > Extension > Template > [your-template], open it so it’s Template Settings for Customization.
I thought that the Google Analytics code should be inside the Head. Why do you say to put it in the Body? Everywhere I look it says to put Google Analytics in the head section.
You can put Google Analytics anywhere from your website, not header required.
Hi
I am unable to add code using the custom code area as I use cloudflare which has a security feature that blocks it on save. Could you tell me where the code is added when adding via custom code in before so I can add it to the appropriate page.
Template Settings > Custom Code.