PC-DIDI Infinity Glow Border – Animated Border Effects for Joomla 6

PC-DIDI Infinity Glow Border is a powerful and lightweight Joomla 6 module that adds beautiful animated light borders to almost any website element.

Create glowing highlight boxes, animated image borders, elegant buttons and eye-catching content sections with moving light effects.

Choose from five premium animation styles, customize colors, adjust border thickness and glow intensity, and control every detail directly from the Joomla administrator interface.

The module works with Joomla templates and page builders, including SP Page Builder, without requiring an additional plugin.

Key Features

• Five Premium Animation Styles: Choose from Infinity Runner, Aurora Glow, Soft Pulse, Light Shimmer and Dual Sparks.
• Animated Glowing Borders: Create moving light effects around website elements.
• Adjustable Outside Border Offset: Position the animated border up to 40 pixels outside an element.
• Custom Colors: Choose from predefined color palettes or create your own combinations.
• Border Thickness: Adjust the border width to suit your website design.
• Custom Border Radius: Create rounded corners or sharp rectangular borders.
• Glow Intensity: Control the brightness and spread of the glowing effect.
• Animation Speed: Adjust the speed of the moving light effects.
• Hover or Continuous Animation: Show the animation permanently or activate it when a visitor hovers over an element.
• Custom CSS Selector: Apply the animation to specific elements using a configurable CSS selector.
• Mobile-Friendly: Responsive styling for desktops, tablets and smartphones.
• Custom CSS Support: Add your own CSS directly in the module settings.
• No Additional Plugin Required: Works as a standalone Joomla module.
• Developer & Support Link: Direct access to PC-DIDI Webdesign from the Joomla administrator interface.

Five Animation Styles

1. Infinity Runner

An elegant moving light beam travels continuously around the border of an element.

Ideal for premium service boxes, call-to-action buttons and highlighted content.

2. Aurora Glow

Beautiful flowing colors create an animated glowing border inspired by the northern lights.

Perfect for modern landing pages, creative agencies and technology websites.

3. Soft Pulse

A subtle glowing effect gently increases and decreases in brightness.

Ideal for elegant websites where animation should remain understated.

4. Light Shimmer

A narrow light reflection moves around the selected element, creating a sophisticated metallic effect.

Especially suitable for luxury brands, hotels and professional websites.

5. Dual Sparks

Two glowing light points move along the border to create a dynamic visual effect.

Ideal for promotional content, buttons and attention-grabbing highlight boxes.

Installation Guide

Step 1 – Install the Module

1. Download the PC-DIDI Infinity Glow Border ZIP installation package.
2. Log in to your Joomla 6 administrator panel.
3. Navigate to System → Install → Extensions.
4. Upload the ZIP package.
5. Wait for Joomla to confirm successful installation.

Step 2 – Create and Publish the Module

1. Navigate to Content → Site Modules.
2. Click New.
3. Select PC-DIDI Infinity Glow Border.
4. Enter a module title, for example "Infinity Glow Border".
5. Set the module status to Published.
6. Select a module position supported by your template.
7. Under Menu Assignment, choose On all pages or select specific menu items.
8. Save the module.

Important: The selected module position must actually be rendered by your Joomla template. The module provides the animation styles; the selected website elements are identified through a CSS selector.

Step 3 – Configure the CSS Selector

Open the module settings and locate the CSS selector field.

The recommended default selector is:

.pc-glow

This selector targets all elements with the CSS class pc-glow.

To apply the animation, add the class name to the desired website element.

Important: When entering the class in a page builder, use pc-glow without the leading period.

How to Use with SP Page Builder

PC-DIDI Infinity Glow Border works with SP Page Builder and other page builders that support custom CSS classes.

Step 1 – Open SP Page Builder

1. Open the page you want to edit.
2. Select the addon, column or section that should receive the animated border.
3. Open its advanced settings.
4. Find the CSS Class field.
5. Enter:

pc-glow

1. Save the page.

Step 2 – Configure the Animation

Open the PC-DIDI Infinity Glow Border module in the Joomla administrator panel.

Choose your preferred animation style, colors and border settings.

