Documentation

Installation

The most important decision to make before proceeding with your installation is whether you should install the template manually, or if you can use the Quickstart package, which will install everything for you.

Which installation method you should use depends on the current status of your site. Also, before installing either the template manually or the Quickstart Package, please make sure you meet the Joomla! and the template requirements.

Requirements

  • Apache 2.2+ or Microsoft IIS 7 (Apache strongly recommended)
  • PHP 5.4+ (PHP 5.5+ Recommended)
  • MySQL 5.1+
  • Joomla 3.4+

Also, please have a look at the Gantry5 requirements. Basically, they are the same as the above, but you will find some additional details there.

Quickstart Installation

The Quickstart Package consist of a full installation of Joomla! that installs Joomla itself, the template, the extensions, the demo content and the database data to match our demo layout. Have in mind that as this is a full Joomla! installation it may only be used on a clean server; the package cannot be installed in an existing Joomla installation. It can only be used when you start a new project/website.

99% of the customers purchase Joomla Templates because of the Quickstart Package. They just install it, replace the demo content with theirs and the site is ready. Installing the Quickstart Package will save you a lot of work.

Installing the Quickstart Package is a fairly simple process. Generally, a Quickstart install will consist of these small steps:

  1. Ensure you have installed an FTP client and prepared a database for your server, or have the credentials for an existing database.
  2. Download and extract the Quickstart Package.
  3. FTP the extracted Quickstart contents to your preferred install location.
  4. Open your browser to the install location on your server to begin the Joomla! installation process, entering the database credentials where required.

Once this final step is complete you will have a fresh install of Joomla!, along with the template and all the settings and content needed to match the demo, including sample article content. However, the images from the demo will NOT be included, as they are licensed via a third party. Instead, blank placeholder images will be included so that you can customize the content easily with your own images. For some users, the above steps are all that is needed for a successful installation of the Quickstart Package, but for those who are less experienced with this process, we recorded the following video (it is for the Oxygen template but the process is absolutely the same for all our templates).

Watch the Video

Manual Installation

Manual Installation refers to installing the template on your Joomla! powered website. This means you already have a website with content items, modules, extensions, so you just decided you want to improve the design of your website.

If you install just the template over an existing Joomla website you will need to install and configure all extensions that are installed in the demo site and configure them absolutely the same way as they are configured in the demo site in order for your website to look like the demo site. For this purpose you will still need to install the Quickstart Package on another location, see how everything is configured there and just duplicate it on your installation.

You can find step-by-step instructions as well as a video instructions regarding the Manual Installation in the Gantry5 Documentation, in the "Installation" chapter.

Customization

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 will need to create it. You need to create this file in root/templates/TEMPLATE_NAME/custom/scss. You will find all details in the Gantry5 Documentation, in the "Adding a Custom Style Sheet" chapter.

Changing the logo and centering the menu

You will need to change the logo, that's for sure. You can do that easily by editting the settings of the "Logo" particle:

  1. Go to the "Template Manager"
  2. Click on "Norman - Default"
  3. Select the "Base" Outline
  4. Go under the "Particle Defaults" tab, scroll down to the "Logo" particle and upload your logo file

You can also change the logo from the Layout Manager by editing the "Logo" particle in it.

The logo (and the menu) defines the height of the Header section so if your logo is with different height than the Norman demo logo (84px) you might need to adjust the menu margins in order to make it in the middle of the Header. You can do that easily by adding the following code in your custom.scss file (the below example and video example are with logo which has 160px height):

#g-header {
    .g-main-nav {
        margin: 1.125rem 0;
    }
}

You need to modify this margin so the menu fits the design. This 1.125rem are actually 1.125rem space/margin from the top and 1.125rem from the bottom. Read more about rem units here.

Once you change the menu you might also need to adjust the dropdown top value in order to position it properly (you can always leave it as is, but it will look nicer if the dropdown starts where the header ends). You can do that easily by adding the following code in your custom.scss file:

@include dropdown-offset-y(20px);

You need to modify the 20px value which is the top offset of the dropdown menu.

IMPORTANT: The dropdown-offset-y is a Gantry 5 SCSS mixin so in order to be able to use it (and to use all other Gantry 5 mixins and variables) in your custom.scss you need to add the following code at the top of the file (this is also explained in the "Adding a Custom Style Sheet" chapter in the official Gantry 5 documentation):

@import "dependencies";

Have a look at the following video. It shows everything that we explained above.

