Install module using native Joomla installation adjust settings, do not display title, select a module position (debug works the best) and enable. This module is driven by the jQuery Library script and demands that the script be loaded to function. I have provided a Load jQuery 'auto-detect / auto-load' feature within the Flyout Tabs code. If for whatever reason this function fails, there is a Load jQuery setting within the Advanced Option (Joomla 2.5 only
). Since jQuery is being pre-loaded in Joomla 3.x there is no reason to concern your self with this!
Effective with version 1.0.6, we are offing a host of user settings;
- Inside Tab Color-Idel: With our colorpicker, you can set the 'idel state' of the inside tab to any color in the rainbow (default= CFCFCF).
- Border Tab Color-Idel: With our colorpicker, you can set the 'idel state' of the border to any color in the rainbow (default= AFAFAF).
- Tab Color Tinting Effect-Idel: Choose your custom Flyout Tabs 'idel state' tinting effect. Range: 0.1 to 1.0 (default= 0.6).
- Inside Tab Color-Hover: With our colorpicker, you can set the 'mouseover state' of the inside tab to any color in the rainbow (default= CFCFCF).
- Border Tab Color-Hover: With our colorpicker, you can set the 'mouseover state' of the border to any color in the rainbow (default= AFAFAF).
- Tab Color Tinting Effect-Hover: Choose your custom Flyout Tabs 'mouseover state' tinting effect. Range: 0.1 to 1.0 (default= 0.6).
- Use drop-shadow effect? Setting this to 'Yes' will add a CSS3 drop-shadow effect to your tabs. Please note: This does not effect your image icons and will only show in CSS3 compatible browsers.
- Flyout Tabs Top Position: Adjust the Flyout Tabs position from top of page (default= 50px).
- Flyout Tabs Width: Adjust the Flyout Tabs width (default= 100px).
- Flyout Tabs Height: Adjust the Flyout Tabs height (default= 70px).
- Flyout Tabs Offset: Adjust the Flyout Tabs offset to show more or less of each tab. The higher the minus value, the less the entire tab will show on your screen (default= -60px).
- Image Position: Adjust the position of your image icons. The greater the pixel value the more your image icon will move to the right (default= 20px).
- Left margin on mouseover: Adjusts the left margin position on mouseover. Some professional templates require this setting to be adjusted as much as -20 (default= -2).
- Spacing between tabs: Adjust the amount of spacing in-between the tabs (default= 73px).
- Alt. text for Tab _: Use this as a title for your specific tab.
- Image path for Tab _: Set the relative path to your Flying Tabs image If blank, this tab will not be displayed. Please Note: Do not use a leading or trailing '/' within your image path. This module only supports images stored within your Joomla installation..
- Hyperlink for Tab _: Set to create a hyperlink for each Flyout Tabs.
- Link Behaviour: Set to have your hyperlink display in a new window (default= Same Window) or Colorbox lightbox.
- Width of URL: Set the width of your Colorbox lightbox display
- Height of URL: Set the height of your Colorbox lightbox display
To use this module, just install it and set your personal settings. Since Flyout Tabs does not use a specific module to reside in, you can choose any active module position that your template supports. I have found that 'debug' works the best and please make sure that you have Show Title set to 'No'. Once this is done, enable it and based on your settings, you'll see Flyout Tabs on the top left hand side of your browser.
I have included within this installation eight (8) 64px by 64px icons you can use to get started. The relative path to these icons is;
The filenames are, home.png, search.png, mail.png, id_card.png, rss.png, ipod.png, camera.png & youtube.png. Most of these icons are available from DryIcons and you can download additional icon sets from them at http://dryicons.com/free-icons/
SUPPORTED BROWSERS: IE7+, FireFox, Safari, Chrome