This article will introduce the module position diagram of template OT Furnite and guide you how to configure template and extensions to have your site looked like the demos.

Since we just introduced main extensions here, we recommend that you should install QUICKSTART package (if you did not) on your local machine or on any testing host to walk around configured options of template and modules. It will be better than just reading this post only.

 

 

1. Template's Position diagram

 

OT Furnite template positions
Figure 1: Position diagram of template OT Furnite

 

 

OT Furnite template positions on Large screen
Figure 2: Position diagram of template OT Furnite on Large screen

 

 

OT Furnite template positions on Medium screen
Figure 3: Position diagram of template OT Furnite on Medium screen

 

 

OT Furnite template positions on Small screen
Figure 4: Position diagram of template OT Furnite on Small screen

 

 

There is different configuration for positions bottom1-x through different screen sizes.

On Extra-Small screen size, all positions will have full width.

 

2. Template style configuration

Basically, after install the template package, the default template style is also installed so you may not have to configure anything. The default template style include layout configuration, preset colors, typography, etc., are configured to have the site match the design.

You may want to change logo, favicon, add Google Analytic code, custom some layout, custom some typo or add some custom CSS code, etc. These works should be done by working in template style edit page. We built a template framework to help you do these things more easily, intuitively and quickly.

To know more what you can do with Jarvis template framework for Joomla!, please read these posts.

 

3. Extensions configuration

 

Install third-party extensions first

The template Furnite supports Virtuemart (2.9.9.2+) component and its modules BUT you need download Virtuemart and install it before continue reading. The Virtuemart modules was used in this template:

  • Virtuemart Categories (mod_virtuemart_category)
  • Virtuemart Products (mod_virtuemart_product)
  • VirtueMart Shopping Cart (mod_virtuemart_cart)

Note that if you use the Quickstart package, Virtuemart component and modules were installed and configured already.

There are many module instances was created for example purpose and we will introduce them below as grouped by module type.

 

 

3.1. Virtuemart Category module

Virtuemart categories module configuration
Figure 5: Virtuemart Category module configuration

 

Menu assignment: Assign this module for inner pages at will.

 

 

3.2. Virtuemart Products module

 

If you use the Quickstart package, you can see all instances of this module as below figure. You can edit them at will.

Virtuemart Products modules
Figure 6: Virtuemart Products modules

 

If you install template package manually or without install sample data, you need to create these module instances (ExtensionsModule ManagerNew, then choose Virtuemart Products module). We will introduce these in below sub-sections.

 

 

3.2.1. Popular Products 

 

This module is displayed at homepage to show Popular products as design.

Virtuemart Products - Popular Products at homepage
Figure 7: Virtuemart Products - Popular Products at homepage

 

Virtuemart Products - Popular Products Settings
Figure 8: Virtuemart Products - Popular Products Settings

 

Menu Assignment: Homepage only

 

 

3.2.2. Best Sellers 

 

Virtuemart Products - Best Sellers Products
Figure 9: Virtuemart Products - Best Sellers Products

 

Virtuemart Best Sellers Products Settings
Figure 10: Virtuemart Products - Best Sellers Products Settings

 

Menu Assignment: at will, exclude Homepage.

Module Position: right or left or create two instances to show in both left and right sidebar.

 

 

3.3. Virtuemart Shoping Cart module

If you use the Quickstart package, you can see all instances of this module as below figure. You can edit them at will.

If you install template package manually or without install sample data, you need to create these module instances (ExtensionsModule ManagerNew, then choose Virtuemart Shopping Cart module).

 

Virtuemart Shopping Cart modules
Figure 11: Virtuemart Shopping Cart modules

 

In this template, there are two instances of this module which one displays on top of all page and another displays at sidebar. We will introduce these in below sub-sections.

 

 

3.3.1. Cart module at top

Virtuemart shopping cart at top
Figure 12: Virtuemart shopping cart at top

 

Virtuemart shopping cart at top - settings
Figure 13: Virtuemart shopping cart at top - settings

 

Menu Assignment: All page.

Position: top1-2

Class suffix: pull-right

 

 

3.3.2. Cart module at right sidebar

 

Virtuemart shopping cart at right sidebar
Figure 14: Virtuemart shopping cart at right sidebar

 

Virtuemart shopping cart at right sidebar - settings
Figure 15: Virtuemart shopping cart at right sidebar - settings

 

Menu Assignment: At will.