Watch the Video

Update

Updating the template

Updating the template is really easy. Here are the steps you need to perform:

  1. Download the new version of the template from the "Download" section on our website
  2. Go to "Extensions" -> "Manage" and click on the "Browse" button
  3. Select the template file you downloaded in step 1. It will usually be called tpl_it_NAME.zip
  4. Click on the "Upload & Install" button

Gantry5 Framework update

This is just a simple one click task. If there is a newer version of the Gantry Framework released you will notice that in your Joomla Admin as well as in the Template Manager. Then just click on the button.

You might also want to read the "Updating" and "Updating Themes" chapters in the Gantry5 Documentation.

Gantry 5 Basics

Please have a look at the Gantry Documentation in order to discover what Gantry is all about, the core-concepts behind it, and how to get started with this next-generation framework.

You do need to read the Gantry Documentation in order to be able to setup and configure our templates on your website.

The most important things you need to know when working with our Gantry5-based templates are:

  • The Layout Manager is used mostly for creating your module positions. Apart from the module positions, you should also keep the static content in the Layout Manager. By "static content" we mean the "Logo" particle, the "Menu" particle, the "System Messages" particle, the "Page Content" particle, the "To Top" particle and the "Mobile Menu" particle.
  • If you want to hide some modules/elements on some devices (phones, tablets, etc) you should use the hidden-phone, hidden-tablet, etc. classes but you should add them in the particular module positions (under the "Block" tab) in the Layout Manager, rather then in the "Module Class Suffix" field for the particular module. You will find more details in the "Layout Manager" chapter in the Gantry Documentation.
  • As mentioned above, you create your module positions in the Layout Manager, but then you will use the Module Manager to assign your modules, as you would do in any other framework as well as in the default Joomla!
  • In order to publish the custom particles that come with the template you will use the "Gantry5 Particle" module in the Module Manager, rather than adding them directly in the Layout Manager.
  • If you want to change the style of some sections (background color, background image, text color, etc.) globally, for the whole website, you should do it under the "Styles" tab in the "Base" outline. The "Base" outline holds the defaults for the whole website. You can then override those defaults in each outline you create.
  • If you want to load an asset (JS, CSS, etc.) globally in the whole website, you can do it under the "Page Settings" tab in the "Base" outline.
  • If you want to create an empty page so you can assign modules to it, you will use the "Gantry5 Themes" -> "Custom Page" menu item type. Previously, you would use the "Featured Items" menu item type.

Required Atoms

Please have a look at the Atoms sections in the Gantry Documentation so you know what they are all about.

Atoms basically load assets (scripts and stylesheets).

You must load the following atoms so the template can work properly. We recommend adding these atoms to the "Base" outline so the assets can be loaded on all your pages:

  • "UIkit for Gantry5" Atom - loads a modified and optimized version of the UIkit Framework.
  • "Template.js" Atom - loads the template specific JavaScript code.

Optionally, you can also add the "ScrollReveal.js" atom if you want to have onscroll animations. ScrollReveal.js is a library to easily reveal elements as they enter the viewport.

If you install the Quickstart package you do not need to do anything because the above Atoms are loaded by default.

You need to load these Atoms if you install the template manually (refer to the "Installation" section for more details).

The following video shows how you add the Atoms.

Watch the Video

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.

For more information about the core Gantry5 particles, please have a look at the "Particles" chapter in the Gantry5 Documentation.

Accordion

The "Accordion" particle is basically the UIkit Accordion coded into a particule and brought as a feature in our Gantry5-based templates. The following video shows the particle itself and most of its options.

We have not modified the "Accordion" particle for the Norman template so it has absolutely the same features and design as in the Milano template. Therefore, the video below is from the Milano template.

Watch the Video

Animated Counter

The "Animated Counter" particle displays numbers that you can animate as you wish. The following video shows the particle itself and most of its options.

We have not modified the "Animated Counter" particle for the Norman template so it has absolutely the same features and design as in the Milano template. Therefore, the video below is from the Milano template.

Watch the Video

Branding

The "Branding" particle is almost the same as the Custom HTML particle - it allows you to displays a text/HTML of your choice. The following video shows the particle itself and most of its options.

We have not modified the "Branding" particle for the Norman template so it has absolutely the same features and design as in the Milano template. Therefore, the video below is from the Milano template.

Watch the Video

Companies

