The section will help you with steps to install JA Alpha template - Quickstart and Manual installation.

System requirement

JA Alpha is in the Beta version please do not use it for the live site. Please make sure your system meets the following requirements:

Software

  • Software: PHP (Magic Quotes GPC off): 5.3.10+ (7.3+ recommended)

Databases

  • MySQL(InnoDB support required): 5.1+
  • MSSQL 10.50.1600.1 +
  • PostgreSQL 9.1+

Web Severs

  • Apache 2.4+
  • Microsoft IIS 7
  • Nginx 1.0 (1.8+ recommended)

Browser requirement

  • Firefox 13+
  • IE (Internet Explorer) 8+
  • Google Chrome XY and latest
  • Opera 11.6+
  • Safari 5.1+

Development Environment

During the development process, Localhost is preferred. You can use the following servers on your PC to develop your site.

Windows

  • WAMPSERVER
  • XAMPP for Windows

Linux

  • LAMP Bundle
  • XAMPP for Linux

Mac OS

  • MAMP & MAMP Pro
  • XAMPP for Mac OS

The section will help you with the steps to install the JA Alpha template. There are 2 options to install.

  • Quickstart installation: replicate T4 demo to your server.
  • Manual installation: install template, plugin manually on your Joomla site

Download packages

T4 Framework download section includes following files:

  • Quickstart package
  • JA Alpha template
  • T4 Framework plugin
  • JA ACM Module
  • JA Masthead Module

download JA Alpha

Quickstart installation

Using quickstart installation allows you to replicate T4 demo to your server with all T4 extensions installed and demo content

Joomla quickstart Installation tutorial ?

Manual Installation

Installing T4 framework on your existing Joomla website.

Step 1. Install T4 framework plugin

From your back-end setting panel, go to: "Extensions ? Extension Manager", browse the T4 plugin installation file then hit the "Upload and Install"

By default, the T4 plugin will be auto-enabled after installation. You can check this by going to "Extensions ? Plugin Manager" then find T4 Plugin.

enable t4 joomla template framework plugin

Step 2: Install JA Alpha template

From your back-end setting panel, go to "Extensions ? Extension Manager", browse JA Alpha template installation package then hit the "Upload and Install".

Go to: "Extensions ? Template Manager", set JA Alpha template style as your default template style.

JA Alpha documentation


Template folder structure

This section is to help you understand the folder structure of JA Alpha template, where to find the files you want.

JA Alpha template

JA Alpha template is built on T4 Framework so its folder structure is almost the same with any other JA Templates that are developed with T4 Framework.

/templates/ja_alpha/
+-- scss/                 /*  all SCSS files */ 
+--     scss/tpl                 /*  theme tpl SCSS files */ 
¦    +--  acm.scss
¦    +-- all.scss
¦    +--  offcanvas.scss
¦    +--  styles.scss
¦    +--  type.scss
¦    +--  utilities.scss
¦    +--  variables.scss
¦    +-- vars.scss
¦    +--  jpages.scss
¦    +--  rtl.scss
¦    +--  template.scss
¦    +--  bootstrap.scss
¦    +--  components.scss
¦    +--  forms.scss
¦    +--  global.scss
¦    +--  joomla.scss
¦    +--  megamenu.scss
¦    +--  modules.scss
¦    +--  navigations.scss
+-- scss/tpls 


+-- css/                     /*compiled files from SCSS*/
¦    +-- template.css
¦    +-- rtl.css
¦    +-- acm.css
¦    +-- jpages.css
¦    +-- off-canvas.css/
¦    +-- offline.css/
+-- acm/               /*JA Advanced Custom Module content type*/
¦    +-- slideshow/
¦    ¦    +-- config.xml
¦    ¦    +-- css/
¦    ¦    +-- tmpl/
¦    ¦    +-- js/
+-- html/               /*override modules and Joomla com_content*/
¦    +-- com_content/
¦    ¦    +-- article/
¦    ¦    +-- category/
¦    ¦    +-- featured/
¦    +-- com_contact/
¦    +-- com_users/
¦    +-- mod_masthead/
¦    +-- mod_articles_latest/
¦    +-- mod_articles_categories/
¦    +-- mod_articles_category/
¦    +-- layouts/
¦    +-- ...
+-- fonts/ 
¦    +-- font-awesome/
¦    ¦    +-- css/
¦    ¦    +-- fonts/

