Get Started

Scroll Box Pro is a Joomla module that allows you to display scrolling text within a customizable box on your Joomla website. This documentation covers the installation, configuration, and usage of the Scroll Box Pro module.

Downloading the Extension

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 of 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: ScrollBoxPro_UNZIP.zip

Unzipping the Package

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

• Folder Joomla 4, 5 & 6: This extension is compatible with Joomla 4.x, 5.x, and 6.x. In this folder, you will find the installation file named mod_scrollbox_X.x.zip.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

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

• For Joomla 4, 5 & 6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

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

After successful installation:

• Go to Content > Site Modules
• You will find Scroll Box Pro listed. Click on it to configure.

Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Content > Site Modules, and find Scroll Box Pro in the list.

General Settings

• Scroll Direction: Select the direction in which the text should scroll.
  • Options are: Left to Right, Right to Left, Top to Bottom, or Bottom to Top.
• Scroll Speed: Select the speed of the text scroll.
  • Options range from Very Slow (0.3) to Ultra Fast (10).
  • Recommended: Normal (1) or Medium (2).
• Pause On Hover: Choose whether to pause scrolling when the mouse hovers over the box.
  • Options are: Yes or No.
  • When enabled, scrolling pauses on hover (desktop) and touch (mobile) for better readability.

Content Settings

• Content Source: Select the input method of messages.
  • Options are: Custom Editor or Joomla Article.
• Select Article: Choose an article to be displayed (shown only if Content Source is set to Joomla Article).
• Enter Text: Enter your text here using the Joomla editor (shown only if Content Source is set to Custom Editor).
• Enable Max Length?: Enable max text length restriction.
  • Options are: Yes or No.
• Max Length (Characters): Set max character count (shown only if Enable Max Length? is set to Yes).
• Strip HTML Tags?: Choose to remove HTML tags from content.
  • Options are: Yes or No.
  • When enabled, all HTML tags are removed and only plain text is displayed.

Styling Settings

• Text Color: Enter the hexadecimal color code for the text (default is #000000).
• Font Size (px): Enter the size of the text in pixels (default is 16).
• Font Weight: Select the font weight for your text.
  • Options are: Normal or Bold.
• Box Width: Enter the width of the box (default is 100%).
• Supports various units: px, %, vh, vw, or auto.
• Examples: 100%, 500px, 50vw, auto.
• Box Height: Enter the height of the box (default is auto).
• Supports various units: px, %, vh, vw, or auto.
• Examples: 300px, 80vh, auto.
• Background Color: Enter the hexadecimal color code for the box background (default is #FFFFFF).
• Supports RGBA format for transparency.

Advanced Settings

• Module Class Suffix: Enter your desired module suffix for additional styling (optional).
• Additional CSS: Add custom CSS code to further customize the scroll box appearance. This CSS will be added inline to the page.

Once configured, assign the module to a position on your Joomla template and publish it. The Scroll Box Pro will display the scrolling text based on your settings, providing a dynamic and engaging content area.

Features

• Pause On Hover: Allows users to pause the scrolling text by hovering over the box (works on desktop and mobile touch devices).
• Multiple Scroll Directions: Choose from left to right, right to left, top to bottom, or bottom to top scroll directions.
• Adjustable Scroll Speed: Customize the scroll speed from very slow (0.3) to ultra fast (10) to suit your website's needs.
• Customizable Styling: Set text color, font size, font weight, box dimensions (with flexible units), and background color.
• Flexible Content Input: Use either the Joomla editor or select a Joomla article to display scrolling text.
• Content Processing: Strip HTML tags or apply max length restrictions to content.
• Pure JavaScript: No jQuery dependency, improved performance and reduced load time.
• Responsive Design: Fully responsive and mobile-friendly implementation.
• Advanced Customization: Add module class suffix and additional CSS for further styling.

• How do I change the scroll direction?

  • Adjust the Scroll Direction setting under General Settings.

• Can I change the text color?

  • Yes, set the Text Color under Styling Settings.

• How do I input my own text?

  • Set the Content Source to Custom Editor and enter your text in the Enter Text field.

• Can I use a Joomla article for the scrolling text?

  • Yes, set the Content Source to Joomla Article and select the desired article from the modal interface.

• How do I adjust the scroll speed?

  • Change the Scroll Speed setting under General Settings. Choose from Very Slow (0.3) to Ultra Fast (10).

• Can I add HTML elements to the scrolling text?

  • Yes, when using the Custom Editor, you can add HTML elements like links, images, or formatted text. If you want plain text only, enable Strip HTML Tags?.

• How do I limit the text length?

  • Enable Enable Max Length? and set the Max Length (Characters) value under Content Settings.

• Can I use responsive units for box dimensions?

  • Yes, you can use %, vh, vw, px, or auto for both width and height.

• Text Not Scrolling: Ensure the module is assigned to a visible template position and published. Verify the Scroll Direction and Scroll Speed settings. Check browser console for JavaScript errors.
• Styling Issues: Check the Styling Settings and adjust text color, font size, and background color as needed. Clear browser cache and Joomla cache after making changes.
• Content Not Displaying: Verify the selected content source and ensure the text or article is properly configured. Check that the article is published if using Joomla Article source.
• Pause on Hover Not Working: Ensure Pause On Hover is set to Yes in General Settings. Check browser console for JavaScript errors.
• Module Not Visible on Page: If you are using Firefox or Google Chrome, right-click on your website and click on "View Page Source". In the source code, search for text like "scrollbox" or "jx-scroll-box". If you don't find the text, then it's confirmed that the module isn't activated on the page.
• Changes Not Reflecting: If Joomla cache is activated, try to clear it once after you make changes to the module parameter settings. Go to System > Clear Cache.
• Adding Module Inside Article: To add this module inside an article, go through the URL: https://docs.joomla.org/How_do_you_put_a_module_inside_an_article?