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

Contents

The guide will help you install SJ Joomla3 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 Joomla3 Template - Installation and Configuration
  • 3. Imperative Plugins - Installation and Configuration
  • 4. Other Extensions - Installation and Configuration

Important Notes

Requirement:
  • Joomla! 3.0
  • Some SJ Extensions (see part 3-Core Plugins and 4-Other Extensions)

1. Download Template and Extensions

Used for everyone downloading this Free Joomla Template

From SmartAddons homepage, navigate into Free Joomla Template

Click SJ Joomla3 then download packages as you want (guide here we will use template and Yt plugin but Quickstart)

2. SJ Joomla3 -Installation and Configuration

2.1 Installation

  • Log in Administrator of your Joomla! 3, 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 Joomla3 as default template

2.2 Configuration

Now, Click sj_joomla3 - Default to access SJ Joomla3 Options tab.
The parameters of SJ Joomla3 Template are divided into the following groups:
  • Global Settings
  • Site Styles
  • Typography
  • Layout Settings
  • Top Menu Settings
  • Content Component
  • Optimize Css, Js
  • Advanced Options
alt

GLOBAL SETTINGS

  • Generator tag - Generate tag for your template
  • Hide Main Content Block - Allow to hide Content Component on Homepage
  • Logo Type - Choose your logo type: image OR text
  • Override logo image - Set logo image of Cpanel by inserting its link/path here
  • Logo Text - Set text for Text type of logo
  • Slogan - Set your Website slogan here
alt

SITE STYLES

  • Default Style - Allow to choose a style from 6 available ones
  • Body Background Color - Allow to choose color for background of page body
  • Link Color - Allow to choose color for all links
  • Text Color - Allow to choose color for all texts
  • Header Background Color - Allow to choose color for background of header
  • Class Header Background Image - Allow to set CSS class used with image of header
  • Footer Background Color - Allow to choose color for background of footer
  • Class Footer Background Image - Allow to set CSS class used with image of footer
alt

TYPOGRAPHY

  • 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

LAYOUT SETTINGS

  • Select Layout - Allow to choose XML layout: right-main-left, main-left ....
  • Overwrite Layouts - Used 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

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 currently support CSS style for Menus
  • 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

OPTIMIZE CSS, JS

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

ADVANCED OPTIONS

  • Show Back to Top - Allow you to show Back to Top button OR not
  • Show Cpanel - Allow you to show YT Framework Control panel OR not
  • Include LazyLoad plugin - Enable/disable LazyLoad
  • 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

3. Imperative Plugins-Installation and Configuration

You need to install Yt Plugin to supports Yt Framework for compressing CSS/JS/HTML when optimizing code.

