Advanced

Custom CSS Styling

Match your brand identity

Adding Custom CSS

Customize the look and feel of your configurators to match your brand.

Access the CSS Editor

Open Project Settings

Navigate to "Custom CSS" tab

Add your CSS rules

Save and preview changes

Styling GUI Elements

Target built-in GUI elements with CSS.

Buttons

.confbuild-button {
  background: #8C30F5;
  border-radius: 8px;
}

Sliders

.confbuild-slider {
  accent-color: #8C30F5;
}

Inputs

.confbuild-input {
  border: 2px solid #E5E5E5;
}

Dropdowns

.confbuild-dropdown {
  border-radius: 4px;
}

Available CSS Classes

Reference for all stylable elements.

.confbuild-button Buttons All button elements

.confbuild-slider Sliders Range input controls

.confbuild-input Text inputs Text and number fields

.confbuild-dropdown Dropdowns Select menus

.confbuild-label Labels Text labels

.confbuild-panel Info panels Information containers

.confbuild-toolbar Toolbar Top toolbar area

Theming

Create consistent themes with CSS variables.

Dark Theme Example

:root {
    --cb-primary: #8C30F5;
    --cb-background: #1A1A2E;
    --cb-surface: #16213E;
    --cb-text: #FFFFFF;
    --cb-text-secondary: #A0A0A0;
}
.confbuild-container {
background: var(–cb-background);
color: var(–cb-text);
}

Responsive Design

Adapt to different screen sizes.

Desktop

Full layout with sidebars

Tablet

Collapsed navigation

Mobile

Stack vertically

Mobile Styles

@media (max-width: 768px) {
    .confbuild-panel {
        width: 100%;
        position: fixed;
        bottom: 0;
    }
.confbuild-button {
    padding: 16px;
    font-size: 16px;
}

}

CSS Animations

Add smooth transitions and effects.

Hover Effects

.confbuild-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 48, 245, 0.3);
    transition: all 0.2s ease;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.confbuild-loading {
animation: pulse 1.5s infinite;
}

Custom Fonts

Add custom fonts to match your brand.

Google Fonts

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
.confbuild-container {
font-family: ‘Poppins’, sans-serif;
}

Best Practices

Tips for effective CSS customization.

Use CSS Variables

Easy theme updates

Test Responsively

Check multiple devices

Keep It Simple

Don't over-style

Ensure Accessibility

Good contrast ratios

Back to Documentation