JA Fixel is our August 2013 responsive Joomla template for business, portfolio or personal blog. It includes support for EasyBlog and JoomShopping component and also supports RTL language layouts by default.

Fixel has an innovative design with Grid View homepage for images, texts, galleries and videos display. The template supports lively animations for each grid which will amaze your viewers.

Built on the robust T3 Framework, the template is fully responsive and supports RTL language layout. JA Fixel features sticky mega menu, EasyBlog, Filter Tag Cloud (applied for Joomla 3 only).

1. Main Features

• Filter Tag Cloud (applied for Joomla 3 only)
• Developed with T3 Framework & Bootstrap
• Supports Joomla 2.5 and Joomla 3.0
• Infinity scroll (auto load items when scrolling down)
• Default Joomla pages supported
• Supports Mega Menu
• Filter Tag Cloud (applied for Joomla 3.x only)
• Supports multiple layouts
• Supports multiple themes
• Supports RTL language
• Supports JoomShopping
• Supports EasyBlog

2. JA Extensions Supported

• JA Slideshow Lite module
• JA Twitter module
• JA Masshead module
• JA Google Map plugin
• JA Bookmark plugin
• T3 Framework plugin
• JA Extensions Manager Component

3. Third Party Extensions Supported

• JoomShopping Component
• EasyBlog Component

4. Layout and Module Positions

Please check the image below to know the structure, layout, module positions of JA Fixel.

1. Plan your site Development

• Making a New Site ? - If you are planning to make a new site, then use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package.
• Installing on your live site ? - If you are planning to use this template on your already live site. Then you should follow How to make your site look like demo site guide first to know about the steps involved.

2. Download Template and Extensions

Browse and Download: Go to the Download page of JA Fixel and download the template zip file.

3. Install Template

Install the template: Now install the template on your Joomla 2.5 & Joomla 3.0 system. Follow This Guide if you are not familiar with the installation procedure.

4. Install Extensions

JA Fixel template will install with settings used on the demo website, so you can postpone the configuration until you complete the setup (install other modules / plugins used in the demo website).

1. JA Slideshow Lite Module

Module position: home-1
Module Suffix : grid-3x2 grid-pos-1 slideshow

• Back-end Settings

2. JA Twitter Modules

Module position : home-1
Module Suffix :  grid1x1 grid-pos-13 mod-twitter

• Back-end Settings

3. JA Masshead module

Module position : home-1
Module Suffix :  grid-2x2 grid-pos-1 highlight big-padding

• Back-end Settings

4. JA Bookmark Plugin

This plugin helps your visitors to promote your site and allows visitors to bookmark your pages easily with many popular services like: Facebook, Twitter, Pinterest ....

• Back-end Settings

You can add more share buttons for your social media profiles on Facebook, Twitter, and other popular social networks by getting the code via www.addthis.com site.

• Front-end Appearance

For more detail, please check the documentation of the module.

View Detail Documentation

5. JA Google Map Plugin

• Back-end Settings

To display jamap on contact page, please go to Components >> Contacts >> Contact Name Here: Add {jamap} tag into the Other information as below:

• Front-end Appearance

6. Banner module

There are 3 Banner Modules used in the template:

6.1 Adv1

Module Position : home-1
Module Suffix :  grid-1x1 grid-pos-2

To display as Demo site, please follow step by step as below:

Step 1: Create New Category

Go to Administrator >> Components >> Banners >> Categories >> New

Back-end Settings

Step 2: Create New Banner

Go to Administrator >> Components >> Banners >> Banners >> New

Back-end Settings

Step 3: Create New Banner module

Back-end Settings

Front-end Appearance

6.2 Adv2

Module Position : home-1
Module Suffix :  grid-1x1 grid-pos-3

To display as Demo site, please follow step by step as below:

Step 1: Create New Category

Go to Administrator >> Components >> Banners >> Categories >> New

Back-end Settings

Step 2: Create New Banner

Go to Administrator >> Components >> Banners >> Banners >> New

Back-end Settings

Step 3: Create New Banner module

Back-end Settings

Front-end Appearance

6.3 Adv3

Module Position : sidebar-2
Module Suffix :  no-padding

To display as Demo site, please follow step by step as below:

Step 1: Create New Category

Go to Administrator >> Components >> Banners >> Categories >> New

Back-end Settings

Step 2: Create New Banner

Go to Administrator >> Components >> Banners >> Banners >> New

Back-end Settings

Step 3: Create New Banner module

Back-end Settings

Front-end Appearance

7. Article Categories module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : sidebar-2
Module Suffix :  Not Used

• Back-end Settings

8. Footer module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : footer
Module Suffix :  Not Used

• Back-end Settings

9. Language Switcher module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : position-1
Module Suffix :  Not Used

• Back-end Settings

10. Login Form module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : sidebar-2
Module Suffix :  Not Used

• Back-end Settings

11. Menu module

11.1 Top Menu module

To display as Demo site, please follow step by step as below:

Step 1: Create "Top" menu

Go to: Administrator >> Menus >> Menu Manager >> Add New Menu: Top. Then go to Administrator >> Menus >> Top >> Add New Menu Items for the Menu.

Back-end setting for the menu items

• Home
• Sample Sites
• Joomla.org

Step 2: Create new "Top" module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Go to Administrator >> Module Manager >> Add new Menu Module

Module position : position-1
Module Suffix :  Not Used

• Back-end Settings

11.2 Colors Menu module

Follow the steps as shown in section: 9.1 Top Menu module

Step 1: Create "info" menu and create menu items under the menu

Step 2: Create new "JA Fixel's Colors" module

Module position : position-2
Module Suffix :  Not Used

• Back-end Settings

11.3 Useful Links Menu module

Follow the steps as shown in section: 9.1 Top Menu module

Step 1: Create "Useful Links" menu and create menu items under the menu

Step 2: Create new "Useful Links" module

Module position : position-3
Module Suffix :  Not Used

• Back-end Settings

11.4 Menu Example Menu module

Follow the steps as shown in section: 9.1 Top Menu module

Step 1: Create "Main Menu" menu and create menu items under the menu

Step 2: Create new "Menu Example" module

Module position : sidebar-2
Module Suffix :  Not Used

• Back-end Settings

12. Search module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : position-5
Module Suffix :  Not Used

• Back-end Settings

13. Who's Online module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : sidebar-2
Module Suffix :  blue

• Back-end Settings

14. Tag Cloud module

This module is Joomla default module 3.x, that means when you install Joomla fresh, this module is ready to use.

Module position : position-4
Module Suffix : NOT USED

• Back-end Settings

IV. Custom HTML Modules

1. Social Link JoomShopping

Module position : bookmark-JooomShopping
Module Suffix : NOT USED

<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
</div>
<script type="text/javascript" src="http://www.joomlart.com///s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fbcd3a05926764"></script>
<!-- AddThis Follow END -->

You can add more follow buttons for your social media profiles on Facebook, Twitter, and other popular social networks by getting the code via www.addthis.com site.

• Back-end Settings
• Front-end Appearance

2. Google plus

Module position : home-1
Module Suffix :  grid1x1 grid-pos-10

Custom Output

<div class="google-plus"><!-- Place this tag in your head or just before your close body tag. --> <!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="bubble" data-height="24" data-href="http://www.joomlart.com"> </div>
</div>

• Back-end Settings

4. Tag Cloud

Module position : position-4
Module Suffix :  grid1x1 grid-pos-3 blue

Custom Output

<div class="tagssimilar">
<ul class="tags-list">
<li><a href="http://www.joomlart.com/#">design</a></li>
<li><a href="http://www.joomlart.com/#">print</a></li>
<li><a href="http://www.joomlart.com/#">typo</a></li>
<li><a href="http://www.joomlart.com/#">web</a></li>
<li><a href="http://www.joomlart.com/#">news</a></li>
<li><a href="http://www.joomlart.com/#">blog</a></li>
<li><a href="http://www.joomlart.com/#">style</a></li>
<li><a href="http://www.joomlart.com/#">random</a></li>
<li><a href="http://www.joomlart.com/#">link</a></li>
<li><a href="http://www.joomlart.com/#">email</a></li>
<li><a href="http://www.joomlart.com/#">content</a></li>
<li><a href="http://www.joomlart.com/#">video</a></li>
<li><a href="http://www.joomlart.com/#">photo</a></li>
<li><a href="http://www.joomlart.com/#">gallery</a></li>
</ul>
</div>

• Back-end Settings

5. Search

Module position : position-5
Module Suffix : NOT USED

Custom Output

<p>Lorem ipsum dolor sit amet consectetuer congue.</p>

• Back-end Settings

6. About Fixel

Module position : sidebar-2
Module Suffix :  grid-normal highlight

Custom Output

<p>Ipsum nulla semper et tellus ut risus dolor Sed amet tincidunt. Sed vestibulum felis vitae pretium Nam scelerisque leo aliquet est laoreet. Tempus lacus Phasellus eu vestibulum ipsum.</p>

• Back-end Settings

7. Social Link

Module position : social-link
Module Suffix : NOT USED

<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_twitter_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_instagram_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_youtube_follow" addthis:userid="joomlart"></a>
</div>
<script type="text/javascript" src="http://www.joomlart.com///s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fbcd3a05926764"></script>
<!-- AddThis Follow END -->

You can add more follow buttons for your social media profiles on Facebook, Twitter, and other popular social networks by getting the code via www.addthis.com site.

• Back-end Settings
• Front-end Appearance

V. Third Party Extensions Configuration

1. JoomShoppping Component

1.1 Installing and Configuring JoomShopping Component

If you are new to this Joomla! component, please read this guide.

JoomShopping component is a third party extension, thus you need to download it from Joomla Extensions .

• Step 1: Install JoomShopping component
• Step 2: Download JA Fixel theme for Jshopping
• Step 3: Extract zip file and upload folder Components to your Joomla_site_path. It is right, if you see folder fixel in Joomla_site_path/components/com_jshopping/templates.
• Step 4: Go to admin site >> Components >> JoomShopping >> Configuration >> General tab >> Choose fixel and set parameter for your site

1.1.1 Reference

• Download JoomShopping component
• Download Extensions of JoomShopping
• Support Center

1.1.2 Component Configuration

After installing the component successfully, you need to configure the component as you expect for your shop. If you have trouble, back to the Reference section where you can find the link to the support center and get support or find the answer for your trouble because you may have trouble that many others also have. Remember to select fixel template for JoomShopping as the default style.

1.1.3 Category Configuration

It is easy to create a new category, from the backend panel of JoomShopping component, navigate to the Categories section and click on New button on the top right corner.

1.1.4 Product Configuration

When you create new products, remember to assign category for it so that it will be displayed in front-end and you also manage your products easier. To create new products, access the Products section from the back-end of the component then click on the New button on the top right corner.

1.2 Configurations for JoomShopping Modules as on our Demo

1.2.1 JoomShopping Cart module

Module position : mycart
Module Suffix : NOT USED

• Back-end Settings

1.2.2 JoomShopping Categories module

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

1.2.3 JoomShopping Last Products module

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

1.2.4 JoomShopping Login module

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

1.2.5 JoomShopping Top Rating module

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

2. EasyBlog Component

2.1 Installing Easyblog component

If you are new to this Joomla! component, please read this guide

