August.19.2012

SJ Education Template Userguide

Written by SA Nghiem Diep

Published in Template User-Guides

(0 votes)

First of all, make sure you always download the newest version of template

REQUIREMENTS

- Joomla! v1.7.x and v2.5.x latest stable versions are highly recommended.

If you want to install the template that like as our demo (the same data), you should install the Quickstart Package. In the following 4-part guideline, we will help you install SJ Education and all extensions included in this template step by step by yourself.

1. Download Template and Extensions
2. SJ Education Template - Installation and Configuration
3. Imperative Plugins - Installation and Configuration
4. Extensions - Installation and Configuration

1. Download Template and Extensions

1.1 Using for membership of JTC - Joomla Template Club

STEP 1: LOGIN YOUR ACCOUNT

STEP 2: GO TO MEMBER AREA - DOWNLOAD PAGE

STEP 3: GO TO LIST PRODUCTS - DOWNLOAD

STEP 4: DOWNLOAD PACKAGES OF PRODUCT

1.2 Using for single product

DOWNLOAD PACKAGES IN THE EMAIL

2. SJ Education Template -Installation and Configuration

2.1 INSTALLATION

In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose our template and then click Upload & Install
Set SJ Education Template as default template

2.2 CONFIGURATION

The parameters of SJ Education Template are divided into the following areas:

General Settings
MainBody Columns Settings
Layout Settings
Style Settings
Top Menu Settings
Content Component
Advanced Options

GENERAL SETTINGS

Generator tag - Generate tag for your template
Template Width Type - Choose width type of your template
Template Width - Change width of template here
Hide Main content block - Allow to hide content component for home page
Direction - Choose RTL/LTR Language
Logo Type - Choose your logo types: image or text type
Logo Text - For Text Type
Slogan - Change your slogan here

MAINBODY COLUMNS SETTINGS

Main body width type - Choose width type: pixel/percentage
Main width - Change width of main body
Left/Right Width - Change width of Left/Right column

LAYOUT SETTINGS

Default Mode View - We support Mobile View and Window View for your site.
Window layout - When a guest views your website on computer, this layout is used. You can choose the following options for your window layout
- Full
- Main - left - right
- Left - Right - Main
- Main - Left - Right
- Main - right
- Left - main
Mobile Layout - When a guest uses a mobile to view, this layout is used as default
Iphone layout - When a guest views the site on Iphone, this layout is used
Android layout - When a guest views the site on Android System, this layout is used
Handheld layout - When a guest views the site on a Handheld, this layout is used
Overwrite Layouts Windows - This parameter will be used for window mode. When you want to use another layout for a menu, you can use this one. Syntax:
- Id1:Layout_Name1 | Id1:Layout_Name2 | ...
With:
- Id1, Id2...: Id of Menu. You can see the Id column in Menu Item Manager page
- Layout_Name1, Layout_Name2...: The name of layout in templates/sj_education/layouts folder without tail .xml

STYLE SETTINGS

Default Style - Choose a suitable style for your site. There're 6 different site styles
Default Font Size - Set default size for your template here.
Default Font-Family - Use this parameter to choose font-family for your site. The default font of this template is Arial.
Google Font-Family - This parameter allows you to use a google font for some html tags which are in Affected Selectors
Affected Selectors - Tags will be applied with google font.

TOP MENU SETTINGS

Default Type Menu - Here is the list of menu which can be chosen default
Default Menu Style - We support four styles of Menu
- CSS Menu
- Moo Menu
- Mega Menu
- Droplinle Menu
Use JS for Dropline Menu - Choose to use JS effect for Dropline Menu or not
Javascript Effect - JS Effect for Moo Menu, Mega Menu
Duration Effect - Time to change effects
Start Level - Level to start rendering the Menu at
End Level - Level to end rendering the Menu at

CONTENT COMPONENT

Apply for Blog View - Choose to apply for Blog view or not
Apply for Frontpage view - Choose to apply for Frontpage view or not
Leading Images Width - Change width of images of Leading Articles.
Leading Images Height - Change height of images of Leading Articles.
Intro Images Width - Change width of images of Intro Articles.
Intro Images Height - Change height of images of Intro Articles.
Thumbnail Background Color - Set color background for thumbnail image
Thumbnail Mode - Set thumbnail mode
- Fill
- Fit
- Stretch
- Center

