This article will introduce the module position diagram of template OT VozzMag 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 options of template and modules. It will be better than just reading this post only.

 

 

1. Template's Position diagram

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

 

 

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

  • K2 Content module (mod_k2_content)

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. Breaking News module

 

K2 Content module – Breaking News
Figure 3: K2 Content module – Breaking News
Table 1: K2 Content - Breaking News module settings
OptionValueNote
Title Breaking News  
Show Title Show  
Position navigator-1  
Status Published  
Module class suffix carousel-slide carousel-vertical style-inline mod-style0 A white space before value
Select sub-template Use default  
Source Retrieve items from categories  
Category filter (choose All or choose some categories)  
Item view options
  • Title: Show
  • Others: Hide
 
Menu assignment (Show on All pages)  
(Other options) (leave default value of module)  

 

3.1.2. Slideshow (Featured Contents) module

 

K2 Content - Slideshow module
Figure 4: K2 Content - Featured posts Slideshow module

 

Table 2: K2 Content - Slideshow module backend settings
OptionValueNote
Title K2 Slideshow - Featured Contents  
Show Title Hide  
Position middle-1  
Status Published  
Module class suffix carousel-slide carousel-fade A white space before value
Select sub-template single  
Source Retrieve items from categories  
Category filter (choose All or choose some categories)  
Featured items Show only Featured Items  
Item view options
  • Title, Introtext, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment Homepage  
(Other options) (leave default value of module)  

 

 

 

3.1.3. Most rated posts (Custom Middle 2) module

 

K2 Content - Most Rated Posts module
Figure 5: K2 Content - Most Rated Posts module

 

 

Table 3: K2 Content - Most Rated Posts module settings
OptionValueNote
Title Most rated posts (Custom Middle 2)  
Show Title Hide  
Position middle-2  
Status Published  
Module class suffix custom_banner A white space before value
Select sub-template porfolio1  
Source Retrieve items from categories  
Category filter (choose All or choose some categories)  
Item count 3  
Item ordering Highest rated  
Featured items Show
 
Time range All time  
Item view options
  • Title, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment Homepage  
(Other options) (leave default value of module)  

 

 

3.1.4. Latest News module

 

K2 Content - Latest News module
Figure 6: K2 Content - Latest News module

 

Table 4: K2 Content - Latest News module settings
OptionValueNote
Title Latest News  
Show Title Show  
Position content-top-1  
Status Published  
Module class suffix    
Select sub-template blog1  
Source Retrieve items from categories  
Category filter (choose All or choose some categories)  
Item count 3  
Item ordering Most recent first  
Featured items Show  
Item view options
  • Title, Introtext, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment Homepage  
(Other options) (leave default value of module)  

 

 

 


3.1.5. Most Popular module

 

K2 Content - Most Popular module
Figure 7: K2 Content - Most Popular module

 

Table 5: K2 Content - Most Popular module settings
OptionValueNote
Title Most Popular  
Show Title Show  
Position content-top-2  
Status Published  
Module class suffix    
Select sub-template blog1  
Source Retrieve items from categories  
Category filter (choose All or choose some categories)  
Item count 3  
Item ordering Most popular  
Featured items Show  
Item view options
  • Title, Introtext, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment Homepage  
(Other options) (leave default value of module)  

 

 

 

3.1.6. K2 Content modules at content-bottom blocks

 

K2 Content - K2 Content modules at bottom
Figure 8: K2 Content - K2 Content modules at bottom

 

Table 6: K2 Content - settings of 3 K2 Content modules at bottom
OptionValueNote
Title (Name it at will)  
Show Title Show  
Position content-bottom-1 | content-bottom-2 | content-bottom-3  
Status Published  
Module class suffix title-block  
Select sub-template blog1  
Source Retrieve items from categories  
Category filter (choose a category)  
Item count 3  
Item ordering Random ordering  
Featured items Show  
Item view options
  • Title, Introtext, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment Homepage  
(Other options) (leave default value of module)  

 

 


3.1.7. K2 Content module at sidebar

 

K2 Content - K2 Content module at sidebar
Figure 9: K2 Content - K2 Content module at sidebar

 

