creative joomla! development...

GAVICKPROC 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 © 2009 GavickPro - http://www.gavick.comThis manual cannot be redistributed without permission from GavickPro

More info at: http://www.gavick.com

INSTRUCTION MANUAL

TABS MANAGER GK3

COPYRIGHT DISCLAIMER

GavickPro TABS MANAGER GK3 - Joomla!1.5 ComponentInstruction Manual

Copyright © 2009 GavickPro - http://www.gavick.comThis manual cannot be redistributed without permission from GavickPro

More info at: http://www.gavick.comAuthor: Paulo Seichinha - GavickPro

FOR INFO, UPDATES, REQUESTS & CONTACT

Check out Gavick.com, the official website of this Joomla! Component and home tomost 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 GAVICKPROC 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

1 Introduction 4

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

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

2 Special Notice and Recommendations 5

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

3 Overview files 6

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

4 Files Installation 7

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

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

5 Component Administration 9

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

7 Custom User Style 20

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

TA

BS M

AN

AG

ER G

K3

3

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

That’s 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.

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•

GAVICKPROC 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 OGAVIC R E A T I V E J O O M LIntroducing Tabs Manager GK3IIntroducing1

TA

BS M

AN

AG

ER G

K3

4

GAVICKPROC 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 OSpecial Notices and Recommendations otSpecial NoSpecial No2

TA

BS M

AN

AG

ER G

K3

5

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 don’t 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?

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.

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.

Need to contact Us?

GAVICKPROC 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 OOverview filesOvervieOverview3

TA

BS M

AN

AG

ER G

K3

6

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.

Let’s 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 »This is the present Helpfile that will help and orientate you.

GAVICKPROC 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 OGAGAVIVICKCKPRPROOC R E A TR E A T I V E JV E J O O M L AO M L A ! D E VV E LO P MLO P M E N T SE N T S T U D I OT U D I O

TA

BS M

AN

AG

ER G

K3

7

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.’

This page will display an overview of the component.

4 GAVICKPROC 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 OFiles Installation


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.

You have now all the necessary files installed, let’s 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. That’s because all plugins already are added on the Component installation. So, with this new version, no need to install plugins.

TA

BS M

AN

AG

ER G

K3

8

GAVICKPROC 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 OGAGAVIVICKCKPRPROOC R E A TR E A T I V E JV E J O O M L AO M L A ! D E VV E LO P MLO P M E N T SE N T S T U D I OT U D I OGAVICKPROC 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 O5 Component Administration

Component Administration Panel Overview

Before you start working with the Tabs Manager GK3 Component, let’s take a view of all component options available.

Navigate to “Components” and click on “Gavick 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.

TA

BS M

AN

AG

ER G

K3

9

The Component administration panel is constitued with the following blocks.

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

Check System (Very Important!!!)

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.


Top Menu

Path Component Navigation

Main Menu Latest GavickPro News

TA

BS M

AN

AG

ER G

K3

10

GAVICKPROC 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 OGAGAVIVICKCKPRPROOC R E A TR E A T I V E JV E J O O M L AO M L A ! D E VV E LO P MLO P M E N T SE N T S T U D I OT U D I OGAVICKPROC 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 there’s 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.

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”.

TA

BS M

AN

AG

ER G

K3

11

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 GroupsAfter 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.


TA

BS M

AN

AG

ER G

K3

12


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 GroupNow that your group is set, you can start adding tabs. Return to the Mainpage of the component and them press “Add tab” button.

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

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

TA

BS M

AN

AG

ER G

K3

13


Tab name:

Add your tab name. This is the name of the tab that will be displayed.

Select tab type:

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

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.

TA

BS M

AN

AG

ER G

K3

14

yp

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&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1” /><embed src=”http://vimeo.com/moogaloop.swf?clip_id=1528656&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&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&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1” /><embed src=”http://vimeo.com/moogaloop.swf?clip_id=1528656&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1” type=”application/x-shockwave-flash” allowfullscreen=”true” allowscriptaccess=”always” wmode=”transparent” width=”400” height=”300”></embed></object>

Adding iframe

We strongly don’t 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. Here’s a screenshot of a view group.


15

TA

BS M

AN

AG

ER G

K3

15

6 Tab GK1 module configuration GAVICKPROC 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:

Unique ID for module (must be unique if you have two or more modules on one page) (i.e. tabarts1).

Module height:

The height of the display block. Add px suffix !

Module width:

The width of the display block. Value 0 means that height of module is setting automatically. Add px or % suffix !

Tabs group:

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

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.

News content - text position:

Set here the text article position.

News content - info position:

Set here info content position display.

News content - readmore position:

Set here “readmore” link position.

News readmore button text:

Your own “readmore” button text.

TA

BS M

AN

AG

ER G

K3

16

Module Parameters:

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:

Select how many hours must be added or substracted from server time.

News image height:

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

News image - link:

Show news date:


TA

BS M

AN

AG

ER G

K3

17

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 type: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 your own CSS filename without extension with module style directory.

Style CSS suffix:Set suffix used in your own style ( i.e. ‘mystyle’ )

Fixed height :Fixed height - all tabs have this same height.

Fixed height value:Fixed value of height for tab in pixels (i.e. 200).

Always hide:Only for accordion animation - if you want to have possibility of hiding all tabs.

Module advanced parameters:Module advanced parameters:

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).

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

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.


TA

BS M

AN

AG

ER G

K3

18

y yp

y

Set suffix used in your own style ( i.e. mystyle )

g g

Fixed value of height for tab in pixels (i.e. 200).

y y p y

Clean template code:

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).

Use Mootools:

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.

Use script:

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 compressed engine:

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.


TA

BS M

AN

AG

ER G

K3

19

p

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

There, in the near future, you also be able to find the Video Tutorials for each GavickPro Joomla!1.5 Tool Extension.

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.

As explained previously, TabManager GK3 (like also previous version) allows users with basic knowledge of CSS style code, to create their own design. To do 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.

Let’s 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, here’s the result:

ul.gk_tab_ul-mystyle li {

float: left;

cursor: pointer;

margin: 0 3px -1px 0;

border: 1px solid #ebebeb;

border-bottom: none;

position: relative;

padding: 1px;

padding-bottom: 0px;

}

Custom User Style

As explained previously, TabManagreate their own design To do this

CustCusto7 GAVICKPROC 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

TA

BS M

AN

AG

ER G

K3

20

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 doesn’t know, here’s 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.

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

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.


TA

BS M

AN

AG

ER G

K3

21

creative joomla! development...

Documents