Professional Documents
Culture Documents
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
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
Overview files
Overview files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
4
Files Installation
Component Administration
16
20
IIntroducing
ntroducing
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
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.
What is the better way for me to place a problem in the support forum?
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.
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
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
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.
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
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
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
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
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.
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.
Adding Groups
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.
You are now in the tabs page configuration and can add the tab content.
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.
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
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.
After all Tabs are added to the group, you can easily edit each one of them. Heres a screenshot of a view group.
15
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:
16
Module height:
Module width:
Tabs group:
Identify Group with tabs (if list is blank then it means that you
must add new group in Tabs Manager GK2)
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
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
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.
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:
Use Mootools:
Demo Examples
After all module parameters with detail information, you can start exploring the full capacities of this great extension.
19
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
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
20
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.
21