The following details setting up the J51 Numbers module. This module is perfect for displaying stats relative to your brand in an attention-grabbing manner. Each number will animate from 0 to its value as the user scrolls the module into view. The module is very simple to set up allowing you to add unlimited stats quickly and easily.

If you haven't already done so you must first install the J51 Numbers module via your Joomla Extensions Manager. From your Joomla administration navigate to Extensions -> Manage -> Install -> Upload Package File. Select your module install file (mod_j51numbers.zip). This file can be found in your template download in the same folder as your template install file.

Once installed you can create a new instance of your J51 Numbers module by navigating to Extensions -> Modules -> New -> J51_Numbers. Multiple instances of your Numbers module, or indeed any module can be achieved by simply repeating this process.

Module settings are split into 3 tabs...

General Settings

This tab contains the main layout/style settings for your module.

• Number of Columns - Select the number of columns you wish your items to be displayed in. On smaller screen devices the number of columns will always be reduced to 1 regardless of this setting.
• Icon/Text Layout - Set the layout of each item. Currently, this field gives you 4 options. Column - Number | Text which displays the number above the text, Column - Text | Number which displays the number below the text, Row - Number | Text which displays the number to the left of the text and finally Row - Text | Number which displays the number to the right of the text.
• Number/Text Alignment - Set the text alignment of each item (left, center or right).
• Horizontal Margin - Horizontal spacing in pixels between each item.
• Vertical Margin - Vertical spacing in pixels between each item.
• Title Tag - Set the HTML tag (H1, H2, H3 etc.) for the title of each item.
• Number Color - Set the color of the number for each item. If left blank, the default template body text color will be used.
• Title Color - Set the color of title for each item. If left blank, the default template color set for the heading tag set in the 'Title Tag' field will be used.
• Caption Color - Set the value color of the caption for each item. If left blank, the default template body text color will be used.

Animation Settings

The J51 Numbers module allows you to animate each number as it scrolls into view. The number will animate from 0 to its value. This tab contains settings for controlling this animation.

• Animation Length - Set the length of the animation in seconds. This is the length of the animation for each number, from from 0 to its value.
• Animation Interval - Set the interval in milliseconds of the animation between each item. Rather than all progress bars animating at once, this option allows you to set a slight delay between each item.

Numbers(s)

The final tab is where you add the details for each of your numbers. To create a new number simply click the '+' sign for each number you wish to add. This will create form for you to enter the details of the number. To remove a number hit the '-' option. Order of your numbers can be changed by using the drag n drop option at the top right of each form.

• Title - Set the title for the number.
• Caption - Set the caption for the number.
• Value - Set the value of the number.
• Prefix - Add a character(s) to the beginning of the number.
• Suffix - Add a character(s) to the end of the number.
• Decimal Places - Set the number of decimal places to the number.