You are on page 1of 21

GA

VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

INSTRUCTION MANUAL

TABS MANAGER GK3


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

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

COPYRIGHT DISCLAIMER
GavickPro TABS MANAGER GK3 - Joomla!1.5 Component
Instruction Manual
Copyright 2009 GavickPro - http://www.gavick.com
This manual cannot be redistributed without permission from GavickPro
More info at: http://www.gavick.com
Author: Paulo Seichinha - GavickPro
FOR INFO, UPDATES, REQUESTS & CONTACT
Check out Gavick.com, the official website of this Joomla! Component and home to
most high quality and professional templates, components and modules.
Keep updated about all templates, components and modules by visiting our update.gavick.com
Copyright 2009 GavickPro - http://www.gavick.com

Table of Contents

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Introduction

Introduting Tabs Manager GK3 . . . . . . . . . . . . . . . . . . . . . . . 4


Key Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2

Special Notice and Recommendations

Notices and Recommendations . . . . . . . . . . . . . . . . . . . . . . . 5


3

Overview files

Overview files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4

Files Installation

Tabs Manager GK3 Component Installation . . . . . . . . . . . . . . . . . . 7


Tabs GK1 Module Installation . . . . . . . . . . . . . . . . . . . . . . . . 8
5

Component Administration

Component Administration Panel Overview . . . . . . . . . . . . . . . . . . 9


Component Settings. . . . . . . . . . . . . . . . . . . . . . . . . 10 - 11 - 12
Adding Groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 - 13
Adding Tabs to Group . . . . . . . . . . . . . . . . . . . . . . . . 13 - 14 - 15
6

Tab GK1 Module Configuration

16

Module Configuration . . . . . . . . . . . . . . . . . . . . . .16 - 17 - 18 - 19


Demo examples. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Custom User Style

20

Some tips for custom style . . . . . . . . . . . . . . . . . . . . . . . . 20 - 21

TABS MANAGER GK3

IIntroducing
ntroducing

Tabs Manager GK3

GA
VI
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Thumbs Up!!!... or should we say, tabs up!!


Thats right! More powerful and easy than ever, Tabs Manager Component reach
level 3. An impressive and fantastic tool, with compliments from GavickPro Team,
that will help you optimize and upgrade your Joomla!1.5 website, providing an
easy and intuitive tabs production of high quality design for modules, articles or
custom XHTML code display.
In addition, the Tabs Manager GK3 offers all websites developers the flexibility
to produce their own concept of design, integrating easily unique CSS style.
Therefore, no matter if you are a beginner or an expert, Tabs GK3 Manager
component will help you take a step forward, for the most professional high
quality presentation.

TABS MANAGER GK3

An overview of Tabs manager GK3 component key


features:

Joomla! 1.5 Native.


Javascript Framework Mootools
Option for use compressed engine script
New technique of assets Java Scripts files
Creation of tabs groups presentation
Custom tabs names
Provided with Tab GK1 module for content display
Support for multi language translation for components, plugins, extensions and modules
4 different styles presentation (horizontal - vertical and accordion)
Customize user style option formatting (for advanced users)
Integration of WYSIWYG editor for custom XHTML content production
Easy administration with Modalbox effect display
Lightweight, modern and fast-loading design.
Easy and friendly administration
Different amazing styles transitions effects
W3C XHTML 1.0 Transitional. W3C CSS Valid
Fully compatible IE7+, Firefox 2+, Flock 0.7+, Netscape, Safari, Opera 9.5, Chrome

Special No
Notices
ot
and Recommendations

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Here are some recommendations that you should considerate and might help you.

Do you have some problems with our tools?


Some usual problems reported on our support forum are originated from script conflict with 3th party tools. If you know Joomla suficient enough, you
already know that there is a huge amount of solutions and extensions available for free or some commercial from other team or developers. Naturally,
you will search others extension to complete some particular funcionality and your website needs, but understand that we are responsable only for our
templates and tools; and we cannot garantee that all 3th party extensions will work perfectly along with our tools. So, it is your hands and it is your
responsabity to choose those extensions on Joomla Comunity. Anyway, you always can ask for support in our forum and if is possible, we will try to help
you.
Another usual problem reported in our forum, is related with permissons on files and directory. Some tools need that some specific files are set with
rewrite or read permissions, so you can find some problems if you dont have this permissions set. Take note that we cannot control your server security
configuration, but we can point you directions were you must change this permissions. If you are unable to change it, we recommend that you contact
your host server provider.

