Black Friday"
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 News Template Userguide

SJ News Template Userguide

December.31.2011
The 4-part guideline will help you easily install SJ News and all extensions included in this template step by step.
  • 1. Download Template and Extensions
  • 2. SJ News 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 News 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 News Template as default template

2.2 CONFIGURATION

The parameters of SJ News 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_news17/layouts folder without tail .xml
alt

STYLE SETTINGS

  • Default Style - Choose a suitable style for your site. There're 3 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. 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 News 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 are used in SJ News demo

    You can find a list of modules/plugins which are used in SJ News on Features Menu/Template Info - 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 News 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: slideshow
  • Frontend - Backend
    • FRONTEND - SJ CONTENT SLIDESHOW
    BACKEND - SJ CONTENT SLIDESHOW

    4.2.2 SJ New Extra Slider

  • Module Position - Module Suffix
    • Position: news_extra
    Suffix: Not Use
  • Frontend - Backend
    • FRONTEND - SJ NEW EXTRA SLIDER - TOP NEWS
    BACKEND - SJ NEW EXTRA SLIDER - TOP NEWS

    4.2.3 Module Login

  • Module Position - Module Suffix
    • Position: header1
    Suffix: Not Used
  • Frontend - Backend
    • FRONTEND - MODULE LOGIN
    BACKEND - MODULE LOGIN

    4.2.4 Module Search

  • Module Position - Module Suffix
    • Position: header1
    Suffix: Not Used
  • Frontend - Backend
    • FRONTEND - MODULE SEARCH
    BACKEND - MODULE SEARCH

    4.2.5 YT Title Flash

  • Module Position - Module Suffix
    • Position: ct1
    Suffix: Not Used
  • Frontend - Backend
    • FRONTEND - YT TITLE FLASH - LATEST HEADLINES
    BACKEND - YT TITLE FLASH - LATEST HEADLINES

    4.2.6 So Article Slider

  • Module Position - Module Suffix
    • Position: ct1
    Suffix: Not Used
  • Frontend - Backend
    • FRONTEND - SO ARTICLE SLIDER
    BACKEND - SO ARTICLE SLIDER

    4.2.7 Module Latest News

  • Module Position - Module Suffix
    • Position: left
    Suffix: lastest_news
  • Frontend - Backend
    • FRONTEND - MODULE LATEST NEWS - COLUMNISTS
    BACKEND - MODULE LATEST NEWS - COLUMNISTS

    4.2.8 SJ Basic News

  • Module Position - Module Suffix
    • Position: left
    Suffix: border2 basic_news
  • Frontend - Backend
    • FRONTEND - SJ BASIC NEWS - FEATURES
    BACKEND - SJ BASIC NEWS - FEATURES

    4.2.9 SJ Mega News

  • Module Position - Module Suffix
    • Position: content-top
    Suffix: mega-news
  • Frontend - Backend
    • FRONTEND - SJ MEGA NEWS - HEALTH - TECHNOLOGY - SPORT NEWS - ENTERTAINMENT
    BACKEND - SJ MEGA NEWS - HEALTH - TECHNOLOGY - SPORT NEWS - ENTERTAINMENT

    4.2.10 Custom HTML - Top Video Picks

    This module is used for Plugin Yt Mega Popup - 4.2.11
  • Module Position - Module Suffix
    • Position: right
    Suffix: video bgcolor
  • Frontend - Backend
    • FRONTEND - CUSTOM HTML - TOP VIDEO PICKS
    BACKEND - CUSTOM HTML - TOP VIDEO PICKS
    CODE - CUSTOM LOCATIONS - Refer guide for YT Mega Popup 
    
{ytpopup type="youtube" content="https://www.youtube.com/v/_Z5-P9v3F8w" width="400" height="300" title="Justin Bieber - Never Say... " }<img src="/images/customhtml/video1.png" border="0" alt="normal-view3" />{/ytpopup} Justin Bieber sings at UD...
{ytpopup type="youtube" content="https://www.youtube.com/v/w8Wiq-POmFA" width="400" height="300" title="Sport Science: Dwight Howard Max Vert Reach"}<img src="/images/customhtml/video2.png" border="0" alt="normal-view3" />{/ytpopup} Sport Science: Dwight (11/17/11)...



{ytpopup type="youtube" content="https://www.youtube.com/v/IxXDBDRfIA4" width="400" height="300" title="World Sport TV: Roger Federer on 16 Grand Slams "}<img src="/images/customhtml/video3.png" border="0" alt="normal-view3" />{/ytpopup} World Sport TV: Roger Federer...
{ytpopup type="youtube" content="https://www.youtube.com/v/MO4nKF6ehts" width="400" height="300" title="Shooting in Shark River Hills with Facial Hair "}<img src="/images/customhtml/video4.png" border="0" alt="normal-view3" />{/ytpopup} Shooting in Shark River Hills...

