Template User-Guides (90)

Please note that we've created the new documentation site. So, if you can't find the userguide of item you want here, please check their userguides at HERE.

September.21.2012

SJ Magazine Template Userguide

Written by SA Anh

Posted in Template User-Guides

Notes
1 Download
2 Template
3 Core Plugins
4 Other Extensions
- Install
- Configuration

The guide will help you install SJ Magazine and extensions included in this template step by step.
If you want to install the template exactly like our demo (same data), you should purchase and install the Quickstart Package.

Important Notes
1. Download Template and Extensions
2. SJ Magazine Template - Installation and Configuration
3. Imperative Plugins - Installation and Configuration
4. Other Extensions - Installation and Configuration

Important Notes

Requirement:

Joomla! 2.5
K2, VM and Kunena component (2 last are customized and downloadable)
Some premium SJ Extensions (included, see part 3-Core Plugins and 4-Other Extensions)

1. Download Template and Extensions

1.1 Used for members of JTC - Joomla Template Club

STEP 1: Login at SmartAddons.com

STEP 2: Go to Memeber Area -> Download -> Membership

STEP 3: Go to Premium Joomla Templates

STEP 4: SJ Magazine -> Download packages as you want

1.2 Used for single product purchased via e-cart

Receive Donwload-Info email -> Download packages as you want

2. SJ Magazine -Installation and Configuration

2.1 Installation

Log in Administrator of Joomla! v2.5.x, go to Extensions -> Extension Manager
On this page, click Choose File button, select our template file you have downloaded then click Upload & Install
Set SJ Magazine as default template

2.2 Configuration

The parameters of SJ Magazine Template are divided into the following groups:

Global Settings
Main Body Column Settings
Layout Settings
Style Settings
Top Menu Settings
Content Component
Advanced Options

GLOBAL SETTINGS

Generator tag - Generate tag for your template
Template Width Type - Allow to choose: pixel OR percentage for your width
Template Width - Set width of your template
Hide Main Content Block - Allow to hide Content Component on Homepage
Direction - Choose direction of language: RTL/LTR
Logo Type - Choose your logo type: image OR text
Logo Text - Set text for Text type of logo
Slogan - Set your Website slogan here

MAIN BODY COLUMN SETTINGS

Main Body Width Type - Allow to choose between pixel OR percentage for your width
Main Width - Set width of your Mainbody column
Left Width - Set width of left column
Right Width - Set width of right column

LAYOUT SETTINGS

Default Mode View - Allow to set default layout: for Mobile OR for PC
Window layout - Layout used when visitors are from PC
Mobile layout - Layout used when visitors are from mobilephone
Iphone layout - Layout used when visitors are from Iphone
Android layout - Layout used when visitors are from Android
Handheld layout - Layout used when visitors are from other handhelds
Overwrite Layouts Windows - Used with window mode, when you want to use another layout for a menu. Syntax:
- Itemid1:Layout_Name1 | Itemid2:Layout_Name2 | ...
With:
- Itemid1, Itemid2...: Id of Menus. You can see these in Menu Item Manager
- Layout_Name1, Layout_Name2...: The name of layout. You can see these in templates/{this_template_name}/layouts folder. NOTE: remove .xml extension

STYLE SETTINGS

Default Style - Allow to choose a style from 6 available ones
Default Font Size - Allow to choose default font size
Default Font-Family - Allow to choose a font-family from 13 available ones. The default one is Arial
Google Font-Family - Allow to choose a google font-family used for html tags which are in Affected Selectors parameter below
Affected Selectors - Tag names will be applied with google font, comma seperated

TOP MENU SETTINGS

Default Type Menu - Allow to choose default menu type shown with template, this list is gotten from Menu Manager
Default Menu Style - We support 4 styles for Menus
- CSS Menu
- Moo Menu
- Mega Menu
- Dropline Menu
Use JS for Dropline Menu - Allow to use JS effect for Dropline Menu OR not
Javascript Effect - Allow to select which JS Effect used with Moo Menu and Mega Menu
Duration Effect - Set time before showing any submenus
Start Level - Set level of menu to start rendering the menu
End Level - Set level of menu to stop rendering the menu

CONTENT COMPONENT

Apply for Blog View - Allow to show the Content block at blog pages OR not
Apply for Frontpage view - Allow to show at Frontpage view OR not
Leading Images Width - Set width of images of Leading Articles
Leading Images Height - Set height of images of Leading Articles
Intro Images Width - Set width of images of Intro Articles
Intro Images Height - Set height of images of Intro Articles
Thumbnail Background Color - Set color background for thumbnail images
Thumbnail Mode - Set thumbnail mode:
- Fill
- Fit
- Stretch
- Center

ADVANCED OPTIONS

Show Cpanel - Allow you to show YT Framework Control panel OR not
Override logo image - Set logo image of Cpanel by inserting its link/path here
Include LazyLoad plugin - Enable/disable LazyLoad
Enable jquery - Enable/disable jquery
Optimize Merge File - Choose Yes to optimize all CSS and JS Files which are used in your website
Optimize CSS - Choose Yes to optimize only CSS files
Optimize CSS Exclude - CSS files which are not optimized, comma separated
Optimize JS - Choose Yes to optimize only JS files
Optimize JS Exclude - JS files which are not optimized, comma separated
Optimize Folder - A specific folder with Css/Js files need to be optimized
Optimize HTML - Allow to use Optimize HTML feature
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 and SJ Core plugin.
- Yt Plugin supports Yt Framework for adding extra parameters used with Mega Menu and to compress CSS/JS/HTML when optimizing code.
- While that, SJ Core is used for resizing images in Content Component and other extensions by us.

3.1 Installation

STEP 1: In Administrator on Joomla! v2.5.x, go to Extensions -> Extension Manager
On this page, click Choose File button, choose those two plugin files then click Upload & Install
STEP 2:Now, go to Enable SJ Core and Yt Plugin (for Yt Framework) in Extension/Plug-in Manager

3.2 Configuration of YT Plugin (for Yt Framework)

Yt Plugin supports Optimizing CSS/ JS/ HTML and support showing Mega Menus nicely. You can see how to optimize CSS/JS/HTML in Configuration part above and how to use YT Menu Params for styling any Menu Items by remarking an example:

SUPPORT OPTIMIZING CSS/JS/HTML AND STYLING MEGA MENUS

After installing Yt Plugin, go to Extension -> Plug-in Manager and choose to configureYt Plugin:

TO YT PLUGIN

Configure Yt Pluginto show SJ Help with Report Bugs, Template Tutorials and YT Framework Tutorials

SHOWING SJ HELP

4. Other Extensions - Installation and Configuration

After creating data, you can install and configure extensions to have a Website as like as our pre-made demo.

4.1 Install

4.1.1 List of extensions used in SJ Magazine demo

You can find a list of modules/plugins/components which are used in SJ Magazine by clicking menu Features -> Extensions of demo Website

4.1.2 Installation

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

4.2 Configuration

After installing extensions which are included in the SJ Magazine template, navigate into Extensions -> Module (or Plug-in) Manager then choose the module or plug-in you want to configure. The following example is choosing a module from Module Manager:

By this screenshot, you will see how module is placed in the default layout:

This guide will help you place essential menus (Mega Menu), modules (one example each type) and other blocks as homepage of demo Website:

4.2.1 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.2 Mega Menu - Joomla!

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.3 Mega Menu - K2

Menu Item Type

Menu Item Type: K2 - Categories

Frontend - Backend

FRONTEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.4 Mega Menu - VirtueMart

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.5 SJ K2 Splash

Module Position - Module Suffix

Position: top1
Suffix: Not Used

Frontend - Backend

FRONTEND

BACKEND

4.2.6 Login Module

Module Position - Module Suffix

Position: top2
Suffix: Not Used

Frontend - Backend

FRONTEND

BACKEND

4.2.7 Smart Search

Module Position - Module Suffix

Position: nav2
Suffix: Not used

Frontend - Backend

FRONTEND

BACKEND

4.2.8 Mega K2 News

Module Position - Module Suffix

Position: main_bottom
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.9 Quick Links Menu

There are some positions that used Menu Module. Here we will configure an example. Let take the left menu, other will be the same.

Module Position - Module Suffix

Position: left_top
Suffix: Not Used

Frontend - Backend

FRONTEND

BACKEND

4.2.10 K2 Tool Module

Module Position - Module Suffix

Position: left
Suffix: _menu

Frontend - Backend

FRONTEND

BACKEND

4.2.11 SJ K2 Categories Accordion

Module Position - Module Suffix

Position: left
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.12 Statistics Module

Module Position - Module Suffix

Position: left_bottom
Suffix: Not used

Frontend - Backend

FRONTEND

BACKEND

4.2.13 In Pictures - SJ Gallery Module

Module Position - Module Suffix

Position: right_top
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.14 Latest News - SJ K2 Slider

Module Position - Module Suffix

Position: content_bottom
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.15 Newsletter - Custom HTML