Easyblog component is a commercial product, thus you need to purchase it from Joomla Extensions . This component is built in the template for demo purpose only.

• Step 1: Install Easyblog component
• Step 2: Download JA Fixel theme for Easyblog
• Step 3: Extract zip file and upload folder Components to your Joomla_site_path. It is right, if you see folder ja_fixel in Joomla_site_path/components/com_easyblog/themes.
• Step 4: Go to admin site >> Components >> Easyblog >> Themes >> choose ja_fixel and set parameter for your site

2.2 Configuring Easyblog component

2.2.1 Component Settings

After installing the component successfully, you need to configure the component as you expect. Go to Administrator >> Components >> Easyblog >> Settings , all of configurations options are located within this section.

2.2.2 Themes Settings

Go to Administrator >> Components >> Easyblog >> Themes

Select ja_fixel theme for Easyblog as the default style to display as our demo site

2.2.3 How to create featured slide on Easyblog page

To create slide on easyblog page, you must set featured for blog entries which you want to display on the slide.

Go to Administrator >> Components >> Easyblog >> Blog Entries

• Back-end Settings

2.3 Configurations for Easyblog Modules as on our Demo

2.3.1 Blog Categories module

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

2.3.2 EasyBlog Archive module

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

2.3.3 Tag Cloud module

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

VI. Template Customization

1. Template Override

In summary, to override template, you clone a style then edit as you wish. After all, assign the cloned style to specific menus. The assigned menus will override the same menus in the default style.

Each style can be configured to use one theme and one layout so in one website, you can have menus with different themes and layouts.

2. Themes Settings

JA Fixel supports up to 9 themes, the themes are available when you install the JA Fixel template.

3. Layout Settings

JA Fixel supports 3 layouts:

As you can see on our Demo, some pages use multiple grids layout . For example Home page, Sub Categories page, Shopping page, these pages use Home layout.

The following video tutorials will show you how to work with Layouts: Configure and Customize.

Layout Configuration

T3 comes with ease of layout customization. The visual layout configuration allows you to configure layouts never easier.

?

Layout Configuration

Layout Customization

The video tutorial guides you how to customize the layouts, how to add new layout, and how to customize blocks in a layout.

?

Layout Customization

4. ThemeMagic Settings

JA Fixel is developed with T3 so you can customize themes with ThemeMagic.

To customize themes with the feature, firstly, you have to enable the option.

In the setting panel, you can customize all the themes. The left panel is the setting area while the right panel is your site front-end. Each time you change settings, click on "Preview" button to view the change in front-end on the right panel.

As you know, this template supports style for 4 columns as our demo but you can customize number of columns on Home layout in ThemeMagic.

Please check the image below after customizing.

• Home layout with 6 columns

The following video tutorials will show you how to customize themes and customize ThemeMagic.

ThemeMagic Customization

After the tutorial, you can be able to customize your theme quickly using ThemeMagic as well as how to add new group and parameters to ThemeMagic.

?

ThemeMagic Customization

5. Extended Settings

JA Fixel template uses some specific settings as below:

Go to Administrator --> Extensions --> Template Manager --> JA Fixel Template --> General tab

Besides, JA Fixel template supports infinity pagination, it allows to use infinity button instead of classic pagination.

Go to Administrator --> Extensions --> Template Manager --> JA Fixel Template --> Navigation tab

• Back-end Settings

6. Content Type Settings

As you can see our demo, Homepage displays multiple content types and grid type in each article. To do that, please follow steps as below:

Go to Administrator--> Content --> Article Manager --> Add New Article

6.1 Gallery type

• Back-end Settings

6.2 Image type

• Back-end Settings

Note: Content animation works only for image content type.

6.3 Text type

• Back-end Settings

6.4 Video type

• Back-end Settings

VII. Mega Menu Configuration

1. Menu items Back-end Settings

• Home Menu
• J!Page Menu
• Ahout me Menu
• JBlog Menu
• Easyblog Menu
• Shop Menu
• Contact Menu

2. Megamenu Configuration

To configure Mega Menu, go to: Extensions --> Template manager --> open JA Fixel template, in the Navigation setting, you can configure Mega Menu.

Step 1: Enable Mega Menu

Step 2: Open Mega Menu page

Step 3: Select Menu to configure Mega Menu

Step 4: Configure Mega Menu

Mega Menu Configuration

This is the video tutorial for Mega Menu configuration, you will learn how to build up a Mega Menu, how to use Mega Menu settings effectively, how to add icons, how to style menu items with our T3 Framework.

?

Mega Menu Configuration

JA Muzic is responsive Joomla 2.5 and Joomla 3 template for entertainment, music and digital media.

Structuring with clean, bold design and well organized blocks & modules, this stunning Joomla template will let your entertainment and music website shine.

Built on the latest version of T3 Framework with Bootstrap at core, this template is fully responsive and supports RTL language layout. JA Muzic features Mega Menu, Off-Canvas menu, EasyBlog component and a whole new inbuilt Joomla music plugin JA AVtracklist.

1. Main Features

• Filter Tag Cloud (applied for Joomla 3 only)
• Developed with T3 Framework & Bootstrap
• Supports Joomla 2.5 and Joomla 3
• Default Joomla pages supported
• Support Mega Menu
• Support multiple layouts
• Support multiple themes
• Support RTL language

2. JA Extensions Supported

• JA Slideshow module
• JA Accordion module
• JA Content Popup module
• JA Contentslider module
• JA Newsticker module
• JA Login module
• JA Sidenews module
• JA Tabs plugin
• JA Google Map plugin
• JA Disqus Debate Echo plugin
• JA Bookmark plugin
• JA AVTracklist plugin
• JA AVTracklist Button plugin
• T3 Framework plugin
• JA Extensions Manager Component

3. Third Party Extensions

• EasyBlog Component

4. Layout and Module Positions

Please check the image below to know the structure, layout, module positions of JA Muzic.

1. Plan your site Development

• Making a New Site ? - If you are planning to make a new site, then use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package.
• Installing on your live site ? - If you are planning to use this template on your already live site. Then you should follow How to make your site look like demo site guide first to know about the steps involved.

2. Download Template and Extensions

Go to the Download page of JA Muzic and download the template zip file.

3. Install Template and Extensions

• Install the template that you download in your Joomla 2.5 system.
• JA Muzic template will be installed "as is" on demo with all the default settings (for templates, modules & plugins) included. In case you want to make any changes in the configuration, please do wait until finish the installation process to do so.

1. JA Slideshow Module

In version 2.6.2 JA Slideshow Module does support to show videos within the slideshow. All you have to do is to select Show video = YES

Module position: home-feature-1
Module Suffix : NO USED

• Back-end Settings

2. JA Accordion Module

Module position : position-5
Module Suffix :  NO USED
Module Title : Lastest Review

• Back-end Settings

3. JA Login Module

Module position : top-login 
Module Suffix :  NO USED

• Back-end Settings

4. JA Newsticker Module

Module position : newsticker
Module Suffix :  NO USED

• Back-end Settings

5. JA SideNews Module

Module position : ja-muzic-sidenews
Module Suffix :  NO USED
Module title : Audios

• Back-end Settings

6. JA Content Popup Module

There are 2 JA Content Popup modules used in the demo site:

6.1 Similar Artists

Module position : inline-right
Module Suffix :  NO USED

• Back-end Settings

6.2 Featured Artists

Module position : position-6
Module Suffix :  NO USED

• Back-end Settings

7. JA Content Slider Module

There are 4 JA Content Slider modules used in the demo site:

7.1 Upcoming Event

Module position : home-2
Module Suffix :  NO USED

• Back-end Settings

7.2 Popular Artists

Module position : popular-artists
Module Suffix :  ja-top-news

• Back-end Settings

7.3 Today Top News

Module position : position-1
Module Suffix :  ja-top-news

• Back-end Settings

7.4 Spotlight

Module position : sidebar-1
Module Suffix : ja-muzic-spotlight

• Back-end Settings

8. Articles Category Module (joomla default module)

There are up to 7 Articles Category modules used in the demo site:

8.1 Top Videos

Module position : inline
Alternative Layout : videos
Module Suffix :  top-videos

• Back-end Settings

8.2 Top Albums

Module position : inline
Alternative Layout : muzic
Module Suffix :  top-videos

• Back-end Settings

8.3 Top Audio

Module position : inline-left
Alternative Layout : muzic
Module Suffix :  ja-muzic-review-audio

• Back-end Settings

8.4 Features

Module position : ja-muzic-easyblog
Alternative Layout : eb-features
Module Suffix :  ja-eb-features

• Back-end Settings

8.5 Albums

Module position : ja-muzic-review
Alternative Layout : muzic
Module Suffix :  ja-muzic-review-album

• Back-end Settings

8.6 Audio

Module position :  ja-muzic-review
Alternative Layout : muzic
Module Suffix : ja-muzic-review-audio

• Back-end Settings

8.7 Albums

Module position :  ja-muzic-sidenews
Alternative Layout : muzic
Module Suffix :  ja-muzic-sidenews-album

• Back-end Settings

9. Banner module

There are 3 Banner Modules used in demo site

9.1 Sample Banner

Module Position :  banners
Module Suffix :  NO USED

To display as Demo site, please follow step by step the instruction below:

Step 1: Create 728x90 Category

Go to Administrator >> Components >> Banners >> Categories >> New

Step 2: Create 728x90 Banner

Go to Administrator >> Components >> Banners >> Banners >> New

Step 3: Create Sample Banner module

Front-end Appearance

9.2 Inset Banner

Module Position :  inset
Module Suffix :  NO USED

To display as Demo site, please follow step by step the instruction below:

Step 1: Create 205x360 Category

Go to Administrator >> Components >> Banners >> Categories >> New

Step 2: Create 728x90 Banner

Go to Administrator >> Components >> Banners >> Banners >> New

Step 3: Create Sample Banner module

Front-end Appearance

9.3 Right Sample Banner

Module Position :  sidebar-1
Module Suffix :  banner

To display as Demo site, please follow step by step as below:

Step 1: Create 205x360 Category

Go to Administrator >> Components >> Banners >> Categories >> New

Step 2: Create 728x90 Banner

Go to Administrator >> Components >> Banners >> Banners >> New

Step 3: Create Sample Banner module

Front-end Appearance

10. Login

Module position :  sidebar-1
Module Suffix :  ja-sidebar-login

• Back-end Settings

11. Breadcrumbs

Module position :  sidebar-1
Module Suffix :  NO USED

• Back-end Settings

12. Search

Module position :  head-search
Module Suffix :  NO USED

• Back-end Settings

13. Language Switcher module

This module is Joomla 3 default module, that means when you install Joomla fresh, this module is already included.

Module position : languageswitcherload
Module Suffix :  Not Used

• Back-end Settings

14. Tag module

This is a default Joomla module, that means when you install Joomla fresh, this module is already there

Module title : Tags
Module position : ja-muzic-news
Module Suffix : NOT USED

• Back-end Settings

15. Menu module

15.1 Trending Now module

To display as Demo site, please follow step by step as below:

Step 1: Create "Trending Now" menu

Go to: Administrator >> Menus >> Menu Manager >> Add New Menu: Trending Now. Then go to Administrator >> Menus >> Trending Now >> Add New Menu Items for the Menu.

Back-end setting for the menu items

