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

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

• Global Settings
• Site Styles
• Typography
• Layout Settings
• Top Menu Settings
• Content Component
• Optimize Css, Js
• Advanced Options

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

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

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

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

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

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

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

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

TO YT PLUGIN

SHOWING SJ HELP

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.3 Menu - Joomla! Pages

Menu Item Type

Menu Item Type: Single Article

Frontend - Backend

FRONTEND

BACKEND - TREE OF MENUS

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

• Joomla! 2.5
• VM component (customized and included in Quickstart)
• Some premium SJ Extensions (see part 3-Core Plugins and 4-Other Extensions)

Receive Donwload-Info email -> Download packages as you want

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 FashionStore as default template
  
  

2.2 Configuration

• Global Settings
• Layout Settings
• Site Styles
• Typography
• Top Menu Settings
• Content Component
• Optimize CSS,JS
• Advanced Options

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

LAYOUT SETTINGS

• Select Layout - Allow to set default layout xml file
• 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

SITE STYLES

• Default Style - Allow to choose a style from 6 available ones
• Link color - Set color for link
• Text color - Set color for text
• Footer background color - Set color for background of footer
• Class footer background image - Set CSS class using for image background of footer

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

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

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

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
• Optimize HTML - Allow to use Optimize HTML feature

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.1 Installation

• Yt Plugin and SJ Core has been integrated in template file. Now you install SJ Content Related News
• STEP 1: In Administrator on Joomla! v2.5.x, go to Extensions -> Extension Manager
  On this page, click Choose File button, choose plugin file plg_content_sj_relatednews.zip (extracted from sj_fashion_extensions_j25_v1.0.zip) from then click Upload & Install
  
  
  
• STEP 2:Now, go to Enable SJ Core, Yt Plugin (for Yt Framework) and SJ Content Related News in Extension/Plug-in Manager

4.2.4 Social buttons - Custom HTML

Frontend (demo layout above) - Backend

BACKEND

4.2.5 Slideshow - Sj Vm Slideshow Responsive Module

Frontend (demo layout above) - Backend

BACKEND

4.2.6 SJ Accordion Menu

Frontend (demo layout above) - Backend

BACKEND

4.2.7 Banners

Frontend (demo layout above) - Backend

BACKEND

4.2.8 Who's online Module

Frontend (demo layout above) - Backend

BACKEND

4.2.9 Lastest News - SJ Basic News Module

Frontend (demo layout above) - Backend

BACKEND

4.2.10 Featured products - SJ Vm Slider Responsive

Frontend (demo layout above) - Backend

BACKEND

4.2.11 Sj Vm Ajax Tabs Responsive Module

Frontend (demo layout above) - Backend

BACKEND

4.2.12 This Site - Menu Module

Frontend (demo layout above) - Backend

BACKEND

4.2.13 Sj Article Slider Responsive

Frontend (demo layout above) - Backend

BACKEND

4.2.14 Footer

Now there are not modules placed in this position. You can try some ones.

• Joomla! 1.7 or 2.5, prefer latest
• K2 component (customized and included in Quickstart)
• Premium SJ Extensions (included, see part 3-Core Plugins and 4-Other Extensions)

Receive Donwload-Info email -> Download packages as you want

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 EPhoto Responsive as default template
  
  

2.2 Configuration

• Global Settings
• Layout Settings
• Style Settings
• Top Menu Settings
• Content Component
• Advanced Options

GLOBAL SETTINGS

• Generator tag - Generate tag for your template
• Hide Main Content Block - Allow to hide Content Component 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

LAYOUT SETTINGS

• Window layout - Layout 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

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

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

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

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

SUPPORT OPTIMIZING CSS/JS/HTML AND STYLING MEGA MENUS

TO YT PLUGIN

SHOWING SJ HELP

4.1 Install

4.1.1 List of extensions used in SJ EPhoto Responsive demo

You can find a list of modules/plugins/components which are used in SJ EPhoto Responsive by clicking menu Features -> Extensions of demo Website

4.2 Configuration

After installing extensions which are included in the SJ EPhoto 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

BACKEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.2 Mega Menu - Joomla!

Menu Item Type

Menu Item Type: Text Separator

Frontend - Backend

BACKEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.3 Mega Menu - K2

Menu Item Type

Menu Item Type: K2 - Categories

Frontend - Backend

BACKEND

BACKEND - YT MENU PARAMS

BACKEND - TREE OF MENUS

4.2.4 Custom HTML Modules

There are some positions that used Custom HTML modules, in quite same way: user1, usera, userb, userc, userd, userf. Here we will configure an example for custom HTML modules. Let take "Royalty Free Stock Photos and Vectors", other will be the same.

Module Position - Module Suffix

Position: user1
Suffix: blank title4 hidden-mobi

Frontend (please check default layout above) - Backend

BACKEND

4.2.5 Smart Search

Module Position - Module Suffix

Position: user2
Suffix: Not used

Frontend (please check default layout above) - Backend

BACKEND

4.2.6 Sj K2 Slider Module

Module Position - Module Suffix

Position: main_top
Suffix: grid-3 title1

Frontend (please check default layout above) - Backend

BACKEND

4.2.7 SJ K2 Accordion Module

Module Position - Module Suffix

Position: sidebar-1 (first)
Suffix: grid-1 hidden-mobi

