TABS MANAGER GK2 - Zimmerman Industries

tumwaterpointlessInternet and Web Development

Dec 4, 2013 (3 years and 8 months ago)

102 views

GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Copyright © 2008 GavickPro - http://www.gavick.com
This manual cannot be redistributed without permission from GavickPro
More info at: http://www.gavick.com
INSTRUCTION MANUAL
Co
py
ri
g
ht © 2008 GavickPro - htt
p
://www.
g
avick.c
om
TABS MANAGER GK2
CO
PYRI
G
HT DI
SC
LAIME
R
G
avickPro TAB
S
MANA
G
ER
G
K2 - Joomla!1.5
C
om
p
onen
t
In
s
tr
u
ction Man
u
a
l
C
op
y
ri
g
ht © 2008
G
avickPro - http:
//
www.
g
avick.co
m
This manual cannot be redistributed without
p
ermission from GavickPro
More info at: http:
//
www.gavick.com
Author: Paulo
S
eichinha -
G
avickPr
o
F
O
R INF
O
, UPDATE
S
, RE
Q
UE
S
T
S
&
CO
NTA
C
T
C
heck out
G
avick.com, the official website of this Joomla!
C
omponent manual and home t
o
hi
g
h qualit
y
and pro
f
essional templates, components and modules.
Keep updated about all templates, components and modules b
y
visitin
g
our update.
g
avick.co
m
Cop
y
ri
g
ht © 2008 GavickPro - http://www.
g
avick.co
m
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Table of Contents
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
1
Introduction
4
Introducing Tabs Manager GK2 . . . . . . . . . . . . . . . . . . . . . . . 4
2
Getting Started
5
Files Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3
Component Installation
6
Tabs Manager GK2 Component Installation . . . . . . . . . . . . . . . . . . 6
4
Plugins Installation
7
Tabs Manager GK2 Plugins Installation . . . . . . . . . . . . . . . . . . . . 7
5
Modules Installation
8
6
Groups on Tabs Manager GK2
9
Adding Groups in the Tabs Manager GK2 . . . . . . . . . . . . . . . . . . . . 9
7
Add tabs to groups
10
Add tabs into Tabs Mods Group . . . . . . . . . . . . . . . . . . . . . .10 - 11
Add tabs into Tabs Arts Group . . . . . . . . . . . . . . . . . . . . . . . .11
Add tabs into Tabs Mix Group. . . . . . . . . . . . . . . . . . . . . . .12 - 13
8
Modules Configuration
14
Tabs Mods GK2 - Module Configuration . . . . . . . . . . . . . . . . . .14 - 15
Tabs Arts GK2 - Module Configuration . . . . . . . . . . . . . . . . .16 - 17 - 18
Tabs Mix GK1 - Module Configuration . . . . . . . . . . . . . . . . .19 - 20 - 21
9
Styles Examples
22
Some examples withh available styles . . . . . . . . . . . . . . . . . .22 - 24
10
Styles Examples
24
Custom User Style . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 - 25
TABS MANAGER GK2
3
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
G
C
R
Introducing Tabs Manager GK2
Introduc
I
ntro
d
u
c
1
The result is the impressive and latest version GK2 Component Tabs Manager
from GavickPro. A fantastic tool 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 GK2 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 GK2 Manager
component will help you take a step forward, for the most professional high
quality presentation.
Held until the end to overcome another limit!
An overview of Tabs Manager GK2 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 TabMods GK2 for modules display•
Provided with TabArts GK2 module for articles display•
Provided with the NEW TabMix GK1 for modules, articles and custom XHTML code display•
Support for multi language translation for components, plugins, extensions and modules•
8 different styles presentation and customize user style option formatting•
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•
TABS MANAGER GK2
4
Overview files
After downloading the package of our component Tabs Manager GK2, available for free download on our web site, be sure to
unpack first to have access to all necessary files. The installation is very simple and should not pose any problem for you, if you
follow the following instructions properly.
Before we start with the installation, let’s start with a brief overview of the available files.
Component Folder:
com_gk2_tabs_manager.zip -
This file is the component.
Plugins Folder:
plg_tab_mods_gk2.zip
- This file is the plugin required for communication between the component and tab
modules version.
plg_tab_arts_gk2.zip -
This file is the plugin required for communication between the component and tab articles
version.
plg_tab_mix_gk1.zip -
This file is the plugin required for communication between the component and tab mix
version (modules, articles and custom code).
Modules Folder:
mod_tabmods_gk2.zip -
This is the module to display modules.
mod_tabarts_gk2.zip -
This is the module to display articles.
mod_tabmix_gk1.zip -
This is the module to display a mix of modules, articles and customizable XHTML code.
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Getting Started
O
Overview files
S
S
Overview file
s
Getting
G
ett
i
n
g