• Milay Cyrus

Step 2: Create new "Trending Now" module

This is default Joomla module, that means when you install Joomla fresh, this module is ready to use.

Go to Administrator >> Module Manager >> Add new Menu Module

Module position : footer-2
Module Suffix :  Not Used

• Back-end Settings

15.2 Channels module

To display as Demo site, please follow step by step instruction below:

Step 1: Create "Channels" menu

Go to: Administrator >> Menus >> Menu Manager >> Add New Menu: Channels. Then go to Administrator >> Menus >> Channels >> Add New Menu Items for the Menu.

Back-end setting for the menu items

• Milay Cyrus
• Photos
• Videos
• Blogs
• Albums
• Biography

Step 2: Create new "Channels" module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Go to Administrator >> Module Manager >> Add new Menu Module

Module position : footer-3
Module Suffix :  Not Used

• Back-end Settings

Frontend appearance

16. JA Disqus Debate Echo plugin

• Back-end Settings

17. JA Bookmark plugin

• Back-end Settings

18. JA GoogleMap plugin

• Back-end Settings

19. JA Tabs plugin

• Back-end Settings

20. JA AVTracklist plugin and JA AVTracklist Button plugin

Frontend Appearance

1. Footer Logo

Module position : footer-1
Module Suffix : NOT USED

<div class="brand"><a href="http://www.joomlart.com/index.php" title="JA Music"> <span>JA Music</span> </a></div>

• Back-end Settings
• Front-end Appearance

2. Top Of the Weeks

Module position : home-feature-2
Module Suffix : NOT USED

<div>{jatabs type="modules" heightTabs="38" height="530" module="ja-muzic-sidenews" position="top" mouseType="click" animType="animFade"} {/jatabs}</div>

• Back-end Settings
• Front-end Appearance

3. From Blog

Module position : position-7
Module Suffix : NOT USED

<div>{jatabs type="modules" height="458" module="ja-muzic-from-blog" heightTabs="38" position="top" mouseType="click" animType="animFade"} {/jatabs}</div>

• Back-end Settings
• Front-end Appearance

4. eb Sidebar

Module position : sidebar-1
Module Suffix : NOT USED

<p>{jatabs type="modules" module="ja-muzic-easyblog" heightTabs="38" position="top" mouseType="click" animType="animFade"} {/jatabs}</p>

• Back-end Settings
• Front-end Appearance

5. From Blog

Module position : sidebar-1
Module Suffix : NOT USED

<p>{jatabs type="modules" heightTabs="38" module="ja-muzic-from-blog" position="top" mouseType="click" animType="animFade"} {/jatabs}</p>

• Back-end Settings
• Front-end Appearance

1. Installing Easyblog component

If you are new to this component, please read this guide

Easyblog component is a commercial product, thus you need to purchase it from Joomla Extensions . This component is built in the template for demo purpose only.

• Step 1: Install Easyblog component
• Step 2: Download JA Muzic theme for Easyblog
• Step 3: Extract zip file and upload folder Components to your Joomla_site_path. It is right, if you see folder ja_muzic in Joomla_site_path/components/com_easyblog/themes.
• Step 4: Go to admin site >> Components >> Easyblog >> Themes >> choose ja_muzic and set parameter for your site

2. Configuring Easyblog component

2.1 Component Settings

After installing the component successfully, you can configure the component according to your preferences. Go to Administrator >> Components >> Easyblog >> Settings, all of configurations options can be found in this section.

2.2 Themes Settings

Go to Administrator >> Components >> Easyblog >> Themes

Select ja_muzic theme for Easyblog as the default style to display as our demo site

2.3 How to create featured slide on Easyblog page

To create slides on Easyblog page, mark Featured for blog entries that you want to display on slide.

Go to Administrator >> Components >> Easyblog >> Blog Entries

• Back-end Settings

3. Configurations Easyblog Modules as on Demo

3.1 Tag Cloud module

Module title : Tags
Module position : ja-muzic-from-blog
Module Suffix : NOT USED

• Back-end Settings

3.2 Most Popular Post module

3.2.1 Most Read

Module position : ja-muzic-easyblog
Module Suffix :  ja-eb-mostread

• Back-end Settings

3.2.2 Popular

Module position : ja-muzic-from-blog
Module Suffix :  NOT USED

• Back-end Settings

VI. Template Customization

1. Template Override

In summary, to override a template, you should clone a style then edit it you wish. Then after you've done with that, assign the cloned style to specific menus. The assigned menus will override the same menus in the default style.

Each style can be configured to use one theme and one layout so in one website, you can have menus with different themes and layouts.

2. Themes Settings

JA Muzic supports up to 9 themes, the themes will be available when you're done installing the JA Muzic template.

3. Layout Settings

JA Muzic supports 3 layouts:

As you can see on our Demo, some pages use multiple grids layout . For example Home page, Artists page, these pages use Default layout.

• Menu Assignment

The following video tutorials will show you how to work with Layouts: Configure and Customize.

Layout Configuration

T3 comes with ease of layout customization. The visual layout configuration allows you to configure layouts never easier.

?

Layout Configuration

Layout Customization

The video tutorial guides you how to customize the layouts, how to add new layout, and how to customize blocks in a layout.

?

Layout Customization

4. ThemeMagic Settings

JA Muzic is developed with T3 so you can also customize themes with ThemeMagic.

To customize themes with the feature, you have to enable the ThemeMagic first.

In the setting panel, you can customize all the themes. The left panel is the setting area while the right panel is your site front-end. Each time you change settings, click on "Preview" button to view the change in front-end on the right panel.

For Example: Change Modules color

Please check the image below after customizing.

The following video tutorials will show you how to customize themes and customize ThemeMagic.

ThemeMagic Customization

After the tutorial, you can be able to customize your theme quickly using ThemeMagic as well as how to add new group and parameters to ThemeMagic.

?

ThemeMagic Customization

5. Templates Configuration

JA Muzic template has some specific settings that other templates don't have. These settings are located in the tab Template Config in Administrator >> Extensions >> Template Manager >> JA Muzic Template

Note:

This setting allows you find articles corresponding with author

To display as Demo site, please follow step by step as below:

• Step 1 : Create new User Group with name is Artists then add some User under this user group
• Step 2 : Create several Categories (Artists, Biography, Audio, Albums, Videos, Photos, Events) then add as many articles as you wish under these categories
• Step 3 : Go to Administrator --> Extensions --> Template Manager --> JA Muzic Template --> Templates Config tab: Select User Group is Artists, then select Category below, which you need to show

Front-end Appearance

See more Demo site

6. Content Type Settings

As you can see our demo, Frontend displays multiple content types and grid type in each article. To do that, please follow steps as below:

Go to Administrator--> Content --> Article Manager --> Add New Article

6.1 default-album

• Back-end Settings

• Frontend Appearance

6.2 default-artist

• Back-end Settings

• Frontend Appearance

6.3 default-biography

• Back-end Settings

• Frontend Appearance

6.4 default-photo

• Back-end Settings

• Frontend Appearance

6.5 default-track

• Back-end Settings

• Frontend Appearance

VII. Mega Menu Configuration

JA Muzic site uses Mega Menu. Follow the guide below to create menu:

1. Menu items Back-end Settings

• Home Menu
• News Menu
• Artists Menu
• Events Menu
• Audios Menu
• Albums Menu
• Videos Menu
• J-Pages Menu
• Contact Us Menu
• EasyBlog Menu

Note: To create Contacts page like demo site, you must go to Components >> Contacts >> create new JA Muzic contact article then configure - Backend Settings - Frontend Apperance

2. Megamenu Configuration

To configure megamenu, go to: Extensions --> Template manager --> open JA Muzic template, in the Navigation tab, you can configure megamenu.

a. Enable Megamenu

b. Select menu item, sub-megamenu

The following video tutorials will show you how to uses Megamenu .

Megamenu Configuration

The visual Megamenu configuration allows you to configure menu never easier.

?

Megamenu Configuration

JA Nex is one addition to them Joomla News site template, and now it is running on the robust T3 Framework. It includes support for K2 and Kunena components, is fully responsive and also supports RTL language layout.

JA Nex features sticky Mega Menu, Kunena, K2, Filter Tag Cloud (applied for Joomla 3 only).

1. Main Features

• Filter Tag Cloud (applied for Joomla 3 only)
• Developed with T3 Framework & Bootstrap
• Supports Joomla 2.5 and Joomla 3.0
• Fully responsive
• Supports Mega Menu
• Supports multiple layouts
• Supports multiple themes
• Supports RTL language
• Supports K2
• Supports Kunena

2. JA Extensions Supported

• JA Newsfeatured module
• JA Newspro module
• JA Sidenews module
• JA Contentslider module
• JA Accordion module
• JA Bulletin module
• JA Newsticker module
• JA Tabs plugin
• JA Popup plugin
• JA Thumbnail plugin
• T3 Framework plugin
• JA Extensions Manager Component

3. Third Party Extensions Supported

• K2 Component
• Kunena Component

4. Layout and Module Positions

Please check the image below to know the structure, layout, module positions of JA Nex.

1. Plan your site Development

• Making a New Site ? - If you are planning to make a new site, use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package.
• Installing on your live site ? - If you are planning to use this template on your already live site, read How to make your site look like demo site guide first to know about the steps involved. Then you can follow the userguide below.

2. Download Template and Extensions

Browse and Download: Go to the Download page of JA Nex and download the template zip file.

3. Install Template

Install the template: Now install the template on your Joomla 2.5 & Joomla 3.0 system. Follow This Guide if you are not familiar with the installation procedure.

4. Install Extensions

We'll be installing JA Nex template with the settings as is used on the demo website, other customization should be postponed until you complete the initial setup (including modules & plugins as is on the demo).

1. JA Newsfeatured Module

Module position: top-home1
Module Suffix:  featured-module

• Back-end Settings

2. JA Newspro Modules

2.1 Music News

Module position : top-home2
Module Suffix :  news_home_module

• Back-end Settings

2.2 JA News Pro! Module

Module position : masscol-1
Module Suffix :  ja-masscol-news

• Back-end Settings

3. JA Sidenews module

3.1 Accordion Module

Module position : accordion
Module Suffix : Not Used

• Back-end Settings

3.2 Template Features

Module position : ja-tabs
Module Suffix : Not Used

• Back-end Settings

4. JA Contentslider module

Module position : position-1
Module Suffix : box titbla_module

• Back-end Settings

5. JA Bulletin module

5.1 Upcoming Releases

Module position : accordion
Module Suffix : Not Used

• Back-end Settings

5.2 Most Popular

Module position : accordion
Module Suffix : Not Used

• Back-end Settings

6. JA Newsticker module

Module position : top-ticker
Module Suffix : Not Used

• Back-end Settings

7. JA Accordion module

Module position : sidebar-2
Module Suffix : accordion

• Back-end Settings

8. JA Tabs Plugin

• Back-end Settings

9. JA Popup Plugin

• Back-end Settings

10. JA Thumbnail Plugin

• Back-end Settings

11. Banner module

11.1 Banners1

Module Position : top-home3
Module Suffix :  adv1

To display as Demo site, please follow step by step as below:

Step 1: Create New Category

Go to Administrator >> Components >> Banners >> Categories >> New.

Step 2: Create New Banner