Frontend (please check default layout above) - Backend

BACKEND

4.2.8 Popular Photos - K2 Content Module

Module Position - Module Suffix

Position: sidebar-1 (second)
Suffix: blank grid-1

Frontend (please check default layout above) - Backend

BACKEND

4.2.9 Who's online Module

Module Position - Module Suffix

Position: sidebar-1 (third)
Suffix: grid-1 border2 style-icon icon-smileys

Frontend (please check default layout above) - Backend

BACKEND

4.2.10 Main Menu - K2 Tools Module

Module Position - Module Suffix

Position: sidebar-2 (first)
Suffix: _menu grid-1

Frontend (please check default layout above) - Backend

BACKEND

4.2.11 Login Module

Module Position - Module Suffix

Position: sidebar-2 (second)
Suffix: grid-1 style-bg bg1 style-icon icon-login

Frontend (please check default layout above) - Backend

BACKEND

4.2.12 SJ Facebook

Module Position - Module Suffix

Position: usere
Suffix: blank like-fb

Frontend (please check default layout above) - Backend

BACKEND

4.2.13 Menu Modules

There are some positions that used Menu modules, in quite same way: user10, user11, user12. Here we will configure an example. Let take "Joomla Templates", other will be the same.

Module Position - Module Suffix

Position: usere
Suffix: style-bg bg2 corner-bg2

Frontend (please check default layout above) - Backend

BACKEND

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

Receive Donwload-Info email -> Download packages as you want

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

• Global Settings
• Main Body Column Settings
• Layout Settings
• Style Settings
• Top Menu Settings
• Content Component
• Advanced Options

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

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

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

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

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

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

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

SUPPORT OPTIMIZING CSS/JS/HTML AND STYLING MEGA MENUS

TO YT PLUGIN

SHOWING SJ HELP

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

BACKEND

4.2.6 Login Module

Module Position - Module Suffix

Position: top2
Suffix: Not Used

Frontend - Backend

FRONTEND

BACKEND

4.2.7 Smart Search

Module Position - Module Suffix

Position: nav2
Suffix: Not used

Frontend - Backend

FRONTEND

BACKEND

4.2.8 Mega K2 News

Module Position - Module Suffix

Position: main_bottom
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

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

BACKEND

4.2.10 K2 Tool Module

Module Position - Module Suffix

Position: left
Suffix: _menu

Frontend - Backend

FRONTEND

BACKEND

4.2.11 SJ K2 Categories Accordion

Module Position - Module Suffix

Position: left
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.12 Statistics Module

Module Position - Module Suffix

Position: left_bottom
Suffix: Not used

Frontend - Backend

FRONTEND

BACKEND

4.2.13 In Pictures - SJ Gallery Module

Module Position - Module Suffix

Position: right_top
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

4.2.14 Latest News - SJ K2 Slider

Module Position - Module Suffix

Position: content_bottom
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

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

BACKEND

4.2.16 SJ K2 Extra Slider

Module Position - Module Suffix

Position: user12
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

• Joomla! 2.5
• K2 component (customized by this template)
• SJ Extensions (see part 3 Core Plugins and 4 Other Extensions)

Receive Donwload-Info email -> Download packages as you want

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

• Global Settings
• Layout Settings
• Style Settings
• Top Menu Settings
• Content Component
• Advanced Options

GLOBAL SETTINGS

• Generator tag - Generate tag for your template
• Hide Main Content Block - Allow to hide Content Component 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

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

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

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

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

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

SUPPORT OPTIMIZING CSS/JS/HTML AND STYLING MEGA MENUS

TO YT PLUGIN

SHOWING SJ HELP

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

BACKEND

4.2.5 Hello... - Custom HTML

Module Position - Module Suffix

Position: slideshow2
Suffix: Not Used

Frontend - Backend

FRONTEND

BACKEND

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

BACKEND

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

BACKEND

4.2.8 My Photos - SJ Gallery

Module Position - Module Suffix

Position: position7
Suffix: grid-1

Frontend - Backend

FRONTEND

BACKEND

4.2.9 Login Form

Module Position - Module Suffix

Position: position7
Suffix: grid-1

Frontend - Backend

FRONTEND

BACKEND

4.2.10 Who's Online

Module Position - Module Suffix

Position: position7
Suffix: grid-1 clear useronline

Frontend - Backend

FRONTEND

BACKEND

4.2.11 Smart Search

Module Position - Module Suffix

Position: usera
Suffix: Not used

Frontend - Backend

FRONTEND

BACKEND

4.2.12 Get connected with us - Custom HTML

Module Position - Module Suffix

Position: userb
Suffix: connect-us

Frontend - Backend

FRONTEND

BACKEND

4.2.13 Most popular - K2 Content

Module Position - Module Suffix

Position: user6
Suffix: clear

Frontend - Backend

FRONTEND

BACKEND

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

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

Receive Donwload-Info email -> Download packages as you want

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

• Global Settings
• MainBody Column Settings
• Layout Settings
• Style Settings
• Top Menu Settings
• Content Component
• Advanced Options

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

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

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

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

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

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

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

SUPPORT OPTIMIZING CSS/JS/HTML AND STYLING MEGA MENUS

TO YT PLUGIN

SHOWING SJ HELP

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