2
TABS MANAGER GK2
5
!
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Component Installation
Compon
C
om
p
on
3
Tabs Manager GK2
Component Installation
Presented all the files needed to put the Tabs Manager GK2 to work, then we will begin the installation and the first is the
component.
Use the top menu of joomla administration, navigate to “Extensions > Install / Uninstall”, find the file of the component on your
desktop and upload file and install.
If the installation was successful, you may see a brief presentation of the component on this page.
Now that we have the component installed, the next step is installing the plug-in modules using the administration of the
component.
But before we move to the next chapter, here’s some procedures that should take into account. If you navigate to the administration
of the component, you can check if all the conditions required in the system are available by selecting “Check System” option.
All bellow fields should be green to correctly component work.
You can also automatically check whether there is any update available by pressing the “Check for updates” option button.
So, after this recommendations, we jump to next chapter by showing how to install plugins.
!
TABS MANAGER GK2
6
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
GA
GA
GA
VI
VI
VI
CK
CK
CK
PR
PR
PR
O
O
O
CREAT
CREAT
CREAT
IVE J
IVE J
VE J
OOMLA
OOMLA
OOMLA
! DEV
! DEV
! DEV
ELOPM
ELOPM
ELOPM
ENT S
ENT S
ENT S
TUDIO
TUDIO
TUDIO
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Plugins Installation
Plugins
Pl
u
gi
ns
4
Tabs Manager GK2
Plugins Installation
IMPORTANT NOTICE!!!
It is mandatory to have installed and activated the plugin to create and manage groups in component
or view its contents in their modules. To avoid running the risk of being repetitive, we will exemplify how to install a single plugin,
since the process is exactly the same for others. So, we will use the Tabs Mods plugin for demostration.
Access the administration of the Tabs Manager GK2 and select the “Plugins” option on the component menu. As you will see a
message stating that will have no plugin installed.
Click “install plugin” on right side options, select ZIP package with plugin from your desktop and press “Save” button. The
plugin will be upload and installed.
Now you should see the panel of plugins with the Tab Mods GK2 plugin available, but not enable as you can check in status icon.
To enable the plugin, activate the check box on the left and them press “Enable plugin” option on the right side menu.
The plugin is installed, enable and ready for groups production. For each type of module to use, install the respective plugin by
repeating the same procedure.
Since in this guide we will use all modules, the following screenshot will be the end result after the three plugins are installed.
TABS MANAGER GK2
7
!
Modules Installation
Module
M
o
d
u
l
e
s
5
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Modules
Installation
Before moving on to administration of the component and still in the installation process, the next step is the modules
installation.
There will be no need to exemplify the installation process with all three modules available, since once again, the process is
exactly the same for all. Taking into account that in the previous chapter we use the tabs mods plugin examplification, logically
we now show you, step by step, the tabs mods module installation.
Return to the top menu of your joomla administrator, select “Extensions >Install/Uninstall” and search on your desktop the GK
tabs mods GK (mod_tabmods_gk2.zip) and press’ Upload & Install. “
If all goes well, a message appears saying “Install Module Success’.
Notice!
You will see some warning messages, informing you that some language files were not installed. Don’t worry about it!
This is perfectly normal, because if you do not have those languages in your Joomla! 1.5 language folder, the setup file will not
be able to install them.
As you can see, the installation of the modules is easy. Remember that if you want to use the other modules, the installation
process is the same.
After installaling all modules, you be able to view them in the Joomla Modules Manager board, like the following screenshot
shows.
!
TABS MANAGER GK2
8
Module
s
Installation
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
GA
GA
GA
VI
VI
VI
CK
CK
CK
PR
PR
PR
O
O
O
CREAT
CREAT
CREAT
IVE J
IVE J
VE J
OOMLA
OOMLA
OMLA
!DEV
!DEV
!DEV
ELOPM
ELOPM
ELOPM
ENT S
ENT S
ENT S
TUDIO
TUDIO
TUDIO
GA
GA
GA
VI
VI
VI
CK
CK
CK
PR
PR
PR
O
O
O
CREAT
CREAT
CREAT
IVE J
IVE J
E J
OOMLA
OOMLA
OOMLA
! DEV
! DEV
DEV
ELOPM
ELOPM
ELOPM
ENT S
ENT S
NT S
TUDIO
TUDIO
TUDIO
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
6
G
G
G
C
C
C
G
G
G
G
G
C
C
C
C
C
Groups on Tabs Manager GK2
Adding Groups
in the Tabs Manager GK2
Finally, all the conditions are fulfilled so that we can create our groups of tabs in the component. Once again, you know that if
we show you only one example, for the other types of groups the process is the same.
To start adding groups navigate to “Components > Gavick Tabs Manager GK2” administration and press on the right menu the
“Add Group” button.
Since all three previously installed plug-ins, you must select the one that will interact with the respective module. If you have
just installed one plugin, it will be assumed automatically. So, following this example, select the Tabs Mods GK2 plugin for the
group.
In this page, we need to fill the two parameters fields to set the main configuration of the group, by giving a Group name for
identification and a Group description, this last one just for your orientation.
For those who add previous experiences with old Tabs Manager GK1 component, you may remember that the identification of
the group was by a integer value. Now, it’s different. The groups will be identified by the group name on the module... and don’t
worry, only the groups available with the correct plugin and module relationship will be show it automatically in the module
configuration. So, no confusion there!
TABS MANAGER GK2
9
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
As you can see, the creation of group is fast and easy, and If we create a group for each different type of module, the result would
be something like this screenshot. So, let’s start Chapter 7 - How to add tabs to each group.
Add tabs to groups
in Tabs Manager GK2
Unlike the previous chapters, we will exemplify case by case, taking into account that each type of group/plugin has different
parameters to be set on tabs addition.
Add tabs
into Tabs Mods Group
As the name suggests, this module displays on your web page any existing module. To do this, you have to fill the following
fields on each tabs adding configuration:
Name:
This is the name of the tab that will be displayed.
Access Level:
You can control unique access level for display of the tab. For example, it can be view by all visitors or only registered
members.
A
s you can see, the creation o
f
gro
u
b
e somethi
ng
like this screenshot.
7
Add tabs to groups
TABS MANAGER GK2
10
Add tabs
i
nto Tabs Mods
G
roup
Module:
Identify here the module that you want to display on the tab.
TIP!!!
If you need more modules position on your Joomla!1.5 to be used on tabs, you can add more on templateDetails.xml file
on template directory, by adding this code <position>mymodule</position> inside <positions> tag. After saving the file,
you should see them on modules list administration. It’s a manual procedure, but still very easy to do!
After all three fields completed, save and add more tabs if you want, doing the same procedure.
Add tabs
into Tabs Arts Group
Again, the name given easily identifies its function. So, this module will display articles on tabs configurated. To do this, you
have to fill the following fields on each tabs adding configuration:
Name:
This is the name of the tab that will be displayed.
Access Level:
You can control unique access level for display of the tab. For example, it can be view by all visitors or only registered
members.
Article:
Identify here the article that you want to display on the tab.
After all three fields completed, save and add more tabs if you want, doing the same procedure.
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
TABS MANAGER GK2
11
!
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Add tabs
into Tabs Mix Group
This is the latest module that we have created for this component and as the name given, is a mixture of tabs with modules,
articles or the new custom XHTML code option. Notice that this is the first version and naturally will seek in the near future, to
give substantially improvemments in the administration of this tool.
IMPORTANT !!!
Please, take note of this very important information. Like explained above, you can set different types of tabs. Depending of the
tab type that you want to set, you need to fill or not, some fields parameters. So, let’s explain each of the fields available.
Name:
This is the name of the tab that will be displayed.
Access Level:
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 Content:
This is a very important parameter! Here you determine if your tab will be a module type, article or some custom code display.
Here are the three options:

