📁
Template Documentation
  • Introduction
  • Getting Started
    • Installation
    • Updating
    • Uninstallation
    • Changelog
    • Joomla 4
  • Template Options
    • Overview
    • Basic
      • Logo
      • Toolbar
      • Header
      • Mobile
      • Page Title
      • Dialog
      • Body
      • Footer
      • Contact Info
      • Social Icons
  • Presets
  • Layout
  • Menu
  • Typography
  • Blog
  • Custom Code
  • Advanced
    • Coming Soon
    • Error Page
    • Cookie Banner
    • Compression
    • Scss
    • Font settings
    • Image
    • Import & Export Layout
    • Analytics
  • Developers
    • File Structure
    • Module Positions
    • Customization
    • Add Custom Fonts
    • Changing the Name of a Theme
  • Tutorials
    • Overview
  • Troubleshooting
    • Layout Issue
    • File Permission Issues
Powered by GitBook
On this page

Was this helpful?

  1. Developers

Customization

Adding a Custom Style Sheet, SASS(scss) or Js file to provide as much flexibility as possible to add your own customizations.

Add custom.css file

By default, custom.css file doesn't exist. The first thing you should do is create the custom.css file. You can do so in just about any text editor.

To do this, navigate in the directory structure to THEME_DIR/css and create a file called custom.css.

Example:

root/templates/template_name/css/custom.css

We do not recommend editing or overriding the template.css or css-compiled files as any of these changes will be lost and/or overridden when the template engine file recompiles. You can place pure CSS in the custom.css file and it will work just fine.

Add custom.js file

If you need to load custom JavaScript file, this is the place to do it. To do this, navigate in the directory structure to THEME_DIR/js and create a file called custom.js

Example:

root/templates/template_name/js/custom.js

It will be added automatically to the template header.

Custom SCSS file.

You can format the file's content in SCSS. Helix Ultimate will automatically pick it up and compile it properly.

To do this, navigate in the directory structure to THEME_DIR/scss/ and create a file called custom.scss

Example:

root/templates/template_name/scss/custom.scss

More Information About Sass and SCSS

To start, SCSS syntax is based on traditional CSS. It adds in some of the features and shortcuts made possible by Sass, giving it the ability to live in both worlds. You can use traditional CSS in a SCSS file just fine, but you have the added benefit of nesting, mixins, and other powerful features that make it easier to hit the ground running.

PreviousModule PositionsNextAdd Custom Fonts

Last updated 3 years ago

Was this helpful?

If you are new to or SCSS (Sassy CSS), below you will find a some resources to help you get to know SCSS and find out why it is quickly becoming the preferred styling solution for Web developers everywhere.

: An introduction to the features of Sass, including side-by-side comparisons of SASS and SCSS syntax.

: A great guide for Sass beginners.

Sass
Sass Basics
Getting Started with Sass