0
Go To Cart
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
Go To Cart Total : 0 checkout
You are here: HomeJoomla TemplatesTemplate User-GuidesSJ Model Template Userguide

SJ Model Template Userguide

June.29.2012
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

    Love all our templates?

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

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