Go to Administrator >> Components >> Banners >> Banners >> New.

Step 3: Create New Banner module

Front-end Appearance

11.2 Banners2

Module Position : sidebar-2
Module Suffix :  adv2

To display as the Demo site, please follow step by step as below:

Step 1: Create New Category

Go to Administrator >> Components >> Banners >> Categories >> New.

Step 2: Create New Banner

Go to Administrator >> Components >> Banners >> Banners >> New.

Step 3: Create New Banner module

Front-end Appearance

11.3 Banners3

Module Position : masscol-2
Module Suffix :  adv3

To display as the Demo site, please follow step by step as below:

Step 1: Create New Category

Go to Administrator >> Components >> Banners >> Categories >> New.

Step 2: Create New Banner

Go to Administrator >> Components >> Banners >> Banners >> New.

Step 3: Create New Banner module

Front-end Appearance

12. Acymailing module

This module is Joomla default module, that means when you install a fresh Joomla core, this module is ready to use.

12.1 Newsletter

Module position : footer-5
Module Suffix :  Not Used

• Back-end Settings

12.2 Newsletter

Module position : top-home3
Module Suffix :  ja-letter badge-red

• Back-end Settings

13. Breadcrumbs module

This module is Joomla default module, that means when you install a fresh Joomla core, this module is ready to use.

Module position : navhelper
Module Suffix :  Not Used

• Back-end Settings

14. Footer module

This module is Joomla default module, that means when you install a fresh Joomla core, this module is ready to use.

Module position : footer
Module Suffix :  Not Used

• Back-end Settings

15. Language Switcher module

This module is Joomla default module, that means when you install a fresh Joomla core, this module is ready to use.

Module position : languageswitcherload
Module Suffix :  Not Used

• Back-end Settings

16. Login Form module

This module is Joomla default module, that means when you install a fresh Joomla core, this module is ready to use.

Module position : sidebar-2
Module Suffix :  Not Used

• Back-end Settings

17. Menu module

17.1 Footer Menu module

To display as Demo site, please follow step by step as below:

Step 1: Create "Footer" menu

Go to: Administrator >> Menus >> Menu Manager >> Add New Menu: Footer Menu. Then go to Administrator >> Menus >> Footer menu >> Add New Menu Items for the Menu.

Back-end setting for the menu items

• Home
• Fashion
• Asia
• Europe
• Latin America
• Middle East
• Business
• World Sport
• Entertaiment
• Africa

Step 2: Create new "Footer menu" module

This module is Joomla default module, that means when you instal a fresh Joomla core, this module is ready to use.

Go to Administrator >> Module Manager >> Add new Menu Module.

Module position : menu-footer
Module Suffix :  Not Used

• Back-end Settings

17.2 Main Menu module

Step 1: Create "Main menu" menu and create menu items under the menu

Step 2: Create new "Main menu" module

Module position : sidebar-2
Module Suffix :  Not Used

• Back-end Settings

17.3 About Joomla Menu module

Step 1: Create "About Joomla" menu and create menu items under the menu.

Step 2: Create new "About Joomla" module

Module position : sidebar-2
Module Suffix :  Not Used

• Back-end Settings

18. Search module

18.1 Search

This module is Joomla default module, that means when you install a fresh Joomla core, this module is ready to use.

Module position : head-search
Module Suffix :  Not Used

• Back-end Settings

18.2 Search

This module is Joomla default module, that means when you install a fresh Joomla core, this module is ready to use.

Module position : search-footer
Module Suffix :  Not Used

• Back-end Settings

19. Who's Online module

This module is Joomla default module, that means when you instal a fresh Joomla core, this module is ready to use.

Module position : sidebar-2
Module Suffix :  badge-red

• Back-end Settings

20. Similar Tags module

This module is Joomla default module 3.x, that means when you install a fresh Joomla core, this module is ready to use.

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

21. Popular Tags module

This module is Joomla default module 3.x, that means when you install a fresh Joomla core, this module is ready to use.

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

1. Image Temp

Module position : footer-1
Module Suffix :  imgtemp

<div><img src="http://www.joomlart.com/images/stories/demo/img-footer.gif" border="0" alt="left" title="Sample photo" width="122" />Lorem ipsum dolor sit amet, <a href="http://www.joomlart.com/#" title="sample link">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut <a href="http://www.joomlart.com/#" title="sample link">labore et</a> dolore.</div>

• Back-end Settings
• Front-end Appearance

2. Hubs

Module position : footer-2
Module Suffix : Not Used

Custom Output

<ul>

<li><a href="http://www.joomlart.com/#">News</a></li>
<li><a href="http://www.joomlart.com/#">Business</a></li>
<li><a href="http://www.joomlart.com/#">Culture</a></li>
<li><a href="http://www.joomlart.com/#">Design</a></li>
<li><a href="http://www.joomlart.com/#">Lifestyle</a></li>
<li><a href="http://www.joomlart.com/#">Technology</a></li>
</ul>

• Back-end Settings

4. Features

Module position : footer-3
Module Suffix :  grid1x1 grid-pos-3 blue

Custom Output

<ul>

<li><a href="http://www.joomlart.com/#">Infographics</a></li>
<li><a href="http://www.joomlart.com/#">Videos</a></li>
<li><a href="http://www.joomlart.com/#">Slideshow</a></li>
<li><a href="http://www.joomlart.com/#">Project</a></li>
<li><a href="http://www.joomlart.com/#">Current issue</a></li>
<li><a href="http://www.joomlart.com/#">Online Store</a></li>
</ul>

• Back-end Settings

5. Company

Module position : footer-4
Module Suffix : NOT USED

Custom Output

<ul>

<li><a href="http://www.joomlart.com/#">About</a></li>
<li><a href="http://www.joomlart.com/#">Contact</a></li>
<li><a href="http://www.joomlart.com/#">Support</a></li>
<li><a href="http://www.joomlart.com/#">Jobs</a></li>
<li><a href="http://www.joomlart.com/#">Privacy</a></li>
<li><a href="http://www.joomlart.com/#">Terms</a></li>
</ul>

• Back-end Settings

6. Connect

Module position : footer-5
Module Suffix :  connect

Custom Output

<div class="social"><a class="ico-social ico-facebooks" href="http://www.joomlart.com/#" title="Facebook"><span>Facebook</span></a><a class="ico-social ico-twitters" href="http://www.joomlart.com/#" title="Twitter"><span>Twitter</span></a><a class="ico-social ico-rss" href="http://www.joomlart.com/#" title="RSS"><span>RSS</span></a><a class="ico-social ico-flick" href="http://www.joomlart.com/#" title="Flick"><span>Flick</span></a></div>

• Back-end Settings

7. Follow me

Module position : head-social
Module Suffix : NOT USED

<div class="social"><a class="ico-social ico-facebooks" href="http://www.joomlart.com/#" title="Facebook"><span>Facebook</span></a><a class="ico-social ico-twitters" href="http://www.joomlart.com/#" title="Twitter"><span>Twitter</span></a><a class="ico-social ico-rss" href="http://www.joomlart.com/#" title="RSS"><span>RSS</span></a></div>

• Back-end Settings
• Front-end Appearance

8. About T3 Framework

Module position : ja-tabs
Module Suffix : NOT USED

<p><img src="http://www.joomlart.com/images/stories/demo/logo.png" border="0" alt="Sample photo" title="Sample photo" align="left" />Sed ipsum enim, mollis eu pellentesque a, ullamcorper at sem. Mauris eugiat, dui vel cursus elementum, nulla metus bibendum neque, in tincidunt tellus lorem vitae metus ipsum enim, mollis eu pellentesque a, ullamcorper at sem.</p>

<p><a class="readmore" href="http://www.joomlart.com/#">Read more</a></p>

• Back-end Settings
• Front-end Appearance

9. Quick guide

Module position : ja-tabs
Module Suffix : NOT USED

<p><img src="http://www.joomlart.com/images/stories/demo/demo-1.jpg" border="0" alt="Sample photo" title="Sample photo" align="left" />Sed ipsum enim, mollis eu pellentesque a, ullamcorper at sem. Mauris eugiat, dui vel cursus elementum, nulla metus bibendum neque, in tincidunt tellus lorem vitae metus in tincidunt tellus lorem vitae metus.</p>

<p><a class="readmore" href="http://www.joomlart.com/#">Read more</a></p>

• Back-end Settings
• Front-end Appearance

10. Why Pick Us

Module position : masscol-2
Module Suffix :  ja-tabs titbla_module

<p>{jatabs type="modules" module="ja-tabs" position="top" mouseType="click" animType="animMoveHor" } {/jatabs}</p>

<p> </p>

• Back-end Settings
• Front-end Appearance

11. Photo Images

Module position : sidebar-2
Module Suffix : Not Used

<div class="img-photo clearfix"><span class="highslide-img">{japopup type="image" title="Sample Images" content="images/stories/highslide/slide1.jpg" width="594" height="386"} <img src="http://www.joomlart.com/images/stories/highslide/thumb-1.jpg" border="0" alt="Sample Image" /> {/japopup} </span> <span class="highslide-img">{japopup type="image" title="Sample Images" content="images/stories/highslide/slide2.jpg" width="594" height="386"} <img src="http://www.joomlart.com/images/stories/highslide/thumb-2.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img">{japopup type="image" title="Sample Images" content="images/stories/highslide/slide3.jpg" width="594" height="386"} <img src="http://www.joomlart.com/images/stories/highslide/thumb-3.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img">{japopup type="image" title="Sample Images" content="images/stories/highslide/slide4.jpg" width="594" height="386"} <img src="http://www.joomlart.com/images/stories/highslide/thumb-4.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img">{japopup type="image" title="Sample Images" content="images/stories/highslide/slide5.jpg" width="594" height="386"} <img src="http://www.joomlart.com/images/stories/highslide/thumb-5.jpg" border="0" alt="Sample Images" /> {/japopup} </span> <span class="highslide-img">{japopup type="image" title="Sample Images" content="images/stories/highslide/slide6.jpg" width="594" height="386"} <img src="http://www.joomlart.com/images/stories/highslide/thumb-6.jpg" border="0" alt="Sample Images" /> {/japopup} </span></div>

• Back-end Settings
• Front-end Appearance

12. Today video

Module position : sidebar-2
Module Suffix :  blackbg video1

<p><object data="http://vimeo.com/moogaloop.swf?clip_id=7421222&amp;server=vimeo.com&amp;color=333333&amp;fullscreen=1" type="application/x-shockwave-flash" width="210" height="120"><param name="quality" value="high" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=7421222&amp;server=vimeo.com&amp;color=333333&amp;fullscreen=1" /><param name="pluginspage" value="http://vimeo.com/moogaloop.swf?clip_id=7421222&amp;server=vimeo.com&amp;color=33bbbb&amp;fullscreen=1" /><param name="scale" value="noborder" /><param name="wmode" value="transparent" /></object></p>

• Back-end Settings
• Front-end Appearance

13. Template Features

Module position : sidebar-2
Module Suffix : box badge-vote badge-red

