Component: Tabs Manager

Joomla 1.5 Instruction Manual

Copyright © 2008 GavickPro - http://www.gavick.com

This manual cannot be redistributed without permission from GavickPro
More info at: http://www.gavick.com
 COPYRIGHT DISCLAIMER

Tabs Manager Component Manual

Copyright © 2008 GavickPro - http://www.gavick.com

This manual cannot be redistributed without permission from GavickPro
More info at: http://www.gavick.com
Author: James Leckenby - GavickPro

FOR INFO, UPDATES, REQUESTS & CONTACT

Check out Gavick.com, the official website of this Joomla! template manual and home to
other popular templates, components and modules.

Copyright © 2008 GavickPro - http://www.gavick.com

Table of Contents
1 Introduction 4
Features of Tabs Manager. . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Getting Started 5
Downloading Tabs Manager . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Files Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Component and Modules Installation . . . . . . . . . . . . . . . . . . . . . . 5

3 Tabs Manager Component 6

Configuration of Tabs Manager. . . . . . . . . . . . . . . . . . . . . . . . . 6
Adding a Group to Tabs Manager. . . . . . . . . . . . . . . . . . . . . . . . 7
Adding a New Tab to TabsMods Group. . . . . . . . . . . . . . . . . . . . . . 7
Adding a New Tab to TabsArts Group . . . . . . . . . . . . . . . . . . . . . . 8

4 TabsMods Module 9-10

Configuration of TabsMods. . . . . . . . . . . . . . . . . . . . . . . . . 9-10

5 TabsArts Module 11
Configuration of TabsArts. . . . . . . . . . . . . . . . . . . . . . . . . . . 11

6 Hints and Tips 13

1 Introduction to Tabs Manager

Tabs Manager is a fantastic new component from the team at GavickPro! The first page you will presented
with is a list of groups, each containing the tabs for modules. Once setup, users of your site will be presented
with the created tabs, each containing a module such as search or an arcticle.

With Tabs Manager from GavickPro, you can not only add user interaction to your website, but make it easy
to manage and create multiple instances of tabs, each with their own unique modules or an article present
on the Joomla! website.

An overview of Tab Manager key features:

• List of tab groups.

• Gavick Tabs Manager displays number of tabs and tab-type.
• Definable tab order.
• Choose custom names for your tabs.
• Insert articles into tabs.
• Insert modules into tabs.
• TabMods loads positions with modules.
• Uses mootools to provide flowing tab transitions.
• Multiple styles or create your own.
• Changable animation.
• Customisable height and width.

Installing GavickPro’s Tabs Manager is quick and easy! The following guide will help you set up Tabs
Manager on your Joomla! website, including where to find the files, how to install them, and a complete
guide to configuring them.
2 Getting Started

Downloading Tabs Manager Files

The first step in installing Tabs Manager on your Joomla! website is downloading all of the files from the
GavickPro website. These files will be needed to install the component and modules, and will allow you to
customize your site. Here is a brief overview of the files available in this release.

Tabs Manager Bundle (tabsmanager_pack.zip) – This package includes the following:

Tabs Manager Component (com_tabsmanager.zip): This is the component for Joomla! 1.5 which allows you to
construct your groups of tabs.

Modules: Tabs Manager has two modules you can use on your website - TabMods (mod_tabmods.zip) and
TabArts (mod_tabarts.zip)

Tabs Manager Installation

Step 1) Using the Joomla! Installer, navigate to the administrative panel on your Joomla site.  From the
top menu, select Extensions > Install/Uninstall.  Click the ‘browse’ button, select the component file
(com_tabsmanager.zip) and press ‘Upload File & Install.’  A message will appear saying ‘Upload component -
Success.’  This page will display an overview of the component, then select ‘Continue...’

Step 2) Repeat step one a further two times, except replacing the tabsmanager component files with the
module files (mod_tabmods.zip and mod_tabarts.zip).
3 Tabs Manager Component

Configuration of Tabs Manager

Note that this section assumes you have already set up some groups and tabs. If no groups with tabs are
present, please skip to instructions regarding how to add these.

Step 1) Navigate to the main page of the component by going to Components > Gavick Tabs Manager
(if you followed the installation instructions on the previous page this option should be in the list of
components).

Contained on the first page of the component, you can see list of groups, with the number of tabs in each
group, and the tab module being used.

Different modules needs different data stored in the site database, so correct selection of module (either
TabMods or TabArt) for each group (chosen when adding a group) is very important.

The second column on this page contains the most important informations for users, the ID of each seperate
group of tabs. This ID is necessary for the configuration of modules using module manager (Extensions >
Module Manager), which require the group ID displayed in this column. Group names and descriptions are
only identification purposes and are not used outside of the administration panel.

Step 2) When a group name is clicked, you will then be able to see a list of tabs in this group. These are
ordered by the order value present in the site database (you can change this value), and as such the first tab
in this list will be the first tab shown in the module displayed in the frontend of the site.