ADVANCED OPTIONS

Show Cpanel - Allow you to show/ not to show Cpanel
Override logo image - Change logo image of Cpanel by inserting path of image in code folder or live link of image here
Include LazyLoad Plugin - Allow you include LazyLoad Plugin. It makes the web pages which are containing many large images load faster.
Enable jquery - Enable/disable jquery
Optimize CSS/Merge File - Allow to optimize all the CSS/Merge Files which are used in your website
Optimize CSS Exclude - Please insert name of CSS File which you don't want to optimize
Optimize JS - Allow to optimize all the JS Files which are used in your website
Optimize JS Exclude - Please insert name of JS File which you don't want to optimize
Optimize Folder - This is the folder where optimized css/js files are stored
Optimize HTML - Allow to optimize all the HTML Files which are used in your webite
Enable Google Analytics - Enable/disable Google Analytics
Enter your Google Analytics tracking ID - Copy and paste your Google Analytics tracking ID here

3. Imperative Plugins-Installation and Configuration

You need to install Yt Plugin(for Yt Framework) and SJ Core plugin. Yt Plugin supports Yt Framework for adding extra parameters to use for Mega Menu and compressing CSS/ JS or HTML. SJ Core is using for resizing images in Content Component and extensions of SmartAddons.

3.1 INSTALLATION

STEP 1: In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose the plugins and then click Upload & Install
STEP 2: Perform enable to SJ Core and Yt Plugin in Extension/Plug-in Manager

3.2 CONFIGURATION - YT Plugin(for Yt Framework)

Yt Plugin supports for Optimizing CSS/ JS/ HTML and Mega Menu. You can see part of optimizing CSS/JS/HTML in configuration of SJ Education and supporting for Mega Menu in any Menu Items. Please see the following example:

SUPPORT OPTIMIZING CSS/ JS/ HTML AND MEGA MENU

After installing Yt Plugin, please to go Extension/Plug-in Manager and then go to config Yt Plugin as below:

GO TO CONFIG PLUGIN

In configuration of Yt Plugin, we support for showing SJ Help with Report Bugs, Template Tutorials, Framework Tutorials

SHOWING SJ HELP

4. Extensions - Installation and Configuration

4.1 INSTALLATION

4.1.1 List of extensions used in SJ Education demo

You can find a list of modules/plugins/components which are used in SJ Education by clicking on Features Menu - Extensions

4.1.2 Installation

In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose an extension and then click Upload & Install
Install all of the rest extensions as above

4.2 CONFIGURATION

After installing extensions which are included in the SJ Education template, please to go Extensions/Module (Plug-in) Manager and then choose the module/plug-in. The following example is Module Manager:

4.2.1 SJ Content Slideshow Module

Module Position - Module Suffix

Position: slide_show
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ CONTENT SLIDESHOW

BACKEND - SJ CONTENT SLIDESHOW

4.2.2 Showing Content Component

This part will help you to show the Frontpage at Home Site. First, go to Menus/ Main Menu/ Home then go to Edit Menu Item - Home

Frontend - Backend

FRONTEND - CONTENT COMPONENT

BACKEND - CONTENT COMPONENT

4.2.3 SJ Article Slider Module - Upcoming events

Module Position - Module Suffix

Position: main_bottom1
Suffix: title3

Frontend - Backend

FRONTEND - UPCOMING EVENTS

BACKEND - UPCOMING EVENTS

4.2.4 SJ Basic News Module - About Programs

Module Position - Module Suffix

Position: main_bottom2
Suffix: title3

Frontend - Backend

FRONTEND - ABOUT PROGRAMS

BACKEND - ABOUT PROGRAMS

4.2.5 Module Latest News

Module Position - Module Suffix

Position: right_top
Suffix: Not Used

Frontend - Backend

FRONTEND - MODULE LATEST NEWS

BACKEND - MODULE LATEST NEWS

4.2.6 SJ Article Slider Module - Our Teachers

Module Position - Module Suffix