+-- js/ 
¦    +-- bootstrap.bundle.js
¦    +-- template.js
¦    +-- imagesloaded.pkgd.js
¦    +-- ekko-lightbox.js
¦    +-- isotope.pkgd.min.js
¦    +-- template.js
¦    +-- owl-carousel/
¦    +--   html5 lightbox/
+-- images/
+-- language/
+-- templateDetails.xml  
+-- templateInfo.php/
+-- thememagic.xml/     /*the file is to add new group, parameters to ThemeMagic*/
+-- templateHook.php/

T4 Framework

You can find the folder structure of T4 Framework at: http://t4-framework.org/documentation/installation#folder-structure.

Recommendation

Any customization in the t4 plugin is not recommended. To customize your template, please do it in the templates/ja_alpha folder

This section will help you build the pages the same as the JA Alpha demo site.

1. Homepage

View homepage position layout:

JA Alpha documentation
View Full Image

Here is instruction to create the same Homepage page

Step 1 - Create template style

The page uses Home layout so we have to create template style. The best way to create the template is by cloning the JA Alpha default template style. to create the different types of Homepages like in the demo you need to duplicate the default template style and assign it to the different pages.

Here is the default layout structure of the template used for all other pages.

JA Alpha default layout

Step 2 - Create Home page menu item

Go to Menu » Main menu, add new menu item, select Articles » Single Article menu type and assign "JA Alpha- Home" template style.

home menu JA Alpha

Step 3 - Assign content to the Home page

Content of Homepage is loaded from modules. Here is the detailed configuration of each module.

The template comes with a topbar that contains the topbar left and right position with address details and social icons.

1.Need Help Module

Module position: topbar-left
Module Suffix: NOT USED
Alternative layout: default

2.Need Help JA ACM Module

Module position: topbar-right
Module Suffix: NOT USED
Alternative layout: default

3.Hero JA ACM Module

home menu JA Alpha

Module position: hero
Module Suffix: NOT USED
Alternative layout: default

4.Features JA ACM Module

JA Alpha

Module position: section-1
Module Suffix: NOT USED
Alternative layout: default

5. Meet Consulting JA ACM Module

Meet Consulting JA Alpha

Module position: section-3
Module Suffix: NOT USED
Alternative layout: default

6. Clients JA ACM Module

Clients JA Alpha

Module position: section-4
Module Suffix: NOT USED
Alternative layout: default

7. Clients story JA ACM Module

Clients JA Alpha

Module position: section-5
Module Suffix: NOT USED
Alternative layout: default

8.Latest Case Studies Articles category Module

JA Alpha documentation

Module position: section-6
Module Suffix: NOT USED
Alternative layout: slide

9. Why choose Us JA ACM Module

Why choose UsJA Alpha

Module position: section-7
Module Suffix: NOT USED
Alternative layout: default

10. Testimonials JA ACM Module

Testimonials JA Alpha

Module position: section-8
Module Suffix: NOT USED
Alternative layout: default

11. CTA Footer JA ACM Module

CTA Footer JA Alpha

Module position: section-9
Module Suffix: NOT USED
Alternative layout: default

Footer Module

Template footer part consist multiple module position on footer 1 and footer 2 module

home menu JA Alpha

12. Contact Footer ACM Module

Module position: footer-1
Module Suffix: NOT USED
Alternative layout: default

13. Extra links Menu Module

Module position: footer-1
Module Suffix: NOT USED
Alternative layout: default

13. Latest Update Module

Module position: footer-1
Module Suffix: NOT USED
Alternative layout: default