<div class="list-useful">
<p class="blocknumber blocknumber-1"><span class="bignumber">01</span> <span class="title-bignumber">Fluid Grid</span> Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id.</p>
<p class="blocknumber blocknumber-1"><span class="bignumber">02</span> <span class="title-bignumber">Simple and Clean Design</span> Interdum pharetra in a metus congue In Sed Pellente gravida pellentesque.</p>
<p class="blocknumber blocknumber-1 last"><span class="bignumber">03</span> <span class="title-bignumber">Mega Menu</span> In Sed Pellentesque tincidunt pharetra a metus congue tincidunt pharetra.</p>
</div>

• Back-end Settings
• Front-end Appearance

14. Color Module

Module position : sidebar-2
Module Suffix :  badge-black titleredbox

<p>Nunc rutrum scelerisque ipsum ut aliquet. Duis et augue nunc, gravida fermentum mi.</p>

• Back-end Settings
• Front-end Appearance

15. Demo notice

Module position : sidebar-2
Module Suffix :  blackbg bgcolor

<div>Quisque sed dui enim. Mauris ultricies, tellus ac semper consequat.</div>

• Back-end Settings
• Front-end Appearance

1. Kunena Component

1.1 Install Kunena Forum component

If you are new to this Joomla component, please read this guide to install this component into Joomla.

1.2 Configure Kunena Forum component

Step1: To do like demo site, you must download and extract Kunena theme for JA Nex. Then go to the extracted folder: kunena_theme_nex_t3.v1.0.0/components/com_kunena/template and copy ja_nex folder into components/com_kunena/template folder on your site.

Step 2: Go to Administrator >> Component >> Kunena Forum >> Template Manager, set ja_nex template as the default style.

Step 3: To set up for the forum as in Demo site, navigate to Administrator >> Component >> Kunena Forum >> Forum Configuration.

• Back-end Settings for General
• Back-end Settings for Front-end
• Back-end Settings for Users
• Back-end Settings for Security
• Back-end Settings for Avatar
• Back-end Settings for Uploads
• Back-end Settings for Ranking
• Back-end Settings for BBCode
• Back-end Settings for RSS
• Back-end Settings for Extra

Step 4: Go to Menu >> Main Menu >> Add New Menu Item: Kunena Forum as our screenshots shown below.

Front-end Appearance

2. K2 Component

2.1 Install and Configure K2

2.1.1 Install K2

If you are new to this Joomla component, please read this guide.

2.1.2 Configure K2 component

2.1.2.1 Global Configuration: Click Parameter button on the right

Back-end settings

• Layout & Views
• Content
• Images
• Social
• Comments
• Front-end and Editing
• Advanced
• Permission

2.1.2.2 Category Configuration

As you can see on our Demo, there are different styles for each page: Nex Blog uses nex_blog style while All Categories use nex style.

To build your website like our demo, navigate to Administrator >> Component >> K2 >> Categories.

• Back-end Settings
• Front-end Appearance

• Back-end Settings
• Front-end Appearance

Note: To set the column displaying on All Categories page, you should have enough child categories under All Categories category.

• Back-end Settings
• Front-end Appearance

Note: Settings for others child categories under All Categories category as the same as Sample Category 1 settings.

2.2 Configurations for K2 Modules as on our Demo

This instruction is a reference for developers using manual installation, a guide on how to setup K2 Component like on the demo website and the Quickstart package.

Please refer to the official documentation on how to install and setup K2.

There are 5 modules of K2 component being used in JA Nex.

2.2.1 JA K2 Comment Module

Module Position : sidebar-2
Module suffix : NOT USED

Demo site

2.2.2 JA K2 Content Module

Module Position : sidebar-2
Module suffix : NOT USED

Demo site

2.2.3 JA K2 Tools Module

2.2.3.1 K2 Archive

Module Position : sidebar-2
Module suffix : Not Used

Demo site

2.2.3.2 K2 Categories

Module Position : sidebar-2
Module suffix : Not Used

Demo site

2.2.4 K2 User

Module Position : sidebar-2
Module suffix : NOT USED

Demo site

2.2.5 K2 Users

Module Position : sidebar-2
Module suffix : NOT USED

Demo site

1. Template Override

In summary, to override template, you clone a style then edit as you wish. After all, assign the cloned style to specific menus. The assigned menus will override the same menus in the default style.

Each style can be configured to use one theme and one layout so in one website, you can have menus with different themes and layouts.

2. Themes Settings

JA Nex supports up to 5 themes, the themes are available when you install the JA Nex template.

3. Layout Settings

JA Nex supports 5 layouts:

The following video tutorials will show you how to work with Layouts: Configure and Customize.

Layout Configuration

T3 comes with ease of layout customization. The visual layout configuration allows you to configure layouts never easier.

Layout Customization

The video tutorial guides you how to customize the layouts, how to add new layout, and how to customize blocks in a layout.

4. ThemeMagic Settings

JA Nex is developed with T3 so you can customize themes with ThemeMagic.

To customize themes with the feature, firstly, you have to enable the option.

In the setting panel, you can customize all the themes. The left panel is the setting area while the right panel is your site front-end. Each time you change settings, click on "Preview" button to view the change in front-end on the right panel.

The following video tutorials will show you how to customize themes and customize ThemeMagic.

ThemeMagic Customization

After the tutorial, you can be able to customize your theme quickly using ThemeMagic as well as how to add new group and parameters to ThemeMagic.

1. Menu items Back-end Settings

• Home Menu
• Joomlart Menu
• Explore Menu
• K2 component Menu
• Typography Menu
• All Categories Menu
• Kunena Menu

2. Megamenu Configuration

To configure Mega Menu, go to: Extensions >> Template manager >> open JA Next template, in the Navigation setting, you can configure Mega Menu.

Step 1: Enable Mega Menu

Step 2: Open Mega Menu page

Step 3: Select Menu to configure Mega Menu

Step 4: Configure Mega Menu

Mega Menu Configuration

This is the video tutorial for Mega Menu configuration, you will learn how to build up a Mega Menu, how to use Mega Menu settings effectively, how to add icons and how to style menu items with our T3 Framework.

The above userguide should help one in replicating the Demo site settings for the template and extension on their site.

Recommended :

If you are new or are confused, we recommend installing Quickstart on your localhost and use it as reference for configs. This is the best way to work with any template. Links to all the resources are provided above, you should carefully read them to take the maximum advantage of our products.

Support :

Please raise your support queries in the forum and make sure you follow the support guidelines. We spend more time in getting the information from user in case the support guidelines are not followed.

JA Magz is October 2013 Resonsive Joomla template for both Joomla 3 and Joomla 2.5 for News & Magazine. Thanks to the latest verion of T3 Framework, JA Magz is RTL language layout compatible and extremely customization friendly. Intergrating the newly developed JA Multilingual extension, JA Magz is truly a multilingual Joomla template, available up to 41 languages (which Bing currently supports).

1. Main Features

• Filter Tag Cloud (applied for Joomla 3 only)
• Developed with T3 Framework & Bootstrap
• Supports Joomla 2.5 and Joomla 3.0
• Default Joomla pages supported
• Infinity scroll (auto load items when scrolling down)
• Supports Mega Menu
• Supports multiple layouts
• Supports multiple themes
• Supports RTL language
• Supports Easyblog
• Supports 41 langauges

2. JA Extensions Supported

• JA Slideshow module
• JA Newsticker module
• JA Tabs plugin
• JA Disqus Debate Echo plugin
• JA Google Map plugin
• T3 Framework plugin
• JA Extensions Manager Component

3. Third Party Extensions Supported

• Easyblog Component

4. Layout and Module Positions

Please refer to the below image for all the structures, layouts as well as module positions in JA Magz for its homepage.

1. Plan your site Development

• Making a New Site ? - If you are planning to make a new site, then use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package.
• Installing on your live site ? - If you are planning to use this template on your already live site. Then you should follow How to make your site look like demo site guide first to know about the steps involved.

2. Download Template and Extensions

Browse and Download: Go to the Download page of JA Magz and download the template zip file.

3. Install Template

Install the template: Now install the template on your Joomla 2.5 & Joomla 3.0 system. Follow This Guide if you are not familiar with the installation procedure.

4. Install Extensions

JA Magz template will install with settings used on the demo website, so you can postpone the configuration until you complete the setup (install other modules / plugins used in the demo website).

1. JA Extension Configuration

1.1 JA Slideshow Module

Module position: home-30
Module Suffix: Not Used

• Back-end Settings
• Front-end Appearance

1.2 JA Newsticker module

Module position : top-1
Module Suffix : Not Used

• Back-end Settings
• Front-end Appearance

1.3 JA Tabs Plugin

• Back-end Settings
• Front-end Appearance

1.4 JA Disqus Debate Echo plugin

• Back-end Settings

Note: The Disqus Comment Provider only, it does not support Intense Debate.

• Front-end Appearance

1.5 JA Google Map plugin

• Back-end Settings
• Front-end Appearance

2. Default Joomla Extensions Configuration

This modules are Joomla default modules, that means the modules are available right after you're done with a fresh Joomla installation

2.1 Articles Category module

2.1.1 Top Video

Module position : home-11
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.1.2 Popular

Module position : ja_tabs
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.1.3 Latest

Module position : ja_tabs
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.2 Banner module

There are 4 Banner modules were used in this template

2.2.1 Adv1

Module Position : home-11
Module Suffix :  Adv1

To build this module as it is per demo, please follow this step-by-step instruction as below:

Step 1: Create a new Category

Go to Administrator >> Components >> Banners >> Categories >> New

Step 2: Create a new Banner

Go to Administrator >> Components >> Banners >> Banners >> New

Step 3: Create a new banner module

Front-end Appearance

2.2.2 Ads in Articles list

Module Position : inline
Module Suffix :  adv2

To display as Demo site, please follow step by step as below:

Step 1: Create a new category

Go to Administrator >> Components >> Banners >> Categories >> New

Step 2: Create a new banner

Go to Administrator >> Components >> Banners >> Banners >> New

Step 3: Create a new banner module

Front-end Appearance

2.2.3 Adv2

Module Position : sidebar-2
Module Suffix :  Adv2

To build this module as it is per demo, please follow this step-by-step instruction as below:

Step 1: Create a new category

Go to Administrator >> Components >> Banners >> Categories >> New

Step 2: Create a new banner

Go to Administrator >> Components >> Banners >> Banners >> New

Step 3: Create a new banner module

Front-end Appearance

2.2.4 Adv3

Module Position : sidebar-2
Module Suffix :  Adv2

To build this module as it is per demo, please follow this step-by-step instruction as below:

Step 1: Create a new category

Go to Administrator >> Components >> Banners >> Categories >> New

Step 2: Create a new banner

Go to Administrator >> Components >> Banners >> Banners >> New

Step 3: Create a new banner module

Front-end Appearance

2.3 Footer module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : home-11
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.4 Language Switcher module

Module position : languageswitcherload
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.5 Latest News module

Module position : home-10
Module Suffix :  Not Used

• Back-end Settings

Note:

• To display related articles on latest news module as our demo, please following steps: Go to Content >> Article Manager >> Edit an article then add meta keywords for main article and articles which you want to display related news. See more detail here
• This module is using layout overrided in the template so articles will be ordered by recently added first and most view on module.
• Front-end Appearance

2.5 Login module

Module position : login
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.6 Menu module

2.6.1 News Menu module

To have it displayed as it is per Demo site, please follow the step by step instruction as below:

Step 1: Create "News" menu

