The templates are stored in the following location: modules/mod_vmcategorymodule/vmcategorymodule/

The module comes with the following customizable files:

• vmcategorymodule_fold_step_tpl.css
• vmcategorymodule_fold_step_tpl.html
• vmcategorymodule_fold_tpl.css
• vmcategorymodule_fold_tpl.html
• vmcategorymodule_fold_tpl.js
• vmcategorymodule_horizontal_tpl.css
• vmcategorymodule_horizontal_tpl.html
• vmcategorymodule_products_tpl.css
• vmcategorymodule_products_tpl.html
• vmcategorymodule_tpl.css
• vmcategorymodule_tpl.html

VmCategoryModule will check if there is a JavaScript and CSS file to include. Both the JavaScript and CSS are based on the template filename. For example the template filename is vmcategorymodule_fold_tpl.html, the JavaScript filename has to be vmcategorymodule_fold_tpl.js and the CSS filename has to be vmcategorymodule_fold_tpl.css. If VmCategoryModule can find the file it is included, otherwise it is skipped.

This ensures every copy of VmCategoryModule can use it's own files for styling.

The CSS file is used for styling the module. Modify this file to change the looks of your module. When showing products the CSS class cat_active_link is applied to the active product.

This template makes it possible to use VmCategoryModule as a menu rather than a module. By clicking on a category it will expand the chosen category and hide the others. The active category is highlighted. There are 2 CSS classes involved in this:

1. cat_active_id

Is applied to the chosen category

1. cat_active_link

Is applied to the chosen link

To activate the Javascript, the template must have the following Javascript line:

onClick="hideDivs({id}, 'catinnerdiv'); return false;"

The {id} is used to identify the category is clicked on. The catinnerdiv is the name of the class used on the div that contains the subcategories and/or products.

The template further has to contain a div that looks like this:

div id="catinnerdiv{id}" class="catinnerdiv {cat_active_id}"

Both the id and class must contain the same name, in this example catinnerdiv. The {id} field is used to give the div it's unique name. Both fields relate to the Javascript line above.

If the module has been duplicated, the same template cannot be used for different modules. A few changes need to be made:

1. Make a copy of the template and rename it
2. Rename the catinnerdiv to a new unique name and replace it everywhere in the template with the new unique name

This is needed because otherwise the Javascript doesn't know which module you are clicking on.

This template will show categories, subcategories and products.

vmcategorymodule_horizontal_tpl.html

This template will show categories and subcategories.

The template can use a few tags that will be replaced by VmCategoryModule. These tags are:

• {category_name}

Shows the category name

• {category_image}

• {category_url}

Gives the category URL without HTML markup

• {category_links}

Shows a list of links to the sub-categories of the selected category

• {category_products}

Shows products assigned to top level categories

• {subcategory_products}

Shows products assigned to sub categories

• {topcat_active_id}

Adds the class topcat_active_id to a top-level category

• {cat_active_id}

Adds the class cat_active_id to a category

• {id}

Is used by the fold and expand template to identify categories

CSS Classes

The following CSS classes are added by VmCategoryModule for individual styling:

• row0/row1
  These classes are added to the main categories to allow alternate row styling
• cat_active_link
  This class indicates the current active top category
• cat_active_cat_link
  This class indicates the current active subcategory
• productlink+module suffix
  This class indicates a product link