Introduction

This document covers Joomla 4 template installation, quickstart (demo packages), template/theme set up, and use of Joomlead templates. It provides answers and solutions to many common problems. We therefore encourage you to read this document thoroughly if you are experiencing any difficulties before contacting our support team.

For Gantry5 detailed documentation, please visit official website https://docs.gantry.org/ (A Complete Guide to the Gantry 5 Framework)

If you have any questions that are beyond the scope of this document, feel free to ask via ticket support system: Ticket System

Installation

The section will help you with steps to install Joomlead Joomla 4 Template into your existing Joomla site or start with one of our thematic demo websites. They are available as a Joomla quickstart (demo package) which is a full Joomla 4 installation including Gantry5 framework, template and the corresponding theme demo content.

Before you can start installing your theme you need to download it to your computer. To do that, simply log into your purchase account and download the template.

You can download the Gantry 5 component for Joomla here https://gantry.org/downloads#joomla

• Gantry 5: This contains the Gantry 5 framework and its associated bits and pieces (library, component, and plugins).
• Theme: This contains just the theme/template.

Installing the Gantry Framework

To install the Gantry component, you’ll need to navigate to System → Extensions in the admin area of Joomla.

Tab Upload Package File, Click Or browse for file button and locate your component’s zip file (joomla-pkg_gantry5_v5.5.7.zip) on your computer.

For more information, take a look at the official Gantry5 documentation.

Installing the Joomla template (Gantry-powered template)

Template made on Gantry 5 install just like any other Joomla template. The difference here is that you really want to have the Gantry5 framework installed and activated first, otherwise, the theme itself won’t be of much use

To install the template on Joomla 4, simply navigate to Administrator → System → Extensions and select the template installation package (jl_learnmate_j4_2.0.0.zip) on your computer and select Install Now.

Joomla Quickstart Installation

We are using Akeeba Backup Core component for Joomla! Migrations and Backups. Find more detail about Akeeba Backup here

These are the steps you need to follow::

• Download demo quickstart package, simply log into your purchase account and download the demo quickstart package (NAME_joomla_quickstart_j4.zip).
• Unzip and upload the package to server directory
• Install Quickstart Using Akeeba Backup

Updating

Updating Gantry5 Framework

Upgrading the Gantry Framework component is a relatively straightforward and simple process. This can be done using the built-in Joomla updater.

Go to Admin Dashboard → System → Updates → Extensions. Then check the checkbox next to the Gantry plugin and click Update. Gantry will now be updated directly from the web.

For more information, take a look at the official Gantry update documentation.

Updating the Joomla templates

Method 1: Install Full Theme Over Existing Template

If you are confident that the only changes you have made to your site are stored in the template’s custom directory, you can copy that directory and place it somewhere safe and upload the new, updated version of the theme.

Method 2: Selective File Replacement

Your theme’s files are contained within the template directory. For example, the Learnmate theme’s files can be found in ROOT/templates/jl_learnmate/. Once you have downloaded the updated version, you can unpack it and begin replacing the existing files with the updated version, adding new files and/or directories, and deleting any files deleted in the updated version.

After you have done this, make sure you clear the Gantry5 cache completely and test your site.

Uninstallation

There are two main parts to Gantry — the framework and the template. Therefore, there are two main parts to the uninstallation process. If you intend to uninstall only the template portion, then follow the instructions for removing the template only.

Keeping the Gantry library installed really does not cause any harm or reduced performance as it is only used by a Gantry-enabled template. If you wish to uninstall the library, you can follow those steps.

To uninstall the Joomla template, you will first have to ensure that it’s not assigned as Default Joomla template. Go to System → Site template styles and set default on any other template that is not gantry. After that, you can simply go to System → Extensions then search for the template name to uninstall.

Uninstall the Gantry component, library, plugin and template(s) from System → Manage → Extensions. Insert gantry into the Filter and click Search. Select all Gantry 5 extensions, then click Uninstall in the button toolbar. Gantry will now be uninstalled.

Gantry 5 Documentation

If you are new to Gantry 5, a good place to start would be the dedicated Gantry documentation.

Gantry5 Particles

Gantry5 comes with a brand new Particle system which makes it easy to create, configure, and manage content blocks.

Basically, everything that you would create a Custom HTML module for is now coded in to a particle. You no longer need to copy/paste long HTML codes and edit them, you just need to click here and there and fill out fields in the Admin.

In this chapter we will show you the custom particles that we developed as well as some of the core Gantry 5 particles that we modified and enhanced, for example the “Social” particle.

Core Gantry5 Particles

• Logo
• Menu
• To Top
• Social
• Module Positions
• Spacer
• Mobile Menu
• Custom HTML
• Module Instance
• Page Content
• System Messages

Premium Gantry5 Particles by Joomlead

We offer 100+ (Free and PRO) Gantry 5 Particles. Joomlead particles and atoms work out-of-the-box with any Gantry 5 theme on Joomla, WordPress and Grav.

Joomlead pro templates already included all pro particles while free joomla templates included free particles with limited features.

Learn more about Gantry5 Particles

Layout Manager

To access Layout from your Joomla administrator, go to System → Site Template Styles and then click the template name Learnmate (We use the Learnmate template for the demonstration) to access the layout manager.

Base Outline

This page will acts as the global default for any gantry pages. This is where global style, particle defaults, page settings, and layout options are set. For more information, please take a look at Gantry 5 Inheritance.

