Fade Container

Introduction

Fade Container is a powerful Joomla module that transforms your articles into an elegant, dynamic slider with smooth fade transitions. Display articles from specific categories with customizable styling, popup previews, and complete control over appearance and behavior. Perfect for showcasing featured content, blog posts, or news articles in an engaging, modern format.

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• Smooth Fade Transitions
• Category-Based Content Selection
• Customizable Styling and Colors
• Popup Article Previews
• Responsive Design
• Modern WebAssetManager Support

Installation

• Download the Extension: Go to the download section of the website and download the extension package.
• Login to Joomla Admin: Access your Joomla administration panel using your credentials.
• Install the Extension:
  • Navigate to Extensions -> Manage -> Install.
  • Click on the Upload Package File tab.
  • Browse and select the downloaded extension package.
  • Click on Upload & Install.

Enabling the Module

After installation, navigate to Extensions > Modules, search for "Fade Container", and click on it to enable and configure the module.

Content Settings

Access the module settings by navigating to Extensions > Modules, and find Fade Container in the list.

Content Settings

• Category: Select one or more categories from which articles will be displayed. You can select multiple categories using the multi-select dropdown.
• Number of Articles: Enter the maximum number of articles to display in the slider (default: 3, range: 1-100).
• Order By: Select the field by which articles should be ordered.
  • Options: Published Date, Created Date, Modified Date, Ordering, Hits, Random
• Order Direction: Select the sort direction (appears when Order By is not Random).
  • Options: Ascending, Descending

Display Options

• Show Article Title: Display the article title in each slide (default: Yes).
• Show Author: Display the article author name (default: Yes).
• Show Date: Display the article publication date (default: Yes).
• Show Category: Display the article category name (default: Yes).
• Show Read More Link: Display a 'Read More' link that opens the full article in a popup (default: Yes).
• Read More Text: Enter the text to display for the read more link (default: Read More). This field appears when "Show Read More Link" is enabled.

Slider Settings

Slider Configuration

• Slide Width: Enter the width of each slide in pixels (default: 300, range: 100-2000px).
• Auto Slide: Automatically advance to the next slide after the pause time (default: Yes).
• Pause Duration (ms): Enter the time each slide is displayed before auto-advancing, in milliseconds (default: 3000, range: 500-30000ms). This field appears when "Auto Slide" is enabled.
• Transition Speed (ms): Enter the fade transition speed between slides in milliseconds (default: 500, range: 100-5000ms).
• Show Navigation Controls: Display previous/next arrow buttons for manual navigation (default: Yes).
• Show Pager Dots: Display pagination dots below the slider for direct slide navigation (default: Yes).

Popup Settings

• Popup Width: Enter the width of the popup window in pixels (default: 600, range: 300-2000px).
• Popup Height: Enter the maximum height of the popup window in pixels (default: 400, range: 200-2000px).

Styling

Styling Options

Customize all colors and typography using the intuitive color pickers and text fields in the module settings. All styling options can be adjusted to match your website's branding and design.

• Border Color: Select the color for the border around each slide container (default: Light gray #dddddd).
• Title Color: Select the color for article titles and headings (default: Dark gray #333333).
• Read More Link Color: Select the color for the 'Read More' link text (default: Blue #539DE8).
• Intro Text Font Size: Enter the font size for the article intro text (default: 12px). You can use pixels (px), em, or pt units (e.g., 12px, 1em, 14pt).

Module Assignment

• Module Position: Choose a position where you want the module to appear (e.g., position-7, sidebar-right).
• Menu Assignment: Ensure the module is assigned to the desired menu items under the Menu Assignment tab.
• Module Status: Set the status to Published to make the module visible on the frontend.

Features

Key Features

• Dynamic Content Display: Showcase articles with smooth fade transitions. Pull content from specific categories with automatic article selection based on your criteria.
• Customizable Transitions: Smooth fade effects between slides with adjustable transition speed and auto-slide functionality. Manual navigation controls with previous/next buttons and pager dots.
• Flexible Display Options: Show or hide article titles, authors, dates, and categories. Customizable "Read More" button with popup previews for full article content.
• Content Source Flexibility: Select articles from specific categories with multiple sorting options (published date, created date, modified date, hits, random) and ascending/descending order.
• Complete Styling Control: Customize border colors, title colors, read more link colors, and intro text font size for perfect brand integration.
• Responsive Design: Fully responsive on all devices with optimized display for desktop, tablet, and mobile. Flexible slide width adjustment and adaptive height.
• Joomla 4, 5 & 6 Compatible: Full support for all modern Joomla versions with WebAssetManager for optimal performance and future-proof architecture.

FAQ

• How do I change the order of articles?

  • Adjust the Order By option in the Content Settings tab. You can choose from Published Date, Created Date, Modified Date, Ordering, Hits, or Random.

• Can I display articles from multiple categories?

  • Yes, the Category field supports multiple selections. Simply select multiple categories from the dropdown to display articles from all selected categories.

• How do I customize the slider speed?

  • Adjust the Transition Speed (ms) in the Slider Settings tab. Lower values (100-300ms) create faster transitions, while higher values (1000-5000ms) create slower, more dramatic transitions.

• Can I disable auto-slide?

  • Yes, set the Auto Slide option to No in the Slider Settings tab. Users will need to manually navigate using the navigation controls or pager dots.

• How do I change the popup size?

  • Adjust the Popup Width and Popup Height in the Slider Settings tab. Enter values in pixels (e.g., 800 for width, 600 for height).

• Can I hide the article author or date?

  • Yes, you can toggle the display of author, date, category, and title individually in the Content Settings tab under Display Options.

Troubleshooting

• Articles Not Displaying: Ensure the module is published, assigned to the correct menu items, and that the selected categories contain published articles. Check that the "Number of Articles" is set correctly.
• Slider Not Working: Verify that jQuery is loaded on your site (Joomla 4+ includes jQuery by default). Check browser console for JavaScript errors. Ensure the module position is correctly assigned.
• Styling Issues: Check if your template's CSS is overriding the module styles. Use browser developer tools to inspect elements. You can add custom CSS via your template's custom CSS file or through a custom CSS module.
• Popup Not Opening: Ensure Fancybox JavaScript and CSS are loading correctly. Check browser console for errors. Verify that "Show Read More Link" is enabled in the Content Settings.
• Images Not Showing: Verify that article images are properly set in the article's Images and Links tab. Check that image paths are correct and images exist in the specified locations.
• Module Not Visible: Check that the module is published, assigned to the correct menu items or pages, and that the module position exists in your template. Verify module access levels match your user's access level.