There are some positions that used Custom HTML modules in the same way. Here we will configure an example for custom HTML modules. Let take "Newsletter", other will be the same.

Module Position - Module Suffix

Position: user5
Suffix: line newsletter

Frontend - Backend

FRONTEND

BACKEND

4.2.16 SJ K2 Extra Slider

Module Position - Module Suffix

Position: user12
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.17 Footer

Now there are not modules placed in this position. You can try some ones.

That's homepage. For other advanced and customized configurations, please submit ticket OR purchase our installation services.

September.06.2012

SJ Blog Template Userguide

Written by SA Anh

Posted in Template User-Guides

Notes
1 Download
2 Template
3 Core Plugins
4 Other Extensions
- Install
- Configuration

The guide will help you install SJ Blog Responsive and extensions included in this template step by step.
If you want to install the template exactly like our demo (same data), you should purchase and install the Quickstart Package.

Important Notes
1. Download Template and Extensions
2. SJ Blog Responsive Template - Installation and Configuration
3. Imperative Plugins - Installation and Configuration
4. Other Extensions - Installation and Configuration

Important Notes

Requirement:

Joomla! 2.5
K2 component (customized by this template)
SJ Extensions (see part 3 Core Plugins and 4 Other Extensions)

1. Download Template and Extensions

1.1 Used for members of JTC - Joomla Template Club

STEP 1: Login at SmartAddons.com

STEP 2: Go to Memeber Area -> Download -> Membership

STEP 3: Go to Premium Joomla Templates

STEP 4: SJ Blog Responsive -> Download packages as you want

1.2 Used for single product purchased via e-cart

Receive Donwload-Info email -> Download packages as you want

2. SJ Blog Responsive -Installation and Configuration

2.1 Installation

Log in Administrator of Joomla! v2.5.x, go to Extensions -> Extension Manager
On this page, click Choose File button, select our template file you have downloaded then click Upload & Install
Set SJ Blog Responsive as default template

2.2 Configuration

The parameters of SJ Blog Responsive Template are divided into the 6 following groups:

Global Settings
Layout Settings
Style Settings
Top Menu Settings
Content Component
Advanced Options

GLOBAL SETTINGS

Generator tag - Generate tag for your template
Hide Main Content Block - Allow to hide Content Component on Homepage
Direction - Choose direction of language: RTL/LTR
Logo Type - Choose your logo type: image OR text
Logo Text - Set text for Text type of logo
Slogan - Set your Website slogan here

LAYOUT SETTINGS

Default Mode View - Allow to set default layout: for Mobile OR for PC
Window layout - Layout xml used when visitors are from PC
Overwrite Layouts Windows - Used with window mode, when you want to use another layout for a menu. Syntax:
- Itemid1:Layout_Name1 | Itemid2:Layout_Name2 | ...
With:
- Itemid1, Itemid2...: Id of Menus. You can see these in Menu Item Manager
- Layout_Name1, Layout_Name2...: The name of layout. You can see these in templates/{this_template_name}/layouts folder. NOTE: remove .xml extension

STYLE SETTINGS

Default Style - Allow to choose a style from 6 available ones
Default Font Size - Allow to choose default font size
Default Font-Family - Allow to choose a font-family from 13 available ones. The default one is Arial
Google Font-Family - Allow to choose a google font-family used for html tags which are in Affected Selectors parameter below
Affected Selectors - Tag names will be applied with google font, comma seperated

TOP MENU SETTINGS

Default Type Menu - Allow to choose default menu type shown with template, this list is gotten from Menu Manager
Default Menu Style - We support 4 styles for Menus
- CSS Menu
- Moo Menu
- Mega Menu
- Dropline Menu
Use JS for Dropline Menu - Allow to use JS effect for Dropline Menu OR not
Javascript Effect - Allow to select which JS Effect used with Moo Menu and Mega Menu
Duration Effect - Set time before showing any submenus
Start Level - Set level of menu to start rendering the menu
End Level - Set level of menu to stop rendering the menu

CONTENT COMPONENT

Apply for Blog View - Allow to show the Content block at blog pages OR not
Apply for Frontpage view - Allow to show at Frontpage view OR not
Leading Images Width - Set width of images of Leading Articles
Leading Images Height - Set height of images of Leading Articles
Intro Images Width - Set width of images of Intro Articles
Intro Images Height - Set height of images of Intro Articles
Thumbnail Background Color - Set color background for thumbnail images
Thumbnail Mode - Set thumbnail mode:
- Fill
- Fit
- Stretch
- Center

ADVANCED OPTIONS

Show Back to Top - Allow you to show Back to Top arrow OR not
Show Cpanel - Allow you to show YT Framework Control panel OR not
Override logo image - Set logo image of Cpanel by inserting its link/path here
Include LazyLoad plugin - Enable/disable LazyLoad
Enable jquery - Enable/disable jquery
Optimize Merge File - Choose Yes to optimize all CSS and JS Files which are used in your website
Optimize CSS - Choose Yes to optimize only CSS files
Optimize CSS Exclude - CSS files which are not optimized, comma separated
Optimize JS - Choose Yes to optimize only JS files
Optimize JS Exclude - JS files which are not optimized, comma separated
Optimize Folder - A specific folder with Css/Js files need to be optimized
Optimize HTML - Allow to use Optimize HTML feature
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 and SJ Core plugin.
Yt Plugin supports Yt Framework for adding extra parameters used with Mega Menu and to compress CSS/JS/HTML when optimizing code.
While SJ Core is used for resizing images in Content Component and other extensions by us.

3.1 Installation

STEP 1: In Administrator on Joomla! v2.5.x, go to Extensions -> Extension Manager
On this page, click Choose File button, choose those two plugin files then click Upload & Install
STEP 2:Now, go to Enable SJ Core and Yt Plugin (for Yt Framework) in Extension/Plug-in Manager

3.2 Configuration of YT Plugin (for Yt Framework)

SUPPORT OPTIMIZING CSS/JS/HTML AND STYLING MEGA MENUS

After installing Yt Plugin, go to Extension -> Plug-in Manager and choose to configureYt Plugin:

TO YT PLUGIN

Configure Yt Pluginto show SJ Help with Report Bugs, Template Tutorials and YT Framework Tutorials

SHOWING SJ HELP

4. Other Extensions - Installation and Configuration

After creating data, you can install and configure extensions to have a Website as like as our pre-made demo.

4.1 Install

4.1.1 List of extensions used in SJ Blog Responsive demo

You can find a list of modules/plugins/components which are used in SJ Blog Responsive by clicking menu Features -> Extensions of demo Website

4.1.2 Installation

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

4.2 Configuration

After installing extensions which are included in the SJ Blog Responsive template, navigate into Extensions -> Module (or Plug-in) Manager then choose the module or plug-in you want to configure. The following example is choosing a module from Module Manager:

By this screenshot, you will see how module is placed in the default layout:

This guide will help you place essential menus (Mega Menu), modules (one example each type) and other blocks as homepage of demo Website:

4.2.1 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.2 Mega Menu - Joomla!

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.3 Mega Menu - K2

Menu Item Type

Menu Item Type: K2 - Categories

Frontend - Backend

FRONTEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.4 SJ K2 Slider

Module Position - Module Suffix

Position: slideshow1
Suffix: _blank

Frontend - Backend

FRONTEND

BACKEND

4.2.5 Hello... - Custom HTML

Module Position - Module Suffix

Position: slideshow2
Suffix: Not Used

Frontend - Backend

FRONTEND

BACKEND

4.2.6 Custom HTML Modules

There are 3 positions that used Custom HTML modules in the same way: user3, user4 and user5. Here we will configure an example for custom HTML modules. Let take "Olympics 2012", other will be the same.

Module Position - Module Suffix

Position: user3
Suffix: style-bg bg1

Frontend - Backend

FRONTEND

BACKEND

4.2.7 The left Main Menu

There are two positions that used Menu Module, postion7 (first) and user9. Here we will configure an example. Let take the left Main Menu, other will be the same

Module Position - Module Suffix

Position: position7
Suffix: _menu grid-1

Frontend - Backend

FRONTEND

BACKEND

4.2.8 My Photos - SJ Gallery

Module Position - Module Suffix

Position: position7
Suffix: grid-1

Frontend - Backend

FRONTEND

BACKEND

4.2.9 Login Form

Module Position - Module Suffix

Position: position7
Suffix: grid-1

Frontend - Backend

FRONTEND

BACKEND

4.2.10 Who's Online

Module Position - Module Suffix

Position: position7
Suffix: grid-1 clear useronline

Frontend - Backend

FRONTEND

BACKEND

4.2.11 Smart Search

Module Position - Module Suffix

Position: usera
Suffix: Not used

Frontend - Backend

FRONTEND

BACKEND

4.2.12 Get connected with us - Custom HTML

Module Position - Module Suffix

Position: userb
Suffix: connect-us

Frontend - Backend

FRONTEND

BACKEND

4.2.13 Most popular - K2 Content

Module Position - Module Suffix

Position: user6
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.14 SJ Twitter

Module Position - Module Suffix