Position: right
Suffix: Not Used

Frontend - Backend

FRONTEND - OUR TEACHERS

BACKEND - OUR TEACHERS

4.2.7 SJ Basic News Module - Our Mission

Module Position - Module Suffix

Position: right
Suffix: title1 custom-basicnew

Frontend - Backend

FRONTEND - OUR MISSION

BACKEND - OUR MISSION

4.2.8 Custom HTML - Mobile Ready

Module Position - Module Suffix

Position: right_bottom
Suffix: icon info

Frontend - Backend

FRONTEND - MOBILE READY

BACKEND - MOBILE READY

4.2.9 Custom HTML - Testimonials

Module Position - Module Suffix

Position: content_bottom
Suffix: icon testimonials

Frontend - Backend

FRONTEND - TESTIMONIALS

BACKEND - TESTIMONIALS

4.2.10 Module Menu

Module Position - Module Suffix

Position: user10, user11, user12
Suffix: Not Used

Frontend - Backend

FRONTEND - MODULE MENU

BACKEND - MODULE MENU

4.2.11 Custom HTML - Contact Us

Module Position - Module Suffix

Position: user13
Suffix: Not Used

Frontend - Backend

FRONTEND - CONTACT US

BACKEND - CONTACT US

4.2.12 Custom HTML - Newsletter

Module Position - Module Suffix

Position: user14
Suffix: newsletter

Frontend - Backend

FRONTEND - NEWSLETTER

BACKEND - NEWSLETTER

4.2.13 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU FEATURES

BACKEND - MEGA MENU FEATURES

BACKEND - TREE OF MEGA ITEMS

4.2.14 Mega Menu - Joomla

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU JOOMLA

BACKEND - MEGA MENU JOOMLA

BACKEND - TREE OF MEGA ITEMS

BACKEND - ABOUT JOOMLA

BACKEND - FEATURED ARTICLES

4.2.15 Mega Menu - K2

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU K2

BACKEND - MEGA MENU K2

BACKEND - TREE OF MEGA ITEMS

BACKEND - K2 CATEGORIES

BACKEND - FEATURED ITEMS

4.2.16 Mega Menu - Virtuemart

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU VIRTUEMART

BACKEND - MEGA MENU VIRTUEMART

BACKEND - TREE OF MEGA ITEMS

BACKEND - K2 VIRTUEMART

BACKEND - NEW PRODUCTS

First of all, make sure you always download the newest version of template

REQUIREMENTS

- Joomla! v1.7.x and v2.5.x latest stable versions are highly recommended.

1. Download Template and Extensions
2. SJ Education Template - Installation and Configuration
3. Imperative Plugins - Installation and Configuration
4. Extensions - Installation and Configuration

1. Download Template and Extensions

1.1 Using for membership of JTC - Joomla Template Club

STEP 1: LOGIN YOUR ACCOUNT

STEP 2: GO TO MEMBER AREA - DOWNLOAD PAGE

STEP 3: GO TO LIST PRODUCTS - DOWNLOAD

STEP 4: DOWNLOAD PACKAGES OF PRODUCT

1.2 Using for single product

DOWNLOAD PACKAGES IN THE EMAIL

2. SJ Education Template -Installation and Configuration

2.1 INSTALLATION

In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose our template and then click Upload & Install
Set SJ Education Template as default template

2.2 CONFIGURATION

The parameters of SJ Education Template are divided into the following areas:

General Settings
MainBody Columns Settings
Layout Settings
Style Settings
Top Menu Settings
Content Component
Advanced Options

GENERAL SETTINGS

Generator tag - Generate tag for your template
Template Width Type - Choose width type of your template
Template Width - Change width of template here
Hide Main content block - Allow to hide content component for home page
Direction - Choose RTL/LTR Language
Logo Type - Choose your logo types: image or text type
Logo Text - For Text Type
Slogan - Change your slogan here

MAINBODY COLUMNS SETTINGS

Main body width type - Choose width type: pixel/percentage
Main width - Change width of main body
Left/Right Width - Change width of Left/Right column

LAYOUT SETTINGS