Keep always updated!


We strongly recommend that you visit us regularly on update.gavick.com, were you can see the latest updates of our templates, components, plugins
and modules. If you have any problem, be sure the solution is not already available and you will avoid waste time searching or asking for solutions in our
forum support.

Need some small CSS style customizations adjustments?


You can always request some support from our Moderators or Developers, but you need to take in mind that this is customization and not regular support
service. We are considerating in the future to create personnal customization and installation services support for those who need it. Nevertheless, we will
always available to try to help you.
If you have some experience in CSS styling, we strongly recommend the use one of the most powerful tool for WebDesigners, available for free in FireFox
browser - The FireBug addon - a perfect ally and work tool.

What is the better way for me to place a problem in the support forum?

Need to contact Us?


Besides our official forum support, you can also contact us by Skype. Please check our contact page and we will reply to you as soon as posible.

TABS MANAGER GK3

If you need help in some issue, please post it in our forum support in the most objective way, preference in english language and with an URL to show
us the problem. This way, we will be able to give you the needed help in faster way.

Overview files
Overvie

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Overview files

Download our Tabs Manager GK3 component package, available for free in www.gavick.com. After downloaded, be sure to
unpack the file first, before start working on it.
Lets get started by showing you a brief overview of the files available inside the Tabs Manager GK3 package, after you
unpacked.
You will find 3 folder, identified as component, module and doc.

Inside the Component folder:

com_gk3_tabs_manager.zip
This file is the component and must be installed using the Joomla Installer.
Inside the Module folder:

mod_gk_tab.zip
This file is the module that will display on front page your tabs content group, set on the component. Use the Joomla installer
to install it.
Inside the Doc folder:

HelpFileTabsManagerGK3.pdf

TABS MANAGER GK3

This is the present Helpfile that will help and orientate you.

Files

Installation

GA
GA
VICKPRO
VICKPRO
VICK
VI
CKPR
PRO
O
CCRREEAATTIIVVEE JJOOOOMMLLAA!! DDEEVVEELO
LOPPMMEENNTT SSTTUUDDIIOO

Tabs Manager GK3 Component Installation


Notice!!! This extension was created to work with Joomla!1.5.10 version. If you are using older versions of Joomla, please
upgrade on http://www.joomla.org.

The installation is quite simple and it should not be a problem, if you follow correctly this instrutions.

Start by entering on your Joomla! Administrator and from the top dropdown menu, select Extensions > Install/Uninstall.
Click the browse button, search and select the component file inside the component folder (com_gk3_tabs_manager.zip) and
next click the Upload File & Install button to install the component. If all goes well, a message will appear saying Install
Component Success.

TABS MANAGER GK3

This page will display an overview of the component.

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Tab GK1 Module Installation


Now that the Component is installed, you can also install the respetive module for content display on front page. The process is
exactly the same.
From the top dropdown menu, select Extensions > Install/Uninstall, click the browse button, search and select the module
file inside the module folder (mod_gk_tab.zip) and next click the Upload File & Install button to install the module.
You should see a message saying Install Module Success.
This page will display an overview of the module.

TABS MANAGER GK3

You have now all the necessary files installed, lets take a overview of the component administration options.

Notice!!! For those who already add experience with older versions of Tabs Manager component, you may notice that there
are no plugins to install anymore. Thats because all plugins already are added on the Component installation. So, with this new
version, no need to install plugins.

Component

Administration

VICK
VI
CKPR
PRO
O
GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Component Administration Panel Overview


Before you start working with the Tabs Manager GK3 Component, lets take a view of all component options available.
Navigate to Components and click on Gavick Tabs manager GK3.

TABS MANAGER GK3

You are now inside the Component and it will looks like the following screenshot. This is the new administration panel, very
different from the previous one and more friendly and easy navigation.

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