Position: user7
Suffix: yttwitter clear

Frontend - Backend

FRONTEND - SJ K2 ACCORDION

BACKEND - SJ K2 ACCORDION

4.2.15 SJ Facebook

Module Position - Module Suffix

Position: user8
Suffix: clear

Frontend - Backend

FRONTEND - WHO'S ONLINE

BACKEND - WHO'S ONLINE

4.2.17 Footer

Now there are not modules placed in this position. You can try some ones.

That's homepage. For other advanced and customized configurations, please submit ticket OR purchase our installation services.

August.21.2012

SJ WorldNews Template Userguide

Written by SA Anh

Posted in Template User-Guides

Notes
1 Download
2 Template
3 Core Plugins
4 Other Extensions
- Install
- Configuration

The guide will help you install SJ WorldNews and extensions included in this template step by step.
If you want to install the template exactly like our demo (same data), you should install the Quickstart Package.

Important Notes
1. Download Template and Extensions
2. SJ WorldNews Template - Installation and Configuration
3. Imperative Plugins - Installation and Configuration
4. Other Extensions - Installation and Configuration

Important Notes

Requirement:

Compatible with version Joomla: Joomla!2.5.x and Joomla 3.3
K2 component (customized, downloadable)
Many SJ Extensions (see part 3 Core Plugins and 4 Other Extensions)

1. Download Template and Extensions

1.1 Used for members of JTC - Joomla Template Club

STEP 1: Login at SmartAddons.com

STEP 2: Go to Memeber Area -> Download -> Membership

STEP 3: Go to Premium Joomla Templates

STEP 4: SJ WorldNews -> Download packages as you want

1.2 Used for single product purchased via e-cart

Receive Donwload-Info email -> Download packages as you want

2. SJ WorldNews Template -Installation and Configuration

2.1 Installation

Log in Administrator of Joomla! v2.5.x, go to Extensions -> Extension Manager
On this page, click Choose File button, select our template file you have downloaded then click Upload & Install
Set SJ WorldNews as default template

2.2 Configuration

The parameters of SJ WorldNews Template are divided into the following groups:

Global Settings
MainBody Column Settings
Layout Settings
Style Settings
Top Menu Settings
Content Component
Advanced Options

GLOBAL SETTINGS

Generator tag - Generate tag for your template
Template Width Type - Allow to choose: pixel OR percentage for your width
Template Width - Set width of your template
Hide Main Content Block - Allow to hide Content Component on Homepage
Direction - Choose direction of language: RTL/LTR
Logo Type - Choose your logo type: image OR text
Logo Text - Set text for Text type of logo
Slogan - Set your Website slogan here

MAINBODY COLUMN SETTINGS

Main Body Width Type - Allow to choose between pixel OR percentage for your width
Main Width - Set width of your Mainbody column
Left Width - Set width of left column
Right Width - Set width of right column

LAYOUT SETTINGS

Default Mode View - Allow to set default layout: for Mobile OR for PC
Window layout - Layout used when visitors are from PC
Mobile layout - Layout used when visitors are from mobilephone
Iphone layout - Layout used when visitors are from Iphone
Android layout - Layout used when visitors are from Android
Handheld layout - Layout used when visitors are from other handhelds
Overwrite Layouts Windows - Used with window mode, when you want to use another layout for a menu. Syntax:
- Itemid1:Layout_Name1 | Itemid2:Layout_Name2 | ...
With:
- Itemid1, Itemid2...: Id of Menus. You can see these in Menu Item Manager
- Layout_Name1, Layout_Name2...: The name of layout. You can see these in templates/{this_template_name}/layouts folder. NOTE: remove .xml extension

STYLE SETTINGS

Default Style - Allow to choose a style from 7 available ones: Orange, Brown, Cyan, Green, Pink, Red, Violet
Default Font Size - Allow to choose default font size
Default Font-Family - Allow to choose a font-family from 13 available ones. The default one is Arial
Google Font-Family - Allow to choose a google font-family used for html tags which are in Affected Selectors parameter below
Affected Selectors - Tag names will be applied with google font, comma seperated

TOP MENU SETTINGS

Default Type Menu - Allow to choose default menu type shown with template, this list is gotten from Menu Manager
Default Menu Style - We support 4 styles for Menus
- CSS Menu
- Moo Menu
- Mega Menu
- Dropline Menu
Keep menu bar on top - Allow to always show the menu bar OR not
Use JS for Dropline Menu - Allow to use JS effect for Dropline Menu OR not
Javascript Effect - Allow to select which JS Effect used with Moo Menu and Mega Menu
Duration Effect - Set time before showing any submenus
Start Level - Set level of menu to start rendering the menu
End Level - Set level of menu to stop rendering the menu

CONTENT COMPONENT

Apply for Blog View - Allow to show the Content block at blog pages OR not
Apply for Frontpage view - Allow to show at Frontpage view OR not
Leading Images Width - Set width of images of Leading Articles
Leading Images Height - Set height of images of Leading Articles
Intro Images Width - Set width of images of Intro Articles
Intro Images Height - Set height of images of Intro Articles
Thumbnail Background Color - Set color background for thumbnail images
Thumbnail Mode - Set thumbnail mode:
- Fill
- Fit
- Stretch
- Center

ADVANCED OPTIONS

Show Back to Top - Allow you to show Back to Top arrow OR not
Show Cpanel - Allow you to show YT Framework Control panel OR not
Override logo image - Set logo image of Cpanel by inserting its link/path here
Enable jquery - Enable/disable jquery
Enable Lazy Load - Enable/disable LazyLoad
Optimize Merge File - Choose Yes to optimize all CSS and JS Files which are used in your website
Optimize CSS - Choose Yes to optimize only CSS files
Optimize CSS Exclude - CSS files which are not optimized, comma separated
Optimize JS - Choose Yes to optimize only JS files
Optimize JS Exclude - JS files which are not optimized, comma separated
Optimize Folder - A specific folder with Css/Js files need to be optimized
Optimize HTML - Allow to use Optimize HTML feature
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 and SJ Core plugin.
Yt Plugin supports Yt Framework for adding extra parameters used with Mega Menu and to compress CSS/JS/HTML when optimizing codes
SJ Core is used for resizing images in Content Component and other extensions by SmartAddons.

3.1 Installation

STEP 1: In Administrator on Joomla! v2.5.x, go to Extensions -> Extension Manager
On this page, click Choose File button, choose those two plugin files then click Upload & Install
STEP 2: Enable SJ Core and Yt Plugin (for Yt Framework) in Extension/Plug-in Manager

3.2 Configuration of YT Plugin (for Yt Framework)

SUPPORT OPTIMIZING CSS/JS/HTML AND STYLING MEGA MENUS

After installing Yt Plugin, go to Extension -> Plug-in Manager and choose to configureYt Plugin:

TO YT PLUGIN

Configure Yt Pluginto show SJ Help with Report Bugs, Template Tutorials and YT Framework Tutorials

SHOWING SJ HELP

4. Other Extensions - Installation and Configuration

After creating data, you can install and configure extensions to have a Website as like as our pre-made demo.

4.1 Install

4.1.1 List of extensions used in SJ WorldNews demo

You can find a list of modules/plugins/components which are used in SJ WorldNews by clicking menu Features -> Extensions of demo

4.1.2 Installation

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

4.2 Configuration

After installing extensions which are included in the SJ WorldNews template, navigate into Extensions -> Module (or Plug-in) Manager then choose the module or plug-in you want to configure. The following example is choosing a module from Module Manager:

By this screenshot, you will see how module is placed in the default layout:

This guide will help you place essential menus, modules and blocks as demo:

4.2.1 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - FEATURES

BACKEND - YT MENU PARAMS for FEATURES

BACKEND - TREE OF FEATURES

4.2.2 Mega Menu - K2

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - K2

BACKEND - YT MENU PARAMS for K2

BACKEND - TREE OF K2

4.2.3 Mega Menu - Joomla

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - JOOMLA

BACKEND - YT MENU PARAMS for JOOMLA

BACKEND - TREE OF JOOMLA

4.2.4 The top menu

Module Position - Module Suffix

Position: nav2
Suffix: Not Used

Frontend - Backend

FRONTEND - TOP MENU

BACKEND - TOP MENU

4.2.5 Smart Search on the top

Module Position - Module Suffix

Position: top1
Suffix: _blank

Frontend - Backend

FRONTEND - SEARCH

BACKEND - SEARCH

4.2.6 Login - Register on the top

Module Position - Module Suffix

Position: top2
Suffix: Not Used

Frontend - Backend

FRONTEND - LOGIN

BACKEND - LOGIN

4.2.7 Custom HTML Modules

There are 4 positions that used Custom HTML modules: "In The Worldnews", "Get connected with Us", "Subscribe to our newsletter" and "Stay connected with (user3 position)". Here we will configure an example for custom HTML modules:. Let take "Get connected with Us", other will be the same.

Module Position - Module Suffix

Position: usera
Suffix: _blank

Frontend - Backend