Save the module and refresh your website.

The glowing border should now appear around elements assigned the class pc-glow, provided the module is loaded on that page.

Example: Adding a Glow Border to Multiple Elements

You can apply the same animation to multiple website elements:

• Service highlight boxes
• Contact information sections
• Images and galleries
• Pricing cards
• Call-to-action buttons
• Promotional sections

Simply assign pc-glow to each desired element.

All matching elements will use the settings configured in the module.

Module Configuration

1. Animation Style

Select your preferred animated border effect:

• Infinity Runner
• Aurora Glow
• Soft Pulse
• Light Shimmer
• Dual Sparks

2. Colors and Design

Customize the visual appearance of the glowing border.

Available settings include:

• Primary color
• Secondary color
• Additional accent color
• Border thickness
• Corner radius
• Glow intensity
• Animation duration

For a premium gold effect, try the following color combination:

| Setting | Recommended Value |
|---|---|
| Primary Color | #CF8D10 |
| Secondary Color | #FFD700 |
| Accent Color | #FFF0B3 |
| Border Thickness | 2 px |
| Border Radius | 14 px |
| Outside Offset | 10 px |
| Animation Duration | 5 seconds |

3. Outside Border Offset

Version 1.0.3 supports positioning the glowing border outside the selected element.

This creates additional visual space between the content and its animated border.

Adjust the Outside Border Offset setting between 0 and 40 pixels.

Recommended values:

• 0 px: Border directly around the element.
• 5 px: Subtle outside spacing.
• 10 px: Elegant floating border.
• 20 px: More pronounced separation.
• 40 px: Large decorative outline.

For most websites, an offset between 6 and 12 pixels provides a balanced result.

Note: If an animated border is clipped, check whether the selected element or one of its parent containers uses overflow: hidden.

4. Animation Speed

Control how quickly the light effect moves.

A shorter duration creates faster animation, while a longer duration produces a calmer and more elegant appearance.

For professional websites, a moderate animation speed is recommended.

5. Hover Effects

Choose whether the glowing border should:

• Animate continuously.
• Become active only when a visitor hovers over the selected element.

Hover-based effects are particularly useful for interactive cards and buttons.

On touchscreens, hover interactions may behave differently from desktop browsers. Continuous animation is generally more predictable for mobile visitors.

6. Custom CSS

Advanced users can add their own CSS rules using the module's Custom CSS field.

This allows additional adjustments without modifying the extension's core files.

Troubleshooting

The Glow Border Is Not Visible

Check the following:

1. Make sure the module is published.
2. Verify that the module position is rendered by your Joomla template.
3. Confirm that the module is assigned to the correct menu items.
4. Check that the target element contains the correct CSS class.
5. Clear the Joomla and browser caches.
6. If you use a CSS optimization extension, clear its cache as well.

The Border Is Too Close to the Content

Increase the Outside Border Offset setting.

A value of 10 pixels is a good starting point.

The Border Is Cut Off

Inspect the selected element and its parent containers for CSS overflow restrictions.

Depending on the layout, setting overflow: visible may resolve the issue.

The Animation Is Too Fast

Increase the animation duration in the module settings.

Technical Information

Extension Name: PC-DIDI Infinity Glow Border
Extension Type: Joomla Site Module
Version: 1.0.3
Compatibility: Joomla 6
License: GNU General Public License v2 or later
Developer: PC-DIDI Webdesign
Website: https://www.pc-didi.at/

Developer and Support

PC-DIDI Infinity Glow Border includes a dedicated developer information section in the Joomla administrator interface.

Visit PC-DIDI Webdesign for extension information, updates and support:

https://www.pc-didi.at/

Why Choose PC-DIDI Infinity Glow Border?

Give your Joomla website a premium visual appearance with elegant animated light borders.

Whether you want subtle golden accents, modern neon effects or dynamic glowing highlights, PC-DIDI Infinity Glow Border provides flexible customization without complicated coding.

Perfect for hotels, businesses, online shops, creative agencies, landing pages and professional Joomla websites.

Make your content stand out with PC-DIDI Infinity Glow Border for Joomla 6.