Widget CSS Injector

The Widget CSS Injector function adds CSS Class and ID fields to Voxel widget repeater items. Target individual navbar items, user bar elements, and advanced list actions with custom CSS for advanced styling.

Overview

Voxel’s widgets like Navbar, User Bar, and Advanced List contain repeater items that normally can’t be individually targeted with CSS. This function adds CSS Class and ID fields to each item, allowing precise styling and JavaScript targeting.

Key Features

• Adds CSS Class field to widget items
• Adds CSS ID field to widget items
• Works with Navbar (VX) widget
• Works with User Bar (VX) widget
• Works with Advanced List (VX) widget
• JavaScript-based injection for reliability
• Multiple classes supported (space-separated)

Setup Instructions

Step 1: Enable the Function

1. This function is always enabled.

Step 2: Add Classes/IDs to Widget Items

1. Edit a page with Elementor
2. Add or edit a supported Voxel widget
3. Expand a repeater item
4. Find the CSS Class (VT) and CSS ID (VT) fields
5. Enter your custom class or ID
6. Save the page

Supported Widgets

Widget	Repeater Field	Target Element
Navbar (VX)	Navbar items	li elements in .ts-nav
User Bar (VX)	User bar items	li elements in .user-area-menu
Advanced List (VX)	Action items	li elements in .ts-advanced-list

How to Use

Adding a CSS Class

Field: CSS Class (VT)
Value: my-custom-class

// Or multiple classes:
Value: class-one class-two special-item

Adding a CSS ID

Field: CSS ID (VT)
Value: my-unique-id

Tip

IDs should be unique on the page. Don’t use the same ID on multiple items.

Example CSS Usage

Target by Class

/* Style a specific navbar item */
.ts-nav li.featured-link {
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    border-radius: 8px;
}

.ts-nav li.featured-link a {
    color: white !important;
}

Target by ID

/* Style the login button specifically */
#login-button {
    background-color: #4CAF50;
    font-weight: bold;
}

/* Add animation to a specific item */
#animated-item {
    animation: pulse 2s infinite;
}

JavaScript Targeting

// Target by ID
document.getElementById('my-special-item').addEventListener('click', function() {
    // Custom functionality
});

// Target by class
document.querySelectorAll('.highlight-item').forEach(function(el) {
    // Apply changes to all highlighted items
});

Use Cases

Highlight Important Links

Add a special class to call-to-action navbar items for distinctive styling.

Conditional Visibility

Use classes with JavaScript to show/hide items based on conditions.

Animation Targets

Apply CSS animations to specific menu items using targeted classes.

Analytics Tracking

Add IDs to track clicks on specific navigation elements with Google Analytics.

How It Works

1. Function adds CSS Class and ID controls to widget repeaters
2. When page renders, CSS data is stored as data attribute on widget
3. JavaScript reads the data attribute after DOM loads
4. Classes and IDs are applied to the correct li elements

This JavaScript-based approach ensures classes are applied even after Voxel’s Vue.js components render.

Troubleshooting

Fields Not Appearing

• Verify the function is enabled
• Clear Elementor cache (Elementor → Tools → Regenerate CSS)
• Refresh the Elementor editor
• Check you’re editing a supported widget

Classes Not Applied

• View page source to confirm data-vt-css attribute exists
• Check browser console for JavaScript errors
• Ensure no caching is serving old JavaScript
• Verify item index matches expected element

CSS Not Working

• Use browser inspector to verify class is applied
• Check CSS specificity (may need !important)
• Ensure your CSS is loaded after Voxel styles