Default Mode View - We support Mobile View and Window View for your site.
Window layout - When a guest views your website on computer, this layout is used. You can choose the following options for your window layout
- Full
- Main - left - right
- Left - Right - Main
- Main - Left - Right
- Main - right
- Left - main
Mobile Layout - When a guest uses a mobile to view, this layout is used as default
Iphone layout - When a guest views the site on Iphone, this layout is used
Android layout - When a guest views the site on Android System, this layout is used
Handheld layout - When a guest views the site on a Handheld, this layout is used
Overwrite Layouts Windows - This parameter will be used for window mode. When you want to use another layout for a menu, you can use this one. Syntax:
- Id1:Layout_Name1 | Id1:Layout_Name2 | ...
With:
- Id1, Id2...: Id of Menu. You can see the Id column in Menu Item Manager page
- Layout_Name1, Layout_Name2...: The name of layout in templates/sj_education/layouts folder without tail .xml

STYLE SETTINGS

Default Style - Choose a suitable style for your site. There're 6 different site styles
Default Font Size - Set default size for your template here.
Default Font-Family - Use this parameter to choose font-family for your site. The default font of this template is Arial.
Google Font-Family - This parameter allows you to use a google font for some html tags which are in Affected Selectors
Affected Selectors - Tags will be applied with google font.

TOP MENU SETTINGS

Default Type Menu - Here is the list of menu which can be chosen default
Default Menu Style - We support four styles of Menu
- CSS Menu
- Moo Menu
- Mega Menu
- Droplinle Menu
Use JS for Dropline Menu - Choose to use JS effect for Dropline Menu or not
Javascript Effect - JS Effect for Moo Menu, Mega Menu
Duration Effect - Time to change effects
Start Level - Level to start rendering the Menu at
End Level - Level to end rendering the Menu at

CONTENT COMPONENT

Apply for Blog View - Choose to apply for Blog view or not
Apply for Frontpage view - Choose to apply for Frontpage view or not
Leading Images Width - Change width of images of Leading Articles.
Leading Images Height - Change height of images of Leading Articles.
Intro Images Width - Change width of images of Intro Articles.
Intro Images Height - Change height of images of Intro Articles.
Thumbnail Background Color - Set color background for thumbnail image
Thumbnail Mode - Set thumbnail mode
- Fill
- Fit
- Stretch
- Center

ADVANCED OPTIONS

Show Cpanel - Allow you to show/ not to show Cpanel
Override logo image - Change logo image of Cpanel by inserting path of image in code folder or live link of image here
Include LazyLoad Plugin - Allow you include LazyLoad Plugin. It makes the web pages which are containing many large images load faster.
Enable jquery - Enable/disable jquery
Optimize CSS/Merge File - Allow to optimize all the CSS/Merge Files which are used in your website
Optimize CSS Exclude - Please insert name of CSS File which you don't want to optimize
Optimize JS - Allow to optimize all the JS Files which are used in your website
Optimize JS Exclude - Please insert name of JS File which you don't want to optimize
Optimize Folder - This is the folder where optimized css/js files are stored
Optimize HTML - Allow to optimize all the HTML Files which are used in your webite
Enable Google Analytics - Enable/disable Google Analytics
Enter your Google Analytics tracking ID - Copy and paste your Google Analytics tracking ID here

3. Imperative Plugins-Installation and Configuration

3.1 INSTALLATION

STEP 1: In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose the plugins and then click Upload & Install
STEP 2: Perform enable to SJ Core and Yt Plugin in Extension/Plug-in Manager

3.2 CONFIGURATION - YT Plugin(for Yt Framework)

SUPPORT OPTIMIZING CSS/ JS/ HTML AND MEGA MENU

After installing Yt Plugin, please to go Extension/Plug-in Manager and then go to config Yt Plugin as below:

GO TO CONFIG PLUGIN

In configuration of Yt Plugin, we support for showing SJ Help with Report Bugs, Template Tutorials, Framework Tutorials

SHOWING SJ HELP

4. Extensions - Installation and Configuration

4.1 INSTALLATION

4.1.1 List of extensions used in SJ Education demo

You can find a list of modules/plugins/components which are used in SJ Education by clicking on Features Menu - Extensions