FRONTEND - CONNECT

BACKEND - CONNECT

4.2.8 Breaking News - SJ K2 Splash

Module Position - Module Suffix

Position: slide_show
Suffix: Not used

Frontend - Backend

FRONTEND - SPLASH

BACKEND - SPLASH

4.2.9 Top news - K2 Content

There are two positions that used K2 content, main_bottom and userc. Here we will configure an example. Let take "K2 content at main_bottom", other will be the same.

Module Position - Module Suffix

Position: main_bottom
Suffix: badge-cool title6

Frontend - Backend

FRONTEND - TOP NEWS

BACKEND - TOP NEWS

4.2.10 Yt K2 Slideshow II

Module Position - Module Suffix

Position: user2
Suffix: k2_slideshowii

Frontend - Backend

FRONTEND - YT K2 SLIDESHOW II

BACKEND - YT K2 SLIDESHOW II

4.2.11 Community Blog - SJ K2 Extra Slider

Module Position - Module Suffix

Position: user3
Suffix: style-box title4

Frontend - Backend

FRONTEND - BLOG

BACKEND - BLOG

4.2.12 Editor's Choice - So K2 Slider

There are two positions that used So K2 Slider, user4 and user6. Here we will configure an example. Let take "So K2 Slider at user4", other will be the same.

Module Position - Module Suffix

Position: user4
Suffix: style-box title2

Frontend - Backend

FRONTEND - EDITOR

BACKEND - EDITOR

4.2.13 SJ Mega K2 News

Module Position - Module Suffix

Position: main_bottom
Suffix: Not used

Frontend - Backend

FRONTEND - SJ MEGA K2 NEWS

BACKEND - SJ MEGA K2 NEWS

4.2.14 SJ Module Tabs

Module Position - Module Suffix

Position: right_top
Suffix: Not used

Frontend - Backend

FRONTEND - SJ MODULE TABS

BACKEND - SJ MODULE TABS

4.2.15 SJ K2 Accordion

Module Position - Module Suffix

Position: right_top
Suffix: Not used

Frontend - Backend

FRONTEND - SJ K2 ACCORDION

BACKEND - SJ K2 ACCORDION

4.2.16 Who's Online module

Module Position - Module Suffix

Position: right-bottom
Suffix: style-box bgcolor2

Frontend - Backend

FRONTEND - WHO'S ONLINE

BACKEND - WHO'S ONLINE

4.2.17 Footer - Menu Module

There are two positions that used Menu Module, user7 and footnav. Here we will configure an example. Let take "Menu Module at footnav", other will be the same

Module Position - Module Suffix

Position: footnav
Suffix: Not Use

Frontend - Backend

FRONTEND - FOOTER

BACKEND - FOOTER

For other configurations, please submit ticket OR purchase our installation services.

August.19.2012

SJ Education Template Userguide

Written by SA Nghiem Diep

Posted in Template User-Guides

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

August.12.2012

SJ Flower Store Template Userguide

Written by SA Nghiem Diep

Posted in Template User-Guides

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

REQUIREMENTS

- Joomla! v2.5.x latest stable version is highly recommended.

- Virtuemart v2.0.8 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 Flower Store and all extensions included in this template step by step by yourself.

1. Download Template and Extensions
2. SJ Flower Store 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 Flower Store Template -Installation and Configuration

2.1 INSTALLATION

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

2.2 CONFIGURATION

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

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

GLOBAL 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 COLUMN 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 Window Layout - 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_flowerstore/layouts folder without tail .xml

STYLE SETTINGS

Default Style - Choose a suitable style for your site. There're 7 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 module
- Mainmenu
- Topmenu
- Usermenu
- Othermenu
- Menu-link
- Keyconcepts
- Validate-menu
Default Menu Style - We support four styles of Menu
- CSS Menu
- Moo Menu
- Mega Menu
- Droplinle Menu
Keep Menu Bar on top - Allow to show/hide Menu Bar on top when scroll site
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
Enable jquery - Enable/disable jquery
Include Lazyload Plugin - Enable/disable LazyLoad
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! v2.5.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 Flower Store 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 Flower Store demo

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

4.1.2 Installation

In Administrator page on Joomla! v2.5.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 Flower Store 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 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - FEATURES

BACKEND - FEATURES

BACKEND - TREE OF MEGA ITEMS

4.2.2 Mega Menu - Joomla

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - JOOMLA

BACKEND - JOOMLA

BACKEND - TREE OF MEGA JOOMLA

BACKEND - COLUMN 1

BACKEND - COLUMN 2

4.2.3 Mega Menu - Virtuemart

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - VIRTUEMART

BACKEND - VIRTUEMART

BACKEND - TREE OF MEGA VIRTUEMART

BACKEND - COLUMN 1

BACKEND - COLUMN 2

4.2.4 SJ MiniCart Pro Module

Module Position - Module Suffix

Position: menu_cart
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ MINICART PRO MODULE

BACKEND - SJ MINICART PRO MODULE

4.2.5 Module Login

Module Position - Module Suffix

Position: header2
Suffix: Not Used

Frontend - Backend

FRONTEND - MODULE LOGIN

BACKEND - MODULE LOGIN

4.2.6 SJ Virtuemart Slick Slider Module

Module Position - Module Suffix

Position: slide_show
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ VM SLICK SLIDER

BACKEND - SJ VM SLICK SLIDER

4.2.7 SJ Virtuemart Slider Module

Module Position - Module Suffix

Position: main_top
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ VIRTUEMART SLIDER

BACKEND - SJ VIRTUEMART SLIDER

4.2.8 Showing Virtuemart Component

Frontend - Backend

FRONTEND - VIRTUEMART COMPONENT

BACKEND - VIRTUEMART COMPONENT

4.2.9 SJ Module Tabs Module

Module Position - Module Suffix

Position: main_bottom
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ MODULE TABS

BACKEND - SJ MODULE TABS

BACKEND - SALE PRODUCTS - SJ VM EXTRA SLIDER MODULE

4.2.10 Module Virtuemart Category

Module Position - Module Suffix

Position: right_top
Suffix: _menu

Frontend - Backend

FRONTEND - MODULE VIRTUEMART CATEGORY

BACKEND - MODULE VIRTUEMART CATEGORY

4.2.11 Module Search

Module Position - Module Suffix

Position: right_top
Suffix: bg-color

Frontend - Backend

FRONTEND - MODULE SEARCH

BACKEND - MODULE SEARCH

4.2.12 Module Banner

Module Position - Module Suffix

Position: right_top
Suffix: _menu banner

Frontend - Backend

FRONTEND - MODULE BANNER

BACKEND - MODULE BANNER

4.2.13 SJ Basic News Module

Module Position - Module Suffix

Position: right_top
Suffix: _menu

Frontend - Backend

FRONTEND - SJ BASIC NEWS

BACKEND - SJ BASIC NEWS

4.2.14 Module Who's Online

Module Position - Module Suffix

Position: right_bottom
Suffix: border2

Frontend - Backend

FRONTEND - WHO'S ONLINE

BACKEND - WHO'S ONLINE

4.2.15 Module Custom HTML - Follow Us

Module Position - Module Suffix

Position: right_bottom
Suffix: _menu

Frontend - Backend

FRONTEND - FOLLOW US

BACKEND - FOLLOW US

4.2.16 Module Custom HTML - Accept Payment

Module Position - Module Suffix

Position: user3
Suffix: Not Used

Frontend - Backend

FRONTEND - ACCEPT PAYMENT

BACKEND - ACCEPT PAYMENT

4.2.17 Module Custom HTML - Newsletter

Module Position - Module Suffix

Position: user10
Suffix: newsletter

Frontend - Backend

FRONTEND - NEWSLETTER

BACKEND - SIGN UP FOR OUR NEWSLETTER

BACKEND - OPENING TIME

4.2.18 Module Menu

Module Position - Module Suffix

Position: user11, user12, user13
Suffix: Not Used

Frontend - Backend

FRONTEND - MODULE MENU

BACKEND - MODULE MENU

August.09.2012

SJ Mobi Template Userguide

Written by SA Nghiem Diep

Posted in Template User-Guides

The 4-part guideline will help you easily install SJ Mobi and all extensions included in this template step by step.

1. Download Template and Extensions
2. SJ Mobi 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 Mobi Template -Installation and Configuration

2.1 INSTALLATION

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

2.2 CONFIGURATION

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

Global Settings
Layout Settings
Style Settings
Top Menu Settings
Content Component
Advanced Options

GLOBAL SETTINGS

Generator tag - Generate tag for your template
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

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.
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_mobi/layouts folder without tail .xml

STYLE SETTINGS

Default Style - Choose a suitable style for your site. There're 5 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 module
- Mainmenu
- Topmenu
- Usermenu
- Joomla! menu
- Joomla! categories
- Joomla! Templates
- Joomla! Extensions
- Fruit Shop
- Free Templates
- FrameWork Information
- Australian Parks
- About Joomla
Default Menu Style - We support 4 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 back to top - Allow you to show/hide Back to Top button
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
Enable Lazy Load - Enable/disable LazyLoad
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! v2.5.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 Mobi 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

