Get Started

1. Download the TestimonialFader_UNZIP.zip file from the email you have received after purchasing the extension or from the Store website.
2. UNZIP the file TestimonialFader_UNZIP.zip. You will find a ReadMe.txt file and installation file (pkg_testimonial_fader_vX.x.zip).
3. To install the file open the backend Administrator and go to Extensions > Manage > Install menu.
4. Choose the option Upload Package File and select pkg_testimonial_fader_vX.x.zip.
5. Upon successful installation you see the message "Installation of the module was successful."
6. This will install both Module and the Component.
7. Note: This extension is compatible with Joomla 4.x, 5.x, and 6.x.

1. After successful installation of the module, go to Extension > Modules and Search for Testimonial Fader or Testimonial Fader Ajax Form. If you don't find it in the modules page then click on the New button in the top left corner of the page and add the module.
2. After opening or adding a New instance of the Testimonial Fader module you can find different tabs with different parameters to set.

Module Tab Options

Show Title : Set the title of the Module to Hide if you don't want the title to appear in the frontend.

Position : Set the position of the module where you would like the slideshow to appear.

Status : Set the module status to Published to make it visible on the frontend.

Menu Assignment Tab

To assign the module to a particular menu or all the menu go through the following documentation.

https://docs.joomla.org/How_do_you_assign_a_module_to_specific_pages%3F

In general settings tab you can set the dimension and animation settings of the testimonial fader module.

• Height of Block: Set the maximum height of the testimonial fader block. It has to be in pixels. Example : 100px
• Width of Block: Set the maximum width of the testimonial fader block. Example : 400px
• Testimonial Speed: Sets the time period of the animation effect to be displayed for a testimonial. Default value is 750 milliseconds.
• Timeout: Defines the time delay between two testimonials. Default value is 2000 milliseconds. All units are in milliseconds.
• Testimonial Order: Set the order in which you would like the testimonials to appear. You can choose Random or Sequential.
• Pause on Hover: Option to pause the slideshow when hovering over a slide. You can set it to Yes or No.

Testimonial Fader Ajax Module (Version 5.2 onwards)

Using the module, the testimonial form can be submitted without page refresh.

The module can be published in any of the module positions available in the template. The text and the reCAPTCHA can be configured in the Component Options. All other functionalities can be managed in the General Settings of the module.

General Settings

• Width: The width of the form can be in percentage(%) or pixels. Example : 100% or 300px.
• Name: Set to Required if you want Name to be a mandatory field, or Optional if it's not required.
• Email: Set to Required if you want Email to be a mandatory field, or Optional if it's not required.
• Name (Show/Hide): Option to show or hide the Name field in the form.
• Email (Show/Hide): Option to show or hide the Email field in the form.
• ReCaptcha: Option to show or hide reCAPTCHA in the form. The reCAPTCHA keys need to be configured in Component Options.
• Additional Top Text: HTML or plain text can be added to the top of the form.

Styling Options

• Form Background Color: Select the background color for the form container.
• Form Border Radius: Set the border radius for the form. Example: 5px
• Form Border Thickness: Set the border thickness for the form. Example: 1px
• Form Border Color: Choose a border color for the form.
• Form Padding: Enter padding for the form. Example: 20px
• Form Margin: Enter margin for the form. Example: 0 auto
• Input Background Color: Select the background color for input fields.
• Input Border Color: Select the border color for input fields.
• Input Fields Border Radius: Set the border-radius for input fields, including CSS units (e.g., 4px, 0.5em).
• Testimonial Textarea Height: Enter the height for the testimonial textarea, including CSS units (e.g., 100px, 5em).
• Button Background Color: Select the background color for the submit button.
• Button Text Color: Select the text color for the submit button.
• Button Hover Background Color: Select the hover background color for the submit button.
• Button Border Radius: Set the border radius for the button.
• Button Width: Set the width of the button. Use CSS units, e.g., 100px, auto.
• Button Font Weight: Select the font weight for the button text (Normal, Bold, Bolder, Lighter, or numeric values 100-900).
• Label Color: Select the color for form labels.

Advanced Settings

• Testimonials Max Length: Enter the maximum length of the Testimonials. Default is 1000 characters.
• Character Count Text: Option to show or hide the character count while typing.
• Add Extra CSS: You can add extra CSS if you want to customize the form further.

In Styling Settings you can set the testimonial font style, author style and quote styles of the Testimonial Fader Module.

• Testimonial Font: You can use your own font (User Defined) or Google Fonts.
• Font: If you want to use Google Fonts then go to https://fonts.google.com/, select a font name and add it to the field. For example you want to use Open Sans font then just mention Open+Sans in the field.
• Testimonial Alignment: Select the alignment for the testimonials (Left, Center, or Right).
• Author Alignment: Select the alignment for the authors (Left, Center, or Right).
• Testimonial Font Size: Set the size of the fonts in pixels. Ex : 14, which means 14px.
• Testimonial Color: Select the color of the testimonial which you would like to appear.
• Testimonial Font Weight: Set the font weight to normal, bold, bolder, lighter, or numeric values (100-900).
• Show/Hide Author: Option to show or hide the Author of the testimonial.
• Author Color: Select the color of the Author (visible when Author is shown).
• Author Font Size: Set the size of the fonts in pixels. Ex : 12, which means 12px (visible when Author is shown).
• Author Font Weight: Set the font weight to normal, bold, bolder, lighter, or numeric values (100-900) (visible when Author is shown).
• Show/Hide Quote: Option to show or hide the quotes of the testimonial.
• Quote Style: Select the quote style from the list of 8 different styles (Style 1 through Style 8) (visible when Quote is shown).
• Quote Color: Set the quote color of the testimonial (visible when Quote is shown).
• Read More Link Color: Select a color for the 'Read More' links.
• Read More Link Hover Color: Select a hover color for the 'Read More' links.

In the testimonial settings you can set the testimonial source, limit the characters, and configure read more options.

• Testimonial Source: You can either select the source to Component (testimonials from the component database) or from the Module (which has to be added using the slides option).
• Read More: You can link the testimonials to open in a new page, inside a popup or set to none.
• Number of Characters: Number of characters to appear per testimonial. The rest characters will be stripped. This option appears when Read More is set to "Open inside Popup" or "Link to a Page".
• Read More Link: The option will appear only if the Read More is set to "Link to a Page". Enter the URL where you want to link the read more.
• Read More Text: Add the read more text which you would like to appear. Default is "View More..". This option appears when Read More is set to "Open inside Popup" or "Link to a Page".
• Open In: Option to open the read more link in a new or same page. The option works only when the Read more is set to "Link to a page". Options are New Window or Same Window.
• Slides: Click on the Add button to add a new slide. Once clicked, the option to add Author and Testimonial will appear. Fill it if you want the testimonial source to be Module. This option appears when Testimonial Source is set to "Slides".

In the advanced settings you can find the Module Class Suffix and Extra CSS parameter.

• Module Class Suffix: You can add a custom CSS class suffix to the module for additional styling.
• Extra CSS: You can add extra CSS into the module parameters easily without modifying any template CSS files.

After setting the module, Go to the backend Components > Testimonial Fader and click on the Options button in the right top side of the screen. Upon clicking the following options will appear.

Email Settings

• Email Address: Enter the email where you would like the email notifications to be sent once a visitor adds a new testimonial in the component frontend. More than 1 recipient can be added using comma. Example : abc@example.com, xyz@example.com
• Email Subject: Set the email subject you would like for the testimonial notification email which will be sent to the above email addresses. Example : New Testimonial Added.

ReCAPTCHA Settings

To get a site and secret key for your domain, go to https://www.google.com/recaptcha.

• ReCAPTCHA Version: Select the reCAPTCHA version to use. Version 2 (Default) requires user interaction, Version 3 (Invisible) is invisible and runs in the background.
• ReCAPTCHA Site Key: Enter the public key (Site Key) from Google reCAPTCHA.
• ReCAPTCHA Private Key: Enter the private key (Secret Key) from Google reCAPTCHA.

Language Settings

The language of the form and the messages can be set in the language settings.

• Name: Customize the label text for the Name field.
• Email: Customize the label text for the Email field.
• Write Testimonials: Customize the text for "Write Testimonials" label.
• Submit: Customize the text for the Submit button.
• Characters Remaining: Customize the text for character count display.
• Clear: Customize the text for the Clear button.
• You must enter your name: Customize the error message when name is required but not entered.
• You have entered an invalid name: Customize the error message for invalid name format.
• You must enter your email: Customize the error message when email is required but not entered.
• You have entered an invalid email: Customize the error message for invalid email format.
• Thank you for submitting your testimonial: Customize the success message after testimonial submission.
• Something went wrong while submission: Customize the error message when submission fails.

Permissions

Configure component-level permissions for different user groups.

If you are looking to setup the menu item, then the component gives you a Form and List Testimonial view which can be used to show the list testimonials and also the form to submit the testimonials.

To add Menu, go to Menus in backend and click on Add New Item.

• Select the menu type and Click on Testimonial Fader, the Form and List Testimonial option will appear.
• Select it and go to the options tab to set the other parameters like pagination, styling, and form settings.

Form Settings