Position:

Set here position of the module that you want to display

(ONLY NEEDED IF YOU CHOOSE MODULE TYPE TAB !!!)
!
!
TABS MANAGER GK2
12
Article:
Snipe your article link in this field.

(ONLY NEEDED IF YOU CHOOSE ARTICLE TYPE TAB!!!)
Custom XHTML code:
Write here your custom XHTML code - for example: video/media players codes, images, rss news or styled text.
(ONLY NEEDED IF YOU CHOOSE CUSTOM CODE TYPE TAB!!!)
.
Here’s some examples screenshots for each type:
After all tabs are set and using one group for each module type, the following screenshot shows the “View Groups” option.
By clicking on settings option on the right side, you can easily visualize the main characteristics of each one. This option is also
available to view the contents of each group, showing the characteristics of each tab.
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Screenshot of module tab type.
Screenshot of articles tab type.
Screenshot of custom XHTML code type.
In this example, we place a media flash player.
TABS MANAGER GK2
13
!
!
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
8
Modules Configuration
With groups created, it’s time to configure their modules, so we can display the content of the component using the modules
and for that, we’ll make an extensive presentation of all options available in each one.
Navigate to “Extensions > Modules Manager” and enter on each modules previously installed. We will follow the same order
taken in this book - Tabs Mods, Tabs Arts and Tabs mix.
Tabs Mods GK2
- Module Configuration
Already inside the module configuration, set the module in the position that you want to display on your page, set the Menu
Assignment and enable it.
Before save it, you must configurate the following parameters fields:
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:
Important!
Each module must have unique ID,
if you have two or more modules working (i.e.
tabmods1 or tabmods2)
Module height:
The height of the display block. Add “px” in
value.
Module width:
The width of the display block. Add “px” in value.
If this value is set to “0” it will fill automatic width
space available.
Tabs group:
Set Group for modules (if list is blank then it means that you must add new group in Tabs Manager GK2).
Type of activation:
Select type of event for changing the modules....
!
TABS MANAGER GK2
14
q
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Module
advanced parameters:
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.
Auto animation:
If you want to run animation until user to call event.
Animation type:
Select type of module animation (horizontal or vertical).
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.
Buttons prev and next:
If you want to enable prev and next buttons.
Style CSS:
Select CSS style of module between 7 preformated and
your custom style (see Chapter - Custom User Style).
Style type:
Important!!!
Select this value as same value for your
selected style (horizontal or vertical).
Style CSS file:
Set your own CSS filename without extension with module
style directory (see Chapter - Custom User Style).
Style CSS suffix:
Set suffix used in your own style ( i.e. ‘style8’ ).
TABS MANAGER GK2
15
!
!
!
!
!
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Tabs Arts GK2
- Module Configuration
Again on Modules Manager, open the tabs arts module and set in the position that you want to display on your page. Set the
Menu Assignment and enable it.
Before save it, you must configurate the following parameters fields:
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:
Important!
Each module must have unique ID, if you have two or
more modules working (i.e. tabarts1 or tabarts2)
Module height:
The height of the display block. Add “px” in value.
Module width:
The width of the display block. Add “px” in value. If this value is
set to “0” it will fill automatic width space available.
Tabs group:
Set Group with tabs (if list is blank then it means that you must
add new group in Tabs Manager GK2).
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.
!
TABS MANAGER GK2
16
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
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.
News header - link:
News image - link:
News text - link:
Show news author:
Show news categories:
Show news date:
Enable or disable display on 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 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 modules...
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.
TABS MANAGER GK2
17
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
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 CSS style of module between 7 preformated and your
custom style (see Chapter - Custom User Style).
Style type:
Important!!!
Select this value as same value for your
selected style (horizontal or vertical).
Style CSS file:
Set your own CSS filename without extension with module
style directory (see Chapter - Custom User Style).
Style CSS suffix:
Set suffix used in your own style ( i.e. ‘style8’ ).
Module
advanced parameters:
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.
!
!
!
TABS MANAGER GK2
18
!
!
y
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Tabs Mix GK1
- Module Configuration
Finally, we come to the configuration of the latest module for the TabsManager GK2.
Tabs Mix GK1 is the first version of this module and how the readers can imagine, in the future may be the most important of
all, taking into account that runs most of the functions of other modules and also include the possibility of introducing custom
XHTML code.
Again, navigate to “Extensions > Module Manager”, find the Tabs
Mix GK1 module and enter. Set the module in the position that
you want to display on your page, set the Menu Assignment and
enable it.
Before save it, you must configurate the following parameters
fields:
VERY IMPORTANT !!!
Depending of the tabs types that you set on your group, some
fields are not necessary to be configurated. If you choose all
types, them you must configurate them all, but for example, if you
choose only Tabs Module or Custom XHTML code, most of the
fields are not necessary to set any configuration.
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:
Important!
Each module must have unique ID, if you have two or
more modules working (i.e. tabarts1 or tabarts2)
Module height:
The height of the display block. Add “px” in value.
Module width:
The width of the display block. Add “px” in value. If this value is
set to “0” it will fill automatic width space available.
TABS MANAGER GK2
19
!
!
Tabs Mix
G
K1
- Module
C
on
f
iguration
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Tabs group:
Set Group for tabs mix (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
this symbol 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.
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 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.
A

A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
TABS MANAGER GK2
20
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
Author name - alias or name:
Option to display alias or name from article author.
Type of activation:
Select event for changing the modules...
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.
Style CSS:
Select CSS style of module between 7 preformated and your
custom style (see Chapter - Custom User Style).
Style type:
Important!!!
Select this value as same value for your
selected style (horizontal or vertical).
Style CSS file:
Set your own CSS filename without extension with module
style directory (see Chapter - Custom User Style).
Style CSS suffix:
Set suffix used in your own style ( i.e. ‘style8’ ).
Module
advanced parameters:
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.
A
A
!
!
!
!
TABS MANAGER GK2
21
!
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
9
Styles Examples
TABS MANAGER GK2
22
Style1 (Horizontal)
In this first example, we use the Tab Arts module, with 3 articles
display. It includes the header, text content and the “readmore”
option.
Style3 (horizontal)
The third style comes with a nice color active tab.
In this case, we remove the “read more” button
and set the header at bottom as link.
Style2 (Horizontal)
The style2 have a very ellegant design for news display. In this
example, we included the display of author, date and news
category, with the “readmore” button floating left.
Here’s some styles examples available on all modules.
Style4 (horizontal)
Another very nice style is the 4th. In this case, we
choose to use the tabs mods module.
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
TABS MANAGER GK2
23
Style5 (vertical)
Still in tabs mods module, this is the style5
with a clear and soft colors tone. Here you
see the Popular News Module.
Style6 (vertical)
And how about this ellegant dark
style?
For this example, we used the tabs
mix module, in one of each tab types.
The screenshot show’s a custom
XHTML code with a media player set.
Style7 (vertical)
The last style is also one
of our favorites, Great
professional design that can
easily be integrated in most
template styles.
The left screenshot show the
tabs mix module displaying
the article tab.
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
10
G
CR
E
Custom User Style
TABS MANAGER GK2
24
As explained previously, the new version of TabManager GK2 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.
Here’s the first one! Let’s imagine that you want to create your own horizontal style module. To do this, navigate to the CSS
directory on the module, create a copy of (i.e.) the style1.css file and rename it to (i.e.) mystyle.css.
Them open this file and you will notice that all code ends with “-style1” suffix. For example, something like this (look at the red
style1 word):
ul.gk2_tabartsmenu_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.
Here the result example:
ul.gk2_tabartsmenu_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;
}
GAVICKPRO
CREAT I VE J OOML A! DEVELOPMENT ST UDI O
TABS MANAGER GK2
25
But why should you do this?... Well, by doing it you have already 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.