After creating the data, you can install and configure extensions to showing on the template. Note if you want to show data well on this template, you should use images which has width/height = 3/1

4.1 INSTALLATION

4.1.1 List of extensions used in SJ Mobi demo

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

4.1.2 Installation

In Administrator page on Joomla! v2.5.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 Mobi 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 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - FEATURES

BACKEND - FEATURES

BACKEND - TREE OF MEGA ITEMS

4.2.2 Mega Menu - Joomla

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - JOOMLA

BACKEND - JOOMLA

BACKEND - TREE OF MEGA JOOMLA

BACKEND - JOOMLA! MENU

BACKEND - JOOMLA! CATEGORIES

BACKEND - TITLE COLUMN 3

4.2.3 Mega Menu - Site Styles

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - SITE STYLES

BACKEND - SITE STYLES

BACKEND - TREE OF MEGA SITE STYLES

BACKEND - TEMPLATE STYLES

4.2.4 SJ Content Slideshow Responsive Module

Module Position - Module Suffix

Position: slide_show
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ CONTENT SLIDESHOW RESPONSIVE

BACKEND - SJ CONTENT SLIDESHOW RESPONSIVE

4.2.5 Social Buttons on the top Site

Module Position - Module Suffix

Position: top1
Suffix: socials

Frontend - Backend

FRONTEND - SOCIAL BUTTONS

BACKEND - SOCIAL BUTTONS

4.2.6 Search Button on the top Site

Module Position - Module Suffix

Position: top2
Suffix: Not Used

Frontend - Backend

FRONTEND - SEARCH BUTTON

BACKEND - SEARCH BUTTON

4.2.7 Module Custom HTML - Top Video

Module Position - Module Suffix

Position: position-5
Suffix: grid- 1 hide-tablet

Frontend - Backend

FRONTEND - TOP VIDEO

BACKEND - TOP VIDEO

4.2.8 SJ Galleries

Module Position - Module Suffix

Position: position-7
Suffix: bg_title grid-1 hide-mobile

Frontend - Backend

FRONTEND - GALLERIES

BACKEND - GALLERIES

4.2.9 SJ Module Tabs

Module Position - Module Suffix

Position: position-7
Suffix: grid-1 mod-tabs

Frontend - Backend

FRONTEND - SJ MODULE TABS

BACKEND - SJ MODULE TABS

BACKEND - POPULAR - SJ BASIC NEWS

BACKEND - LATEST - SJ BASIC NEWS

BACKEND - HOT - SJ BASIC NEWS

4.2.10 Who's online module

Module Position - Module Suffix

Position: position-7
Suffix: grid-1 bg_red wonline theme_color

Frontend - Backend

FRONTEND - WHO'S ONLINE

BACKEND - WHO'S ONLINE

4.2.11 About Joomla

Module Position - Module Suffix

Position: position-7
Suffix: _menu grid-1 about only-5col

Frontend - Backend

FRONTEND - ABOUT JOOMLA

BACKEND - ABOUT JOOMLA

4.2.12 Showing Content Component

Frontend - Backend

FRONTEND - CONTENT COMPONENT

BACKEND - CONTENT COMPONENT

4.2.13 SJ News Extra Slider

Module Position - Module Suffix

Position: position-7
Suffix: bg_title grid-1 top10event hide-mobile

Frontend - Backend

FRONTEND - SJ NEWS EXTRA SLIDER

BACKEND - SJ NEWS EXTRA SLIDER

4.2.14 Module Custom HTML - Mobile Ready

Module Position - Module Suffix

Position: position-7
Suffix: bg_red grid-1 theme_color

Frontend - Backend

FRONTEND - MOBILE READY

BACKEND - MOBILE READY

4.2.15 Module Statistic

Module Position - Module Suffix

Position: position-7
Suffix: grid-1 title1 only-5col

Frontend - Backend

FRONTEND - STATISTIC

BACKEND - STATISTIC

4.2.16 Module Custom HTML - Responsive

Module Position - Module Suffix

Position: position-7
Suffix: grid-1 icon1 hide-tablet

Frontend - Backend

FRONTEND - RESPONSIVE

BACKEND - RESPONSIVE

4.2.17 SJ Basic News - Features

Module Position - Module Suffix

Position: position-7
Suffix: badge-features grid-1

Frontend - Backend

FRONTEND - FEATURES

BACKEND - FEATURES

4.2.18 Module Custom HTML - Tablet Ready

Module Position - Module Suffix

Position: position-7
Suffix: bg_green grid-1

Frontend - Backend

FRONTEND - TABLET READY

BACKEND - TABLET READY

4.2.19 Module Custom HTML - Main Bottom Custom

Module Position - Module Suffix

Position: position-7
Suffix: icon3 grid-2 hide-tablet

Frontend - Backend

FRONTEND - MAIN BOTTOM CUSTOM

BACKEND - MAIN BOTTOM CUSTOM

4.2.20 Module Custom HTML - Testimonials

Module Position - Module Suffix

Position: content_bottom
Suffix: testimonials

Frontend - Backend

FRONTEND - TESTIMONIALS

BACKEND - TESTIMONIALS

4.2.21 Module Menu - Sample Menu

Module Position - Module Suffix

Position: user10
Suffix: Not Use

Frontend - Backend

FRONTEND - SAMPLE MENU

BACKEND - SAMPLE MENU

4.2.22 Module Menu - Useful Link

Module Position - Module Suffix

Position: user11
Suffix: cyan-mod

Frontend - Backend

FRONTEND - USEFUL LINK

BACKEND - USEFUL LINK

4.2.23 Module Login - Login Form

Module Position - Module Suffix

Position: user12
Suffix: brow-mod

Frontend - Backend

FRONTEND - LOGIN FORM

BACKEND - LOGIN FORM

4.2.24 Module Custom HTML - Locations

Module Position - Module Suffix

Position: user13
Suffix: green-mod

Frontend - Backend

FRONTEND - LOCATIONS

BACKEND - LOCATIONS

4.2.24 Module Custom HTML - Follow Us

Module Position - Module Suffix

Position: user14
Suffix: blue-mod

Frontend - Backend

FRONTEND - FOLLOW US

BACKEND - FOLLOW US

June.29.2012

SJ Model Template Userguide

Written by SA Nghiem Diep

Posted in Template User-Guides

The 4-part guideline will help you easily install SJ Model and all extensions included in this template step by step.

1. Download Template and Extensions
2. SJ Model Template - Installation and Configuration
3. Yt Plugin(for Yt Framework) - Installation and Configuration
4. Extensions - Installation and Configuration

1. Download Template and Extensions

STEP 1: LOGIN YOUR ACCOUNT

STEP 2: GO TO DETAIL PAGE OF PRODUCT

STEP 3: GO TO DOWNLOAD AREA OF PRODUCT

STEP 4: DOWNLOAD PACKAGES OF PRODUCT

2. SJ Model 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 Model Template as default template

2.2 CONFIGURATION

The parameters of SJ Model 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_model/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 module
- Mainmenu
- Topmenu
- Usermenu
- Othermenu
- Menu-link
- Keyconcepts
- Validate-menu
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
Enable jquery - Enable/disable jquery
Enable Google Analytics - Enable/disable Google Analytics
Enter your Google Analytics tracking ID - Copy and paste your Google Analytics tracking ID here
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

3. Yt Plugin(for Yt Framework) -Installation and Configuration

3.1 INSTALLATION

In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose the plugin and then click Upload & Install

3.2 CONFIGURATION

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

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

SUPPORT OPTIMIZING CSS/ JS/ HTML AND MEGA MENU

4. Extensions - Installation and Configuration

4.1 INSTALLATION

4.1.1 List of extensions used in SJ Model demo

You can find a list of modules/plugins/components which are used in SJ Model 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 Model 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 K2 Slideshow Module

Module Position - Module Suffix

Position: slide_show
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ K2 SLIDESHOW

BACKEND - SJ K2 SLIDESHOW

4.2.2 Search Button at Home Site

Module Position - Module Suffix

Position: nav2
Suffix: Not Used

Frontend - Backend

FRONTEND - SEARCH BUTTON

BACKEND - SEARCH BUTTON

4.2.3 Showing K2 Component

Frontend - Backend

FRONTEND - K2 COMPONENT

BACKEND - K2 COMPONENT

4.2.4 SJ K2 Ajax Tabs Module

Module Position - Module Suffix

Position: ajax_tabs
Suffix: clear

Frontend - Backend

FRONTEND - SJ K2 AJAX TABS

BACKEND - SJ K2 AJAX TABS

4.2.5 SJ K2 Listing Module

Module Position - Module Suffix

Position: ajax_tabs
Suffix: bg1

Frontend - Backend

FRONTEND - SJ K2 LISTING

BACKEND - SJ K2 LISTING

4.2.6 SJ Module Tabs Module

Module Position - Module Suffix

Position: right
Suffix: clear

Frontend - Backend

