• 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