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

We recommend that you should install quickstart package (if you did not) on your local machine or any testing host to walk around pre-configured template and modules. It will be better than just reading this post only.

 

 

1. Template's Position diagram

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

 

 

 

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 SmartSolutions supports K2 Content component and its modules BUT you need download K2 Content and install it before continue reading. Two modules were used in this template:

  • K2 Content module (mod_k2_content)
  • K2 Comments module (mod_k2_comments)

Note that if you use the Quickstart package, K2 Content 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. K2 Content module

Many module instances of K2 Content module are created to put on many positions for different purposes.

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

K2 Content module instances
Figure 2: All K2 Content module instances (already configured in Quickstart package)

 

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

 

 

3.1.1. Latest Posts module

 

K2 Content module – Latest Post
Figure 3: K2 Content module – Latest Post
Table 1: K2 Content - Latest Posts module settings
 OptionValue Note
 Select sub-template Use default  
 Position bottom-2  
Category filter (choose All or choose some categories)  
Menu assignment (Show on All pages)  
(Other options) (leave default value of module)  

 

K2 Content - Latest Posts module settings
Figure 4: K2 Content - Latest Posts module settings

 

 

 

3.1.2. Slideshow module

K2 Content - Slideshow module
Figure 5: K2 Content - Slideshow module

 

Slideshow module backend settings
Figure 6: K2 Content - Slideshow module backend settings

 

Table 2: K2 Content - Slideshow module backend settings
OptionValueNote
Module class suffix carousel-slide A white space before value
Select sub-template single  
Source Retrieve items from categories (You can choose "Select specified items" option to select specified items you want only)
Show title Hide  
Position middle-slide  
Category filter (choose a category which contains items for slideshow)  
Menu assignment (Show on homepage only)  
(Other options) (leave default value of module)  

 

 

 

3.1.3. Recent Projects Portfolio module

 

K2 Content - Recent Projects portfolio module
Figure 7: K2 Content - Recent Projects portfolio module

 

 

K2 Content - Recent Projects module settings
Figure 8: K2 Content - Recent Projects module settings

 

Table 3: K2 Content - Recent Projects portfolio module settings
OptionValueNote
Module class suffix  cols3 carousel-slide mod-style0 title-center A white space before value
Select sub-template portfolio  
Source Retrieve items from categories (You can choose "Select specified items" option to select specified items you want only)
Show title Show  
Position middle-area  
Category filter (choose a category which contains projects portfolio items)  
Menu assignment (Show on Homepage only)  
(Other options) (leave default value of module)  

 

 

3.1.4. Recent Blog Post module

 

K2 Content - Recent blog posts module
Figure 9: K2 Content - Recent blog posts module

 

K2 Content - Recent blog posts module settings
Figure 10: K2 Content - Recent blog posts module settings

 

Table 4: K2 Content - Recent BlogPosts module settings
OptionValueNote
Select sub-template blog  
Show title Show  
Position left | right  
Category filter (choose some categories contains FAQs)  
Menu assignment (Choose some page you want)  
(Other options) (leave default value of module)  

 

 

3.1.5. Accordion FAQs module

 

K2 Content - FAQs module
Figure 11: K2 Content - FAQs module

 

K2 Content - FAQs module settings
Figure 12: K2 Content - FAQs module settings

 

 

Table 5: K2 Content - FAQs module settings
OptionValueNote
Select sub-template accordion  
Show title Show  
Position left | right  
Category filter (choose All or choose some categories for blog posts)  
Menu assignment (Choose some page you want)  
(Other options) (leave default value of module)  

 


 

3.2. K2 Comments module

 

3.2.1. Latest Customer Testimonials

This module instance use K2 Comments module to show what customers says on your articles, your projects portfolios or your works.

 

K2 Comments - Customer Testimonials module
Figure 13: K2 Comments - Customer Testimonials module

 

K2 Comments - Customer Testimonials module settings
Figure 14: K2 Comments - Customer Testimonials module settings

 

Table 6: K2 Comments - Customer Testimonials module settings
OptionValueNote
Module class suffix carousel-slide title-center  A white space before value
Select module functionality Latest Comments  
Show title Show  
Position maintop  
Category filter (choose All or choose some categories)  
Menu assignment (Show on homepage only)  
(Other options) (leave default value of module)  

 


 

 

3.3. K2 Tools

 

K2 Tools module instances
Figure 15: K2 Tools module instances (already configured in Quickstart package)

 

 


 

3.4. Banner module

Use Banner module to get images and links from Banner component and display at home page as clients' logo.

 

Banner module - Clients logo
Figure 16: Banner module - Clients logo

 

Banner module settings - Client logos
Figure 17: Banner module settings - Client logos

 

Banner module - Client logos - advanced settings
Figure 18: Banner module - Client logos - advanced settings

 

 

Table 7: Banner module - Clients' logos module settings
OptionValueNote
Module class suffix  cols4 carousel-slide mod-style0  A white space before value
Alternative Layout Default  
Show title Show  
Category (Choose a banner category)  
Position mainbottom-1  
Menu assignment (Show on homepage only)  
(Other options) (leave default value of module)  

 


 

3.5. Mega Menu

 
3.5.1. Menu item settings

 

Below is sample Main menu structure (Sample content from Quickstart package).


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 SmartSolutions
Figure 19: Sample megamenu from template SmartSolutions

 

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

 

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

 

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

 

 

 

3.5.2. MegaMenu module settings

 

MegaMenu module settings
Figure 22: MegaMenu module settings

 

MegaMenu module settings - Advanced
Figure 23: MegaMenu module settings - Advanced

 

 


 

3.6. Custom HTML module

 

 

 

4. Other works

 

 

#

Articles in the same category

  1. Additional module styles via class-suffix for template SmartSolutions
  2. Install OT SmartSolutions Template