To edit this page, go to Outline → Base Outline → Layout Tab

Home Layout

While our demo package contains modules for our subpages, the Home page content is specifically found in the template’s Layout.

You can switch to any existing outline by clicking the list and then choosing a theme outline.

If you use the demo Quickstart package, you can see a list of predefined outline layouts like Home, About, Blog, Contact, and more. They are predefined outlines for special pages, there’s no limitation for creating, duplicating, and accessing your outlines.

You can create a new Joomla Menu Item with Menu Item Type Gantry 5 Themes → Custom Page and then assign it to special outline, take a look the Outline section for more details.

# Inheritance

The template takes full advantage of Gantry’s new inheritance system, making it easier than ever to configure and manage your website through synced particles, atoms, sections, and layouts. Save time by using inheritance to avoid repetitive changes!

Find out more about inheritance in sections in the Inheritance Guide.

Section Settings

For the Layout, the most basic parts of the page are Sections. These named divisions of the page give you the ability to create sections of content, each with one or more horizontal grids on which you can place Blocks, including Particles and Positions.

You can add a new row in a section by clicking plus (+) icon, or click the cog icon to open the section settings.

Max Width

Set the maximum content width for the section using the Max Width setting. Choose between the Default, Small, Large, XLarge to set a fixed max width. The Expand option expands the content to the full width of the section keeping a small padding to the left and right.

By default, all Sections Max Width is inherited from the Page Settings. You can change the global max width for all sections by going to Base Outline → Page Settings → Body Attributes → Max Width

If you want to set a custom max width for any section, just click the section settings then set the value for it.

Here an example the custom Max Width for Hero section that included with the Breadcrumb module expands to horizontal padding which adjusts to the viewport width based on Max Width option.

Default

Small

Large

XLarge

Expand

Variations

Section Variations are its assortment of utility classes that make it easy to quickly set up elements and have them appear how you want and when you want them to.

The theme supports all Gantry 5 core Utility Classes by default(Responsive Utility Classes, Padding and Margin, Utility Variations), you can see the full existing classes here

There are some additional settings for the section variation called: Padding Variations. Choose between the Default, XSmall, Small, Large, XLarge Vertical Paddings to set the vertical padding of the section.

Changing content via Layout Manager

You can find more detailed documentation for Gantry5 layout manager here

Changing base outline content

Base outline content (the global default for any gantry pages) including Navigation, Footer, Copyright. All pages are inherited these sections by default, so if you change the based outline content(Navigation, Footer, Copyright), it will changed for all pages automatically.

You might notice that the Home Layout above and its section like Navigation, Footer and Copyright section are inheriting from Based Outline. That means if you change the content, particles, section variations from Base outline, it will change the content for the Home page automatically.

Go to Learnmate template → Base Outline → Layout. Here you can change the content info for Top, Navigation and Footer. Click on any of the cog icons on the Particles to edit the content.

Editing Demo Content

Select the theme outlines from dropdown to add/edit/replace existing content for these pages.

Example: Home page. To edit this page, go to Outline → Home → Layout tab.

Here you can change the News Ticker, Button, Slideshow content/image, adjust heading text, modify the grid layout items and more. Click on any of the cog icons on the Particles to edit the content.

Positions

Our Joomla templates come with unlimited positions. Thanks to the awesome Gantry 5 framework you can now easily create as many positions as you want.

Create new Position

You just need to go to the Layout Manager, drag and drop the “Module Position” particle wherever you want it to be and set the Position name.

Set the Joomla position name, example: top-a

After that, you can assign the Joomla module to the new position

Learn how to create any positions quickly without coding here.

Customization

Add custom JavaScript and CSS/SCSS to the website.

Add custom Css

Go to Base Outline → Page Settings → Assets → CSS → then click the plus(+) icon to Add new item

Custom SCSS Code

All your customization (custom code) should be placed in your “Custom Style Sheet” file. This is the custom.scss file. By default, the custom.scss file does not exists, so you need to create a new one.

To do this, navigate in the directory structure to THEME_DIR/custom/scss and create a file called custom.scss if one doesn’t already exist. If the /scss/ directory doesn’t exist within your custom folder, you will need to create that, too. If it already does, just open it and make your additions/changes directly to the file.

You will find all details in the Gantry5 Documentation, in the “Adding a Custom Style Sheet” chapter.

Add custom Js

Go to Base Outline → Page Settings → Assets → JS → then click the plus(+) icon to Add new item

Using Joomla 4 templates for Joomla 3

You can use any Joomla 4 templates for Joomla 3 CMS, however, you need to replace the html override to make it works, please note the html layout for Joomla 3 and Joomla 4 is different that why we need to change the html override structure.

Steps:

– Rename/Remove the html folder at root/templates/template_name/html using an FTP program.

– Download the html override for Joomla 3 version here: https://www.dropbox.com/s/zk7sbnf3i59oczi/html.zip?dl=0 then unzip and upload to root/templates/template_name/

Template Tutorials

• Overriding Particle Settings
• Adding a Custom Style Sheet
• Adding a Custom Font
• Customizing the Error Page
• Using the Font Picker
• Using the Color Picker
• Using the Icon Picker
• Creating a New Particle
• Particle YAML Field Types
• Customizing Theme Files
• Creating Layout Presets
• Creating Custom File Overrides