The "Companies" particle displays logos/images where you can optionally add some text. This particle is supposed to be used for sections like "Our Clients", "Our Sponsors" and so on. The following video shows the particle itself and most of its options.

We have not modified the "Companies" particle for the Norman template so it has absolutely the same features and design as in the Milano template. Therefore, the video below is from the Milano template.

Watch the Video

Contacts

The "Contacts" particle displays contact information. It is a really flexible particle so you can basically display whatever contact details you want. The following video shows the particle itself and most of its options.

Watch the Video

Content PRO (Joomla)

The "Content PRO (Joomla)" particle looks and works in absolutely the same way as the default "Content PRO" particle. The difference is that "Content PRO (Joomla)" fetches Joomla articles automatically, while in "Content PRO" the user creates the content manually. The following video shows the particle itself and most of its options.

We have not modified the "Content PRO (Joomla)" particle for the Norman template so it has absolutely the same features and design as in the Galaxy template. Therefore, the video below is from the Galaxy template.

Watch the Video

CTA Button

The "CTA Button" particle display a really nice and highly effective Call-to-action button. The following video shows the particle itself and most of its options.

We have not modified the "CTA Button" particle for the Norman template so it has absolutely the same features and design as in the Milano template. Therefore, the video below is from the Milano template.

Watch the Video

Features

The "Features" particle displays, the quite popular nowadays, features that you, your company or your product provides. The following video shows the particle itself and most of its options.

We have not modified the "Fetures" particle for the Norman template so it has absolutely the same features and design as in the Galaxy template. Therefore, the video below is from the Galaxy template.

Watch the Video

Feedback 2

The "Feedback 2" particle displays feedback of users, clients and guests. The following video shows the particle itself and most of its options.

We have not modified the "Feedback 2" particle for the Norman template so it has absolutely the same features and design as in the Paradise template. Therefore, the video below is from the Paradise template.

Watch the Video

Gallery Feature

The "Gallery Feature" particle is divided into a left and right side. It takes most of the features from the "Gallery" particle and adds some new options so you can have your images on one side and then a title, description and a button on the other side. The following video shows the particle itself and most of its options.

Watch the Video

Google Map

The "Google Map" particle is really flexible and displays a Google Map. The following video shows the particle itself and most of its options.

We have not modified the "Google Map" particle for the Norman template so it has absolutely the same features and design as in the Galaxy template. Therefore, the video below is from the Galaxy template.

Watch the Video

Keypoints

The "Keypoints" particle is divided into 3 columns. In the first and third columns you can place features/ key points with icon and link (similar to the "Features" particle). In the middle column you can display an image, which can be either fixed to the bottom of the module section or not. The following video shows the particle itself and most of its options.

We have not modified the "Keypoints" particle for the Norman template so it has absolutely the same features and design as in the Mighty template. Therefore, the video below is from the Mighty template.

Watch the Video

Main Feature

The "Main Feature" particle is divided into a left and right side. It displays an image and some text with a button. You can achieve some really nice visual effects if you add the ScrollReveal.js functionality to this particle. The following video shows the particle itself and most of its options.

We have not modified the "Main Feature" particle for the Norman template so it has absolutely the same features and design as in the Milano template. Therefore, the video below is from the Milano template.

Watch the Video

OnePage Nav

The "OnePage Nav" particle works as one-page navigation, fixed on the left side of the screen. You can choose between dots or icon links for navigation. The following video shows the particle itself and most of its options.

Watch the Video

OnePage Menu

The "OnePage Menu" particle display a sidebar, vertical menu that gets sticky/fixed when the user starts scrolling. And the page gets smoothscrolled to the particular sections when a menu item is clicked. The following video shows the particle itself and most of its options.

We have not modified the "OnePage Menu" particle for the Norman template so it has absolutely the same features and design as in the Oxygen template. Therefore, the video below is from the Oxygen template.

Watch the Video

Page Title

The "Page Title" particle is a nice, small particle that shows a title, icon and description. The following video shows the particle itself and most of its options.

Watch the Video

Portfolio

The "Portfolio" particle is also a very advanced particle that incorporated several UIkit components. It is now a piece of cake to build awesome, responsive portfolios in your Joomla! website. The following video shows the particle itself and most of its options.

Watch the Video

Pricing Tables

The "Pricing Tables" particle displays pricing tables. The following video shows the particle itself and most of its options.

Watch the Video

Process

The "Process" particle is a one column particle, which displays one's workflow in a serie or items . The following video shows the particle itself and most of its options.

Watch the Video

