Happy International Labor Day 2024! Get 35% OFF for All Products, Membership and Services
VIEW MORE
labor_day"
0
Go To Cart
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
Go To Cart Total : 0 checkout
You are here: HomeJoomla TemplatesTemplate User-GuidesSJ Mobi Template Userguide

SJ Mobi Template Userguide

August.09.2012
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
alt

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
alt

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
alt

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

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
alt

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
alt

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

    Love all our templates?

    Join our membership clubs starting at $49 only for access to all of our templates

    Join Now
    Home Pricing
    0
    Go To Cart
    Your Cart is currently empty!
    Product update
    Coupon
    add
    Coupon code invalid! Please re-enter!
    AJAX loader
    Go To Cart Total : 0 checkout
    SearchSupport
    Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes