1. AudioFly Grid Add-on Quick install
This is a module that works only with the SJ HTML5 AudioFly main module. After installing and customizing the main module, you can go ahead and install AudioFly Grid module, in the same manner as any Joomla extension:
- Log in to the Joomla administration back-end.
- Select Extensions --> Install/Uninstall from the top menu.
- In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.
- Click the button Upload & Install.
- Select Extensions --> Module Manager from the top menu and click AudioFly Grid in the list.
- Open the module and follow the setup.
2. Basic settings for AudioFly Grid
In the Extensions -> Module Manager section, find your AudioFly Grid module and click on it to acess the module's setup section.
You can find all the module's options right in the first window that opens.
First, from the right side of the page change the Status of the module into Published, put it into the desired Position and, if you want your module to be displayed with a title, select from the right Show at the Show Title section. Last, give your module the title that you want it to be displayed with.
If you want to place this module inside an article, you can type down a custom position and use the { loadposition yourcustomname } inside the article.
If you would like to place it inside a module position, just select the position from the drop-down.
Also, don't forget to set the display for your module on the pages you want it to be shown: Module Assignment section.
3. Setting up AudioFly Grid
3.1. Item Setup
Prerequisites: Before setting up the module, login to your FTP, go to your website folder, navigate to images folder and upload the audio files in .mp3 and .ogg formats into this folder.
First step is to set up the songs: go to Setup section and select the Music folder and the Image folder.
Then, inside each item, select the Audio file (these audios will be the ones from the previously selected folder), set a Custom link if you like (this can be the link from a shop, play/listen, download link), set the Anchor text (play/listen/download), the Title and Description of the song, select the Poster image (these images are the ones previously selected at "Images folder").
Once done, you can Add another item from the plus sign. You can also delete one item from the minus sign at the bottom of each item.
Inside an item, you can add only one song.
3.2. Item Customization
This is the section where you can chose the background (none, simple color or gradient variations) and title color and the layout: 1, 2, or 3 columns.
3.3. Play button (Anchor text) customization.
Inside this section you can customize the visuals for the Anchor text you've set in the item setup. (aka. Play/Listen/Download)
For this button you can set the width and height, margins, text alignment, background and text colors in both normal and hover state, shadow effect and border radius.
If you wish to add more customization rules, you have a Custom CSS Option.