FRONTEND - SJ MODULE TABS

BACKEND - SJ MODULE TABS

BACKEND - K2 CONTENT - POPULAR

BACKEND - K2 CONTENT - LATEST

BACKEND - K2 CONTENT - COMMENTS

4.2.8 Module Custom HTML - Video Catwalk

Module Position - Module Suffix

Position: right
Suffix: icon-video

Frontend - Backend

FRONTEND - VIDEO CATWALK

BACKEND - VIDEO CATWALK

CODE - CUSTOM OUTPUT

{ytpopup type="youtube" content="https://www.youtube.com/v/F3nD7QSzpts" width="400" height="300" title="video picks" }<img src="/images/customhtml/video.jpg" border="0" />{/ytpopup}
Net-A-Porter Karl Lagerfeld Hunt

4.2.9 SJ K2 Scrollbar Module

Module Position - Module Suffix

Position: right
Suffix: color1 yt-scrollbar-model

Frontend - Backend

FRONTEND - SJ K2 SCROLLBAR

BACKEND - SJ K2 SCROLLBAR

4.2.10 Module Custom HTML - Member - Contact by an Angency

Module Position - Module Suffix

Position: right
Suffix: Not Used

Frontend - Backend

FRONTEND - MEMBER - CONTACT BY AN AGENCY

BACKEND - MEMBER - CONTACT BY AN AGENCY

CODE - CUSTOM SUBSCRIBE

     
<ul class="member-custom">
<li><a href="#"><img src="/images/customhtml/1.jpg" border="0" align="middle" /></a></li>
<li><a href="#"><img src="/images/customhtml/2.jpg" border="0" align="middle" /></a></li>
<li><a href="#"><img src="/images/customhtml/3.jpg" border="0" align="middle" /></a></li>
<li><a href="#"><img src="/images/customhtml/4.jpg" border="0" align="middle" /></a></li>
<li><a href="#"><img src="/images/customhtml/5.jpg" border="0" align="middle" /></a></li>
<li><a href="#"><img src="/images/customhtml/6.jpg" border="0" align="middle" /></a></li>
</ul>

4.2.11 Login Module

Module Position - Module Suffix

Position: right
Suffix: Not Used

Frontend - Backend

FRONTEND - LOGIN

BACKEND - LOGIN

4.2.12 Module Custom HTML - Monthly Newsletter

Module Position - Module Suffix

Position: user10
Suffix: newsletter

Frontend - Backend

FRONTEND - MONTHLY NEWSLETTER

BACKEND - MONTHLY NEWSLETTER

4.2.13 Main Menu - About Us

Module Position - Module Suffix

Position: user11
Suffix: Not Used

Frontend - Backend

FRONTEND - ABOUT US

BACKEND - ABOUT US

BACKEND - ABOUT US MENU

4.2.14 Main Menu - People Finder

Module Position - Module Suffix

Position: user12
Suffix: Not Used

Frontend - Backend

FRONTEND - PEOPLE FINDER

BACKEND - PEOPLE FINDER

BACKEND - PEOPLE FINDER MENU

4.2.15 Module Custom HTML - Socialize with Us

Module Position - Module Suffix

Position: user13
Suffix: Not Used

Frontend - Backend

FRONTEND - SOCIALIZE WITH US

BACKEND - SOCIALIZE WITH US

CODE - CUSTOM SUBSCRIBE

<a class="facebooks" href="http://www.facebook.com/pages/SmartAddons/121579357898967" title="Facebook">Facebook</a><a class="flick" href="#" title="Flick">Flick</a><a class="twitters" href="http://twitter.com/smartaddons" title="Twitter">Twitter</a> <a class="rss" href="/component/k2/itemlist?format=feed&type=rss" title="RSS">RSS</a><a class="technora" href="#" title="Technora">Technora</a>
Bashendrerit msenean jaseras elporta scearius cinaya natoqibeha uertyas kertyrta ertas

4.2.16 Module Menu - Menu Footer

Module Position - Module Suffix

Position: footnav
Suffix: menu-bottom

Frontend - Backend

FRONTEND - MODULE MENU FOOTER

BACKEND - MODULE MENU FOOTER

BACKEND - LIST MENU ITEM IN MENU FOOTER

4.2.17 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - FEATURES

BACKEND - FEATURES

BACKEND - TREE OF MEGA ITEMS

4.2.18 Mega Menu - Joomla

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - JOOMLA

BACKEND - JOOMLA

BACKEND - TREE OF MEGA ITEMS

BACKEND - CONTENT

BACKEND - WEBLINKS

BACKEND - FEATURE ARTICLES

4.2.19 Mega Menu - K2

Menu Item Type

Menu Item Type: Categories

Frontend - Backend

FRONTEND - K2

BACKEND - K2

BACKEND - TREE OF MEGA ITEMS

BACKEND - K2 CATEGORY

BACKEND - TOP COMMENT

BACKEND - TAG PAGE - MODULE CUSTOM HTML

4.2.20 Mega Menu - Virtuemart

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - VIRTUEMART

BACKEND - VIRTUEMART

BACKEND - TREE OF MEGA ITEMS

February.08.2012

SJ Restaurant Templates Userguide

Written by SA Nghiem Diep

Posted in Template User-Guides

The 4-part guideline will help you easily install SJ Restaurant and all extensions included in this template step by step.

1. Download Template and Extensions
2. SJ Restaurant Template - Installation and Configuration
3. Yt Plugin(for Yt Framework) - Installation and Configuration
4. Extensions - Installation and Configuration

1. Download Template and Extensions

STEP 1: LOGIN YOUR ACCOUNT

STEP 2: GO TO YOUR DOWNLOAD AREA

STEP 3: GO TO CATEGORIES OF JOOMLA PRODUCTS

STEP 4: DOWNLOAD SJ RESTAURANT TEMPLATE

STEP 5: DOWNLOAD COMMERCIAL EXTENSIONS

STEP 6: DOWNLOAD FREE EXTENSIONS

2. SJ Restaurant 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 Restaurant Template as default template

2.2 CONFIGURATION

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

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

GLOBAL 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 Window Layout - 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_restaurant17/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 module
- Mainmenu
- Topmenu
- Usermenu
- Othermenu
- Menu-link
- Keyconcepts
- Validate-menu
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
Enable jquery - Enable/disable jquery
Enable Google Analytics - Enable/disable Google Analytics
Enter your Google Analytics tracking ID - Copy and paste your Google Analytics tracking ID here
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

3. Yt Plugin(for Yt Framework) -Installation and Configuration

3.1 INSTALLATION

In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose the plugin and then click Upload & Install

3.2 CONFIGURATION

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

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

SUPPORT OPTIMIZING CSS/ JS/ HTML AND MEGA MENU

4. Extensions - Installation and Configuration

4.1 INSTALLATION

4.1.1 List of extensions are used in SJ Restaurant demo

You can find a list of modules/plugins which are used in SJ Restaurant on Mega 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 Restaurant 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 Position - Module Suffix

Position: slide_show
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ CONTENT SLIDESHOW

BACKEND - SJ CONTENT SLIDESHOW

4.2.2 Module Articles - Newsflash

Module Position - Module Suffix

Position: slide_show
Suffix: news-flash

Frontend - Backend

FRONTEND - MODULE ARTICLES NEWSFLASH

BACKEND - MODULE ARTICLES NEWSFLASH

4.2.3 BREADCRUMBS - HOME

Module Position - Module Suffix

Position: breadcrumb
Suffix: Not Used

Frontend - Backend

FRONTEND - BREADCRUMBS

BACKEND - BREADCRUMBS

4.2.4 Custom HTML - Follow Us

Module Position - Module Suffix

Position: top1
Suffix: links

Frontend - Backend

FRONTEND - FOLLOW US

BACKEND - FOLLOW US

4.2.5 So Article Slider

Module Position - Module Suffix

Position: content-top
Suffix: Not Used

Frontend - Backend

FRONTEND - SO ARTICLE SLIDER

BACKEND - SO ARTICLE SLIDER

4.2.6 SJ News Extra Slider

Module Position - Module Suffix

Position: content-top
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ NEWS EXTRA SLIDER

BACKEND - SJ NEWS EXTRA SLIDER

4.2.7 SJ Mega News

Module Position - Module Suffix

Position: content-top
Suffix: title-1 border2 mega-news

Frontend - Backend

FRONTEND - SJ MEGA NEWS

BACKEND - SJ MEGA NEWS

4.2.8 Module Menu - Menu Left

Module Position - Module Suffix

Position: right
Suffix: menu cate-bottom

Frontend - Backend

FRONTEND - MODULE MENU LEFT

BACKEND - MODULE MENU LEFT

BACKEND - LIST MENU ITEM IN MENU LEFT

4.2.9 Module Search

Module Position - Module Suffix

Position: right
Suffix: search-top

Frontend - Backend

FRONTEND - MODULE SEARCH

BACKEND - MODULE SEARCH

4.2.10 SJ Gallery

Module Position - Module Suffix