Skill Bars

The "Skill Bars" particle has 4 unique styles to display skill bars. The following video shows the particle itself and most of its options.

Watch the Video

Slideshow

The "Slideshow" particle is basically the UIkit Slideshow coded into a particule and brought as a feature in our Gantry5-based templates. The following video shows the particle itself and most of its options.

Watch the Video

Social

The "Social" particle displays social icons and/or text. We enhanced it so you can now also have tooltips with custom test. The following video shows the particle itself and most of its options.

Watch the Video

Tabs

The "Tabs" particle is basically the UIkit Tabs and UIkit Switcher coded into a particule and brought as a feature in our Gantry5-based templates. The following video shows the particle itself and most of its options.

Watch the Video

Timeline

The "Timeline" particle display items in a row, where you can add as many items as you like. The particle is perferct to present a sequence of events or dates, per example education background or work experience. The following video shows the particle itself and most of its options.

Watch the Video

Zoom

The "Zoom" particle has the features of the "Main Feature" particle, but the image section has a magnifying glass over the image. The only thing important when using the "Zoom" particle is to use at least 2x bigger image, in order for the effect to work. The following video shows the particle itself and most of its options.

Watch the Video

Fixed/Sticky Header

Norman has a nice fixed/sticky Header that stays on the top of the screen when you start scrolling down. This effect is achived with the UIkit Sticky component. Basically, all you need to do is to add the following "Tag Attribute" to the Header section:

data-uk-sticky="{media: 768}"

You can use only data-uk-sticky but then the Header will always be fixed, on all devices. The {media:768} tells, that the Header should only be fixed on devices that are wider than 768px.

You can easily disable the fixed Header or make another section fixed. The following video explains everything (the video is from Oxygen, but the process is exactly the same in Norman).

Watch the Video

Modules and Positions

Norman comes with unlimited module positions. Thanks to the awesome Gantry 5 framework you can now easily create as many module positions as you want. 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 module position name.

Quickstart Package - Modules Overview

Here, just for your orientation, you can see where the modules from the demo are published and what Module Class Suffixes they use.

"Home" Page

1. OnePage Nav

Module: Gantry 5 Particle
Particle: OnePage Nav
Module Position: drawer
Module Class Suffix: none
Show Title: Hide

2. Logo

"Logo" particle - this is done from the Layout Manager

3. Menu

"Menu" particle - this is done from the Layout Manager

4. Hi, I'm Norman!

Module: Gantry 5 Particle
Particle: Slideshow
Module Position: showcase-a
Module Class Suffix: none
Show Title: Hide

5. Work Experience

Module: Gantry 5 Particle
Particle: Timeline
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show

6. Education

Module: Gantry 5 Particle
Particle: Tabs
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show

7. Personal Skills

Module: Gantry 5 Particle
Particle: Skill Bars
Module Position: subfeature-a
Module Class Suffix: title-center
Show Title: Show

8. Working Process

Module: Gantry 5 Particle
Particle: Process
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show

9. Services I Provide

Module: Gantry 5 Particle
Particle: Features (Style 5)
Module Position: maintop-a
Module Class Suffix: title-center
Show Title: Show

10. Recent Portfolio

Module: Gantry 5 Particle
Particle: Portfolio (Style 2)
Module Position: mainbottom-a
Module Class Suffix: title-center
Show Title: Show

11. Featured Project

Module: Gantry 5 Particle
Particle: Zoom
Module Position: extension-a
Module Class Suffix: title-center
Show Title: Show

12. Some Of My Clients

Module: Gantry 5 Particle
Particle: Gallery Features
Module Position: additional-a
Module Class Suffix: title-center
Show Title: Show

13. Testimonials

Module: Gantry 5 Particle
Particle: Feedback 2
Module Position: prebottom-a
Module Class Suffix: title-center
Show Title: Show

14. Blog

Module: Gantry 5 Particle
Particle: Content PRO (Joomla) (Style 1)
Module Position: bottom-a
Module Class Suffix: title-center
Show Title: Show

15. Download My CV

Module: Gantry 5 Particle
Particle: CTA Button (Style 2)
Module Position: last-a
Module Class Suffix: none
Show Title: Hide

16. Latest Projects

Module: Gantry 5 Particle
Particle: Contacts
Module Position: footer-a
Module Class Suffix: none
Show Title: Show

17. Get in touch

Module: Gantry 5 Particle
Particle: Social
Module Position: footer-b
Module Class Suffix: none
Show Title: Show