<a href="#">More Video</a>

    4.2.11 Plugin YT Mega Popup

  • Frontend - Backend
    • FRONTEND - PLUGIN YT MEGA POPUP
    BACKEND - PLUGIN YT MEGA POPUP

    4.2.12 SJ Module Tabs

    This module will load modules which are customed by HTML - INDICATORS - WINNERS - LOSERS
  • Module Position - Module Suffix
    • Position: right
    Suffix: bgcolor tabs
  • Frontend - Backend
    • FRONTEND - SJ MODULE TABS
    BACKEND - SJ MODULE TABS

    4.2.13 Custom HTML - Follow SJ News

  • Module Position - Module Suffix
    • Position: right
    Suffix: bgcolor links
  • Frontend - Backend
    • FRONTEND - FOLLOW SJ NEWS
    BACKEND - FOLLOW SJ NEWS

    4.2.14 YT Facebook

  • Module Position - Module Suffix
    • Position: right
    Suffix: bgcolor facebook
  • Frontend - Backend
    • FRONTEND - YT FACEBOOK - COMMUNITY
    BACKEND - YT FACEBOOK - COMMUNITY

    4.2.15 SJ News Scrollbar

  • Module Position - Module Suffix
    • Position: right
    Suffix: most-news
  • Frontend - Backend
    • FRONTEND - SJ NEWS SCROLLBAR - MOST READ NEWS
    BACKEND - SJ NEWS SCROLLBAR - MOST READ NEWS

    4.2.16 SJ News Ajax Tabs

  • Module Position - Module Suffix
    • Position: ct2
    Suffix: ajax-tabs
  • Frontend - Backend
    • FRONTEND - SJ NEWS AJAX TABS
    BACKEND - SJ NEWS AJAX TABS

    4.2.17 SJ Content Accordion

  • Module Position - Module Suffix
    • Position: ct3
    Suffix: accordion
  • Frontend - Backend
    • FRONTEND - SJ CONTENT ACCORDION
    BACKEND - SJ CONTENT ACCORDION

    4.2.18 SJ Mega News

  • Module Position - Module Suffix
    • Position: new1, new2, new3, new4, new5, new6
    Suffix: Not Use
  • Frontend - Backend
    • FRONTEND - SJ MEGA NEWS - TRAVEL - HEALTH - ENTERTAINMENT - SPORT - WORLD - POLITICS
    BACKEND - SJ MEGA NEWS - TRAVEL - HEALTH - ENTERTAINMENT - SPORT - WORLD - POLITICS

    4.2.19 Custom HTML

  • Module Position - Module Suffix
    • Position: user14
    Suffix: link_news
  • Frontend - Backend
    • FRONTEND - CUSTOM HTML - LINK NEWS
    BACKEND - CUSTOM HTML - LINK NEWS

    4.2.20 Custom HTML

  • Module Position - Module Suffix
    • Position: user13
    Suffix: localtions
  • Frontend - Backend
    • FRONTEND - CUSTOM HTML - LOCATIONS
    BACKEND - CUSTOM HTML - LOCATIONS

    4.2.21 Custom HTML

  • Module Position - Module Suffix
    • Position: user15
    Suffix: newsletter
  • Frontend - Backend
    • FRONTEND - CUSTOM HTML - MONTHLY NEWSLETTER
    BACKEND - CUSTOM HTML - MONTHLY NEWSLETTER

    4.2.22 SJ Content Slideshow

  • Module Position - Module Suffix
    • Position: user16
    Suffix: slideshow
  • Frontend - Backend
    • FRONTEND - SJ CONTENT SLIDESHOW - NEW TEMPLATES
    BACKEND - CUSTOM HTML - SJ CONTENT SLIDESHOW - NEW TEMPLATES

    4.2.23 Module Menu

  • Module Position - Module Suffix
    • Position: footnav
    Suffix: menu_footer
  • Frontend - Backend
    • FRONTEND - MODULE MENU - MENU FOOTER
    BACKEND - MODULE MENU - MENU FOOTER

    4.2.24 Mega Menu - Features

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

    4.2.25 Mega Menu - World

    This menu will load 3 modules which are in position "menu-world" - EUROPE - US POLITICS - QUICK LINKS
  • Menu Item Type
    • Menu Item Type: Category Blog
  • Frontend - Backend
    • FRONTEND - MEGA MENU - WORLD
    BACKEND - MEGA MENU - WORLD

    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