Get Started

Vertical Animated Ticker is a Joomla module, designed to create a vertically scrolling ticker for your website. This module provides an attractive way to display news headlines, announcements, or any important messages in a vertical ticker format. It is highly customizable, allowing you to adjust settings to fit your website's design and functionality.

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: VerticalAnimatedTicker_UNZIP.zip

Use any file unzipper tool or WinRAR to unzip the VerticalAnimatedTicker_UNZIP.zip package. After unzipping, you will find the following contents:

• Folder Joomla 3: This extension is compatible with Joomla 3.x version. In this folder, you will find the installation file named mod_vertical_ticker_X.x.zip.
• Folder Joomla 4 & 5: The extension is also designed for seamless integration with Joomla 4.x Joomla 5.x. This folder contains the installation file named mod_vertical_ticker_X.x.zip.
• ReadMe.txt: Contains vital information about the current version of the extension.

To install the extension, log in to the backend of your Joomla website.

• For Joomla 3: Navigate to Extensions > Extension Manager, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file, then click "Upload and Install."
• For Joomla 4: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.
• For Joomla 5: The installation process is the same as for Joomla 4.

A success message will be displayed once the installation is complete.

After installation, you need to configure the Vertical Animated Ticker to fit your website's needs. Here are the configuration options available:

Layout Settings

1. Layout:

   • Options: Paused, Smooth
   • Description: Select the type of layout you want.

2. Width of Ticker:

   • Default: 100%
   • Description: Enter the width of the news ticker in pixels or percentage.

3. Height of Ticker:

   • Default: 500px
   • Description: Enter the height of the news ticker (in pixels).

4. Speed of Ticker:

   • Default: 800
   • Description: Enter the speed of the news ticker (0.01 to 1 for normal flow).

5. Block Interval:

   • Default: 2000ms
   • Description: Enter the interval speed in milliseconds between each block.
   • Note: This field is shown only for the "Paused" layout.

6. Block Height:

   • Default: 250px
   • Description: Enter the height of the block in pixels.
   • Note: This field is shown only for the "Paused" layout.

7. Character to display:

   • Default: 400
   • Description: Enter the number of characters to be displayed initially.

8. Padding:

   • Default: 5px
   • Description: Padding around each block; define it in pixels, em, or %.

9. Count:

   • Default: 5
   • Description: Enter the number of items to display (default 5).

10. Configure Ticker:

    • Options: Only Title, Only Description, Both
    • Description: Select your desired settings.

Module Settings

1. Categories:

   • Description: Select the categories from which the content will be fetched.

2. Order Results:

   • Default: Published Date
   • Options: Published Date, Created Date, Modified Date, Ordering, Hits, Random
   • Description: Select the order of the content to be displayed.

3. Order Direction:

   • Default: Ascending
   • Options: Ascending, Descending
   • Description: Select the order direction.
   • Note: This field is shown based on the ordering option selected.

4. Show Readmore:

   • Default: ON
   • Options: ON, OFF
   • Description: Select whether you want to show the "Read more" option.

5. Strip HTML:

   • Default: Yes
   • Options: Yes, No
   • Description: Select whether you want to strip HTML tags.

6. Show Images:

   • Default: Yes
   • Options: Yes, No
   • Description: Select whether you want to show the images into the ticker.

7. Show Date:

   • Default: Yes
   • Options: Yes, No
   • Description: Show or hide the date the article was added.

8. Readmore Text:

   • Default: Read More..
   • Description: Enter the "Read more" text you want to display.

Styling Settings

1. Background Color:

   • Default: #efefef
   • Description: Select the background color.

2. Border Bottom Color:

   • Default: #dddddd
   • Description: Select the border bottom color.

3. Title Font Color:

   • Default: #000000
   • Description: Select the font color of the text.

4. Title Font Size:

   • Default: 12px
   • Description: Select the font size of the text.

5. Title Font Weight:

   • Default: Normal
   • Options: Normal, Bold
   • Description: Select the font weight of the text.

6. Title Font Family:

   • Default: User Defined
   • Options: Various Google Fonts
   • Description: Select the font family of the text.

7. User Defined Title Font:

   • Description: If 'Font Family' is set to user defined, then enter the font you would like to use in this field.
   • Note: This field is shown only if "User Defined" is selected in the "Title Font Family" option.

Advanced Settings

1. Allowed HTML Tags:

   • Default: <b></b>, <span></span>, <h1></h1>
   • Description: Enter the allowed HTML tags.

2. Add Extra CSS:

   • Description: You can add extra CSS if you want.

Once the module is installed and configured, you can publish it to any module position in your Joomla template. Ensure you adjust the settings as per your requirements to achieve the desired visual and functional effect on your website.

• Vertically scrolling ticker for displaying news or announcements.
• Highly customizable settings for layout, appearance, and functionality.
• Supports multiple categories and ordering options.
• Option to show/hide "Read more" and date.
• Allows custom CSS for advanced styling.
• Compatible with Joomla 3.x, 4.x, and 5.x.

Q1: Can I change the font style of the ticker text? A1: Yes, you can change the font style using the "Title Font Family" option in the "Styling Settings" section.

Q2: How do I adjust the speed of the ticker? A2: You can adjust the speed of the ticker in the "Layout Settings" section by changing the "Speed Of Ticker" value.

Q3: Can I display both title and description in the ticker? A3: Yes, you can select "Both" in the "Configure Ticker" option under the "Layout Settings" section.

Q4: Is it possible to add extra CSS for the ticker? A4: Yes, you can add extra CSS in the "Advanced Settings" section.

Issue 1: The ticker is not displaying on the frontend.

• Ensure the module is published and assigned to a visible module position in your template.
• Check the settings to ensure the module is configured correctly.

Issue 2: The ticker is not scrolling smoothly.

• Adjust the "Speed Of Ticker" and "Block Interval" settings in the "Layout Settings" section.
• Ensure there are no conflicting CSS styles affecting the ticker.

Issue 3: The "Read more" link is not showing.

• Verify that the "Show Readmore" option is enabled in the "Module Settings" section.