The Component administration panel is constitued with the following blocks.


Top Menu
Path Component Navigation
Main Menu

Latest GavickPro News

Despite on the Top Menu you will find same and major options, the Main Menu block will be the most important and the one that
you will use more. The Main Menu is set by two blocks:
What do you want to do? block - Here you can add/edit groups and tabs in the most easiest way.
Component Settings block - Here you can change component settings, check your system, how to get more help and
stay updated with the latest GavickPro Team News.

Component Settings
TABS MANAGER GK3

Check System (Very Important!!!)

10

Before start building your tabs groups, the first step that you must do is to check your system, to see if all conditions are set
properly in your joomla database. So, press Check System button and a modalbox (popup) will open, displaying the Tables
status of the component. If they exist, you should see on the right side the work Yes with green color. If not, you will see No
in red color. That means your database does not have the necessary tables created on your joomla database. To fix this problem,
you might try to uninstall the component and install again or you can add manually this tables, using the MyPhpAdmin available
on your Cpanel Website. For this process, you can ask support in our forum.

VICK
VI
CKPR
PRO
O
GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

In the Check System page results, you also can check if theres any updated version of the component, so you can update as
soon as possible. Try it by pressing the Check for updates button.

Settings Overview
By pressing the Settings button, a new modalbox will open with the component features. Here you can disable some of the
component features and set it according your preferences.

TABS MANAGER GK3

The Modalbox effect is a new extension added to the component,


a nice and very useful popup window that is available by default
in the component administration. This extension provides you the
possibility to manage your groups and tabs more easier way, like
you will notice. If you prefer to work without it, using the normal
page display, disable this option on Modalbox for GavickPro news
on mainpage and also on Modalbox for component settings on
mainpage.

11

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

The Quick links is also another extension added to Tabs Manager, already used on
previous version, but now already added by default on the component administration.
In the right screenshot, you can identify it by the icon that you see. If you wish, you
can also disable this option on Quick links to remove/edit group and Quick links to
remove tab.

Another extension was added on Tabs Manager. The WYSIWYG editor is


now available on the component administration by default and can be
very useful when creating content on XHTML type tabs.
Also, if you prefer not working with this feature, you can disable this
option.

Adding Groups

TABS MANAGER GK3

After the component settings described, you can now start by creating your first tabs group.
On the What do you want to do ? menu block , click on the Add Group button. It will show you a Modalbox, where you can
add your group name and description.

12

GA
VICKPRO
VICK
VI
CKPR
PRO
O
GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

After you add the identification group, press Add group button and your new group will be saved.

You can edit easily the group, if you need, by clicking on the edit icon.

Adding Tabs to Group


Now that your group is set, you can start adding tabs. Return to the Mainpage of the component and them press Add tab
button.

You are now in the tabs page configuration and can add the tab content.

TABS MANAGER GK3

Select the group from the Modalbox (since you have only one, this will be your only choice) and press Choose a group
button.