15. AcyMailing subscription Newsletter Module

Module position: footer-2
Module Suffix: NOT USED
Alternative layout: default

2. Services Page

The services page is a category blog menu that will display the services articles. The submenu items under the Services Page are single article type menu that are under the services category.

Here is instruction to create the same Services page

Create Home page menu item

Go to Menu » Main menu, add new menu item, select Articles » Category Blog menu type and assign "JA Alpha- Services" template style.

To create services template style just duplicate the default template style and assign services layout from layout tab.

JA Alpha documentation

Assign content to the services page

Service Articles: The Services type article used extra information to display the additional details about the services offered by the website. To use this option you must select the Service extra field for the services articles category.

2.1 Breadcrumbs Module

JA Alpha

Module position: breadcrumbs
Module Suffix: NOT USED
Alternative layout: default

2.2. Clients JA ACM Module

Clients-services JA Alpha

Module position: section-1
Module Suffix: NOT USED
Alternative layout: default

2.3. Discover our most popular services JA ACM Module

Discover- services JA Alpha

Module position: section-2
Module Suffix: NOT USED
Alternative layout: default

2.4. Clients JA ACM Module

Clients JA Alpha

Module position: section-2
Module Suffix: NOT USED
Alternative layout: default

2.5. Check below the most popular services JA ACM Module

Clients JA Alpha

Module position: section-3
Module Suffix: NOT USED
Alternative layout: default

2.6. CTA JA ACM Module

Clients JA Alpha

Module position: section-4
Module Suffix: NOT USED
Alternative layout: default

3.Portfolio Page

The portfolio page is a special page that displays different portfolio articles with category filters.

To create the similar page we used Articles category module and multiple category blog menu type for different category

JA Alpha documentation

Here is instruction to create the same page

Create About us page menu item

Go to Menu » Main menu, add new menu item, select Articles » Category blog menu type and assign "JA Alpha- no-sidebar" template style.

Portfolio JA Alpha

Assign content to the Portfolio page

Create Portfolio submenu with same configuration for different category as category blog menu Portfolio

Content is loaded from modules. Here is the detailed configuration of each module.

3.1 Portfolio Categories Articles category Module

home menu JA Alpha

Module position: main-top-1
Module Suffix: NOT USED
Alternative layout: portfolio

4. Financial Page

Just like the portfolio menu item the financial menu and all child menu item of the Portfolio menu use the same settings to show the Portfolio type articles

A Module loaded on the Portfolio Submenu items below :

4.1.Case Studies Articles category Module

JA Alpha documentation

Module position: main-bottom-1
Module Suffix: NOT USED
Alternative layout: slide

5. News Page

This menu type display the news section of website using Joomla articles.

JA Alpha documentation

Here is instruction to create the same News page

Create blog page menu item

Go to Menu » Main menu, add new menu item, select Articles » Category blog menu type and assign "JA Alpha- default" template style.

blog menu JA Alpha

Here is module configuration loaded on News Page

1. Masthead Module

Module position: masthead
Module Suffix: NOT USED
Alternative layout: default

2. Login Module

Module position: sidebar-r
Module Suffix: NOT USED
Alternative layout: default

3. Latest Articles Module

Module position: sidebar-r
Module Suffix: NOT USED
Alternative layout: default

6. Contact page

A special Contact page for JA Alpha template.

JA Alpha

Here is instruction to create the same contact page

Create Contact menu item

Go to Menu » Main menu, add new menu item, select Contact » Single contact menu type and assign "JA Alpha - Default" template style.

In the Contact component, please make sure You have created contact item so you can assign it to the menu item

In Component > Contact > Create a new contact item before creating the Menu item

Extra Fields

Both Services and Portfolio type articles use this Extra field.

Service Articles Extra fields

Portfolio Articles use Extra fields to provide more information inside the portfolio articles.

Extra fields - JA Alpha

  • Extra fields for Portfolio Information
  • Gallery extra fields to add gallery in Article
  • Portfolio statistics in Article