Position: right
Suffix: default menu gallery

Frontend - Backend

FRONTEND - SJ GALLERY

BACKEND - SJ GALLERY

4.2.11 Module Latest News

Module Position - Module Suffix

Position: usere
Suffix: lastest_news

Frontend - Backend

FRONTEND - MODULE LATEST NEWS

BACKEND - MODULE LATEST NEWS

4.2.12 Custom HTML - Testimonials

Module Position - Module Suffix

Position: usere
Suffix: Not used

Frontend - Backend

FRONTEND - TESTIMONIAL

BACKEND - TESTIMONIAL

4.2.13 SJ Module Tabs

Module Position - Module Suffix

Position: right
Suffix: tabs

Frontend - Backend

FRONTEND - SJ MODULE TABS

BACKEND - SJ MODULE TABS

4.2.14 SJ News Scrollbar

Module Position - Module Suffix

Position: user10
Suffix: Not used

Frontend - Backend

FRONTEND - SJ NEWS SCROLLBAR

BACKEND - SJ NEWS SCROLLBAR

4.2.15 SJ Content Accordion

Module Position - Module Suffix

Position: user11
Suffix: Not used

Frontend - Backend

FRONTEND - SJ CONTENT ACCORDION

BACKEND - SJ CONTENT ACCORDION

4.2.16 Locations - Custom HTML

Module Position - Module Suffix

Position: user12
Suffix: localtions

Frontend - Backend

FRONTEND - CUSTOM HTML - LOCATIONS

BACKEND - CUSTOM HTML - LOCATIONS

CODE - CUSTOM LOCATIONS

   
<ul>
<li class="address"><a>Nguyen Phuc Lai Street - Dong Da District - Ha Noi City</a></li>
<li class="mail">contact@ytcvn.com</li>
<li class="phone"><a>084 - 04 - 12345678</a></li>
</ul>
<img src="http://smartaddons.s3.amazonaws.com/images/userguide/sj-restaurant-j17-temp/map.jpg" border="0" />

4.2.17 Module Menu - Menu Footer

Module Position - Module Suffix

Position: footnav
Suffix: _menu

Frontend - Backend

FRONTEND - MODULE MENU FOOTER

BACKEND - MODULE MENU FOOTER

BACKEND - LIST MENU ITEM IN MENU FOOTER

4.2.18 Header - Custom HTML

Module Position - Module Suffix

Position for Header - Lunch: header1
Position for Header - Dinner: header2
Suffix: Not Used

Frontend - Backend

FRONTEND - CUSTOM HTML - HEADER

BACKEND - CUSTOM HTML - HEADER LUNCH

CODE - CUSTOM HEADER LUNCH

Lunch

<ul>
<li>Mon - Fri: 11:00 am - 3:00 pm</li>
<li>Fri - Sat: 11:00 am - 3:00 pm</li>
<li>Sun: Closed</li>
</ul>

BACKEND - CUSTOM HTML - HEADER DINNER

CODE - CUSTOM HEADER DINNER

Dinner

<ul>
<li>Mon - Fri: 11:00 am - 3:00 pm</li>
<li>Fri - Sat: 11:00 am - 3:00 pm</li>
<li>Sun: Closed</li>
</ul>

4.2.18 Header - Custom HTML

Module Position - Module Suffix

Position for Header - Lunch: header1
Position for Header - Dinner: header2
Suffix: Not Used

Frontend - Backend

FRONTEND - CUSTOM HTML - HEADER

BACKEND - CUSTOM HTML - HEADER LUNCH

CODE - CUSTOM HEADER LUNCH

Lunch

<ul>
<li>Mon - Fri: 11:00 am - 3:00 pm</li>
<li>Fri - Sat: 11:00 am - 3:00 pm</li>
<li>Sun: Closed</li>
</ul>

BACKEND - CUSTOM HTML - HEADER DINNER

CODE - CUSTOM HEADER DINNER

Dinner

<ul>
<li>Mon - Fri: 11:00 am - 3:00 pm</li>
<li>Fri - Sat: 11:00 am - 3:00 pm</li>
<li>Sun: Closed</li>
</ul>

4.2.19 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.20 Mega Menu - About Us

Menu Item Type

Menu Item Type: Text Category Blog

Frontend - Backend

FRONTEND - MEGA MENU ABOUT US

BACKEND - MEGA MENU ABOUT US

BACKEND - "ABOUT US" CUSTOM HTML

CODE - CUSTOM OUTPUT

<strong>Sj Restaurent</strong> mes pede elit nibh at risus tempus. Nulla semper ac nec sit massa In Curabitur id risus sit.
 
Non ante gravida eros quis justo sed <em>nonummy et</em> Donec et. <strong>Hendrerit velit</strong> orci sagittis eu.

BACKEND - "VIDEO" CUSTOM HTML

CODE - CUSTOM OUTPUT

4.2.21 Mega Menu - Services

Menu Item Type

Menu Item Type: Category Blog

Frontend - Backend

FRONTEND - MEGA MENU SERVICES

BACKEND - MEGA MENU SERVICES

BACKEND - TREE OF MEGA ITEMS

BACKEND - MENU OUR MENUS

BACKEND - MENU ORDER PARTY

BACKEND - MENU HOT NEWS

4.2.22 Mega Menu - Extensions

Menu Item Type

Menu Item Type: Category Blog

Frontend - Backend

FRONTEND - MEGA MENU EXTENSIONS

BACKEND - MEGA MENU EXTENSIONS

BACKEND - TREE OF MEGA ITEMS

4.2.23 Mega Menu - Contact Us

Menu Item Type

Menu Item Type: Single Contact

Frontend - Backend

FRONTEND - MEGA MENU CONTACT US

BACKEND - MEGA MENU CONTACT US

BACKEND - MODULE CONTACT IMAGE

BACKEND - MODULE CONTACT FORM

January.21.2012

SJ Business Template Userguide

Written by SA Nghiem Diep

Posted in Template User-Guides

The 4-part guideline will help you easily install SJ Business and all extensions included in this template step by step.

1. Download Template and Extensions
2. SJ Business Template - Installation and Configuration
3. Yt Plugin(for Yt Framework) - Installation and Configuration
4. Extensions - Installation and Configuration

1. Download Template and Extensions

STEP 1: LOGIN YOUR ACCOUNT

STEP 2: GO TO YOUR DOWNLOAD AREA

STEP 3: GO TO CATEGORIES OF JOOMLA PRODUCTS

STEP 4: DOWNLOAD SJ BUSINESS TEMPLATE

STEP 5: DOWNLOAD COMMERCIAL EXTENSIONS

STEP 6: DOWNLOAD FREE EXTENSIONS

2. SJ Business 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 Business Template as default template

2.2 CONFIGURATION

The parameters of SJ Business 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_business17/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 module
- Mainmenu
- Topmenu
- Usermenu
- Othermenu
- Menu-link
- Keyconcepts
- Validate-menu
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
Enable jquery - Enable/disable jquery
Enable Google Analytics - Enable/disable Google Analytics
Enter your Google Analytics tracking ID - Copy and paste your Google Analytics tracking ID here
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

3. Yt Plugin(for Yt Framework) -Installation and Configuration

3.1 INSTALLATION

In Administrator page on Joomla! v1.7.x, go to Extensions -> Extension Manager
On this page, click on Choose File button, choose the plugin and then click Upload & Install

3.2 CONFIGURATION

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

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

SUPPORT OPTIMIZING CSS/ JS/ HTML AND MEGA MENU

4. Extensions - Installation and Configuration

4.1 INSTALLATION

4.1.1 List of extensions used in SJ Business demo

You can find a list of modules/plugins which are used in SJ Business on Mega 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 Business 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 Mega Slider Module

Module Position - Module Suffix

Position: slide_show
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ CONTENT MEGA SLIDER

BACKEND - SJ CONTENT MEGA SLIDER

4.2.2 Showing Frontpage at Home Site

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 - Showing Frontpage at Home Site

BACKEND - Showing Frontpage at Home Site

4.2.3 SJ News Scrollbar Module

Module Position - Module Suffix

Position: news-scrollbar
Suffix: Not Used

Frontend - Backend

FRONTEND - SJ NEWS SCROLLBAR

BACKEND - SJ NEWS SCROLLBAR

4.2.4 Custom HTML - Follow Us

Module Position - Module Suffix

Position: social
Suffix: Not Used

Frontend - Backend

FRONTEND - Follow Us

BACKEND - Follow Us

4.2.5 SJ News Frontage Module

Module Position - Module Suffix

Position: tabs_right
Suffix: Not Used

Frontend - Backend

FRONTEND - LATEST NEWS

BACKEND - LATEST NEWS

FRONTEND - MOST POPULAR

BACKEND - MOST POPULAR

4.2.6 SJ Module Tabs

Module Position - Module Suffix

Position: right
Suffix: clear

Frontend - Backend

FRONTEND - MODULE TABS

BACKEND - MODULE TABS

4.2.7 SJ News Extra Slider

Module Position - Module Suffix

Position: right
Suffix: clear