• Show or Hide Form: Option to show or hide the testimonial submission form.
• Form Position: Set if you want to display the form above (Top) or below (Bottom) the testimonials. This option appears when form is shown.
• Form Width: Set the width of the form. Example: 100% or 300px. This option appears when form is shown.
• Form Class: Add a custom CSS class to the form. This option appears when form is shown.
• Testimonials Max Length: Enter the maximum length of the Testimonials. Default is 1000 characters. This option appears when form is shown.
• Character Count Text: Option to show or hide the character count while typing. This option appears when form is shown.
• Form Margin: Set the margin for the form. Example: 10px 0. This option appears when form is shown.
• Form Padding: Set the padding for the form. Example: 0. This option appears when form is shown.
• Form Input Padding: Set the padding for form input fields. Example: 20px 10px. This option appears when form is shown.
• Form Input Margin: Set the margin for form input fields. Example: 10px 0. This option appears when form is shown.
• Form Input Border Radius: Set the border radius for form input fields. Example: 5px. This option appears when form is shown.
• Form Input Border Color: Select the border color for form input fields. This option appears when form is shown.
• Submit Button Color: Select the background color for the submit button. This option appears when form is shown.
• Submit Button Hover Color: Select the hover background color for the submit button. This option appears when form is shown.
• Submit Button Text Color: Select the text color for the submit button. This option appears when form is shown.
• Submit Button Text Hover Color: Select the hover text color for the submit button. This option appears when form is shown.
• Form Display Type: Choose the form display type - Toggle (button to show/hide), Modal (opens in a popup), or Fixed (always visible). This option appears when form is shown.
• Button Text: Enter the button text for toggle/modal display. Default is "Add Testimonial". This option appears when Form Display Type is Toggle or Modal.
• Button Align: Align the toggle/modal button (Left, Center, or Right). This option appears when Form Display Type is Toggle or Modal.
• Button Background Color: Select the background color for the toggle/modal button. This option appears when Form Display Type is Toggle or Modal.
• Button Hover Color: Select the hover background color for the toggle/modal button. This option appears when Form Display Type is Toggle or Modal.
• Button Text Color: Select the text color for the toggle/modal button. This option appears when Form Display Type is Toggle or Modal.
• Button Hover Text Color: Select the hover text color for the toggle/modal button. This option appears when Form Display Type is Toggle or Modal.
• Button Border Radius: Set the border radius for the toggle/modal button. Example: 5px. This option appears when Form Display Type is Toggle or Modal.

Testimonials Styling

• Display Testimonials: Set to Show or Hide to control testimonial display.
• Layout Type: Choose the layout type for testimonials - Grid, Flex, or Masonry.
• Number of Columns: Number of columns to display testimonials on Desktop view (1-4 columns).
• Tablet Columns: Number of columns on tablet devices (1-4 columns).
• Mobile Columns: Number of columns on mobile devices (1-2 columns).
• Gap: Gap between testimonials. Example: 20px.
• Testimonial Background Color: Select the background color of the testimonial block.
• Testimonial Text Color: Select the text color of the testimonial.
• Testimonial Quote Color: Select the color of the testimonial quote marks.
• Testimonial Font Size: Set the font size for testimonials. Example: 14px.
• Font Style: Set the font style to Italic or Normal.
• Testimonial Line Height: Set the line height for testimonials. Example: 16px.
• Testimonial Padding: Set the padding for testimonials. Example: 10px 50px.
• Border Radius: Set the border radius for testimonials. Example: 5px.
• Author Font Size: Set the font size for author names. Example: 14px.
• Author Text Color: Select the text color for author names.
• Testimonial Block Padding: Set the padding for the testimonial block container. Example: 10px 0.
• Testimonial Block Margin: Set the margin for the testimonial block container. Example: 0.

Pagination Settings

• Show Pagination: Show or hide pagination for testimonials.
• AJAX Pagination: Enable AJAX pagination (no page reload) or disable it. This option appears when pagination is shown.
• Pagination Limit: Number of testimonials to display per page. This option appears when pagination is shown.
• Pagination Style: Choose Round or Square style for pagination buttons. This option appears when pagination is shown.
• Pagination Box: Choose Box or None for styling around the pagination. This option appears when pagination is shown.
• Pagination Box Color: Select the background color of the pagination box. This option appears when pagination is shown and Pagination Box is set to Box.
• Pagination Box Border Radius: Set the border radius for the pagination box. Example: 30px. This option appears when pagination is shown and Pagination Box is set to Box.
• Pagination Alignment: Align the pagination (Center, Left, or Right). This option appears when pagination is shown.
• Pagination Background Color: Select the background color of the pagination buttons. This option appears when pagination is shown.
• Pagination Hover Color: Select the hover background color of the pagination buttons. This option appears when pagination is shown.
• Pagination Active Color: Select the active background color of the pagination buttons. This option appears when pagination is shown.
• Pagination Text Color: Select the text color of the pagination buttons. This option appears when pagination is shown.
• Order Testimonials by: Select the order for displaying testimonials - ID Descending, ID Ascending, Order Descending, or Order Ascending.

Content Settings

• Top Content: Add content (HTML or text) that will appear above the component using the editor.