3.1 Installation

  • STEP 1: In Administrator on your Joomla! 3, go to Extensions -> Extension Manager
    On this page, click Choose File button, choose YT plugin file then click Upload & Install


  • STEP 2:Now, go to Enable 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 (part 6 of Configuration above)
  • 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 Framework Tutorials
  • SHOWING SJ HELP

    4. Other Extensions - Installation and Configuration

    4.1 Install

    4.1.1 List of extensions used in SJ Joomla3 demo

    List of modules/plugins/components which are used in SJ Joomla3 here:

    4.2 Configuration

    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 (one example each type) and other blocks as homepage of demo Website:

    4.2.1 Menu - Features

  • Menu Item Type
  • Menu Item Type: Single Article
  • Frontend - Backend
  • FRONTEND
    BACKEND - TREE OF MENUS

    4.2.2 Menu - Blog

  • Menu Item Type
  • Menu Item Type: Category Blog

    4.2.3 Menu - Joomla! Pages

  • Menu Item Type
  • Menu Item Type: Single Article
  • Frontend - Backend
  • FRONTEND
    BACKEND - TREE OF MENUS

    4.2.4 Menu - Contact

  • Menu Item Type
  • Menu Item Type: Single Contact

    4.2.5 Search Bar

  • Module Position - Module Suffix
  • Position: position-0
    Suffix: Not Used
  • Frontend (position-0 of demo layout above) - Backend
  • 4.2.6 Slideshow - SJ Carousel

  • Module Position - Module Suffix
  • Position: slideshow
    Suffix: blank
  • Frontend (slideshow of demo layout above) - Backend
  • 4.2.7 Custom HTML

    There are some positions that used Custom HTML Module. Here we will configure an example. Let take the "Web Design", other will be the same.

  • Module Position - Module Suffix
  • Position: position-a
    Suffix: border1
  • Frontend (position-a of demo layout above) - Backend
  • 4.2.8 Main Menu

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

  • Module Position - Module Suffix
  • Position: position-6 (first)
    Suffix: Not Used
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.9 Statistics Module

  • Module Position - Module Suffix
  • Position: position-6 (third)
    Suffix: _menu
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.10 Banners Module

  • Module Position - Module Suffix
  • Position: position-6 (forth)
    Suffix: clear hidden-max676
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.11 Who's online Module

  • Module Position - Module Suffix
  • Position: position-6 (fifth)
    Suffix: style-icon mouse
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.12 Latest News - SJ Basic News

    There are some positions that used SJ Basic News Module. Here we will configure an example. Let take the Main menu, other will be the same only minor different in configuration.

  • Module Position - Module Suffix
  • Position: position-7 (first)
    Suffix: bg1 latestnews
  • Frontend - Backend
  • 4.2.13 Login Module

  • Module Position - Module Suffix
  • Position: position-7 (third)
    Suffix: Not Used
  • Frontend - Backend
  • 4.2.14 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 Joomla3 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 Joomla3 Template - Installation and Configuration
    • 3. Imperative Plugins - Installation and Configuration
    • 4. Other Extensions - Installation and Configuration

    Important Notes

    Requirement:
    • Joomla! 3.0
    • Some SJ Extensions (see part 3-Core Plugins and 4-Other Extensions)

    1. Download Template and Extensions

    Used for everyone downloading this Free Joomla Template

    From SmartAddons homepage, navigate into Free Joomla Template

    Click SJ Joomla3 then download packages as you want (guide here we will use template and Yt plugin but Quickstart)

    2. SJ Joomla3 -Installation and Configuration

    2.1 Installation

    • Log in Administrator of your Joomla! 3, 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 Joomla3 as default template

    2.2 Configuration

    Now, Click sj_joomla3 - Default to access SJ Joomla3 Options tab.
    The parameters of SJ Joomla3 Template are divided into the following groups:
    • Global Settings
    • Site Styles
    • Typography
    • Layout Settings
    • Top Menu Settings
    • Content Component
    • Optimize Css, Js
    • Advanced Options
    alt

    GLOBAL SETTINGS

    • Generator tag - Generate tag for your template
    • Hide Main Content Block - Allow to hide Content Component on Homepage
    • Logo Type - Choose your logo type: image OR text
    • Override logo image - Set logo image of Cpanel by inserting its link/path here
    • Logo Text - Set text for Text type of logo
    • Slogan - Set your Website slogan here
    alt

    SITE STYLES

    • Default Style - Allow to choose a style from 6 available ones
    • Body Background Color - Allow to choose color for background of page body
    • Link Color - Allow to choose color for all links
    • Text Color - Allow to choose color for all texts
    • Header Background Color - Allow to choose color for background of header
    • Class Header Background Image - Allow to set CSS class used with image of header
    • Footer Background Color - Allow to choose color for background of footer
    • Class Footer Background Image - Allow to set CSS class used with image of footer
    alt

    TYPOGRAPHY

    • 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

    LAYOUT SETTINGS

    • Select Layout - Allow to choose XML layout: right-main-left, main-left ....
    • Overwrite Layouts - Used 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

    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 currently support CSS style for Menus
    • 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

    OPTIMIZE CSS, JS

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

    ADVANCED OPTIONS

    • Show Back to Top - Allow you to show Back to Top button OR not
    • Show Cpanel - Allow you to show YT Framework Control panel OR not
    • Include LazyLoad plugin - Enable/disable LazyLoad
    • 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

    3. Imperative Plugins-Installation and Configuration

    You need to install Yt Plugin to supports Yt Framework for compressing CSS/JS/HTML when optimizing code.

    3.1 Installation

    • STEP 1: In Administrator on your Joomla! 3, go to Extensions -> Extension Manager
      On this page, click Choose File button, choose YT plugin file then click Upload & Install


    • STEP 2:Now, go to Enable 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 (part 6 of Configuration above)
  • 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 Framework Tutorials
  • SHOWING SJ HELP

    4. Other Extensions - Installation and Configuration

    4.1 Install

    4.1.1 List of extensions used in SJ Joomla3 demo

    List of modules/plugins/components which are used in SJ Joomla3 here:

    4.2 Configuration

    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 (one example each type) and other blocks as homepage of demo Website:

    4.2.1 Menu - Features

  • Menu Item Type
  • Menu Item Type: Single Article
  • Frontend - Backend
  • FRONTEND
    BACKEND - TREE OF MENUS

    4.2.2 Menu - Blog

  • Menu Item Type
  • Menu Item Type: Category Blog

    4.2.3 Menu - Joomla! Pages

  • Menu Item Type
  • Menu Item Type: Single Article
  • Frontend - Backend
  • FRONTEND
    BACKEND - TREE OF MENUS

    4.2.4 Menu - Contact

  • Menu Item Type
  • Menu Item Type: Single Contact

    4.2.5 Search Bar

  • Module Position - Module Suffix
  • Position: position-0
    Suffix: Not Used
  • Frontend (position-0 of demo layout above) - Backend
  • 4.2.6 Slideshow - SJ Carousel

  • Module Position - Module Suffix
  • Position: slideshow
    Suffix: blank
  • Frontend (slideshow of demo layout above) - Backend
  • 4.2.7 Custom HTML

    There are some positions that used Custom HTML Module. Here we will configure an example. Let take the "Web Design", other will be the same.

  • Module Position - Module Suffix
  • Position: position-a
    Suffix: border1
  • Frontend (position-a of demo layout above) - Backend
  • 4.2.8 Main Menu

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

  • Module Position - Module Suffix
  • Position: position-6 (first)
    Suffix: Not Used
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.9 Statistics Module

  • Module Position - Module Suffix
  • Position: position-6 (third)
    Suffix: _menu
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.10 Banners Module

  • Module Position - Module Suffix
  • Position: position-6 (forth)
    Suffix: clear hidden-max676
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.11 Who's online Module

  • Module Position - Module Suffix
  • Position: position-6 (fifth)
    Suffix: style-icon mouse
  • Frontend (position-6 of demo layout above) - Backend
  • 4.2.12 Latest News - SJ Basic News

    There are some positions that used SJ Basic News Module. Here we will configure an example. Let take the Main menu, other will be the same only minor different in configuration.

  • Module Position - Module Suffix
  • Position: position-7 (first)
    Suffix: bg1 latestnews
  • Frontend - Backend
  • 4.2.13 Login Module

  • Module Position - Module Suffix
  • Position: position-7 (third)
    Suffix: Not Used
  • Frontend - Backend
  • 4.2.14 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.
    Last modified on 14

    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