The screenshot above displays the contents of a created group. Note that is displays the ID, Tab Name, Tab
Content and order of the tabs.
Adding a Group to Tabs Manager
Step 1) First, navigate to the main page of Gavick Tab Manager (Components > Gavick Tabs Manager).
You will now see the main page, which has five icons to the top right of the page (View Group, Add Group,
Delete, Edit Group and Help & Info). To add a new group is self-explanitory, simply click Add Group!

Step 2) Now the page required to add a tab group has been opened, enter a Group Name (for example Front
Page Tabs), a description for the tab group, and choose a module for the tab group.

TabMods will load positions with modules, so that you can insert modules into your tabs. TabArts will
load selected articles into the tabs, for example a static content item.

Step 3) Once you have filled out all the required fields and choosen the module for the group, click the save
icon in the top right of the page.

As you will be able to see, you will now be navigated back to the main page of Gavick Tabs Manager, which
will now have your newly created group on display!

Adding a New Tab to TabMods Group

Step 1) First choose a group from the list that you would like the tab to be part of (this section deals with
adding a tab to a group using the TabsMods module) and click the Tab Group name to choose that group.
Next, click Add Tab, which is an icon located in the top right of the page after you have clicked the group
name, and you will presented with the page shown below.

Note that this may look different if you have chosen a TabArts group, and if so, please move onto the next
section which deals with adding a tab to a TabArts group!

Step 2) Now choose a tab name (for example Search), and the tab content. Note that if the component has
trouble reading the positions from your template, please enter the position name manually.
Please note that TabMods loads positions with modules, and not modules! It is also worth noting that
you should not, under any circumstances, create a tab that uses the same position as that containing the
TabMods module, as this will just create an infinite loop!

If your template has the module position built in and on display (for example left), then the tab will
display the same content as the left. This is why it is useful to choose (or edit) a template so that it has
included module positions which arn’t actually part of the template (so you can then use them for the
TabMods).

Step 3) Now you can press save, and the tab will be added to the group that you selected.

Adding a New Tab to TabArts Group

Step 1) First choose a group from the list that you would like the tab to be part of (this section deals with
adding a tab to a group using the TabsArts module) and click the Tab Group name to choose that group.
Next, click Add Tab, which is an icon located in the top right of the page after you have clicked the group
name, and you will presented with the page shown below.

Note that this may look different if you have chosen a TabMods group, and if so, please look at the
previous section which deals with adding a tab to a TabMods group!

Step 2) Now choose a tab name (for example About Us), and the tab content (the different articles available
are those present in the Article Manager).

Step 3) Now you can press save, and the tab will be added to the group that you selected.
4 TabsMods Module

Configuration of TabsMods
Step 1) First navigate to Extensions > Module Manager, which will then load a list of present modules, then
choose the TabsMods module.

As you can see here, you can have multiple instances, and for this help file, we are going to select one of
these instances and show you how to configure TabsMods. To do this, enter the normal way by clicking the
name of the module (in this case we are going to select Gavick TabMods).

The screenshot above shows the page which opens when the module name is clicked. In the next steps, we
will explain the different parameters and details, and how to configure them.
Step 2) It is very important for you to define a unique module ID if you have more that one group of tabs per
page. In this example, it has been defined as ‘-moddd4’.

You also need to define the width and height. When you are defining the height you should define the
height in px (for example 100px) and not percentages. However, the width can be defined as either px or
percentage.

The tabs group ID can be found in the Gavick Tabs Manger in the ID column (second column from the left),
and controls with group of tabs the module will load.

The type of activation can also be controled (on click or on mouseover), and you can also set auto-
animation.

Animation speed should be lower than animation interval if you have enabled the auto-animation
option.

You can also choose whether to position the slides horisontally or vertically, the type of animation, whether
you want next and back buttons, the style of the tabs and type of style, and style CSS file. With so many
options, GavickPro makes it easy to make unique tabs!

Note that when changing the Style CSS you choose, you will need to choose the correct option for style
type. For example, if you choose ‘style7 (vertical)’, you must choose vertical as the style type, otherwise
the module will not work correctly!

Step 3) If the template or another component or module does not load mootools into the page that contains
the tabs, then you must choose to use MooTools. The same rules also apply for use script, so if you have
multiple tab modules on the same page, only disable ‘use script’ on one of these.
5 TabsArts Module

Configuration of TabArts
This module has exactly the same configuration options as TabMods, except you have the option to enable
text limit, which cleans the article from all (x)HTML tags, and cuts the text down to the number of characters
defined in ‘Text Limit - Amount of Chars’.
6 Hints and Tips

Positions of the tabs in the vertical option style:

Open the css file (for example: style5.css) and change the float value:

change the following lines:

ul.gk_tabmodsmenu_ul {

float: left;

on : ul.gk_tabmodsmenu_ul {

float: right;