View Categories

Custom CSS

0:00 1:24

Overview

The Custom CSS extension in SiteCraft allows you to add your own CSS directly to any widget, column, or section from the Advanced tab. It provides flexibility to apply custom styles without modifying theme files or using external stylesheets.

Key Features

  • Add custom CSS per widget, column, or section
  • Works directly from the Advanced tab
  • No need to edit theme or core files
  • Supports standard CSS rules and selectors
  • Helps extend design beyond default controls
  • Works across all SiteCraft widgets and layouts

How to Enable the Extension

Before using Custom CSS, make sure it is enabled.

Steps:

  1. Go to SiteCraft → Dashboard → Extensions
  2. Find Custom CSS
  3. Toggle to enable it
  4. Click Save Changes

📸 Screenshot: Dashboard Extension Enable

How to Use Custom CSS

  1. Open your page with Elementor Editor
  2. Select any widget, column, or section
  3. Go to the Advanced Tab
  4. Find Custom CSS field
  5. Add your CSS code

📸 Screenshot: Advanced Tab Custom CSS

Example Usage

📸 Screenshot: CSS Example

selector {
  background-color: #f5f5f5;
  border-radius: 10px;
}
selector:hover {
  transform: scale(1.05);
}

Note:

  • Use selector to target the current element
  • Replace it with custom classes if needed

Best Practices

  • Keep CSS minimal and optimized
  • Avoid conflicting styles with theme or plugins
  • Test responsiveness on different devices
  • Use specific selectors to prevent unwanted changes

Use Cases

Perfect for:

  • Custom styling adjustments
  • Advanced hover effects
  • Unique layout tweaks
  • Overriding default styles

Result

You can now apply custom styling easily using the SiteCraft Custom CSS Extension, giving you full control over design beyond built-in options.

What are your Feelings