How to configure the "Fancy Category Menu" module?
|
|
The FancyCategories module allows you to customize the look and feel of the category menu. This module offers three main menu style 1/Explorer: using tree-style menu, 2/
Candy menu: using buttons and 3/ Icons: using icons. You can use any of these three or create your own custom style without having to modify any PHP program.
|
|
|
To get started you first need to enable that module and then configure it using the ‘Fancy categories’ module interface.
|
|
|
Enabling the FancyCategory module
|
To enable the ‘Fancy Categories’ module go to the modules page by selecting the ’Modules’ option from the ’OTHER SETTINGS’ menu section :
|
|
|
|
select the ‘Fancy Categories’ module checkbox and click the [Update] button at the bottom of the page.
|
|
|
|
After the ‘Fancy Categories’ module has been enabled, the categories menu will immediately start using the default style which is the Explorer style (shown above).
|
|
|
Configuring the Fancy Categories module
|
To start the configuration of this module, select the 'General settings' option from the ’OTHER SETTINGS’ menu section :
|
|
|
|
and then click the ‘Fancy Categories options’ link from the ‘In this section’ menu list:
|
|
|
|
The following interface will display:
|
|
|
|
The interface is divided in 2 parts. The selection of the menu style on top and then the corresponding style or skin options in the bottom.
|
|
|
The Explorer style
|
The Explorer style is shown in the picture at the top of this page and reminds the user of the Windows explorer tool style with folder and subfolder.
The Style OPTIONS: Use JavaScript to dynamically expand menu
: When selected the menu will use JavaScript scripts to perform the opening and closing of folder and sub-folders. If you disable this option, then each click inside that menu will take the user to a new page as opposed to dynamic changes without any page reload.
The Skin OPTIONS: Image for the current style
: Select an image style for the current style, this will actually change the look and feel of the folder image that is displayed.
Different icon for categories without subcategories
: Do you want to display a different icon for categories that do not include any subcategories.
Prevent categories names wrapping
: If selected the name of the category will be written on one line no matter how long it is.
Show number of products in subcategories
: When this option is selected, the number of products included in that category will be shown when the mouse is over that category name.
|
|
|
The Icons style
|
The Icons style shown in the picture below allows you to add an icon for each category and also to provide dynamic popup menus.
|
|
|
|
The Style OPTIONS: Use JavaScript to dynamically expand menu
: same function as the Explorer style, however in the case of the Icons style menu the subcategories menu will dynamically be displayed in a popup menu.
Load subcategory blocks dynamically
: Allows you to load subcategory blocks dynamically and only when needed. When this option is disabled the whole page content will be loaded at once and this could actually slow down the page download process
Cache subcategory blocks
: Use this option to cache your menu data. This is recommended if your menu data information does not change often.
The Skin OPTIONS:
Display icons for categories : Specify the number of menu levels to have the icon displayed.
Don't display subcategories triangle
: Do you want the little ‘icon triangle’ displayed? This icon is a visual indicator of the existence of subcategories.
|
|
|
The Candy style
|
This style displays the menu items as buttons like shown in the picture below. This style also has the ability to use dynamic popup menu for subcategories.
|
|
|
|
The Style OPTIONS: Use JavaScript to dynamically expand menu
: same as the Icons style. Load subcategory blocks dynamically : same as the Icons style. Cache subcategory block : same as the Icons style.
The Skin OPTIONS: Select an image set for the current style : Provide the color-image style to use for the buttons.
Don't display subcategories triangle
: Do you want the little ‘icon triangle’ displayed? This icon is a visual indicator of the existence of subcategories.
|
|
|
Custom styles
|
For those who need more information or would like to create a custom style, here is the list and location of all files included in this module:
|
|
/modules/Fancy_Categories/
admin_config.php config.php fancy_categories.php
/skin1/modules/Fancy_Categories/Candy_Menu/… tree_subdir_blank.gif
layerslibvar.js menumanagement.js layerslib.js fancy_subcategories.tpl fancy_categories.tpl config.ini
/skin1/modules/Fancy_Categories/Candy_Menu/candy1/… button_l_off.gif
button_l_on.gif button_m_off.gif button_m_on.gif button_r_off.gif button_r_on.gif skin.css
/skin1/modules/Fancy_Categories/Candy_Menu/candy2/… button_l_off.gif
button_l_on.gif button_m_off.gif button_m_on.gif button_r_off.gif button_r_on.gif skin.css
/skin1/modules/Fancy_Categories/Candy_Menu/candy3/… button_l_off.gif
button_l_on.gif button_m_off.gif button_m_on.gif button_r_off.gif button_r_on.gif skin.css
/skin1/modules/Fancy_Categories/Candy_Menu/candy4/… button_l_off.gif
button_l_on.gif button_m_off.gif button_m_on.gif button_r_off.gif button_r_on.gif skin.css
/skin1/modules/Fancy_Categories/Explorer/… fancy_categories.tpl
config.ini fancy_subcategories.tpl
/skin1/modules/Fancy_Categories/Explorer/blue/… tree_item.gif tree_item_current.gif tree_item_data.gif
tree_item_data_current.gif tree_subdir_blank.gif tree_subdir_empty.gif tree_subdir_line.gif tree_subdir_line_end.gif tree_subdir_line_exp.gif
tree_subdir_minus.gif tree_subdir_plus.gif
/skin1/modules/Fancy_Categories/Explorer/std/… tree_item.gif tree_item_current.gif tree_item_data.gif
tree_item_data_current.gif tree_subdir_blank.gif tree_subdir_empty.gif tree_subdir_line.gif tree_subdir_line_end.gif tree_subdir_line_exp.gif
tree_subdir_minus.gif tree_subdir_plus.gif
/skin1/modules/Fancy_Categories/Explorer/xp/… tree_item.gif tree_item_current.gif tree_item_data.gif
tree_item_data_current.gif tree_subdir_blank.gif tree_subdir_empty.gif tree_subdir_line.gif tree_subdir_line_end.gif tree_subdir_line_exp.gif
tree_subdir_minus.gif tree_subdir_plus.gif
/skin1/modules/Fancy_Categories/Icons_Menu/… config.ini fancy_categories.tpl fancy_subcategories.tpl layerslib.js
layerslibvar.js menumanagement.js tree_item.gif tree_item_current.gif tree_item_data.gif tree_item_data_current.gif tree_subdir_blank.gif
tree_subdir_empty.gif tree_subdir_line.gif tree_subdir_line_end.gif tree_subdir_minus.gif tree_subdir_plus.gif
/skin1/modules/Fancy_Categories/… configuration.tpl
sql/… x-fancycat.sql x-fancycat_remove.sql
|
|