Custom CSS

The Custom CSS extension allows you to apply your own CSS code directly to Elementor widgets, sections, and containers—without needing any additional plugins.

This is perfect for designers or developers who want full styling control without leaving the Elementor editor.

🔓 Step 1: Enable Custom CSS Extension

1. Navigate to Topper Pack → Extensions
2. Find the Custom CSS option
3. Toggle the switch to ON
4. Click Save Settings

🛠️ Step 2: Add CSS Inside Elementor

Once enabled, the Custom CSS panel will appear in the Elementor editor under any section, column, or widget.

To Access:

1. Open any page with Elementor
2. Select a section, widget, or container
3. Go to the Advanced tab
4. Scroll down to the Custom CSS (TP) panel
5. Add your custom CSS code here

✏️ Writing CSS

You can use selector to target the current widget/container.

✅ Example:

selector {
  background-color: #f7f7f7;
  padding: 30px;
  border-radius: 8px;
}

💡 For child elements:

selector .title {
  color: #ff0000;
  font-size: 22px;
}

⚠️ If the CSS doesn’t apply, try using more specific selectors or add !important as needed.

💡 Use Cases:

• Add hover animations
• Customize third-party widgets
• Override theme styles
• Apply mobile-specific adjustments
• Add dark mode-specific styles