13

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Tab name:
Add your tab name. This is the name of the tab that will be displayed.
Select tab type:
yp
There are 3 different types of tabs and depending on the choice you make, the last parameter change automatically. So, you can
choose from Article, Module or XHTML content.
Tab access:
You can control unique access level for display of the tab. For example, it can be view by all visitors or only registered
members.
Tab published:
You can control publishing or not on each tab.
Module Type
Module position:
Set position of the module that you want to display. Make sure that this module is enable on your modules administration (We
recommend that you set your module on a module position available on templateDetails.xml file and not on index.php. You can
easily add module positions as many as you like, by changing the templateDetails.xml.

TABS MANAGER GK3

Article Type

14

Select article:
Select your article that you want to display on the tab.
XHTML code Type
Content:
Using the WYSIWYG editor, add your custom content, from plain text, formated text, images or script code.

GA
VICKPRO
VICK
VI
CKPR
PRO
O
GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

For XHTML code, here some important notices:


Adding an external media player, like for example a VIMEO video. You can get the embed media code from the VIMEO
video page like this one:

<object width=400 height=300><param name=allowfullscreen value=true /><param


name=allowscriptaccess value=always /><param name=movie value=http://vimeo.com/moogaloop.swf?clip_
id=1528656&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;colo
r=&amp;fullscreen=1 /><embed src=http://vimeo.com/moogaloop.swf?clip_id=1528656&amp;server=vimeo.
com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=
1 type=application/x-shockwave-flash allowfullscreen=true allowscriptaccess=always width=400
height=300></embed></object>
You will need to add wmode=transparent to the parameters, like this:

<object width=400 height=300><param name=allowfullscreen value=true /><param


name=allowscriptaccess value=always /><param name=movie value=http://vimeo.com/moogaloop.swf?clip_
id=1528656&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;colo
r=&amp;fullscreen=1 /><embed src=http://vimeo.com/moogaloop.swf?clip_id=1528656&amp;server=vimeo.
com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1
type=application/x-shockwave-flash allowfullscreen=true allowscriptaccess=always wmode=transparent
width=400 height=300></embed></object>

Adding iframe
We strongly dont recommend the use of iframes on the tabs, for own joomla security website, but if you still wish to use it, be
warned that the tab may not the well displayed.

TABS MANAGER GK3

After all Tabs are added to the group, you can easily edit each one of them. Heres a screenshot of a view group.

15

Tab GK1 module configuration

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Module Configuration
Finally, we come to the configuration of the module
for the TabsManager GK2. So, navigate to Extensions
> Modules Manager, search for the Gavick Tabs GK1
and click to edit the module.
Next, you will see in detail all modules parameters and
advanced parameters that you will need to edit.
After all parameters configurations, set the module in
the position that you want to display on your page and
also set the Menu Assignment and enable it.

Module Parameters:
Module Class Suffix:
A suffix can be applied from the css class of the module
(table.moduletable) an this will allow individual module CSS
style.
Module Unique ID:

TABS MANAGER GK3

Unique ID for module (must be unique if you have two or


more modules on one page) (i.e. tabarts1).

16

Only for Articles!!!! The following fields identified with


blue highlight are only necessary to set, if you have one or
more article tab type.
News content - header position:
Set here the header position display.
News content - image position:
Set here the image position display.

Module height:

News content - text position:

The height of the display block. Add px suffix !

Set here the text article position.

Module width:

News content - info position:

The width of the display block. Value 0 means that height of


module is setting automatically. Add px or % suffix !

Set here info content position display.


News content - readmore position:

Tabs group:

Set here readmore link position.

Identify Group with tabs (if list is blank then it means that you
must add new group in Tabs Manager GK2)

News readmore button text:


Your own readmore button text.

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

News header - link:


News image - link:
News text - link:
Show news author:
Show news categories:
Show news date:
Enable or disable each of the above parameters.
News content - header order:
News content - image order:
News content - text order:
News content - info order:
Set order display of above parameters.
News text limit type:
Set Characters or Words.
Maximal amout of words or characters:
Set maximal value amount to be display, for characters or
words previously set.
Clean (X)HTML in content:
If you load part of news content then we recommend to turn
on this option...
News date - timezone:

News image height:


The height of the news image. Add px or % suffix ! (i.e.
200px)

TABS MANAGER GK3

Select how many hours must be added or substracted from


server time.

17

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

News image width:


The width of the news image. Add px or % suffix ! (i.e.
200px)
Date format:
All special chars will be replaced: D - full day name, s - short
day name, d - day (number without 0 prefix), z - day (number
with 0 prefix), M - full month name, S - short month name,
m - month (number without 0 prefix), Z - month (number
with 0 prefix), Y - year.
Author name - alias or name:
Option to display alias or name from article author.
Type of activation:
Select event for changing the tabs...
Autoanimation:
If you want to run animation until user to call event.
Animation type:
Select horizontal or vertical style animation.
Animation speed:
Set how long will be animation transition (in ms).

TABS MANAGER GK3

Animation interval:
Set how long will be stay animation. In ms.

18

Animation transition:
Select type of module animation transition, on 34 available
different styles.
Buttons prev and next:
Enable or disable the use of the navigation buttons.

Style CSS:
Select style of module from this following list:
style1 (horizontal/vertical/accordion)
style2 (horizontal/vertical/accordion)
style3 (horizontal/vertical/accordion)
style4 (only horizontal)
Style
y type:
yp
Select this value according the style that you choose
previously. If you choose style4, you must only set horizontal
type, because others will not work.
Style CSS file:
Set yyour own CSS filename without extension with module
style directory.
Style CSS suffix:
Set suffix used in your own style ( i.e. mystyle
mystyle )
Fixed height :
Fixed height
g - all tabs have this same height.
g
Fixed height value:
Fixed value of height for tab in pixels (i.e. 200).
Always hide:
Onlyy for accordion animation - if you
y want to have ppossibilityy
of hiding all tabs.

Module advanced parameters:

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

Clean template
p
code:

Use script:

Now modules support new technique of assets JavaScripts


files. If you want to get rid all configuration scripts to imported
scripts then enable this option. Value disabled means that
configuration scripts will be placed in template code (old
method).

In normal situations, option automatic is strongly


recommended. Use this option only if you have a problem
with scripts on your site. If you want to run more than one
copy of this module on same page, then set this value for
disabled.

Use Mootools:

Use compressed engine:

Use this option only if you have a problem with scripts on


your site. In other situations option automatic is strongly
recommended. If you want to run more than one copy of this
module on same page then set this value for disabled. Also
if you have an mootools framework in version 1.11 included
on your site, then disable this option also.

To minimise file size you can use compressed version of


engine, but for debugging you should use uncompressed
version of engine script (then disable this option). Additionaly
- when you use more than one copy of this module per one
page, then you must set this same value of this option for all
instances of module.

Demo Examples
After all module parameters with detail information, you can start exploring the full capacities of this great extension.

If you want to see some live example, please visit us on http://tools.gavick.com/demo

So, keep in touch with us, by visiting this


website and also the http://update.gavick.
com, where we announce all updates of
all tools.

TABS MANAGER GK3

There, in the near future, you also be


able to find the Video Tutorials for each
GavickPro Joomla!1.5 Tool Extension.

19

Custom User Style


Custo
Cust

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

As explained previously, TabManager


TabManag GK3 (like also previous version) allows users with basic knowledge of CSS style code, to
create
reate their own design
design. To do this
this, you must create your own style sheet and positioned it inside the CSS folder of each module.
For advanced users, this should not be a trouble at all, but for those who are not, we will give some tips to help.
Lets imagine that you want to create your own horizontal
style module. To do this, navigate to ../modules/mod_
gk_tab/styles/horizontal/... and inside of horizontal
directory, create a copy of (for example) the style1.css
file and rename it to mystyle.css.
Them open this file and you will notice that major classes
code ends with style1 suffix. For example, something
like this (look at the red style1 word):

ul.gk_tab_ul-style1 li {
float: left;
cursor: pointer;
margin: 0 3px -1px 0;
border: 1px solid #ebebeb;
border-bottom: none;
position: relative;
padding: 1px;
padding-bottom: 0px;
}
What you have to do is replace all style1 words with your own. So, heres the result:

ul.gk_tab_ul-mystyle li {
float: left;
cursor: pointer;
TABS MANAGER GK3

margin: 0 3px -1px 0;

20

border: 1px solid #ebebeb;


border-bottom: none;
position: relative;
padding: 1px;
padding-bottom: 0px;
}

GA
VICKPRO
C R E A T I V E J O O M L A ! D E V E LO P M E N T S T U D I O

But why should you do this?... Well, by doing this you already have something to work with. One code struture to explore and to
make your tests.
The next step is to navigate to the respetive module and validate your mystyle.css file, like the following screenshot indicates:

Please, remenber that you need to set the respective style type!
Now, you can work on your style. And for that... and for those who doesnt know, heres another and important tip.
We recommend the use the Firebug tool, that is perhaps one of the most important for Web Developers. You can get it by using
the FireFox browser and search this excellent addon. With this tool, you can easily change CSS code and see in real time the
result of it.

Hope this HelpFile was useful and help in some. If you need support for any technical question regarding our tools, please visit
our support forum on www.gavick.com.

TABS MANAGER GK3

You can get it on http://getfirebug.com/

21