Go to: Administrator >> Menus >> Menu Manager >> Add New Menu: News Menu. Then go to Administrator >> Menus >> News menu >> Add New Menu Items for the Menu.

Back-end setting for the menu items

• Nation
• World
• Politics

Step 2: Create the new "News" menu module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Go to Administrator >> Module Manager >> Add new Menu Module

Name: News
Module position : footer-1
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

Do the same for the Sport, Life, Money, Tech, Travel menu modules

2.6.2 Main Menu module

Step 1: Create "Main menu" menu and create all the menu items under this newly created main menu

Back-end setting for the menu items

• New Posts
• Videos
• Photos

Step 2: Create new "Main menu" module

Module position : mainnav
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.6.3 Section Menu module

Step 1: Create the "Section Menu" and create the menu items under it

Step 2: Create the new "Section Menu" module

Module position : sidenav
Module Suffix :  Not Used

• Back-end Settings
• Front-end Appearance

2.7 Popular module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : home-20
Module Suffix :  popular 

• Back-end Settings
• Front-end Appearance

2.8 Search module

This module is Joomla default module, that means when you install Joomla fresh, this module is ready to use.

Module position : head-search
Module Suffix :  Not Used

• Back-end Settings

2.9 Popular Tags module

This module is Joomla default module 3.x, that means when you install Joomla fresh, this module is ready to use.

Module position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

2.10 Latest Users

To display as Demo site, please follow step by step as below:

Step 1: Create a new user

Go to Administrator >> Users >> User Manager >> Add New User

Step 2: Create a new contact

Go to Administrator >> Components >> Contacts >> Contacts >> New

Step 3: Create a latest user

Module position : home-12
Module Suffix : Not Used

• Back-end Settings
• Front-end Appearance

1. Social

Module position : followus
Module Suffix : Not Used

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox">
<a class="addthis_button_facebook"><i class="icon-facebook"></i></a>
<a class="addthis_button_google_plusone_share"><i class="icon-google-plus"></i></a>
<a class="addthis_button_twitter"><i class="icon-twitter"></i></a>
<a class="addthis_button_linkedin"><i class="icon-linkedin"></i></a> 
</div>
<!-- AddThis Button END -->

You can add even more social share buttons for your social media profiles on Facebook, Twitter, and other popular social networks by getting the code via www.addthis.com site.

• Back-end Settings
• Front-end Appearance

2. Footer Logo

Module position : footer-logo
Module Suffix : Not Used

HTML Code:

<a href="http://www.joomlart.com/index.php">JA Magz</a>

• Back-end Settings
• Front-end Appearance

3. Footer Social

Module position : footer-social
Module Suffix : Not Used

HTML Code:

<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="joomlart"></a>
<a class="addthis_button_twitter_follow" addthis:userid="JoomlArt"></a>
<a class="addthis_button_rss_follow" addthis:userid="joomla.org/rss.html"></a>
</div>
<script type="text/javascript" src="http://www.joomlart.com///s7.addthis.com/js/300/addthis_widget.js#pubid=ra-523d4894767843b5"></script>
<!-- AddThis Follow END -->

You can add even more of the follow buttons for your social media profiles on Facebook, Twitter, and other popular social networks by getting the code via www.addthis.com site.

• Back-end Settings
• Front-end Appearance

4. JA Tabs

Module position : sidebar-2
Module Suffix : NOT USED

HTML Code:

<div>{jatabs type="modules" module="ja_tabs" position="top" mouseType="click" animType="animFade"}{/jatabs}</div>

• Back-end Settings
• Front-end Appearance

1. EasyBlog Component

A Magz supports Easyblog by default, we design specific styles for this component. So in order to have the EasyBlog design, you would need to download it, extract the files and add them to your site.

1.1 Installing Easyblog component

If you are new to Easyblog, and wondering on how to install and setup the component to your Joomla site, please check the following documentation.

1. Template Override

In short, to override the template, you should clone the template style then edit as you wish. After you're done with developing and stylingl, assign the cloned style to the specific menus. The assigned menus will then override them in the default style

Each style can be configured to use one theme and one layout so in one website, you can have menus with different themes and layouts.

2. Themes Settings

JA Magz supports up to 5 themes, the themes are available when you install the JA Magz template.

3. Layout Settings

JA Magz supports 2 layouts by default. You can customize the 2 layouts, create new layouts for your site.

The following video tutorials will show you how to work with Layouts: Configure and Customize.

4. ThemeMagic Settings

JA Magz is developed with T3 so you can also customize themes with ThemeMagic

To customize themes with ThemeMagic, you have to enable it first.

In the ThemeMagic working panel, you can customize all the themes easily without any code needed. The left panel is the setting area while the right panel is your site front-end. Each time you change any settings, click on "Preview" button to preview the changes in the front-end right on the right panel.

Follow this video tutorials to know how to customize themes and how to add new parameters to ThemeMagic.

5. Extended Settings

If you have ever used any JA Template developed with T3 Framework, you are probably already familiar with the Template setting panel. Each template can have different extended settings. In JA Magz template, the extended settings are located in the General (Administrator >> Extensions >> Template Manager >> JA Magz Template >> General)

5.1 Introtext Limit

This parameter allows user to set the limitation for the text characters that are displayed in the introtext of the featured articles.

• Front-end Appearance

5.2 Userpage Menu item

It is a required field if you want to enable menu items in the user detail page. If the "User Page" menu item is not yet created, please create then back to the page and assign to the field.

• Front-end Appearance

5.3 Addthis integration

The param allows user to either show or not show "addthis sharing" in the articles.

• Front-end Appearance

5.4 Related articles

To configure the related articles in the detail page, you can set the number of columns as well as articles to be displayed in the related articles block.

• Front-end Appearance

JA Magz template does supports sidebar menu and infinity pagination, it uses Show more button instead of the classic pagination.

To configure that, please proceed to the Navigation tab

5.5 Sidebar Menu

JA Magz supports Vertical Menu system, all you have to do is assigning menu to the Sidebar Menu field.

• Front-end Appearance

5.6 Infinity Pagination

The new feature in JA Magz allows user to use infinity button instead of classic pagination.

6. Content Type Settings

JA Magz template supports multiple content types, such as Video, Photo and Text type, each content type has its own styles and configuration.

To configure for the content types, please go to Administrator >> Content >> Article Manager >> Add New Article then select content type in JA Magz tab option.

• Front-end Appearance

6.1 Gallery type

• Back-end Settings
• Front-end Appearance

6.2 Video type

• Back-end Settings
• Front-end Appearance

6.3 Text type

• Back-end Settings
• Front-end Appearance

7. Category advanced options

7.1 Color for category

As per Demo site, each category has its different color style. To configure that, please go to Administrator >> Category Manager >> Select a category >> Open JA Magz Option then set the color choices you prefer.

• Front-end Appearance

7.2 Category layouts

This template supports an extra of 2 category layouts: Event page layout and Media blog layout..

7.2.1 Event page

To have Event page displayed as per demo, please go to Administrator >> Menu mangage >> Create new a menu item >> Select Magz event as menu item type.

• Back-end Settings
• Front-end Appearance

7.2.2 Video & Photo page

To display Video and Photo page as our demo, please go to Administrator >> Menu mangage >> Create new a menu item >> Select Magz event as menu item type.

• Back-end Settings
• Front-end Appearance

1. Menu items Back-end Settings

1.1 Main menu

• New Posts Menu
• Videos Menu
• Photos Menu

1.2 Section menu

• Home Menu
• News Menu
• Politics Menu
• Money Menu
• Life Menu
• Sport Menu
• Tech Menu
• Event Menu
• Other pages Menu
• Color Menu
• Bonus Page Menu
• Easyblog Menu
• User Page Menu

2. Megamenu Configuration

To configure Mega Menu, go to: Extensions>> Template manager >> open JA Magz template, in the Navigation setting, you can configure Mega Menu.

Step 1: Enable Mega Menu

Step 2: Open Mega Menu page

Step 3: Select Menu to configure Mega Menu

Step 4: Configure Mega Menu

JA Magz is a Joomla multilingual template that supports up to 41 languages (as supported by Bing). The section will guide you through how to build a Joomla multilingual site and maintain it.

1. Translate your site with JA Multilingual Component

The Multilingual component is a free joomla multilanguage translation extension. It uses BING API translation service (free service). With this, your site can be translated to any language, everything will be auto configured by this component. Once the translation is done, your Joomla site will be multilingual already. No manual configuration is required.

2. Clone styles and assign menus

Step 1: Clone styles

Once the translation is done, open the template manager panel (Extensions >> Template Manager). For each language, it should be cloned in 2 styles: Default and No Sidebar (except for the default language).

Step 2: Edit Default style

Now open the cloned Default style, we will assign language for the style and change its name corresponding to its assigned language.

Next, open the Navigation tab, you would need to assign the translated Main menu & Section menu to the original Main menu & Sidebar menu.

You can find the translated Main Menu and Sidebar Menu in the Association Manager of JA Multilingual component (Component >> JA Multilingual).

If you want to edit it, go ahead and click on Edit button of a language then copy the title.

Step 3: Edit No Sidebar style

For the style, do not assing language, you just need to assign the translated Main menu & Section menu to the original Main menu & Sidebar menu.

The "No Sidebar" style used "no-sidebr" layout so you have to assign the style to any menu that uses the layout (for current language only). To do this, please open the "Menu Assignment" tab.

Then assign the menu of current language.

Now check the front-page to make sure we don't miss anything.

The above userguide should help one in replicating the Demo site settings for the template and extension on their site.

Recommended :

If you are new or are confused, we recommend installing Quickstart on your localhost and use it as reference for configs. This is the best way to work with any template. Links to all the resources are provided above, you should carefully read them to take the maximum advantage of our products.

Support :

Please raise your support queries in the forum and make sure you follow the support guidelines. We spend more time in getting the information from user in case the support guidelines are not followed.

The responsive Joomla template for Social - JA Social is now compatible with the latest version T3 Framework, JomSocial, EasyBlog component, RTL language layout, K2, Kunena, ThemeMagic and so on. This template is available for both Joomla 2.5 and Joomla 3 version, a great start for your Joomla Social site.

1. Main Features

• Filter Tag Cloud (For Joomla 3 only)
• Developed with T3 Framework
• Supports Joomla 2.5 and Joomla 3
• Number of default Joomla pages supported
• Supports Mega Menu
• Supports multiple themes and layouts
• Supports RTL language

2. JA Extensions Supported

• JA Slideshow Module
• JA Facebook Activity Module
• JA Facebook Likebox Module
• JA Twitter Module
• JA Toppanel Module
• JA Login Module
• JA Typo Plugin
• JA Popup Plugin
• JA Disqus Debate Echo Plugin
• JA System Social Plugin
• JA T3 System Plugin
• JA Extension Manager Component

3. Third Party Extensions Supported

• Kunena Component
• K2 Component
• JomSocial Component

4. Layout and Module Positions

Please refer to the below image for all the structures, layouts as well as module positions in JA Social for its homepage.

1. Plan your site Development

• Making a New Site? - If you are planning to make a new site, use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package.
• Installing on your live site? - If you are planning to use this template on your existing live-site, read How to make your site look like demo site guide first to learn about the steps involved. Then you can follow the userguide below.

2. Download Template and Extensions