Frontend - Backend

FRONTEND - SJ NEWS EXTRA SLIDER

BACKEND - SJ NEWS EXTRA SLIDER

4.2.8 SJ News Basic Module

Module Position - Module Suffix

Position: right
Suffix: title1

Frontend - Backend

FRONTEND - SJ NEWS BASIC

BACKEND - SJ NEWS BASIC

4.2.9 Custom HTML - NewsLetter

Module Position - Module Suffix

Position: right
Suffix: Not Used

Frontend - Backend

FRONTEND - NEWSLETTER

BACKEND - NEWSLETTER

CODE - CUSTOM OUTPUT

<input class="inputbox text_email" type="text" value="Enter Your Email ID" /> <input class="button" type="submit" value="Subscribe" />

4.2.10 SJ Module Tabs - Custom HTML

Module Position - Module Suffix

Position: usera
Suffix: Not Used

Frontend - Backend

FRONTEND - FOLLOW US ANY WHERE

BACKEND - FOLLOW US ANY WHERE

CODE - CUSTOM SUBSCRIBE

Service best customer support
<img src="/images/customhtml/subscribe.png" border="0" />
<a href="#">Click here</a> to sign up to receive news about our services

CODE - CUSTOM TWITTER

Follow us on twitter
<a href="#">Follow our latest activity on all topics from The Asbury Park Press.</a>
<a href="#">Follow The Asbury Park Press on Twitter</a>
<a href="#">See all www.APP.com Twitter offerings</a>

CODE - CUSTOM FACEBOOK

Follow us on facebook
<a href="#">Follow our latest activity on all topics from The Asbury Park Press.</a>
<a href="#">Follow The Asbury Park Press on Twitter</a>
<a href="#">See all www.APP.com Twitter offerings</a>

CODE - CUSTOM MOBILE

Visit our mobile sites
<a href="#">Use your phone to check the latest news, sports, weather and more on m.smartaddons.com.</a>
<a href="#">See how easy it is to connect to m.smartaddons.com</a>
<a href="#">www..smartaddons.com optimized</a>

CODE - CUSTOM RSS

Subscribe to our RSS feeds
<a href="#">Find RSS feeds for the latest New Jersey News news, weather, sports, business, entertainment and more.</a>
<a href="#">Select from all of our RSS offerings</a>

CODE - CUSTOM EMAIL

Singup for our Email newsletter
<a href="#">Get news, sports and features highlights via email.</a>
<a href="#">Click here to select a newsletter or view sample newsletters</a>

4.2.11 Custom HTML - Contact Us

Module Position - Module Suffix

Position: userb
Suffix: Not Used

Frontend - Backend

FRONTEND - CONTACT US

BACKEND - CONTACT US

CODE - CUSTOM OUTPUT

                                              
<ul class="contact">
<li class="address"><a>Nguyen Phuc Lai Street - Dong Da District - Ha Noi City</a></li>
<li class="phone"><a>084 - 00 - 12345678
 084 - 00 - 12345678</a></li>
<li class="email">contact@ytcvn.com</li>
</ul>

4.2.12 SJ Content Slideshow

Module Position - Module Suffix

Position: userc
Suffix: content_slideshow

Frontend - Backend

FRONTEND - SJ CONTENT SLIDESHOW

BACKEND - SJ CONTENT SLIDESHOW

4.2.13 Mega Menu - Features

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU FEATURES

BACKEND - MEGA MENU FEATURES

4.2.14 Mega Menu - Company

Menu Item Type

Menu Item Type: Category Blog

Frontend - Backend

FRONTEND - MEGA MENU COMPANY

BACKEND - MEGA MENU COMPANY

BACKEND - TREE OF MEGA ITEMS

4.2.15 Mega Menu - Extensions

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

FRONTEND - MEGA MENU EXTENSIONS

BACKEND - MEGA MENU EXTENSIONS

BACKEND - TREE OF MEGA ITEMS

4.2.16 Mega Menu - NEWS

Menu Item Type

Menu Item Type: Category Blog

Frontend - Backend

FRONTEND - MEGA MENU NEWS

BACKEND - MEGA MENU NEWS

BACKEND - LATEST NEWS

BACKEND - CATEGORY

4.2.17 Mega Menu - Services

Menu Item Type

Menu Item Type: Category Blog

Frontend - Backend

FRONTEND - MEGA MENU SERVICES

BACKEND - MEGA MENU SERVICES

BACKEND - CUSTOM FOR ANALYTICS

EXAMPLE CODE - CUSTOM OUTPUT FOR ANALYTICS

<img src="/images/BusinessConsultancyOn.png" border="0" style="border: 0; float: left; margin-left: 5px; margin-right: 5px;" />Nullam eget felis id metus luctus semper quis vel nulla. Cras diam mauris, molestie eu sodales non, sodales vitae augue.

4.2.18 Mega Menu - Events

Menu Item Type

Menu Item Type: Category Blog

Frontend - Backend

FRONTEND - MEGA MENU EVENTS

BACKEND - MEGA MENU EVENTS

BACKEND - TREE OF MEGA ITEMS

4.2.19 Mega Menu - Contact

Menu Item Type

Menu Item Type: Single Contact

Frontend - Backend

FRONTEND - MEGA MENU CONTACT

BACKEND - MEGA MENU CONTACT

BACKEND - CONTACT POSITION

CODE - CUSTOM OUTPUT

<ul class="contact">
<li class="address"><a>Nguyen Phuc Lai Street - Dong Da District - Ha Noi City</a></li>
<li class="phone"><a>084 - 00 - 12345678
 084 - 00 - 12345678</a></li>
<li class="email">contact@ytcvn.com</li>
</ul>

<form id="yt_contact_1" method="post"> <label class="yt-contact-name" for="contact-name"> Name:(*) <input id="contact-name" class="inputbox" name="contact_name" size="18" type="text" /> </label> <label class="yt-contact-email" for="contact-email"> Email:(*) <input id="contact-email" class="inputbox" name="contact_email" size="18" type="text" /> </label> <label class="yt-contact-phone" for="contact-phone"> Phone:(*) <input id="contact-phone" class="inputbox" name="contact_phone" size="18" type="text" /> </label> <label class="yt-contact-messager" for="contact-messager"> Messager:(*) <textarea id="contact-messager" class="contact-inputbox" style="max-width: 257px; max-height: 130px;" name="contact_messager"></textarea> </label> <button class="button validate">Send mail</button> <input name="option" type="hidden" value="com_contact" /> <input name="task" type="hidden" value="contact.submit" /> <input name="return" type="hidden" /> <input name="id" type="hidden" value="2:webmaster" /> <input name="9c22201da2abc58f15a7a264b7d1e864" type="hidden" value="1" /> </form>

January.06.2012

SJ Sport News Template Userguide

Written by SA Nghiem Diep

Posted in Template User-Guides

First of all, make sure you always download the newest version. If you just bought the template, you already have the latest version.
The following documentation applies to the template version 1.0 and later.
You can see the Demo Here

REQUIREMENTS

- Joomla! v1.7.x latest stable version is highly recommended.

INSTALLATION TEMPLATE

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

Go to Extensions -> Template Manager, and click on sj_sportnews - Default
And you can change params for your idea after.

INSTALLATION EXTENSIONS

SETTINGS

The parameters are divided into the following areas:

General
Layouts
Fonts and Colors
Menu System
Content Component

GENERAL

Generator tag - General tag for template
RTL Language - Choose RTL/LTR language
Logo Type - You can choose image type or text type
Logo Text - For Text Type
Slogan - You can change your slogan here

LAYOUTS

Default Mode View - We support Mobile View and Window View for your site.
Windows layout - When a guest views the site on a computer, this layout is used. You can choose after options for layouts on window
- 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_sportnews/layouts folder without tail .xml

FONTS & COLORS

Font Name - The default font of template is Arial. If you can choose another font using this parameter.
Google webfont - This parameter allows to use a google font for some html tags which are in Google webFont targets
Google webfont targets - Tags will be applied with google font.
Font Size - Here you can set a default size for the template.
Show Font Tool - Allow you show/not show font tool on the site
Site style - Support style for site. You can choose a default color: Cyan, Blue, Orange, Green, Brown and Red

MENU SYSTEM

Select a menutype - List menu module
- Mainmenu
- Topmenu
- Usermenu
- Othermenu
- Menu-link
- Keyconcepts
- Validate-menu
Menu Style - We support three styles of Menu
- CSS Menu
- Moo Menu
- Mega Menu
- Dropline Menu
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 - Apply for Blog view
Apply for Homepage view - Apply for Frontpage view
Leading Images Width - You can change width of images on Leading Articles.
Leading Images Height - You can change height of images on Leading Articles.
Intro Images Width - You can change width of images on Intro Articles.
Intro Images Height - You can change height of images on Intro Articles.
Thumbnail Background Color - The default background of thumbnail image
Thumbnail Mode - The way to resize the image. We support 4 modes for thumbnails:
- Fill
- Fit
- Stretch
- Center