August.09.2012

SJ Mobi Template Userguide

Written by SA Nghiem Diep

Published in Template User-Guides

(0 votes)

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

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! 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

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)

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 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

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

Last modified on 14

Or share it with your friends

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

SA Nghiem Diep

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