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 fileBy 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 fileIf 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.jsExample:
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.scssExample:
root/templates/template_name/scss/custom.scss
If you are new to Sass 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.
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.
Sass Basics: An introduction to the features of Sass, including side-by-side comparisons of SASS and SCSS syntax.
Last modified 1yr ago