1. Slideshow module displayed on Homepage

Module Position : content-mass-top
Module Suffix : style2
Page assignment: Home page

• Back-end Settings

Front-end Appearance

2. JA Slideshow Module displayed in the Blog page

Module Position : slideshow
Module Suffix : NOT USED

• Back-end Settings

Create the slideshow image directory

Go to yoursite\images\stories\slideshow folder then create the "banner" folder directory (as we used on Demo). Copy all the images that you would like to use for the slideshow here.

The slideshow images dimensions should be 940x360 pixels.

Front-end Appearance

3. JA Facebook like box Module

On our demo, we name this module as FaceBook Like Box.

Module Position : right
Module Suffix : _facebook

• Back-end Settings

Front-end Appearance

4. JA Facebook Activity Module

On our demo, we name this module as Recently on FaceBook.

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings

Front-end Appearance

5. JA Twitter Module

On our demo, we name this module as Twitter.

Module Position : sidebar-1
Module Suffix : NOT USED

• Back-end Settings

Front-end Appearance

6. JA Login

On our demo, we name this module as Login.

Module Position : ja-login
Module Suffix : NOT USED

• Back-end Settings

Front-end Appearance

7. JA Top Panel Module

On our demo, we name this module as Top Panel.

Module Position : top-panel
Module Suffix : NOT USED

• Back-end Settings

Front-end Appearance

8. JA Popup Plugin

• Back-end Settings

Front-end Appearance

9. JA Disqus Plugin

• Back-end Settings

Front-end Appearance

10. JA Typo Plugin

This plugin allows you to add a variety of typo to your article. Once it is installed, you should enable the plugin in order to use it. Once you open the article you would like to add the typo to (in the back-end), you'll see the JA Typo button. Click on this JA Typo button and then select the typo type as you wish.

Front-end Appearance

Joomla Default Modules

1. Search Module

Module Position : head-search
Module Suffix : NOT USED

• Back-end Settings

Front-end Appearance

2. Who's online Module

Module Position : sidebar-2
Module title: Who's Online
Module Suffix : Not USED

• Back-end Settings

Front-end Appearance

3. Footer Module

Module Position : footer
Module Suffix : NOT USED

• Back-end Settings

Front-end Appearance

5. Latest News

Module Position : footer-1
Module Suffix : Not USED

• Back-end Settings

Front-end Appearance

6. Popular

Module Position : footer-2
Module Suffix : Not USED

• Back-end Settings

Front-end Appearance

7. Resources

Module Position : sidebar-1
Module Suffix :  _menu

• Back-end Settings

Front-end Appearance

If you are not sure how to use the Custom HTML Modules or how to access the HTML Editor, please Read this Guide.

Below are the HTML Codes (markup) which you should treat them as the references. You should replicate it exactly as it is, and then change the content as you would like it to be. Remember, these HTML code have the special div classes, which are required to display as how it is on the demo.

1. About Us

Module Position : footer-4
Module Suffix : NOT USED

HTML Code:

<p><img class="img-border" src="images/stories/demo/robot.png" border="0" alt="Robot" align="right" /></p>
<p>Platea tristique eleifend non vitae pulvinar est ac Curabitur non auctor. Tincidunt fames pulvinar Curabitur Curabitur adipiscing consequat justo ut dui tristique. Interdum nec tincidunt auctor tincidunt fames <a href="#" title="Sample link">pulvinar curabitur...</a></p>

• Back-end Settings
• Front-end Appearance

2. Search index

Module Position : footer-3
Module Suffix : NOT USED

HTML Code:

<ul>
<li><a href="#" title="Sample link">Vitae gravida wisi magna</a></li>
<li><a href="#" title="Sample link">Mus elit tristique urna</a></li>
<li><a href="#" title="Sample link">Venenatis Nulla tempus</a></li>
<li><a href="#" title="Sample link">Porttitor convallis quam</a></li>
<li><a href="#" title="Sample link">Vitae gravida wisi magna</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

3. Our Services

Module Position : footer-1
Module Suffix : NOT USED

HTML Code:

<ul>
<li><a href="#" title="Sample link">Vitae gravida wisi magna</a></li>
<li><a href="#" title="Sample link">Mus elit tristique urna</a></li>
<li><a href="#" title="Sample link">Venenatis Nulla tempus</a></li>
<li><a href="#" title="Sample link">Porttitor convallis quam</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

4. Follow Us

Module Position : footer-3
Module Suffix : NOT USED

HTML Code:

<ul class="social-list">
<li class="ja-facebook"><a href="#" title="Sample link">Facebook</a></li>
<li class="ja-twitter"><a href="#" title="Sample link">Twitter</a></li>
<li class="ja-linkedin"><a href="#" title="Sample link">Linkedin</a></li>
<li class="ja-rss"><a href="#" title="Sample link">RSS News</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

5. Contact Us

Module Position : footer-4
Module Suffix : NOT USED

HTML Code:

<ul class="contact-list">
<li class="add"><strong>Add: </strong> 1360 East 9th Street Suite 100 <br /> Cleveland, OH 44114-1782 USA</li>
<li class="tel"><strong>Tel: </strong>(+844) 456 789 101</li>
<li class="email"><strong>Email: </strong> infojoomsolutions.com</li>
</ul>

• Back-end Settings
• Front-end Appearance

6. Support Center

Module Position : footer-2
Module Suffix : NOT USED

HTML Code:

<ul>
<li><a href="#" title="Sample link">Vitae gravida wisi magna</a></li>
<li><a href="#" title="Sample link">Mus elit tristique urna</a></li>
<li><a href="#" title="Sample link">Venenatis Nulla tempus</a></li>
<li><a href="#" title="Sample link">Porttitor convallis quam</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

7. Browse & Feel

Module Position : top-panel-module
Module Suffix : _discussion

HTML Code:

<ul>
<li><a href="#">Etiam vel quam sed sapien</a></li>
<li><a href="#">Vestibulum in elit quis</a></li>
<li><a href="#">Duis hendrerit faucibus</a></li>
<li><a href="#">Phasellus rhoncus</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

8. Free Trial

Module Position : top-panel-module
Module Suffix : _blogs 

HTML Code:

<ul>
<li><a href="#">Aenean elit sapien</a></li>
<li><a href="#">Fusce lacinia</a></li>
<li><a href="#">Proin sit amet eros libero</a></li>
<li><a href="#">Ultrices lacus et egestas</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

9. Pay if you happy

Module Position : top-panel-module
Module Suffix : _opinion 

HTML Code:

<ul>
<li><a href="#">Suspendisse ornare accumsan</a></li>
<li><a href="#">Cum sociis natoque penatibus</a></li>
<li><a href="#">Aliquam erat volutpat</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

10. Play and Enjoy

Module Position : top-panel-module
Module Suffix : _communication 

HTML Code:

<ul>
<li><a href="#">Aliquam tincidunt ultrices dolor</a></li>
<li><a href="#">Nullam sodales vulputate vulputate</a></li>
<li><a href="#">Suspendisse dapibus</a></li>
</ul>

• Back-end Settings
• Front-end Appearance

11. Photo Gallery

Module Position : sidebar-1
Module Suffix : _communication 

HTML Code:

<div class="clearfix">
<div class="small-gallery first-item">{japopup type="image" title="Sample image 1" content="images/stories/gallery/gl-1.jpg" }<img class="img-border" src="images/stories/gallery/gl-1-thumb.jpg" border="0" alt="Sample image" />{/japopup}</div>
<div class="small-gallery">{japopup type="image" title="Sample image 2" content="images/stories/gallery/gl-2.jpg" }<img class="img-border" src="images/stories/gallery/gl-2-thumb.jpg" border="0" alt="Sample image" />{/japopup}</div>
<div class="small-gallery last-item">{japopup type="image" title="Sample image 3" content="images/stories/gallery/gl-4.jpg" }<img class="img-border" src="images/stories/gallery/gl-4-thumb.jpg" border="0" alt="Sample image" />{/japopup}</div>
<div class="small-gallery first-item">{japopup type="image" title="Sample image 4" content="images/stories/gallery/gl-2.jpg" }<img class="img-border" src="images/stories/gallery/gl-2-thumb.jpg" border="0" alt="Sample image" />{/japopup}</div>
<div class="small-gallery">{japopup type="image" title="Sample image 5" content="images/stories/gallery/gl-5.jpg" }<img class="img-border" src="images/stories/gallery/gl-5-thumb.jpg" border="0" alt="Sample image" />{/japopup}</div>
<div class="small-gallery last-item">{japopup type="image" title="Sample image 6" content="images/stories/gallery/gl-6.jpg" }<img class="img-border" src="images/stories/gallery/gl-6-thumb.jpg" border="0" alt="Sample image" />{/japopup}</div>
</div>
<div style="border-top: 1px dotted #ccc; margin-top: 10px; padding: 5px 0 0;"><a href="#" title="more">View more...</a></div>

• Back-end Settings
• Front-end Appearance

12. About Author

Module Position : sidebar-2
Module Suffix : NOT USED

HTML Code:

<p><img class="img-border" src="images/stories/demo/author.jpg" border="0" alt="Author" align="left" style="margin: 5px 10px 0 0; border: 3px solid #ddd;" /> Pellentesque dui sem semper justo Curabitur egestas sem ut Pellentesque libero. Purus et consectetuer vel pellentesque id quis sed id <a href="#" title="Sample link">dipiscing elit.</a></p>

• Back-end Settings
• Front-end Appearance

JA Social comes with multiple typography styles for headings, content, tables, buttons, quotes, lists and so on.

You can view all of them on the Typography Page on the Demo site here.

Here is the HTML code/markup for this Typography page

You can apply the above HTML codes/markup to replicate the same typography style across your site.

1. Kunena Component

JA Social supports Kunena styles by default. In order to have the Kunena design, you should download the Kunena theme for JA Social, extract the files and add them to your site.

1.1 Install Kunena Forum component

1.2 Configure Kunena Forum Component

Step1: download and extract Kunena theme for JA Social. Then go to the extracted folder: kunena_theme_social_t3.v1.0.0/components/com_kunena/template and copy ja_social folder into components/com_kunena/template folder on your site.

Step 2: Go to Administrator >> Component >> Kunena Forum >> Template Manager, set ja_social template as the default style.

Step 3: To set up the forum as on the Demo site, navigate to Administrator >> Component >> Kunena Forum >> Forum Configuration

Then configure for all the items as below:

• Back-end Settings for General
• Back-end Settings for Frontend
• Back-end Settings for Users
• Back-end Settings for Security
• Back-end Settings for Avatar
• Back-end Settings for Uploads
• Back-end Settings for Ranking
• Back-end Settings for BBCode
• Back-end Settings for RSS
• Back-end Settings for Extra

Step 4: Go to Menu >> Main Menu >> Add New Menu Item: Kunena Forum as below:

Front-end Appearance

2. K2 Component

2.1 Configure K2 component

If you are new to this Joomla component, please read this guide.

K2 Installation Documentation

2.2 Global Configuration: Click on the Parameter button on the right

Back-end Setting

• Layout & Views
• Content
• Images
• Social
• Comments
• Frontend and Editing
• Advanced
• Permission

2.3 Category Configuration

Note: We use different k2 templates for different category layouts. If you would like to configure your site as the demo, please follow the below instruction.

