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
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.
If you install template package manually or without install sample data, you need to create these module instances (Extensions → Module Manager → New, then choose K2 Content module). We will introduce these in below sub-sections.
3.1.1. Breaking News module
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| Menu assignment | (Show on All pages) | |
| (Other options) | (leave default value of module) |
3.1.2. Slideshow (Featured Contents) module
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| Menu assignment | Homepage | |
| (Other options) | (leave default value of module) |
3.1.3. Most rated posts (Custom Middle 2) module
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| Menu assignment | Homepage | |
| (Other options) | (leave default value of module) |
3.1.4. Latest News module
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| Menu assignment | Homepage | |
| (Other options) | (leave default value of module) |
3.1.5. Most Popular module
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| Menu assignment | Homepage | |
| (Other options) | (leave default value of module) |
3.1.6. K2 Content modules at content-bottom blocks
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| Menu assignment | Homepage | |
| (Other options) | (leave default value of module) |
3.1.7. K2 Content module at sidebar
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| 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.
Edit the existing or create new instance of "OMG K2 Content" module and the settings are below.
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| Menu assignment | Homepage | |
| (Other options) | (leave default value of module) |
Edit the existing or create new instance of "OMG K2 Content" module and the settings are below.
| Option | Value | Note |
|---|---|---|
| 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 |
|
|
| 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.
And below is menu item settings for items marked 1, 2, 3, 4
3.3.2. MegaMenu module settings
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
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
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.
#