Position: right

 

 

3.4. Customized Virtuemart Category module - Categories Scroller

 

Customized Virtuemart Categories module - Categories Scroller
Figure 16: Customized Virtuemart Category module - Categories Scroller at Homepage

 

 If you installed Quickstart package, you can find module "OT VirtueMart Category" and you can edit it at will.

If you install template manually or do not use sample data, you need to create a new instance of module "OT VirtueMart Category" (ExtensionsModule ManagerNew, then choose OT Virtuemart Category module).

 

Customized Virtuemart Category module - Categories Scroller - Settings
Figure 17: Customized Virtuemart Category module - Categories Scroller at Homepage - Settings

 

Menu Assignment: At Homepage.

Position: middle1-1

 

 

3.5. Mega Menu


3.5.1. Menu item settings

 

Below is sample Main menu structure.


Home (Articles » Featured Articles)

Joomla! Pages (External URL)

|— Layout (Menu Heading) 1

|—|— No Sidebar (Articles » Single Article)

|—|— 1 Sidebar (Articles » Single Article)

|—|— 2 Sidebars (Articles » Single Article)

|— Bonus Pages (Menu Heading) 2

|—|— Bonus 1 (Menu Heading) 3

|—|—|— Login Form (Users Manager » Login Form)

|—|—|— Registration Form (Users Manager » Registration Form)

|—|—|— User Profile (Users Manager » User Profile)

|—|—|— Smart Search (Smart Search » Search)

|—|— Bonus 2 (Menu Heading) 4

|—|—|— News Feeds (Newsfeeds » List News Feeds in a Category)

|—|—|— Weblinks (Weblinks » List Web Links in a Category)

|—|—|— Offline Page (Articles » Single Article)

|—|—|— 404 Page (Menu Item Alias)

Pages (External URL)

|— Team Member (Articles » Single Article)

|— Services Page (Articles » Single Article)

|— Pricing Page (Articles » Single Article)

|— About Us (Articles » Single Article)

|— Module Styles (Articles » Featured Articles)

K2 (External URL)

|— K2 Item (K2 » Item)

|— K2 Layout (External URL)
...

|— K2 Categories (K2 » Categories)
...

|— K2 User Page (K2 » User page - blog)

|— K2 Tags (K2 » Tag)

|— Latest (one column) (K2 » Latest items from one or more users or categories)

|— Latest (more columns) (K2 » Latest items from one or more users or categories)

Contact (Contacts » Single Contact)

 

In this example, we will configure to group menu items to have each items marked 1, 2, 3, 4 above to be columns as below figure.

 

Sample megamenu from template VozzMag
Figure 18: Sample megamenu from template VozzMag

 

And below is menu item settings for items marked 1, 2, 3, 4

 

Mega menu item settings - item 1, 2
Figure 19: Mega menu item settings - item 1, 2

 

Mega menu item settings - item 3, 4
Figure 20: Mega menu item settings - item 3, 4

 

 

 

3.5.2. MegaMenu module settings

 

MegaMenu module settings
Figure 21: MegaMenu module settings

 

MegaMenu module settings - Advanced
Figure 22: MegaMenu module settings - Advanced

 

 

 


3.6. Other modules

 

3.6.1. Search Module

  • Position: custom-search
  • Show title: Hide
  • Search Button: Yes
  • Button Position: Right
  • Search Button Image: Yes (/templates/ot_furnite/assets/images/searchButton.png)
  • Menu Assignment: All page
  • Module Class Suffix:  pull-right (a white space before)

 

 3.6.2. Menu modules

Some menu modules which on positions: top1-2, bottom1-1, bottom1-2, bottom1-3, footer1-2. Create menus, menu module instances and put it in these positions at will.

 

3.6.3. Custom HTML module

  • Logo: Change or create new Custom HTML module, put in position top1-1. If you want to use logo image uploaded from Template Manager (Jarvis framework), please navigate to tab "Layout" and map the position logo instead of top1-1 into this top block.
  • Custom HTML modules in positions: mainbottom1-1 ("Free Shipping"), mainbottom1-2 ("Call Now"), bottom1-4, bottom1-5, footer1-1 (Credit info), footer2-1 (Footer Logo). Change or create new at will.

 

 

4. Other works

For others things, please refer quickstart demo site which you installed to follow sample data and configurations.

 

 

#

Articles in the same category

  1. Install OT Furnite Template