Navigate to Administrator >> Component >> K2 >> Categories

In the template, the Categories View category uses ja_erio template.The JA Erio Blog category uses ja_social_blog template.

All Categories view

• Front-end in Demo
• Back-end settings

Social Blog

• Front-end in Demo
• Back-end settings

Accounting jobs Europe

• Front-end in Demo
• Back-end settings
Note: Settings for other categories are inherrited from Accounting jobs Europe category.

2.3 K2 module configuration

2.3.1 K2 Content Module

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

2.3.2 K2 User Module

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

2.3.3 K2 Users Module

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

2.3.4 K2 Tool Module

Module Position : sidebar-2
Module Suffix : NOT USED

• Back-end Settings
• Front-end Appearance

3. JomSocial Component

JA Social supports styles for JomSocial by default. In order to apply the Jomsocial design, you should download the JomSocial theme for JA Social, extract all the files and add them to your site.

3.1 Install JomSocial component

3.2 Configure JomSocial component

Step1: To have the same design as on the demo site, you must download and extract Jomsocial theme for JA Social. Then go to the extracted folder: JomSocial_theme_Social_t3.v1.0.0/components/com_Social/template and copy ja_Social folder into components/com_Social/template folder on your site.

Step 2: Go to Administrator >> Component >> JomSocial >> Template Manager, set ja_social template as the default style.

Step 3: To set up for the forum as on Demo site, navigate to Administrator >> Component >> JomSocial >> Forum Configuration.

Then configure for all the items as below

• Back-end Settings for Site
• Back-end Settings for Media
• Back-end Settings for Groups
• Back-end Settings for Events
• Back-end Settings for Layout
• Back-end Settings for Privacy
• Back-end Settings for FaceBook connect

Step 4: Go to Menu >> Main Menu >> Add New Menu Item: JomSocial as below.

Front-end Appearance

1. Menu items Back-end Settings

• Home Menu
• Typography
• Features
• K2 Categories
• Kunena Forum
• Blog
• Jomsocial

2. Mega Menu Configuration

Go to Extensions >> Template manager >> JA Social template, in the Navigation setting to configure Mega Menu.

Step 1: Enable Mega Menu

Step 2: Click on the Megamenu button

Step 3: Select the menu to configure

Step 4: Configuration

4. How to create Menu item Tags using Mega Menu

4.1 Create Hot Tag in 404 Page menu

Open Mega Menu page then follow the 3 steps as below:

1. Select menu items need to create tag
2. Add Extra Class to style Megamenu
3. Input item Caption

Then click Save to save all the settings.

Front-end Appearance

4.2 Create New Tag in Blog Menu

Open Mega Menu page >> Select menu items to add tag >> Add Extra Class.

Front-end Appearance

5. Mega Menu Configuration

This is the video tutorial for Mega Menu configuration, you will learn how to build up a Mega Menu, how to use Mega Menu settings effectively, how to add icons, how to style menu items with our T3 Framework.

VIII. Template Customization

1. Template Override

In short, to override the template, you should clone the template style then edit as you wish. After you're done with developing and styling, assign the cloned style to the specific menus. The assigned menus will then override them in the default style.

Each style can be configured to use one theme and one layout. Thus, you can have menus with different themes and layouts in a single template.

2. Themes Settings

JA Social supports up to 5 themes, the themes are available when you install the JA Social template.

3. Layout Settings

JA Social supports 4 layouts:

The following video tutorials will show you how to work with Layouts: Configure and Customize.

Layout Configuration

T3 comes with ease of layout customization. The visual layout configuration is easier than ever before.

?

Layout Configuration

Layout Customization

The video tutorial guides you on how to customize the layouts, how to add new layout, and how to customize blocks in a layout.

?

Layout Customization

4. ThemeMagic Settings

JA Social is developed with T3 so you can customize themes with ThemeMagic. To customize themes with this feature, you have to enable this option first.

In the setting panel, you can customize all the themes. The left panel is the setting area while the right panel is your site's front-end. Each time you change settings, click on "Preview" button to view the change in front-end on the right panel.

The following video tutorials will show you how to customize themes and customize ThemeMagic.

ThemeMagic Customization

After watching the tutorial, you can be able to customize your theme quickly using ThemeMagic as well as know how to add new group and parameters to ThemeMagic.

?

ThemeMagic Customization

JA Obelisk is a new responsive movie magazine for Joomla 2.5 and Joomla 3. Developed with T3 Framework, it supports Megamenu, RTL language layout. The template features Easy Blog and K2 component.

1. Main Features

• Developed with T3 Framework
• Supports Joomla 2.5 and Joomla 3
• Number of default Joomla pages supported
• Supports Megamenu
• Supports multiple themes and layouts

2. JA Extensions Supported

• JA Slideshow Module
• JA Slideshow Lite Module
• JA Accordion Module
• JA Bulletin Module
• JA Content Slider Module
• JA Login Module
• JA Masshead Module
• JA Disqus Debate Plugin
• JA T3 System Plugin
• JA Extension Manager Component

3. Third Party Extensions Supported

• K2 Component
• EasyBlog

4. Layout and Module Positions

Please refer to the below image for all the structures, layouts as well as module positions in JA Obelisk for its homepage.

Module positions in default Layout: used in Homepage and other Joomla menu items

Module positions in default-dark layout: used in K2 menu items

1. Plan your site Development

• Making a New Site? - If you are planning to make a new site, use our Quickstart package to clone the demo site and replace the demo content with yours. Check How to install Quickstart Package.
• Installing on your live site? - If you are planning to use this template on your existing live-site, read How to make your site look like demo site guide first to learn about the steps involved. Then you can follow the userguide below.

2. Installing on your live site

2.1 Download Template and Extensions

To download JA Obelisk for T3 Framework package, please head over to the Download page.

2.2 Install Template

2.3 Install Extensions

We'll be installing JA Obelisk template with the settings as is used on the demo website, other customization should be postponed until you complete the initial setup (including modules & plugins as is on the demo).

1. JA Slideshow Lite Module

Module Position : slideshow
Module Suffix : NOT USED

• Details Settings
• Basic Settings
• Advanced Settings
• Menu Assignment Settings

Add Description

To add description for each slideshow item, click on EDIT button to add Title, link, description and class.

The description field use HTML to format, so you can apply the HTML tags to style for the description.

Front-end Appearance

2. JA Slideshow Module

Module Position : position-1
Module Suffix : slideshow

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

3. JA Accordion Module

3.1 JA Accordion Module displayed in "sidebar-1" position

Module Position : sidebar-1
Module Suffix : hightlight accordion

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

3.2 JA Accordion Module displayed in "sidebar-2" position

Module Position : sidebar-2
Module Suffix : hightlight accordion

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

4. JA Bulletin Module

4.1 Top Week

Module Position : ja-obelisk-topmovie-joomla
Module Suffix : NOT USED

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

4.1 Top Month

Module Position : ja-obelisk-topmovie-joomla
Module Suffix : NOT USED

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

5. Top Month

5.1 Featured Photos

Module Position : sidebar-2 
Module Suffix : NOT USED

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

5.2 JA Content Slider

Module Position : slider
Module Suffix : NOT USED

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

1. Enable Tabs

To enable these tabs, from back-end of JA Content Slider module, open tab Advanced Options the select default-home alternative layout.

2. Customize Tabs

We customized the default layout of JA Content Slider module, the customized layout is default-home.php in:

If you want to disable any tab, open default-home.php file, then file the following code.

$order_field = array("created","ordering","hits");

Delete the tab you don't want to enable it in front-page.

6. JA Login Module

Module Position : head-login
Module Suffix : NOT USED

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

7. JA Masshead Module

Module Position : masshead
Module Suffix : NOT USED

• Details Settings
• Basic Settings
• Menu Assignment Settings

Front-end Appearance

8. JA Diqus Debate Plugin

Install the plugin then enable it.

Back-end Settings

Front-end Appearance

Joomla Default Modules

1. Most Read Content Module

1.1 Popular

Module Position : ja-obelisk-accordion-joomla 
Module Suffix : NOT USED

• Basic Settings

Front-end Appearance

1.2 What's hot

Module Position : footer-1
Module Suffix : NOT USED

• Basic Settings

Front-end Appearance

2. Who's online

Module Position : sidebar-1
Module Suffix : NOT USED

• Basic Settings

Front-end Appearance

3. Banner Module

3.1 Banner Module in position "sidebar-2"

Front-end Appearance

Step 1: Create new banner

From back-end of your site, go to Extensions >> Banner.

Then create new banner, check the setting of adding new banner form HERE.

Step 2: Create module Banner

Module Position : sidebar-2
Module Suffix : banner

• Basic Settings

3.2 Banner Module in position "position-2"

Front-end Appearance

3.3 Banner Module in position "footer-banner"

Front-end Appearance

Step 1: Create new banner

From back-end of your site, go to Extensions >> Banner.

Then create new banner, check the setting of adding new banner form HERE.

Step 2: Create module Banner

Module Position : footer-banner
Module Suffix : banner

• Basic Settings

JA Obelisk template supports K2 Component, in each K2 Item detail page, it contains number of elements like: masshead, extra fields, video gallery, photo gallery ...

Front-end Appearance

We will guide you how to create/enable the elements.

1. Masshead

2. Extra Fields

The extra fields works like tags, when user click on any extra field, they will be navigated to a page that contains all items with the same extra field.

Step 1: Add Extra field groups

To add new extra field group, go to Components >> K2 >> Extra Field Groups then click on New button to add new extra field group.

Step 2: Add Extra fields

After creating new extra field group, go to Extra Fields tab to create new extra fields.

Step 3: Add extra fields for K2 items

Open the article edit form, find and open tab Extra Fields.

3. Video Gallery

When clicking on Launch Demo modal under the article main image, you will see a video gallery.

Video Gallery in popup view

To add the video gallery, from back-end of your site, open article you want to add video gallery, open Media tab and embed videos.

<iframe width="560" height="315" src="http://www.joomlart.com///www.youtube.com/embed/YLorLVa95Xo" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="http://www.joomlart.com///www.youtube.com/embed/Ke1Y3P9D0Bc" frameborder="0" allowfullscreen></iframe>

4. Photo Gallery

For each K2 Item, you can display a photo gallery.

To add the photo gallery, from back-end of your site, open article you want to add photo gallery, add the images to the bottom of content field.

<img src="http://www.joomlart.com/images/joomlart/k2/18/Iron-man3_01.jpg" alt="" />
<img src="http://www.joomlart.com/images/joomlart/k2/18/Iron-man3_02.jpg" alt="" />
<img src="http://www.joomlart.com/images/joomlart/k2/18/Iron-man3_03.jpg" alt="" />
<img src="http://www.joomlart.com/images/joomlart/k2/18/Iron-man3_04.jpg" alt="" />
<img src="http://www.joomlart.com/images/joomlart/k2/18/Iron-man3_05.jpg" alt="" />

5. Disqus Comment

JA Obelisk template has some extended settings, they are Userpage menu itemsid and K2 filter menu itemsid.

1. Userpage menu itemsid

Click on username on any listing page

The Userpage includes user info and list of their articles.

To set up this page, follow the instructions

Step 1: create a userpage menu

Create userpage menu (menu type is Single Contact)