Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeJ! ExtensionsCommercial ExtensionsTemplate User-Guides
Template User-Guides

Template User-Guides (90)

In this area you will find related user-guide regarding YouTech extensions and templates
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.

SJ Magazine Template Userguide

Contents

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
alt

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
alt

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
alt

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
alt

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
alt

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
alt

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
alt

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

    4.2.6 Login Module

  • Module Position - Module Suffix
  • Position: top2
    Suffix: Not Used
  • Frontend - Backend
  • FRONTEND

    4.2.7 Smart Search

  • Module Position - Module Suffix
  • Position: nav2
    Suffix: Not used
  • Frontend - Backend
  • FRONTEND

    4.2.8 Mega K2 News

  • Module Position - Module Suffix
  • Position: main_bottom
    Suffix: clear
  • Frontend - Backend
  • FRONTEND

    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

    4.2.10 K2 Tool Module

  • Module Position - Module Suffix
  • Position: left
    Suffix: _menu
  • Frontend - Backend
  • FRONTEND

    4.2.11 SJ K2 Categories Accordion

  • Module Position - Module Suffix
  • Position: left
    Suffix: clear
  • Frontend - Backend
  • FRONTEND

    4.2.12 Statistics Module

  • Module Position - Module Suffix
  • Position: left_bottom
    Suffix: Not used
  • Frontend - Backend
  • FRONTEND

    4.2.13 In Pictures - SJ Gallery Module

  • Module Position - Module Suffix
  • Position: right_top
    Suffix: clear
  • Frontend - Backend
  • FRONTEND

    4.2.14 Latest News - SJ K2 Slider

  • Module Position - Module Suffix
  • Position: content_bottom
    Suffix: clear
  • Frontend - Backend
  • FRONTEND

    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

    4.2.16 SJ K2 Extra Slider

  • Module Position - Module Suffix
  • Position: user12
    Suffix: clear
  • Frontend - Backend
  • FRONTEND

    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.

    SJ Blog Template Userguide

    Contents

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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)

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

    4.2.5 Hello... - Custom HTML

  • Module Position - Module Suffix
  • Position: slideshow2
    Suffix: Not Used
  • Frontend - Backend
  • FRONTEND

    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

    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

    4.2.8 My Photos - SJ Gallery

  • Module Position - Module Suffix
  • Position: position7
    Suffix: grid-1
  • Frontend - Backend
  • FRONTEND

    4.2.9 Login Form

  • Module Position - Module Suffix
  • Position: position7
    Suffix: grid-1
  • Frontend - Backend
  • FRONTEND

    4.2.10 Who's Online

  • Module Position - Module Suffix
  • Position: position7
    Suffix: grid-1 clear useronline
  • Frontend - Backend
  • FRONTEND

    4.2.11 Smart Search

  • Module Position - Module Suffix
  • Position: usera
    Suffix: Not used
  • Frontend - Backend
  • FRONTEND

    4.2.12 Get connected with us - Custom HTML

  • Module Position - Module Suffix
  • Position: userb
    Suffix: connect-us
  • Frontend - Backend
  • FRONTEND

    4.2.13 Most popular - K2 Content

  • Module Position - Module Suffix
  • Position: user6
    Suffix: clear
  • Frontend - Backend
  • FRONTEND

    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.

    Contents

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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)

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

    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
    alt

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

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

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

    3. Imperative Plugins-Installation and Configuration

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

    3.1 INSTALLATION

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


    • STEP 2: Perform enable to SJ Core and Yt Plugin in Extension/Plug-in Manager

    3.2 CONFIGURATION - YT Plugin(for Yt Framework)

  • Yt Plugin supports for Optimizing CSS/ JS/ HTML and Mega Menu. You can see part of optimizing CSS/JS/HTML in configuration of SJ Education and supporting for Mega Menu in any Menu Items. Please see the following example:
  • SUPPORT OPTIMIZING CSS/ JS/ HTML AND MEGA MENU
  • After installing Yt Plugin, please to go Extension/Plug-in Manager and then go to config Yt Plugin as below:
  • GO TO CONFIG PLUGIN
  • In configuration of Yt Plugin, we support for showing SJ Help with Report Bugs, Template Tutorials, Framework Tutorials
  • SHOWING SJ HELP

    4. Extensions - Installation and Configuration

    4.1 INSTALLATION

    4.1.1 List of extensions used in SJ Education demo

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

    4.1.2 Installation

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


    • Install all of the rest extensions as above

    4.2 CONFIGURATION

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

    4.2.1 SJ Content Slideshow Module

  • Module Position - Module Suffix
  • Position: slide_show
    Suffix: Not Used
  • Frontend - Backend
  • FRONTEND - SJ CONTENT SLIDESHOW
    BACKEND - SJ CONTENT SLIDESHOW

    4.2.2 Showing Content Component

    This part will help you to show the Frontpage at Home Site. First, go to Menus/ Main Menu/ Home then go to Edit Menu Item - Home
  • Frontend - Backend
  • FRONTEND - CONTENT COMPONENT
    BACKEND - CONTENT COMPONENT

    4.2.3 SJ Article Slider Module - Upcoming events

  • Module Position - Module Suffix
  • Position: main_bottom1
    Suffix: title3
  • Frontend - Backend
  • FRONTEND - UPCOMING EVENTS
    BACKEND - UPCOMING EVENTS

    4.2.4 SJ Basic News Module - About Programs

  • Module Position - Module Suffix
  • Position: main_bottom2
    Suffix: title3
  • Frontend - Backend
  • FRONTEND - ABOUT PROGRAMS
    BACKEND - ABOUT PROGRAMS

    4.2.5 Module Latest News

  • Module Position - Module Suffix
  • Position: right_top
    Suffix: Not Used
  • Frontend - Backend
  • FRONTEND - MODULE LATEST NEWS
    BACKEND - MODULE LATEST NEWS

    4.2.6 SJ Article Slider Module - Our Teachers

  • Module Position - Module Suffix
  • Position: right
    Suffix: Not Used
  • Frontend - Backend
  • FRONTEND - OUR TEACHERS
    BACKEND - OUR TEACHERS

    4.2.7 SJ Basic News Module - Our Mission

  • Module Position - Module Suffix
  • Position: right
    Suffix: title1 custom-basicnew
  • Frontend - Backend
  • FRONTEND - OUR MISSION
    BACKEND - OUR MISSION

    4.2.8 Custom HTML - Mobile Ready

  • Module Position - Module Suffix
  • Position: right_bottom
    Suffix: icon info
  • Frontend - Backend
  • FRONTEND - MOBILE READY
    BACKEND - MOBILE READY

    4.2.9 Custom HTML - Testimonials

  • Module Position - Module Suffix
  • Position: content_bottom
    Suffix: icon testimonials
  • Frontend - Backend
  • FRONTEND - TESTIMONIALS
    BACKEND - TESTIMONIALS

    4.2.10 Module Menu

  • Module Position - Module Suffix
  • Position: user10, user11, user12
    Suffix: Not Used
  • Frontend - Backend
  • FRONTEND - MODULE MENU
    BACKEND - MODULE MENU

    4.2.11 Custom HTML - Contact Us

  • Module Position - Module Suffix
  • Position: user13
    Suffix: Not Used
  • Frontend - Backend
  • FRONTEND - CONTACT US
    BACKEND - CONTACT US

    4.2.12 Custom HTML - Newsletter

  • Module Position - Module Suffix
  • Position: user14
    Suffix: newsletter
  • Frontend - Backend
  • FRONTEND - NEWSLETTER
    BACKEND - NEWSLETTER

    4.2.13 Mega Menu - Features

  • Menu Item Type
  • Menu Item Type: Text Separator
  • Frontend - Backend
  • FRONTEND - MEGA MENU FEATURES
    BACKEND - MEGA MENU FEATURES
    BACKEND - TREE OF MEGA ITEMS

    4.2.14 Mega Menu - Joomla

  • Menu Item Type
  • Menu Item Type: Text Separator
  • Frontend - Backend
  • FRONTEND - MEGA MENU JOOMLA
    BACKEND - MEGA MENU JOOMLA
    BACKEND - TREE OF MEGA ITEMS
    BACKEND - ABOUT JOOMLA
    BACKEND - FEATURED ARTICLES

    4.2.15 Mega Menu - K2

  • Menu Item Type
  • Menu Item Type: Text Separator
  • Frontend - Backend
  • FRONTEND - MEGA MENU K2
    BACKEND - MEGA MENU K2
    BACKEND - TREE OF MEGA ITEMS
    BACKEND - K2 CATEGORIES
    BACKEND - FEATURED ITEMS

    4.2.16 Mega Menu - Virtuemart

  • Menu Item Type
  • Menu Item Type: Text Separator
  • Frontend - Backend
  • FRONTEND - MEGA MENU VIRTUEMART
    BACKEND - MEGA MENU VIRTUEMART
    BACKEND - TREE OF MEGA ITEMS
    BACKEND - K2 VIRTUEMART
    BACKEND - NEW PRODUCTS
    First of all, make sure you always download the newest version of template

    REQUIREMENTS

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

    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
    alt

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

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

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

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

    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
    alt

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

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

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

    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
    alt

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

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

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

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

    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
    alt

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

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

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

    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
    alt

    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
    alt

    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
    alt

    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
    alt

    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
    Page 5 of 7

    Love all our templates?

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

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