Table 7: K2 Content - Settings for K2 Content module at sidebar
OptionValueNote
Title (Name it at will)  
Show Title Show  
Position content-top-2  
Status Published  
Module class suffix    
Select sub-template default2  
Source Retrieve items from categories  
Category filter (choose All or choose some categories)  
Item count 4  
Item ordering Random ordering  
Featured items Show  
Item view options
  • Title, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment (choose Homepage or some pages)  
(Other options) (leave default value of module)  

 

 

 


 

3.2. Customized K2 Content module (OMG K2 Content)

 

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

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

 

 

News modules at homepage
Figure 11: News modules at homepage (Example: "Business", "Entertainment")

 

Edit the existing or create new instance of "OMG K2 Content" module and the settings are below.

 

Table 8: News modules at homepage ("Business", "Entertainment" for example)
OptionValueNote
Title (Name it at will)  
Show Title Hide  
Position content-top-3  
Status Published  
Module class suffix    
Select sub-template blog2  
Source Retrieve items from categories  
Category filter (choose a category)  
Fetch items from children categories Yes  
Category link Show  
Item count 5  
Item ordering Random ordering  
Featured items Show  
Item view options
  • Title, Introtext, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment Homepage  
(Other options) (leave default value of module)  

 

 

Videos module at homepage
Figure 12: Videos module at homepage

 

Edit the existing or create new instance of "OMG K2 Content" module and the settings are below.

 

Table 9: Videos module at homepage
OptionValueNote
Title (Name it at will)  
Show Title Hide  
Position content-top-3  
Status Published  
Module class suffix  cols3  
Select sub-template default1  
Source Retrieve items from categories  
Category filter (choose a category)  
Fetch items from children categories Yes  
Category link Show  
Item count 3  
Item ordering Default  
Featured items Show  
Item view options
  • Title, Image, Category, Created date and time, Comments counter and anchor link: Show
  • Others: Hide
 
Menu assignment Homepage  
(Other options) (leave default value of module)  

 

 


 

 

3.3. Mega Menu


3.3.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 13: 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 14: Mega menu item settings - item 1, 2

 

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

 

 

 

3.3.2. MegaMenu module settings

 

MegaMenu module settings
Figure 16: MegaMenu module settings

 

MegaMenu module settings - Advanced
Figure 17: MegaMenu module settings - Advanced

 

 

 

3.4. Custom HTML module

 

Notice

Some Custom HTML modules have content which use shortcode. So please make sure short-code plugins installed and activated!

 

3.4.1. Custom HTML - Social and date time

In module's content editor area, toggle to HTML mode and paste this html:

<div class="pull-right text-uppercase">
<p>[currentdate format="l, F j, Y"]</p>
</div>
<div class="pull-right">
<p><a href="#">[icon type="awesome" name="facebook" size="" color="" class="" /]</a> <a href="#">[icon type="awesome" name="twitter" size="" color="" class="" /]</a> <a href="#">[icon type="awesome" name="rss" size="" color="" class="" /]</a> <a href="#">[icon type="awesome" name="google-plus" size="" color="" class="" /]</a></p>
</div>

We won't display the module title, just content.

Position: navigator-2

Module class suffix (a space before): custom-socials

 

3.4.2. Custom HTML - Tabs at right sidebar

 Tabs in custom HTML

 

In module's content editor area, toggle to HTML mode and paste this html:

<div class="sc-wrapper">[tabs max_width="" class="tab_style1 noborder"]<br />[tab title="World News"]
<div>
<div class="sc-wrapper">[module class="" type="mod" params="116" modstyle="" /]</div>
</div>
[/tab]<br />[tab title="Most Commented"]
<div>[module class="" type="mod" params="117" modstyle="" /]</div>
[/tab]<br />[/tabs]</div>

We won't display the module title, just content.

Replace value in params="116"params="117" by module's Id that you want to display in tabs.

Position: right

 

3.4.3. Custom HTML - Recent Twitter Posts at bottom

 

Custom HTML - Recent Twitter posts

 

In module's content editor area, toggle to HTML mode and paste this html:

<p>[social mode="twitter_timeline" widget_id="496199947218190337" tweet_limit="2" tweet_theme="dark" tweet_colorlnk="#666666" tweet_params="nofooter noheader noborders transparent" class="" name="omegatheme"/]</p>

Replace value in name="sample-name" by your twitter username.

Show title: Show

Position: bottom-2

 

 

 

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 VozzMag Template
  2. Additional module styles via class-suffix for template VozzMag