18. Norman Signature

Module: Gantry 5 Particle
Particle: Custom HTML
Module Position: footer-c
Module Class Suffix: none
Show Title: Hide

19. Copyright (Branding)

Module: Gantry 5 Particle
Particle: Branding
Module Position: copyright-a
Module Class Suffix: none
Show Title: Hide

20. To Top

"To Top" particle (Style 1) - this is done from the Layout Manager

"About Me" Page

1. Page Title (Breadcrumbs Position)

Module: Gantry 5 Particle
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

2. Breadcrumbs

Module: Breadcrumbs
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

3. Work Experience

Module: Gantry 5 Particle
Particle: Timeline
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show

4. Education

Module: Gantry 5 Particle
Particle: Tabs
Module Position: feature-a
Module Class Suffix: title-center
Show Title: Show

5. Hobbies

Module: Gantry 5 Particle
Particle: Gallery Feature
Module Position: subfeature-a
Module Class Suffix: title-center
Show Title: Show

6. Download My CV

Module: Gantry 5 Particle
Particle: CTA Button (Style 2)
Module Position: last-a
Module Class Suffix: none
Show Title: Hide

"Contact Me" Page (Component Contacts > Single Contact)

1. Let's have a cup of coffee

Module: Gantry 5 Particle
Particle: Google Map
Module Position: fullwidth
Module Class Suffix: title-center
Show Title: Show

*Be sure to check the Google Map video in the Particles section to understand better how to change the map color and add the Google API key.

"Services" Page

1. Page Title (Breadcrumbs Position)

Module: Gantry 5 Particle
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

2. Breadcrumbs

Module: Breadcrumbs
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

3. What I Do Best

Module: Gantry 5 Particle
Particle: Keypoints
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show

4. A few Numbers

Module: Gantry 5 Particle
Particle: Animated Counter
Module Position: feature-a
Module Class Suffix: title-show
Show Title: Show

5. I'm Your Guy

Module: Gantry 5 Particle
Particle: Accordion
Module Position: subfeature-a
Module Class Suffix: none
Show Title: Show

6. I really know things

Module: Gantry 5 Particle
Particle: Skill Bars
Module Position: subfeature-b
Module Class Suffix: none
Show Title: Show

7. Clients

Module: Gantry 5 Particle
Particle: Companies (Style 1)
Module Position: utility-a
Module Class Suffix: title-center
Show Title: Show

8. Services Call to Action

Module: Gantry 5 Particle
Particle: CTA Button (Style 2)
Module Position: mainbottom-a
Module Class Suffix: title-center
Show Title: Show

"Project Page" Page

1. Page Title (Breadcrumbs Position)

Module: Gantry 5 Particle
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

2. Breadcrumbs

Module: Breadcrumbs
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

3. Comleted Project: 23

Module: Gantry 5 Particle
Particle: Custom HTML
Module Position: intro-a
Module Class Suffix: title-center
Show Title: Show

4. Project Parameter

Module: Gantry 5 Particle
Particle: Features (Style 1)
Module Position: feature-a
Module Class Suffix: title-show
Show Title: Show

5. The project in weeks

Module: Gantry 5 Particle
Particle: Timeline
Module Position: subfeature-a
Module Class Suffix: none
Show Title: Show

"Typography" Page

1. Page Title (Breadcrumbs Position)

Module: Gantry 5 Particle
Particle: Page Title
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

2. Breadcrumbs

Module: Breadcrumbs
Module Position: breadcrumb-a
Module Class Suffix: none
Show Title: Hide

3. OnePage Menu (Typography)

Module: Gantry 5 Particle
Particle: OnePage Menu
Module Position: sidebar-left
Module Class Suffix: none
Show Title: Hide
The best thing you can do (and actually you MUST do) is to install the Quickstart Package and see how everything is configured and what module class suffixes are used for each module.

Single Article Date Layout

By default Norman comes with nice styling for the published date for both Category Blog layout and Single Article Layout.

No matter if you have enabled or not the Published date, the date will show before the article title. If you don't want to display this date style or you want to use the basic date styling, you can simply apply the basic layout. How to do it:

  • Go to Content > Articles;
  • Open the article to which you want to apply the basic styling;
  • Click on the Options tab and scroll down till you see the Alternative Layout option;
  • Then choose default2 option and save;
  • Refresh your article page and the default date won't be displayed anymore.

That's it :)

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!