4.1.2 Installation

In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose an extension and then click Upload & Install
Install all of the rest extensions as above

4.2 CONFIGURATION

4.2.1 SJ Content Slideshow Module

Module Position - Module Suffix

Position: slide_show
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ CONTENT SLIDESHOW

BACKEND - SJ CONTENT SLIDESHOW

4.2.2 Showing Content Component

This part will help you to show the Frontpage at Home Site. First, go to Menus/ Main Menu/ Home then go to Edit Menu Item - Home

Frontend - Backend

FRONTEND - CONTENT COMPONENT

BACKEND - CONTENT COMPONENT

4.2.3 SJ Article Slider Module - Upcoming events

Module Position - Module Suffix

Position: main_bottom1
Suffix: title3

Frontend - Backend

FRONTEND - UPCOMING EVENTS

BACKEND - UPCOMING EVENTS

4.2.4 SJ Basic News Module - About Programs

Module Position - Module Suffix

Position: main_bottom2
Suffix: title3

Frontend - Backend

FRONTEND - ABOUT PROGRAMS

BACKEND - ABOUT PROGRAMS

4.2.5 Module Latest News

Module Position - Module Suffix

Position: right_top
Suffix: Not Used

Frontend - Backend

FRONTEND - MODULE LATEST NEWS

BACKEND - MODULE LATEST NEWS

4.2.6 SJ Article Slider Module - Our Teachers

Module Position - Module Suffix

Position: right
Suffix: Not Used

Frontend - Backend

FRONTEND - OUR TEACHERS

BACKEND - OUR TEACHERS

4.2.7 SJ Basic News Module - Our Mission

Module Position - Module Suffix

Position: right
Suffix: title1 custom-basicnew

Frontend - Backend

FRONTEND - OUR MISSION

BACKEND - OUR MISSION

4.2.8 Custom HTML - Mobile Ready

Module Position - Module Suffix

Position: right_bottom
Suffix: icon info

Frontend - Backend

FRONTEND - MOBILE READY

BACKEND - MOBILE READY

4.2.9 Custom HTML - Testimonials

Module Position - Module Suffix

Position: content_bottom
Suffix: icon testimonials

Frontend - Backend

FRONTEND - TESTIMONIALS

BACKEND - TESTIMONIALS

4.2.10 Module Menu

Module Position - Module Suffix

Position: user10, user11, user12
Suffix: Not Used

Frontend - Backend

FRONTEND - MODULE MENU

BACKEND - MODULE MENU

4.2.11 Custom HTML - Contact Us

Module Position - Module Suffix

Position: user13
Suffix: Not Used

Frontend - Backend

FRONTEND - CONTACT US

BACKEND - CONTACT US

4.2.12 Custom HTML - Newsletter

Module Position - Module Suffix

Position: user14
Suffix: newsletter

Frontend - Backend

FRONTEND - NEWSLETTER

BACKEND - NEWSLETTER

4.2.13 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU FEATURES

BACKEND - MEGA MENU FEATURES

BACKEND - TREE OF MEGA ITEMS

4.2.14 Mega Menu - Joomla

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU JOOMLA

BACKEND - MEGA MENU JOOMLA

BACKEND - TREE OF MEGA ITEMS

BACKEND - ABOUT JOOMLA

BACKEND - FEATURED ARTICLES

4.2.15 Mega Menu - K2

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU K2

BACKEND - MEGA MENU K2

BACKEND - TREE OF MEGA ITEMS

BACKEND - K2 CATEGORIES

BACKEND - FEATURED ITEMS

4.2.16 Mega Menu - Virtuemart

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU VIRTUEMART

BACKEND - MEGA MENU VIRTUEMART

BACKEND - TREE OF MEGA ITEMS

BACKEND - K2 VIRTUEMART

BACKEND - NEW PRODUCTS

Last modified on 14

Or share it with your friends

More in this category: « SJ WorldNews Template Userguide SJ Flower Store Template Userguide »

SA Nghiem Diep

I work as an online marketer at SmartAddons.com. I'm a positive person and love the creativity at work. "I'm here" - the quote that I always want to tell with all of you. This means "I'm always ready to help you" ;)