Skip to main content

Custom CSS

Custom CSS allows you to add your own styles to override or extend XBuilder's built-in styling. Use it for advanced customization not available through the visual editor.

Adding Custom CSS​

Element-Level CSS​

Add CSS classes to individual elements:

  1. Select an element
  2. Go to Advanced tab
  3. Find CSS Classes field
  4. Enter class names (space-separated)
my-custom-class another-class

HTML ID​

Target elements with unique IDs:

  1. Select an element
  2. Go to Advanced tab
  3. Set HTML ID
my-element-id

Then target in CSS:

#my-element-id {
  /* your styles */
}

CSS Class Naming​

Best Practices​

xb-custom-button     ✓ Clear, namespaced
my-popup-header      ✓ Descriptive
custom-animation     ✓ Purpose-clear

button-1             ✗ Not descriptive
style1               ✗ Meaningless

Naming Convention​

Use consistent prefixes:

xb-custom-*   — Custom XBuilder styles
popup-*       — Popup-specific styles

Common Customizations​

Gradient Text​

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Custom Button Effects​

.glow-button {
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.5);
  transition: box-shadow 0.3s ease;
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.8);
}

Animated Border​

.animated-border {
  position: relative;
  background: linear-gradient(90deg, #667eea, #764ba2);
  padding: 3px;
  border-radius: 8px;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: white;
  border-radius: 5px;
}

Glassmorphism​

.glass-effect {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

Targeting XBuilder Elements​

Structure​

XBuilder popups have this structure:

<div class="xb-popup-module" data-popup-container>
  <div class="xb-popup-overlay"></div>
  <div class="xb-popup-content">
    <!-- Elements here -->
  </div>
</div>

Common Selectors​

/* Popup container */
.xb-popup-module { }

/* Popup overlay */
.xb-popup-overlay { }

/* Popup content area */
.xb-popup-content { }

/* Close button */
.xb-popup-close { }

/* Elements by type */
[data-element-type="button"] { }
[data-element-type="heading"] { }

Responsive CSS​

Media Queries​

/* Tablet */
@media (max-width: 1023px) {
  .my-element {
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .my-element {
    font-size: 14px;
    padding: 16px;
  }
}

Device-Specific Classes​

XBuilder adds device classes you can target:

/* When viewed on mobile */
.xb-device-mobile .my-element {
  /* mobile-specific styles */
}

/* When viewed on tablet */
.xb-device-tablet .my-element {
  /* tablet-specific styles */
}

CSS Specificity​

Overriding XBuilder Styles​

Use higher specificity or !important:

/* Standard override */
.xb-popup-content .my-button {
  background: red;
}

/* Force override (use sparingly) */
.my-button {
  background: red !important;
}

Specificity Order​

/* Lower specificity */
.button { }

/* Higher specificity */
.xb-popup-content .button { }
div.xb-popup-content .button { }

/* Highest (avoid if possible) */
.button { color: red !important; }

Animation CSS​

Custom Keyframes​

@keyframes customPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse-animation {
  animation: customPulse 2s infinite;
}

Hover Transitions​

.smooth-hover {
  transition: all 0.3s ease;
}

.smooth-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Dark Mode Support​

CSS Variables Approach​

:root {
  --custom-bg: #ffffff;
  --custom-text: #1e293b;
}

[data-theme="dark"] {
  --custom-bg: #1e293b;
  --custom-text: #f8fafc;
}

.my-element {
  background: var(--custom-bg);
  color: var(--custom-text);
}

Media Query Approach​

@media (prefers-color-scheme: dark) {
  .my-element {
    background: #1e293b;
    color: #f8fafc;
  }
}

Performance Tips​

Efficient Selectors​

/* Good - specific class */
.my-button { }

/* Avoid - too generic */
div { }

/* Avoid - descendant heavy */
.popup .container .row .column .button { }

Minimize !important​

Use specificity instead of !important when possible.

Avoid Expensive Properties​

These can impact performance:

/* Use carefully */
box-shadow: ...;
filter: blur();
backdrop-filter: blur();

Testing Custom CSS​

Browser DevTools​

  1. Right-click → Inspect
  2. Find element
  3. Test styles in Styles panel
  4. Copy working CSS to XBuilder

Common Issues​

CSS not applying:

  • Check specificity
  • Verify class name matches
  • Look for typos
  • Check for conflicting styles

CSS breaking layout:

  • Check box model (padding, margin)
  • Verify width/height values
  • Check for overflow issues

Best Practices​

  1. Namespace classes — Prefix with xb-custom-
  2. Keep it simple — Minimal custom CSS
  3. Comment your code — Document custom styles
  4. Test thoroughly — Check all devices
  5. Avoid !important — Use specificity instead
  6. Performance matters — Avoid heavy styles

Examples​

Custom Card Style​

.xb-custom-card {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  border-radius: 20px;
  box-shadow: 
    5px 5px 10px #d9d9d9,
    -5px -5px 10px #ffffff;
  padding: 30px;
}

Animated Gradient Border​

.xb-gradient-border {
  position: relative;
  padding: 3px;
  background: linear-gradient(45deg, #667eea, #764ba2, #f472b6, #667eea);
  background-size: 300% 300%;
  animation: gradientMove 3s ease infinite;
  border-radius: 12px;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}