extra fields - JA Alpha

To show these extra fields in Portfolio article in Article open Article manager > Category > Open Category > Extra fields > Portfolio. save and check all articles under this category will have the extra fields.

extra fields - JA Alpha

Service Articles Extra fields

Services Articles used to show additional information for the services offered by the website.

  • Extra fields for Logo, title, quota Information
  • FAQ in Article
  • Clients details and logo in Article

To show these options in Service Article open Article manager > Category > Open Category > Extra fields > Service. save and check all articles under this category will have the extra fields.

extra fields - JA Alpha

Note: The Fields will not show if JA Alpha template is not set as the default template in your Joomla website

Supported Layouts

Access T4 working panel

Access working panel of JA Alpha template: from back-end > Extensions > Templates > and open JA Alpha template style.

JA Alpha supports default layouts by default. Here is the structure of the supported layout.

Assign Layout for a template style

To assign a layout for a JA Alpha template style, open the template style » Layout setting panel » assign a layout for the template style.

joomla template layout

You can create multiple templates style for JA Alpha template, each template style is assigned to one layout and the template style is assigned to specific menu items so that in one site, you use 1 template but you can use as many layouts as you want Also, you can choose a different theme for different template styles.

Joomla template layout

Another option is save as copy

JA Alpha joomla template layout

Get more details in Layout customization on T4 here : https://www.joomlart.com/documentation/t4-framework/layout-builder

The Logo settings are present under Site configuration > Logo Settings.

logo settings

For the logo, you can select to use an image logo or text logo. You can also select the different logo for mobile view.

Get more details in Site configuration on T4 framework templates here : https://www.joomlart.com/documentation/t4-framework/layout-builder


You can choose a different Mega Menu for different template styles in JA Alpha Joomla template. To change the Mega menu : Navigation to JA Alpha template style > Navigation > Mega menu.

menu settings

You can enable Mega Menu to select different submenu items

Services and Portfolio Menu item loads module in the dropdown. Here are the settings to create same view as in the demo

Services Mega menu item

This module loads the JA ACM Module in the dropdown. To create similar module first create a JA ACM Module with style Features intro 3

Once the module is created it's time to add the module as dropdown. Open template style Navigation options > Edit Mega menu item > services > Enable build Mega Menu as below

menu settings

Select the module from Gear (setting) icon and save the settings

Portfolio Mega menu item

In the same way the Portfolio mega menu item use 2 columns dropdown once is used to show the child menu items and in another once there is banner module

menu settings

menu settings

Off canvas Menu settings

menu settings

To show the Menu inside the off-canvas sidebar you must publish a Menu module on position: off-canvas.

Take a full backup

Please always make a back-up before proceeding to any of the upgrade process. In case there is any problem, you can always restore from the back-up files.

Upgrade instruction

Before back-up, take a full backup

Please always make a back-up before proceeding to any of the upgrade processes. In case there is any problem, you can always restore from the back-up files.

The best method to upgrade JoomlArt products is using JA Extension Manager. The FREE extension brings a new way to manage extensions: upgrade , roll back, remote install, internal repository and compare versions and more.

1. Set up JA Extension Manager Component

Download this free extension from this link. Install the extension to your website.

Go to Components? JA Extension Manager then selects Service Manager, now set JoomlArt as your default service. Next, hit the "Edit" button then add your account.

enable t4 joomla template framework plugin

2. Upgrade T4 framework plugin and JA Alpha template

Check the new version of the T4 plugin template. Using the filter to find the JA Property template then hit the "Check Update" button.

upgrade t4 joomla template framework

3. Upgrade other JA extensions

Using the filter to find the extensions you want to upgrade (JoomlArt products only), hit the "Check Update" button to check for a new version then hit the Upgrade Now to upgrade the extension to the latest version.

Check out more details about JA Extension manager

Documentation is a WIP. If you have any specific requests or feedback as well as suggestions, feel free to drop us a line in the JA Alpha template forum. We'll try to cover them all.

Let us know in the forum