Morph Pro – Style Customization Guide (Joomla 5)

This guide helps you customize styles, scripts, and layout for the Morph Pro template, built on the Helix Ultimate Framework for Joomla 5.

Setup for Development Mode (Real-time Changes)

To see SCSS and style changes instantly during development:

1. Enable Joomla Debug Mode
   System > Global Configuration > System > Debug System: Yes

2. Disable Browser Caching
   In Chrome DevTools → Network tab → Enable Disable Cache

3. Enable SCSS Compilation
   System > Site Template Styles > Morph Pro > Advanced Tab > Compile SCSS to CSS: Yes

All template setting changes (colors, typography, layout) will be compiled to CSS when SCSS compilation is enabled.

Where to Write Custom Code

1. custom.css – for user-specific styles

• Path:
  /templates/morph-pro/css/custom.css

• Auto-loaded by Helix. No need to enqueue manually.

• Example:

  body { background-color: #fafafa; } h1 { font-size: 3rem; color: #3366ff; }

2. custom.js – for user-specific JavaScript

• Path:
  /templates/morph-pro/js/custom.js

• Loaded automatically by the Helix framework.

• Example:

  document.addEventListener("DOMContentLoaded", function () { console.log("Custom JS loaded"); });

Do not modify core SCSS files unless you're experienced. Use custom.css and custom.js for safe updates. If you do write SCSS, use with caution.

Recommended Reading

For advanced customization, refer to these official Helix docs:

• Helix Framework Introduction

• Custom Header Creation Guide

• Advanced Features & Settings

• Template Views Override

Template Settings Compile to CSS

Any change you make via:

• Colors

• Fonts

• Spacing

• Layout Adjustments

…in the template’s Style tab will be compiled into template.css (if SCSS compilation is ON).

Compiled output:
/templates/morph-pro/css/template.css

Pro Tip

If custom.css changes are not visible:

• Hard-refresh the browser

• Clear Joomla cache

• Ensure SCSS compilation is turned ON